style: add divider in user account page

rotki · Jul 31, 2023 · 960b027 · 960b027
1 parent 6a8fd34
commit 960b027
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 8 deletions.
diff --git a/components/account/home/AccountInformation.vue b/components/account/home/AccountInformation.vue
@@ -203,7 +203,9 @@ const css = useCssModule();
       @blur="v$.country.$touch()"
     />
 
-    <div class="mt-8">
+    <div class="my-5 border-t border-grey-50" />
+
+    <div class="flex justify-end mt-8">
       <RuiButton size="lg" :loading="loading" color="primary" @click="update()">
         Update
       </RuiButton>

diff --git a/components/account/home/ChangePassword.vue b/components/account/home/ChangePassword.vue
@@ -112,7 +112,12 @@ const css = useCssModule();
       autocomplete="new-password"
     />
 
-    <div :class="css.row" class="mt-8">
+    <div class="my-5 border-t border-grey-50" />
+
+    <div class="flex justify-end mt-8">
+      <span v-if="success" :class="css.success">
+        <CheckMarkIcon /> Your password has been changed.
+      </span>
       <RuiButton
         :disabled="v$.$invalid"
         size="lg"
@@ -122,9 +127,6 @@ const css = useCssModule();
       >
         Change Password
       </RuiButton>
-      <span v-if="success" :class="css.success">
-        <CheckMarkIcon /> Your password has been changed.
-      </span>
     </div>
   </CardContainer>
 </template>
@@ -135,6 +137,6 @@ const css = useCssModule();
 }
 
 .success {
-  @apply flex flex-row ml-4 mt-6 text-rui-grey-800 transition duration-300 ease-in-out;
+  @apply flex flex-row mr-4 mt-6 text-rui-grey-800 transition duration-300 ease-in-out;
 }
 </style>
diff --git a/components/account/home/DangerZone.vue b/components/account/home/DangerZone.vue
@@ -34,11 +34,11 @@ const css = useCssModule();
 
 <template>
   <CardContainer warning>
-    <TextHeading>
+    <TextHeading class="mt-4" no-margin>
       <div class="text-rui-error">Delete account</div>
     </TextHeading>
 
-    <p class="text-rui-text-secondary">
+    <p class="text-rui-text-secondary mt-1">
       Proceeding will completely delete your account data. If you proceed you
       will not be able to recover your account!
     </p>

diff --git a/components/common/ButtonLink.vue b/components/common/ButtonLink.vue
@@ -47,6 +47,7 @@ const getColor = (active: boolean, exact: boolean) => {
     :rel="external ? 'noreferrer' : null"
   >
     <RuiButton
+      type="button"
       v-bind="{
         variant: 'text',
         color: getColor(link?.isActive, link?.isExactActive),