style: label de cadastrar mais tarde

src/components/login/LoginStep2Panel.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-card-section class="no-padding q-mb-xl">
+  <q-card-section class="code-step full-width no-padding q-mb-xl">
     <div class="text-text q-mb-xs text-left">
       <span class="font14 fontbold">{{ $t("auth.validation_code") }}</span>
     </div>
@@ -54,9 +54,12 @@ const focusCodeInput = () => {
 <style lang="scss" scoped>
 .code-boxes-wrapper {
   cursor: text;
-  display: flex;
-  gap: 10px;
-  justify-content: center;
+  display: grid;
+  gap: 6px;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  margin: 0 auto;
+  max-width: 292px;
+  width: 100%;
 
   .code-box {
     align-items: center;
@@ -65,10 +68,12 @@ const focusCodeInput = () => {
     border-radius: 8px;
     color: var(--q-text);
     display: flex;
-    height: 45px;
+    aspect-ratio: 1;
+    height: auto;
     justify-content: center;
+    min-width: 0;
     transition: border-color 0.2s ease;
-    width: 44px;
+    width: 100%;
 
     &--active {
       border-color: var(--q-primary);
@@ -76,12 +81,24 @@ const focusCodeInput = () => {
   }
 }
 
+.code-step {
+  max-width: 292px;
+}
+
 .code-hidden-input {
-  height: 0;
-  overflow: hidden;
+  height: 1px;
+  left: -9999px;
   opacity: 0;
+  overflow: hidden;
   pointer-events: none;
-  position: absolute;
-  width: 0;
+  position: fixed;
+  top: 0;
+  width: 1px;
+
+  :deep(.q-field__control),
+  :deep(.q-field__bottom) {
+    height: 1px;
+    min-height: 1px;
+  }
 }
 </style>

src/pages/LoginPage.vue

@@ -7,41 +7,19 @@
         class="splash-screen"
         @click="clicked = true"
       >
-        <img
-          class="splash-layer splash-layer--bg"
-          :src="BackgroundLogin"
-        />
-
-        <img
-          class="splash-layer splash-layer--photo"
-          :src="FotoDiarista"
-        />
-
-        <img
-          class="splash-layer splash-layer--logo"
-          :src="LogoLogin"
-        />
+        <img class="splash-layer splash-layer--bg" :src="BackgroundLogin" />
+
+        <img class="splash-layer splash-layer--photo" :src="FotoDiarista" />
+
+        <img class="splash-layer splash-layer--logo" :src="LogoLogin" />
       </div>
 
-      <div
-        v-else-if="steps === 5"
-        key="step5"
-        class="splash-screen"
-      >
-        <img
-          class="splash-layer splash-layer--bg"
-          :src="BackgroundLogin"
-        />
+      <div v-else-if="steps === 5" key="step5" class="splash-screen">
+        <img class="splash-layer splash-layer--bg" :src="BackgroundLogin" />
 
-        <img
-          class="splash-layer splash-layer--photo"
-          :src="FotoDiarista"
-        />
+        <img class="splash-layer splash-layer--photo" :src="FotoDiarista" />
 
-        <img
-          class="splash-layer splash-layer--logo-small"
-          :src="LogoLogin"
-        />
+        <img class="splash-layer splash-layer--logo-small" :src="LogoLogin" />
 
         <div class="step4-card-wrapper">
           <LoginStep4Panel
@@ -52,11 +30,7 @@
         </div>
       </div>
 
-      <div
-        v-else
-        key="flow"
-        class="flow-screen"
-      >
+      <div v-else key="flow" class="flow-screen">
         <div class="flow-header items-center row">
           <q-btn
             v-if="steps >= 4"
@@ -68,23 +42,22 @@
             round
             @click="goBack"
           />
+        </div>
+
+        <div class="flow-logo q-my-xl">
+          <q-img style="max-width: 180px" :src="LogoDiariaCampos" />
+        </div>
 
+        <div v-if="steps === 3" class="register-later-row">
           <q-btn
-            v-else-if="steps === 3"
-            class="q-ml-auto"
+            align="right"
+            class="register-later-btn"
             color="primary"
-            dense
             flat
             icon-right="mdi-chevron-right-circle-outline"
+            no-caps
             :label="$t('auth.register_later')"
-            @click="steps = 5"
-          />
-        </div>
-
-        <div class="flow-logo q-my-xl">
-          <q-img
-            style="max-width: 180px"
-            :src="LogoDiariaCampos"
+            @click="steps = 4"
           />
         </div>
 
@@ -107,15 +80,9 @@
               v-model:phone="phone"
             />
 
-            <LoginStep2Panel
-              v-else-if="steps === 2"
-              v-model:code="code"
-            />
+            <LoginStep2Panel v-else-if="steps === 2" v-model:code="code" />
 
-            <LoginStep3Panel
-              v-else-if="steps === 3"
-              v-model="stepThreeForm"
-            />
+            <LoginStep3Panel v-else-if="steps === 3" v-model="stepThreeForm" />
 
             <LoginStepAvatarPanel
               v-else-if="steps === 4"
@@ -449,6 +416,8 @@ onMounted(() => {
 
 .flow-content {
   flex: 1;
+  overflow-y: auto;
+  min-height: 0;
 
   &--centered {
     display: flex;
@@ -458,6 +427,18 @@ onMounted(() => {
 }
 
 .flow-footer {
-  padding: 20px 0 calc(12px + env(safe-area-inset-bottom));
+  flex-shrink: 0;
+  padding: 8px 0 calc(12px + env(safe-area-inset-bottom));
+}
+
+.register-later-row {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: -14px;
+  padding-bottom: 18px;
+}
+
+.register-later-btn {
+  justify-content: flex-end;
 }
 </style>