refactor: update auth pages to new design

app.vue

@@ -1,7 +1,5 @@
 <template>
-  <div>
-    <NuxtLayout>
-      <NuxtPage />
-    </NuxtLayout>
-  </div>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
 </template>

assets/css/main.scss

@@ -1,12 +1,11 @@
 @import "media";
 
 .page {
-  scroll-behavior: smooth;
-  overflow-x: hidden;
+  @apply overflow-x-hidden scroll-smooth;
 }
 
 .body {
-  @apply overflow-x-hidden overflow-y-hidden text-rui-text;
+  @apply text-rui-text;
 }
 
 .container {
@@ -18,5 +17,5 @@
 }
 
 .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
-  opacity: 0;
+  @apply opacity-0;
 }

components/account/activation/AccountActivate.vue

@@ -22,39 +22,34 @@ const validateToken = async () => {
 };
 
 onBeforeMount(async () => await validateToken());
-
-const css = useCssModule();
+const { t } = useI18n();
 </script>
 
 <template>
-  <PageContainer>
-    <template #title> Account Activation </template>
-    <div :class="css.content">
-      <div v-if="!validating">
-        <UserActionMessage v-if="isValid">
-          <template #header>Welcome to rotki</template>
-
-          <p>Your rotki account has been successfully activated.</p>
-          <div>
-            To see your dashboard click
-            <ButtonLink to="/home" inline color="primary">here</ButtonLink>
-          </div>
-        </UserActionMessage>
-        <UserActionMessage v-else>
-          <template #header>Invalid Link</template>
-          <p>The activation link is not valid.</p>
-          <p>This can happen if you have already confirmed your account.</p>
-        </UserActionMessage>
+  <div
+    class="container py-16 lg:pt-[200px] lg:pb-32 flex flex-col items-center justify-center"
+  >
+    <div class="w-[380px]">
+      <div v-if="validating" class="flex justify-center">
+        <RuiProgress variant="indeterminate" circular color="primary" />
       </div>
-      <div v-else>
-        <LoadingIndicator />
+      <div v-else-if="!isValid" class="space-y-3">
+        <div class="text-h4">{{ t('auth.activation.invalid.title') }}</div>
+        <div class="text-body-1 text-rui-text-secondary">
+          {{ t('auth.activation.invalid.message') }}
+        </div>
+      </div>
+      <div v-else class="space-y-3">
+        <div class="text-h4">{{ t('auth.activation.success.title') }}</div>
+        <div class="text-body-1 text-rui-text-secondary">
+          <span>
+            {{ t('auth.activation.success.message') }}
+          </span>
+          <ButtonLink to="/home" inline color="primary">
+            {{ t('common.here') }}
+          </ButtonLink>
+        </div>
       </div>
     </div>
-  </PageContainer>
+  </div>
 </template>
-
-<style module lang="scss">
-.content {
-  @apply flex flex-row justify-center;
-}
-</style>

components/account/activation/PendingActivation.vue

@@ -1,27 +1,16 @@
 <script setup lang="ts">
-const css = useCssModule();
+const { t } = useI18n();
 </script>
 
 <template>
-  <PageContainer>
-    <template #title> Almost Done </template>
-    <div :class="css.content">
-      <UserActionMessage>
-        <template #header>Thank you for registering.</template>
-        <p>
-          To use your new rotki account you have to first confirm your e-mail.
-        </p>
-        <p>
-          Please check your mailbox and follow the instructions to activate your
-          account.
-        </p>
-      </UserActionMessage>
+  <div
+    class="container py-16 lg:pt-[250px] lg:pb-32 flex flex-col items-center justify-center"
+  >
+    <div class="w-[500px] 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') }}
+      </div>
     </div>
-  </PageContainer>
+  </div>
 </template>
-
-<style lang="scss" module>
-.content {
-  @apply flex flex-row justify-center;
-}
-</style>

components/account/home/AccountInformation.vue

@@ -203,17 +203,11 @@ const css = useCssModule();
       @blur="v$.country.$touch()"
     />
 
-    <RuiButton
-      variant="outlined"
-      size="lg"
-      class="uppercase outline-2 mt-4"
-      :loading="loading"
-      rounded
-      color="primary"
-      @click="update()"
-    >
-      Update
-    </RuiButton>
+    <div class="mt-8">
+      <RuiButton size="lg" :loading="loading" color="primary" @click="update()">
+        Update
+      </RuiButton>
+    </div>
   </CardContainer>
 </template>
 

components/account/home/ChangePassword.vue

@@ -112,14 +112,11 @@ const css = useCssModule();
       autocomplete="new-password"
     />
 
-    <div :class="css.row">
+    <div :class="css.row" class="mt-8">
       <RuiButton
         :disabled="v$.$invalid"
-        variant="outlined"
         size="lg"
-        class="uppercase outline-2 mt-4"
         :loading="loading"
-        rounded
         color="primary"
         @click="changePassword()"
       >

components/account/home/DangerZone.vue

@@ -34,28 +34,29 @@ const css = useCssModule();
 
 <template>
   <CardContainer warning>
-    <TextHeading>Danger Zone</TextHeading>
+    <TextHeading>
+      <div class="text-rui-error">Delete account</div>
+    </TextHeading>
 
-    <p :class="css.text">
+    <p class="text-rui-text-secondary">
       Proceeding will completely delete your account data. If you proceed you
       will not be able to recover your account!
     </p>
 
-    <p v-if="isSubscriber" :class="css.warning">
+    <p v-if="isSubscriber" class="text-rui-warning">
       You cannot delete your account while you have an active subscription.
     </p>
 
-    <RuiButton
-      :disabled="isSubscriber"
-      variant="outlined"
-      size="lg"
-      class="uppercase outline-2"
-      rounded
-      color="warning"
-      @click="confirm = true"
-    >
-      Delete My Account
-    </RuiButton>
+    <div class="mt-8">
+      <RuiButton
+        :disabled="isSubscriber"
+        size="lg"
+        color="error"
+        @click="confirm = true"
+      >
+        Delete My Account
+      </RuiButton>
+    </div>
 
     <ModalDialog v-model="confirm" padding="1rem">
       <div :class="css.title">Delete Account</div>

components/account/home/UnverifiedEmailWarning.vue

@@ -1,29 +1,10 @@
 <script setup lang="ts">
-const color = '#ed6c02';
 const { t } = useI18n();
-const css = useCssModule();
 </script>
 
 <template>
-  <div role="alert" :class="css.alert">
-    <AlertIcon :color="color" width="17px" :class="css.icon" />
-    {{ t('account.unverified_email.message') }}
-  </div>
+  <RuiAlert
+    type="warning"
+    :description="t('account.unverified_email.message')"
+  />
 </template>
-
-<style module lang="scss">
-.alert {
-  @apply py-1.5 px-4 mb-4 mt-4 text-sm rounded flex flex-row font-sans;
-
-  background: linear-gradient(
-      0deg,
-      rgba(255, 255, 255, 0.9),
-      rgba(255, 255, 255, 0.9)
-    ),
-    v-bind(color);
-}
-
-.icon {
-  @apply mr-2;
-}
-</style>