add styles for detail program page

Author: Awakich

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

@@ -64,9 +64,9 @@
 
   &__analytics {
     padding: 12px;
-    border-radius: var(--rounded-lg);
-    border: 0.5px solid var(--medium-grey-for-outline);
     background-color: var(--light-white);
+    border: 0.5px solid var(--medium-grey-for-outline);
+    border-radius: var(--rounded-lg);
   }
 }
 
@@ -93,8 +93,7 @@
     flex-direction: column;
     gap: 10px;
     align-items: center;
-
-     max-height: none;
+    max-height: none;
 
     &--scrollable {
       max-height: 180px;
@@ -123,20 +122,20 @@
 
   &__soon {
     position: relative;
-    border-radius: var(--rounded-lg);
-    border: 0.5px solid var(--medium-grey-for-outline);
     margin-bottom: 4px;
+    border: 0.5px solid var(--medium-grey-for-outline);
+    border-radius: var(--rounded-lg);
   }
 
   &__closed {
     display: flex;
     flex-direction: column;
+    gap: 2px;
     align-items: center;
     justify-content: center;
-    gap: 2px;
     padding: 24px 37px;
 
-     &--text {
+    &--text {
       color: var(--dark-grey);
     }
 
@@ -154,15 +153,15 @@
   &__info {
     display: flex;
     flex-direction: column;
+    gap: 2px;
     align-items: center;
     justify-content: center;
-    gap: 2px;
     margin-top: 8px;
 
     p {
       width: 60%;
-      text-align: center;
       color: var(--accent);
+      text-align: center;
     }
   }
 }
@@ -391,9 +390,9 @@
   &__top {
     display: flex;
     flex-direction: column;
-    margin-bottom: 10px;
     gap: 10px;
     align-items: center;
+    margin-bottom: 10px;
   }
 
   &__title {

projects/social_platform/src/app/ui/components/button/button.component.scss

@@ -110,6 +110,7 @@
 
   &--extra-small {
     padding: 2px 10px;
+
     @include typography.body-6;
   }
 

projects/social_platform/src/styles/_typography.scss

@@ -245,7 +245,6 @@
   @include body-10;
 }
 
-
 @mixin body-6 {
   font-family: Mont, sans-serif;
   font-size: 6px;