add styles for detail pages for courses & program

Author: Awakich

projects/social_platform/src/app/office/courses/detail/course-detail.component.scss

@@ -10,8 +10,8 @@ $detail-bar-mb: 12px;
   height: 100%;
   max-height: 100%;
   padding-top: 20px;
-  margin: 0px 20px;
-  
+  margin: 0 20px;
+
   @include responsive.apply-desktop {
     margin: 0;
   }
@@ -28,15 +28,15 @@ $detail-bar-mb: 12px;
 
   position: relative;
   padding: 0;
+  margin-bottom: 20px;
   border: none;
   border-radius: $body-slide;
-  margin-bottom: 20px;
 
   &__cover {
     position: relative;
     height: 136px;
     border-radius: 15px;
-    
+
     @include responsive.apply-desktop {
       border-radius: 15px 15px 0 0;
     }

projects/social_platform/src/app/office/courses/detail/info/info.component.scss

@@ -96,7 +96,6 @@
   }
 }
 
-
 .cancel {
   display: flex;
   flex-direction: column;

projects/social_platform/src/app/office/courses/shared/course-about/course-about.component.scss

@@ -3,10 +3,10 @@
 @use "styles/responsive";
 
 .about {
-  padding: 0px;
+  padding: 0;
   background-color: transparent;
-  border-radius: 0px;
-  
+  border-radius: 0;
+
   @include responsive.apply-desktop {
     padding: 24px;
     background-color: var(--light-white);

projects/social_platform/src/app/office/courses/shared/course-module-card/course-module-card.component.scss

@@ -55,7 +55,7 @@
     cursor: pointer;
     background-color: var(--medium-grey-for-outline);
     border-radius: var(--rounded-xl);
-    
+
     @include responsive.apply-desktop {
       left: 14%;
     }

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

@@ -12,8 +12,8 @@ $detail-bar-mb: 12px;
   height: 100%;
   max-height: 100%;
   padding-top: 20px;
-  margin: 0px 20px;
-  
+  margin: 0 20px;
+
   @include responsive.apply-desktop {
     margin: 0;
   }
@@ -38,15 +38,15 @@ $detail-bar-mb: 12px;
     position: relative;
     height: 63px;
     border-radius: 15px;
-    
+
     @include responsive.apply-desktop {
       height: 136px;
       border-radius: 15px 15px 0 0;
     }
 
     &--program {
       height: 63px;
-      
+
       @include responsive.apply-desktop {
         height: 155px;
       }
@@ -84,7 +84,7 @@ $detail-bar-mb: 12px;
     background-color: var(--white);
     border-radius: 50%;
     transform: translate(-50%, 60%);
-    
+
     &--program {
       bottom: 15px;
     }
@@ -128,12 +128,12 @@ $detail-bar-mb: 12px;
     grid-template-columns: 2fr 2fr;
     gap: 12px;
     align-items: center;
-    padding: 24px 10px 0px;
+    padding: 24px 10px 0;
 
     @include responsive.apply-desktop {
       grid-template-columns: 2fr 2fr 2fr 2fr 2fr;
-      padding: 24px 0 30px;
       gap: 20px;
+      padding: 24px 0 30px;
     }
 
     app-modal {
@@ -150,19 +150,21 @@ $detail-bar-mb: 12px;
   }
 
   &__primary-action {
-    order: 999;
     grid-column: 1 / -1;
+    order: 999;
 
-    a, app-button {
+    a,
+    app-button {
       display: block;
       width: 100%;
     }
 
     @include responsive.apply-desktop {
-      order: 0;
       grid-column: auto;
+      order: 0;
 
-      a, app-button {
+      a,
+      app-button {
         display: inline-block;
         width: auto;
       }

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

@@ -67,7 +67,7 @@
     display: grid;
     grid-template-columns: 1fr;
     grid-gap: 20px;
-    
+
     @include responsive.apply-desktop {
       grid-template-columns: 2fr 5fr 3fr;
     }
@@ -144,7 +144,6 @@
   }
 }
 
-
 .news {
   &__form {
     display: block;