From b083e90320eeba1ddf4aa9177c00c83284349a7c Mon Sep 17 00:00:00 2001
From: Joseph Ojoko <entewshi@gmail.com>
Date: Fri, 11 Aug 2023 18:02:17 +0100
Subject: [PATCH] style: updates singup layout for mobile (#136)

---
 components/account/activation/PendingActivation.vue     | 4 ++--
 components/account/signup/SignupAccount.vue             | 2 +-
 components/account/signup/SignupAddress.vue             | 2 +-
 components/account/signup/SignupCustomerInformation.vue | 2 +-
 components/account/signup/SignupForm.vue                | 8 ++------
 components/common/carousel/CarouselControls.vue         | 1 -
 6 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/components/account/activation/PendingActivation.vue b/components/account/activation/PendingActivation.vue
index 257f47da..cb957732 100644
--- 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
index 86dd1bff..248c17cc 100644
--- 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
index 05407c34..5691cada 100644
--- 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
index 24b127aa..bae7cd87 100644
--- 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
index d8a6f260..77bcd9f7 100644
--- 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
index c8042a1e..e4615535 100644
--- 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(