FTUE modal UI adjustments (#1328)

* FTUE modal UI adjustments

* More responsive CSS goodness

Author: davinotdavid

frontend/src/components/FTUE/CalDavProvider.vue

@@ -80,31 +80,31 @@ const onSubmit = async () => {
 </script>
 <template>
   <div class="content">
-      <form class="form" ref="formRef" @submit.prevent @keyup.enter="() => onSubmit()">
-        <text-input :disabled="isLoading" name="user" v-model="principal.user" :help="t('calDAVForm.help.user')" :required="true">
-          {{ t('label.username') }}
-        </text-input>
-        <text-input :disabled="isLoading" :placeholder="locationPreview" name="url" :help="t('calDAVForm.help.location')" v-model="principal.url">
-          {{ t('label.location') }}
-        </text-input>
-        <text-input :disabled="isLoading" type="password" name="password" :help="t('calDAVForm.help.password')" v-model="principal.password">
-          {{ t('label.password') }}
-        </text-input>
-      </form>
-      <div class="buttons">
-        <primary-button variant="outline" class="btn-switch" @click="emits('switch')" v-if="showSwitch">
-        {{ t('calDAVForm.switchToGoogleCalendar') }}
-        </primary-button>
-        <primary-button variant="outline" @click="emits('previous')" v-if="showPrevious">
-        {{ t('label.back') }}
-        </primary-button>
-        <primary-button
-          :label="t('label.connect')"
-          :disabled="isLoading"
-          @click="onSubmit"
-        >{{ t('label.connect') }}</primary-button>
-      </div>
+    <form class="form" ref="formRef" @submit.prevent @keyup.enter="() => onSubmit()">
+      <text-input :disabled="isLoading" name="user" v-model="principal.user" :help="t('calDAVForm.help.user')" :required="true">
+        {{ t('label.username') }}
+      </text-input>
+      <text-input :disabled="isLoading" :placeholder="locationPreview" name="url" :help="t('calDAVForm.help.location')" v-model="principal.url">
+        {{ t('label.location') }}
+      </text-input>
+      <text-input :disabled="isLoading" type="password" name="password" :help="t('calDAVForm.help.password')" v-model="principal.password">
+        {{ t('label.password') }}
+      </text-input>
+    </form>
+    <div class="buttons">
+      <primary-button variant="outline" class="btn-switch" @click="emits('switch')" v-if="showSwitch">
+      {{ t('calDAVForm.switchToGoogleCalendar') }}
+      </primary-button>
+      <primary-button variant="outline" @click="emits('previous')" v-if="showPrevious">
+      {{ t('label.back') }}
+      </primary-button>
+      <primary-button
+        :label="t('label.connect')"
+        :disabled="isLoading"
+        @click="onSubmit"
+      >{{ t('label.connect') }}</primary-button>
     </div>
+  </div>
 </template>
 <style scoped>
 @import '@/assets/styles/custom-media.pcss';
@@ -123,25 +123,20 @@ const onSubmit = async () => {
   margin: auto;
 }
 .btn-switch {
-  margin-left: 2rem;
   margin-right: auto;
 }
 .buttons {
   display: flex;
+  flex-direction: column;
   width: 100%;
   gap: 1rem;
   justify-content: center;
-  margin-top: 2rem;
-  left: auto;
-  right: auto;
+  margin-block-end: 2rem;
 }
 @media (--md) {
   .buttons {
+    flex-direction: row;
     justify-content: flex-end;
-    position: absolute;
-    right: 2rem;
-    bottom: 5.75rem;
-    margin: 0;
   }
 }
 </style>

frontend/src/components/FTUE/ConnectCalendars.vue

@@ -114,7 +114,6 @@ const onSubmit = async () => {
   width: 100%;
   justify-content: center;
   align-items: center;
-
 }
 
 .sync-card {
@@ -133,7 +132,7 @@ const onSubmit = async () => {
   width: 100%;
   gap: 1rem;
   justify-content: center;
-  margin-top: 2rem;
+  margin-block: 2rem;
 }
 
 @media (--md) {
@@ -143,9 +142,6 @@ const onSubmit = async () => {
 
   .buttons {
     justify-content: flex-end;
-    position: absolute;
-    bottom: 5.75rem;
-    margin: 0;
   }
 }
 </style>

frontend/src/components/FTUE/ConnectVideo.vue

@@ -226,7 +226,7 @@ const connectZoom = async () => {
   width: 100%;
   gap: 1rem;
   justify-content: center;
-  margin-top: 2rem;
+  margin-block: 2rem;
 }
 
 .skip-text {
@@ -243,9 +243,6 @@ const connectZoom = async () => {
 @media (--md) {
   .buttons {
     justify-content: flex-end;
-    position: absolute;
-    bottom: 5.75rem;
-    margin: 0;
   }
 
   .card {

frontend/src/components/FTUE/GoogleOauthProvider.vue

@@ -145,7 +145,6 @@ const onSubmit = async () => {
     </primary-button>
     <primary-button
       class="btn-continue"
-      variant="outline"
       :title="t('label.connectGoogleCalendar')"
       v-if="hasNextStep"
       @click="onSubmit()"
@@ -178,7 +177,7 @@ const onSubmit = async () => {
   @mixin faded-background var(--colour-background);
   @mixin faded-border var(--colour-background);
   font-size: 0.8125rem;
-  margin: auto;
+  margin: 0 auto;
 }
 
 .dark {
@@ -201,10 +200,11 @@ const onSubmit = async () => {
 
 .buttons {
   display: flex;
+  flex-direction: column;
   width: 100%;
   gap: 1rem;
   justify-content: center;
-  margin-top: 2rem;
+  margin-block: 2rem;
   right: auto;
   left: auto;
 }
@@ -215,10 +215,8 @@ const onSubmit = async () => {
   }
 
   .buttons {
+    flex-direction: row;
     justify-content: flex-end;
-    position: absolute;
-    bottom: 5.75rem;
-    margin: 0;
   }
 }
 </style>

frontend/src/components/FTUE/SetupProfile.vue

@@ -125,15 +125,12 @@ form {
   width: 100%;
   gap: 1rem;
   justify-content: center;
-  margin-top: 2rem;
+  margin-block: 1rem;
 }
 
 @media (--md) {
   .buttons {
     justify-content: flex-end;
-    position: absolute;
-    bottom: 5.75rem;
-    margin: 0;
   }
 }
 </style>

frontend/src/components/FTUE/SetupSchedule.vue

@@ -213,6 +213,18 @@ form {
   padding: 1rem;
 }
 
+.column {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.pair {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
 .dark {
   .card {
     --colour-background: var(--colour-neutral-lower);
@@ -233,6 +245,7 @@ form {
   justify-content: center;
   align-items: center;
   font-family: 'Inter', 'sans-serif';
+  margin-block-end: 2rem;
 }
 
 .scheduleInfo {
@@ -257,7 +270,7 @@ form {
   width: 100%;
   gap: 1rem;
   justify-content: center;
-  margin-top: 2rem;
+  margin-block-end: 2rem;
 }
 
 @media (--md) {
@@ -266,23 +279,18 @@ form {
   }
   .buttons {
     justify-content: flex-end;
-    position: absolute;
-    bottom: 5.75rem;
-    margin: 0;
   }
   form {
     flex-direction: row;
-    width: 40.0rem;
-    height: 18rem
+    width: 100%;
+    height: 100%;
   }
   .column {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
     width: 50%;
   }
   .pair {
     display: flex;
+    flex-direction: row;
     gap: 2rem;
   }
 }

frontend/src/components/FTUE/StepFinish.vue

@@ -96,7 +96,6 @@ const copyLink = async () => {
   width: 100%;
   justify-content: center;
   align-items: center;
-
 }
 
 .copy {
@@ -111,6 +110,10 @@ const copyLink = async () => {
   flex-direction: row-reverse;
 }
 
+:deep(.base.link.filled > span) {
+  line-height: 1.25rem;
+}
+
 .link {
   text-decoration: underline;
   border: none;
@@ -126,12 +129,11 @@ const copyLink = async () => {
   width: 100%;
   gap: 1rem;
   justify-content: center;
-  margin-top: 2rem;
+  margin-block: 2rem;
 }
 
 @media (--md) {
   .content {
-    margin-top: -6rem;
     gap: 0;
   }
   .copy {
@@ -140,9 +142,6 @@ const copyLink = async () => {
 
   .buttons {
     justify-content: flex-end;
-    position: absolute;
-    bottom: 5.75rem;
-    margin: 0;
   }
 }
 </style>

frontend/src/views/FirstTimeUserExperienceView.vue

@@ -33,7 +33,7 @@ onMounted(async () => {
   <dashboard-view></dashboard-view>
   <div class="page-ftue overlay" role="dialog" tabindex="-1" aria-labelledby="ftue-title" aria-modal="true">
     <div class="modal">
-      <div class="relative flex size-full w-full flex-col items-center gap-4">
+      <div class="relative flex w-full flex-col items-center">
         <div class="modal-header">
           <word-mark v-if="currentStep === FtueStep.SetupProfile || currentStep === FtueStep.Finish"/>
           <h2 id="ftue-title">
@@ -57,7 +57,6 @@ onMounted(async () => {
             :scheme="AlertSchemes.Info"
             @close="infoMessage = null"
           />
-          <div class="pls-keep-height" v-else/>
         </div>
         <div class="modal-body flex w-full flex-col items-center justify-center">
           <setup-profile v-if="currentStep === FtueStep.SetupProfile"/>
@@ -110,14 +109,9 @@ body {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  min-height: 8.0rem;
   width: 100%;
   gap: 1rem;
-}
-
-/* Empty space if a notice bar isn't shown */
-.pls-keep-height {
-  min-height: 2.0625rem; /* 33px */
+  margin-block-end: 1rem;
 }
 
 #ftue-title {
@@ -126,6 +120,7 @@ body {
   font-weight: 400;
   font-size: 1.375rem;
   line-height: 1.664rem;
+  margin-block: 1rem;
 }
 
 /* position-center apmt-background-color fixed z-[60] flex size-full gap-6 rounded-xl bg-white p-8 pb-0 drop-shadow-xl*/
@@ -184,7 +179,6 @@ body {
 }
 
 .footer {
-  bottom: 0;
   height: 4rem;
   width: 100%;
   display: flex;
@@ -226,30 +220,20 @@ body {
 }
 
 @media (--md) {
-  .modal-header {
-    margin-bottom: 0;
-  }
-
   .modal {
+    box-sizing: content-box;
     width: 50rem; /* 800px */
-    height: 37.5rem; /* 600px */
+    height: fit-content;
     padding: 2rem 2rem 0;
     overflow: visible;
   }
 
-  .modal-body {
-    height: 15.0rem;
-  }
-
   .divider {
-    position: absolute;
-    bottom: 4rem;
     width: 50rem;
     height: 0.0625rem;
   }
 
   .footer {
-    position: absolute;
     padding-bottom: 0;
   }
 }