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;
 }

assets/css/tailwind.css

@@ -1,5 +1,17 @@
-@import '@rotki/ui-library/dist/style.css';
+@import '@rotki/ui-library/style.css';
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer utilities {
+ /* Chrome, Safari and Opera */
+ .no-scrollbar::-webkit-scrollbar {
+ display: none;
+ }
+
+ .no-scrollbar {
+ -ms-overflow-style: none; /* IE and Edge */
+ scrollbar-width: none; /* Firefox */
+ }
+}

components/account/activation/AccountActivate.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { RuiProgress } from '@rotki/ui-library';
 import { set } from '@vueuse/core';
 import { FetchError } from 'ofetch';
 import { fetchWithCsrf } from '~/utils/api';
@@ -22,39 +23,33 @@ const validateToken = async () => {
 };
 
 onBeforeMount(async () => await validateToken());
-
-const css = useCssModule();
 </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-[360px]">
+ <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">Invalid Link</div>
+ <div class="text-body-1 text-rui-text-secondary">
+ The activation link is not valid. This can happen if you have already
+ confirmed your account.
+ </div>
+ </div>
+ <div v-else class="space-y-3">
+ <div class="text-h4">Welcome to rotki</div>
+ <div class="text-body-1 text-rui-text-secondary">
+ <span>
+ Your rotki account has been successfully activated. To see your
+ dashboard click
+ </span>
+ <ButtonLink to="/home" inline color="primary">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,13 @@
-<script setup lang="ts">
-const css = useCssModule();
-</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-[400px] space-y-3">
+ <div class="text-h4">Please check your email</div>
+ <div class="text-body-1 text-rui-text-secondary">
+ A confirm registration link has been send to your account's address.
+ Please check your mailbox to proceed.
+ </div>
  </div>
- </PageContainer>
+ </div>
 </template>
-
-<style lang="scss" module>
-.content {
- @apply flex flex-row justify-center;
-}
-</style>