style: updates singup layout for mobile (#136)

rotki · Aug 11, 2023 · b083e90 · b083e90
1 parent 4f86de4
commit b083e90
Show file tree

Hide file tree

Showing 6 changed files with 7 additions and 12 deletions.
diff --git a/components/account/activation/PendingActivation.vue b/components/account/activation/PendingActivation.vue
@@ -4,9 +4,9 @@ const { t } = useI18n();
 
 <template>
   <div
-    class="container py-16 lg:pt-[250px] lg:pb-32 flex flex-col items-center justify-center"
+    class="container h-full flex flex-col pt-10 md:pt-0 md:flex-1 md:items-center md:justify-center"
   >
-    <div class="w-[500px] space-y-3">
+    <div class="max-w-[30.6rem] space-y-3">
       <div class="text-h4">{{ t('auth.pending_activation.title') }}</div>
       <div class="text-body-1 text-rui-text-secondary">
         {{ t('auth.pending_activation.message') }}

diff --git a/components/account/signup/SignupAccount.vue b/components/account/signup/SignupAccount.vue
@@ -153,7 +153,7 @@ const { t } = useI18n();
   <div class="mt-16 grid md:grid-cols-2 gap-4">
     <RuiButton
       type="button"
-      class="w-full"
+      class="w-full row-start-2 md:row-start-auto"
       size="lg"
       data-cy="back-button"
       @click="emit('back')"

diff --git a/components/account/signup/SignupAddress.vue b/components/account/signup/SignupAddress.vue
@@ -216,7 +216,7 @@ const { t } = useI18n();
     <RuiButton
       data-cy="back-button"
       type="button"
-      class="w-full"
+      class="w-full row-start-2 md:row-start-auto"
       size="lg"
       @click="emit('back')"
     >

diff --git a/components/account/signup/SignupCustomerInformation.vue b/components/account/signup/SignupCustomerInformation.vue
@@ -116,7 +116,7 @@ const { t } = useI18n();
   <div class="mt-16 grid md:grid-cols-2 gap-4">
     <RuiButton
       type="button"
-      class="w-full"
+      class="w-full row-start-2 md:row-start-auto"
       size="lg"
       data-cy="back-button"
       @click="emit('back')"

diff --git a/components/account/signup/SignupForm.vue b/components/account/signup/SignupForm.vue
@@ -142,10 +142,6 @@ const setErrors = (errors: ValidationErrors) => {
   <div
     class="container flex flex-col lg:flex-row pt-4 pb-8 lg:py-14 h-full grow"
   >
-    <div class="lg:hidden mb-14 [&>div>div]:pt-4 [&>div>hr]:!mt-4">
-      <RuiStepper custom orientation="horizontal" :step="step" :steps="steps" />
-    </div>
-
     <div class="flex justify-center grow">
       <form class="w-[440px] flex flex-col justify-between" @submit.prevent="">
         <SignupIntroduction v-if="step === 1" @next="next()" />
@@ -172,8 +168,8 @@ const setErrors = (errors: ValidationErrors) => {
           @back="back()"
           @finish="signup($event)"
         />
-        <div class="mt-4 p-6">
-          <RuiFooterStepper v-model="step" :pages="4" variant="pill" />
+        <div class="py-10 lg:px-4">
+          <RuiFooterStepper :model-value="step" :pages="4" variant="pill" />
         </div>
       </form>
     </div>

diff --git a/components/common/carousel/CarouselControls.vue b/components/common/carousel/CarouselControls.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import 'swiper/css';
 import { get } from '@vueuse/core';
-import { RuiFooterStepper } from '@rotki/ui-library';
 import type { Swiper } from 'swiper/types';
 
 const props = withDefaults(