Merge pull request #4197 from crazyserver/MOBILE-4660

MOBILE-4660 course: Improve module card styles

Author: dpalou

src/addons/messages/tests/behat/snapshots/test-basic-usage-of-messages-in-app-view-recent-conversations-and-contacts_22.png

@@ -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 {

src/core/features/course/components/module/module.scss

@@ -1,15 +1,28 @@
 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);
     }
+
+    /**
+    * Change arrow direction to match LMS: expanded is down, collapsed is right.
+    */
+    &.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);
         }
     }