change styles for project card component & projects & programs page

Author: Awakich

projects/social_platform/src/app/office/program/list/main/main.component.scss

@@ -1,8 +1,8 @@
 .programs {
   display: grid;
   grid-template-columns: 8fr 2fr;
-  justify-content: space-between;
   grid-gap: 20px;
+  justify-content: space-between;
 
   &__list {
     display: grid;

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

@@ -12,18 +12,18 @@
   &__photo {
     position: relative;
     z-index: 10;
+    flex-shrink: 0;
     padding: 12px;
     background: var(--white);
     border: 0.5px solid var(--dark-grey);
     border-radius: 50%;
-    flex-shrink: 0;
   }
 
   &__info {
     position: relative;
     z-index: 1;
-    margin-left: -12%;
     padding: 22px;
+    margin-left: -12%;
     border: 0.5px solid var(--dark-grey);
     border-radius: var(--rounded-lg);
   }

projects/social_platform/src/app/office/projects/projects.component.scss

@@ -3,8 +3,8 @@
 .page {
   &__info {
     display: flex;
-    justify-content: space-between;
     gap: 20px;
+    justify-content: space-between;
 
     form {
       flex-grow: 1;
@@ -15,15 +15,15 @@
     display: flex;
     flex-direction: column;
     gap: 20px;
-    margin-top: 10px;
     width: 100%;
+    margin-top: 10px;
   }
 
   &__create {
     display: flex;
     flex-direction: column;
-    align-items: center;
     gap: 20px;
+    align-items: center;
   }
 
   &__analytics {

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

@@ -7,10 +7,10 @@
 
   &__body {
     position: relative;
+    padding: 50px 0 12px;
     background-color: var(--light-white);
     border: 0.5px solid var(--medium-for-outline);
     border-radius: var(--rounded-xl);
-    padding: 50px 0px 12px 0px;
   }
 
   &__photo {
@@ -21,8 +21,8 @@
 
   &__content {
     display: flex;
-    align-items: center;
     flex-direction: column;
+    align-items: center;
     justify-content: center;
     text-align: center;
   }
@@ -41,22 +41,22 @@
   }
 
   &__industry {
+    padding: 2px 36px;
     color: var(--light-white);
     background-color: var(--green);
-    padding: 2px 36px;
     border-radius: var(--rounded-xl);
   }
 
   &__description {
+    margin-bottom: 10px;
     color: var(--dark-grey);
     word-break: break-word;
-    margin-bottom: 10px;
   }
 
   &__project {
     padding: 2px 24px;
-    border-radius: var(--rounded-xl);
     background-color: var(--accent);
+    border-radius: var(--rounded-xl);
 
     &--text {
       color: var(--white);

projects/social_platform/src/app/ui/components/bar-new/bar.component.scss

@@ -20,29 +20,28 @@
 
   &__item {
     display: flex;
+    gap: 4px;
     align-items: center;
     padding: 5px 30px;
-    border-radius: var(--rounded-xl);
-    gap: 4px;
-    cursor: pointer;
     color: var(--grey-for-text);
+    cursor: pointer;
+    border-radius: var(--rounded-xl);
     transition: color 0.2s;
 
     &:hover {
       i {
         color: var(--accent);
       }
     }
-
   }
 
   &__link {
     color: var(--black);
 
     &--active {
       .bar__item {
-        border: 0.5px solid var(--dark-grey);
         background-color: var(--light-white);
+        border: 0.5px solid var(--dark-grey);
       }
     }