Merge pull request #2773 from IDEMSInternational/feat/mx-button-variant

style: new display group variant for MX button use case

Author: jfmcquade

src/app/shared/components/template/components/layout/display-group/display-group.component.scss

@@ -59,6 +59,7 @@
   &[data-variant~="box_gray"],
   &[data-variant~="box_primary"],
   &[data-variant~="box_secondary"],
+  &[data-variant~="box_secondary_alt"],
   &[data-variant~="box_white"] {
     margin-top: var(--regular-margin);
     padding: var(--regular-padding);
@@ -84,6 +85,11 @@
     --border-color: var(--ion-color-secondary-500);
   }
 
+  &[data-variant~="box_secondary_alt"] {
+    --background-color: var(--ion-color-secondary-600);
+    --border-color: var(--ion-color-secondary-200);
+  }
+
   &[data-variant~="box_white"] {
     --background-color: white;
     --border-color: var(--border-color-default, var(--ion-color-primary));

src/theme/themes/plh_facilitator_mx/_overrides.scss

@@ -947,6 +947,9 @@ body[data-theme="plh_facilitator_mx"] {
       border: none;
       border-inline-start: 3px solid var(--color-accent-orange-40);
     }
+    &[data-variant~="box_secondary_alt"] {
+      border-radius: var(--ion-border-radius-secondary) !important;
+    }
     &[data-variant~="box_gray"] {
       --background-color: var(--ion-color-gray-100) !important;
       border: none;