add styles for project-card & soon-card component

Author: Awakich

projects/social_platform/src/app/office/shared/project-card/project-card.component.scss

@@ -25,8 +25,8 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    text-align: center;
     padding-top: 40px;
+    text-align: center;
   }
 
   &__head {
@@ -35,23 +35,24 @@
 
   &__info {
     display: flex;
+    gap: 10px;
     align-items: center;
     justify-content: space-evenly;
-    gap: 10px;
 
-    &--vacancies, &--collaborators {
+    &--vacancies,
+    &--collaborators {
       display: flex;
-      align-items: center;
       gap: 4px;
+      align-items: center;
       color: var(--grey-for-text);
     }
   }
 
   &__subscribe-badge {
     display: block;
-    transform: translateY(10px);
     color: var(--accent);
     cursor: pointer;
+    transform: translateY(10px);
   }
 
   &__user {
@@ -85,12 +86,12 @@
   }
 
   &__project {
-    padding: 2px 24px;
-    border-radius: var(--rounded-xl);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    padding: 2px 24px;
+    border-radius: var(--rounded-xl);
 
     &--text {
       color: var(--white);

projects/social_platform/src/app/office/shared/soon-card/soon-card.component.scss

@@ -10,21 +10,21 @@
 
   &__soon {
     position: relative;
+    display: grid;
+    place-items: center;
     margin-bottom: 4px;
     border: 0.5px solid var(--medium-grey-for-outline);
     border-radius: var(--rounded-lg);
-    display: grid;
-    place-items: center;
   }
 
   &__closed {
     display: flex;
     flex-direction: column;
+    grid-area: 1 / 1;
     gap: 2px;
     align-items: center;
     justify-content: center;
     padding: 24px 37px;
-    grid-area: 1 / 1;
 
     &--text {
       color: var(--dark-grey);

projects/social_platform/src/styles/_colors.scss

@@ -24,7 +24,7 @@
   --light-gray: #f9f9f9;
   --grey-button: #e5e5e5e5;
   --medium-grey-for-outline: #eee;
-  --grey-for-text: #827E80;
+  --grey-for-text: #827e80;
 
   // FUNCTIONAL
   --green: #88c9a1;