style: adjust the button for the account home page

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>

components/common/PageContainer.vue

@@ -46,7 +46,7 @@ const slots = useSlots();
 @import '@/assets/css/main.scss';
 
 .wrapper {
-  @apply container flex flex-col flex-grow min-h-screen px-4;
+  @apply container flex flex-col flex-grow min-h-screen py-12;
 }
 
 .subtitle {

pages/download.vue

@@ -33,6 +33,10 @@ const links = computed<DownloadItemProps[]>(() => [
 ]);
 
 onBeforeMount(async () => await fetchLatestRelease());
+
+definePageMeta({
+  layout: 'landing',
+});
 </script>
 
 <template>

pages/index.vue

@@ -22,6 +22,10 @@ useHead({
   ],
   ...commonAttrs(),
 });
+
+definePageMeta({
+  layout: 'landing',
+});
 </script>
 
 <template>