MOBILE-4660 course: Improve module card styles

crazyserver · Oct 8, 2024 · 35e5ff6 · 35e5ff6
1 parent 8f6c1fd
commit 35e5ff6
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 5 deletions.
diff --git a/src/core/features/course/components/module/module.scss b/src/core/features/course/components/module/module.scss
@@ -7,7 +7,7 @@
     --card-border-width: 0px;
     --card-radius: 0px;
     --card-background: transparent;
-    --activity-border: 2px solid var(--stroke);
+    --activity-border: 1px solid var(--stroke);
     --card-padding-bottom: var(--vertical-spacing);
 
     ion-card {
@@ -132,15 +132,16 @@
         margin-bottom: var(--vertical-spacing);
     }
 
-    .activity-extrabadges,
     .core-module-description {
-        border-top: 1px solid var(--stroke);
         display: block;
     }
 
     .activity-extrabadges {
         font: var(--mdl-typography-body-font-md);
         color: var(--medium);
+        border: 1px solid var(--stroke);
+        border-radius: var(--mdl-shape-borderRadius-sm);
+        padding: var(--mdl-spacing-2) var(--mdl-spacing-3) var(--mdl-spacing-2) var(--mdl-spacing-3);
     }
 
     .activity-description-availabilityinfo .core-module-availabilityinfo {

diff --git a/...hat/snapshots/test-basic-usage-of-one-course-in-app-view-course-contents_53.png b/...hat/snapshots/test-basic-usage-of-one-course-in-app-view-course-contents_53.png
diff --git a/src/theme/components/ion-accordion.scss b/src/theme/components/ion-accordion.scss
@@ -1,15 +1,31 @@
 ion-accordion {
-    .ion-accordion-toggle-icon[slot="start"] {
+    > [slot="header"] .ion-accordion-toggle-icon[slot="start"] {
         @include margin-horizontal(null, var(--mdl-spacing-2));
         background-color: var(--gray-100);
         border-radius: 50%;
         padding: var(--mdl-spacing-1);
     }
+
+    /**
+    * The > [slot="header"] selector ensures that we do
+    * not modify toggle icons for any nested accordions. The state
+    * of one accordion should not affect any accordions inside
+    * of a nested accordion group.
+    */
+    &.accordion-expanding > [slot="header"] .ion-accordion-toggle-icon,
+    &.accordion-expanded > [slot="header"] .ion-accordion-toggle-icon {
+        transform: none;
+    }
+
+    &.accordion-collapsing > [slot="header"] .ion-accordion-toggle-icon,
+    &.accordion-collapsed > [slot="header"] .ion-accordion-toggle-icon {
+        transform: rotate(-90deg);
+    }
 }
 
 :root.dark {
     ion-accordion {
-        .ion-accordion-toggle-icon[slot="start"] {
+        > [slot="header"] .ion-accordion-toggle-icon[slot="start"] {
             background-color: var(--gray-800);
         }
     }