Merge pull request #220 from Scille/ms-responsive-summary-card

[MS] Responsive summary card

Author: fabienSvtr

lib/components/ms-card/MsSummaryCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="ms-summary-card">
-    <h2 class="ms-summary-card-title title-h3">{{ $msTranslate(title) }}</h2>
+    <ion-title class="ms-summary-card-title title-h3">{{ $msTranslate(title) }}</ion-title>
     <template
       v-for="(row, index) in rows"
       :key="`ms-summary-card-row${index}`"
@@ -49,7 +49,7 @@
 </template>
 
 <script setup lang="ts">
-import { IonButton, IonIcon } from '@ionic/vue';
+import { IonButton, IonIcon, IonTitle } from '@ionic/vue';
 import { MsSummaryCardRowData } from '@lib/components/ms-card/types';
 import MsSummaryCardItem from '@lib/components/ms-card/MsSummaryCardItem.vue';
 import { pencil } from 'ionicons/icons';
@@ -73,16 +73,13 @@ defineEmits<{
 </script>
 
 <style scoped lang="scss">
-.ms-summary-card {
-  h2 {
-    margin: 0;
-    padding: 0;
-  }
+@use '@lib/theme' as ms;
 
+.ms-summary-card {
   display: flex;
   flex-direction: column;
   background: var(--parsec-color-light-secondary-background);
-  border: 1px solid var(--parsec-color-light-secondary-disabled);
+  border: 1px solid var(--parsec-color-light-secondary-medium);
   border-radius: var(--parsec-radius-8);
   gap: 1rem;
   width: 100%;
@@ -91,6 +88,8 @@ defineEmits<{
 
   &-title {
     color: var(--parsec-color-light-secondary-text);
+    margin: 0;
+    padding: 0;
   }
 
   &-row {
@@ -106,7 +105,12 @@ defineEmits<{
     right: 1rem;
     top: 1rem;
 
+    @include ms.responsive-breakpoint('xs') {
+      position: initial;
+    }
+
     &__icon {
+      font-size: 1rem;
       margin-right: 0.5rem;
     }
   }

lib/components/ms-input/MsCodeValidationInput.vue

@@ -206,6 +206,8 @@ async function focusInputElement(input: HTMLIonInputElement | undefined): Promis
 </script>
 
 <style scoped lang="scss">
+@use '@lib/theme' as ms;
+
 @keyframes blinking {
   0% {
     opacity: 1;
@@ -224,18 +226,33 @@ async function focusInputElement(input: HTMLIonInputElement | undefined): Promis
   gap: 1rem;
   margin: 0.25rem;
 
+  @include ms.responsive-breakpoint('sm') {
+    gap: 0.5rem;
+  }
   &__item {
     --highlight-color-focused: none;
     color: var(--parsec-color-light-primary-700);
-    background-color: var(--parsec-color-light-secondary-premiere);
+    border: 1px solid var(--parsec-color-light-secondary-disabled);
     caret-color: transparent;
     border-radius: var(--parsec-radius-8);
-    width: 4.5rem;
-    height: 6rem;
+    width: 3.5rem;
+    height: 5rem;
     display: flex;
     text-align: center;
     position: relative;
 
+    @include ms.responsive-breakpoint('sm') {
+      width: 3rem;
+      height: 4rem;
+      font-size: 1.75rem !important;
+    }
+
+    @include ms.responsive-breakpoint('xs') {
+      width: 2.5rem;
+      height: 3.25rem;
+      font-size: 1.25rem !important;
+    }
+
     &:is(.has-focus) {
       &::after {
         content: '';
@@ -262,13 +279,21 @@ async function focusInputElement(input: HTMLIonInputElement | undefined): Promis
   gap: 0.5rem;
 
   &__invalid {
-    color: var(--parsec-color-light-danger-700);
-    margin-top: 1rem;
+    color: var(--parsec-color-light-danger-500);
+    margin-top: 0.75rem;
+
+    @include ms.responsive-breakpoint('sm') {
+      font-size: 0.875rem;
+    }
   }
 
   &__valid {
-    color: var(--parsec-color-light-success-700);
-    margin-top: 1rem;
+    color: var(--parsec-color-light-success-500);
+    margin-top: 0.75rem;
+
+    @include ms.responsive-breakpoint('sm') {
+      font-size: 0.875rem;
+    }
   }
 }
 </style>