refactor: update button and link

rotki · Jul 25, 2023 · 71022a8 · 71022a8
1 parent 8112500
commit 71022a8
Show file tree

Hide file tree

Showing 31 changed files with 367 additions and 448 deletions.
diff --git a/components/HeroArea.vue b/components/HeroArea.vue
@@ -24,11 +24,17 @@ const { t } = useI18n();
  </div>
  <div :class="css.buttons">
  <DownloadButton @click="emit('download')" />
- <ActionButton
- :class="css.premium"
- :text="t('actions.get_premium')"
- @click="navigateTo('/products')"
- />
+
+ <ButtonLink
+ variant="outlined"
+ size="lg"
+ class="!py-4 !px-10 !text-xl uppercase outline-2"
+ rounded
+ color="primary"
+ to="/products"
+ >
+ {{ t('actions.get_premium') }}
+ </ButtonLink>
  </div>
  <div :class="css.screenshot">
  <img alt="rotki screenshot" src="/img/screenshot.png" />

diff --git a/components/NavigationMenu.vue b/components/NavigationMenu.vue
@@ -1,54 +1,38 @@
 <script setup lang="ts">
-import { RuiButton, RuiIcon } from '@rotki/ui-library';
+import { RuiIcon } from '@rotki/ui-library';
 const { t } = useI18n();
 </script>
 
 <template>
  <div class="flex space-x-4 flex-wrap justify-center">
- <NuxtLink to="/">
- <RuiButton variant="text" size="lg">
- {{ t('navigation_menu.home') }}
- </RuiButton>
- </NuxtLink>
- <NuxtLink v-if="false" to="/download">
- <RuiButton variant="text" size="lg">
- {{ t('navigation_menu.download') }}
- </RuiButton>
- </NuxtLink>
- <NuxtLink to="/jobs">
- <RuiButton variant="text" size="lg">
- {{ t('navigation_menu.jobs') }}
- </RuiButton>
- </NuxtLink>
- <NuxtLink v-if="false" to="/values">
- <RuiButton variant="text" size="lg">
- {{ t('navigation_menu.values') }}
- </RuiButton>
- </NuxtLink>
- <NuxtLink v-if="false" to="/features">
- <RuiButton variant="text" size="lg">
- {{ t('navigation_menu.features') }}
- </RuiButton>
- </NuxtLink>
- <a
- href="https://rotki.readthedocs.io/en/latest/index.html"
- rel="noreferrer"
- target="_blank"
+ <ButtonLink size="lg" to="/">{{ t('navigation_menu.home') }}</ButtonLink>
+ <ButtonLink size="lg" to="/#features">
+ {{ t('navigation_menu.features') }}
+ </ButtonLink>
+ <ButtonLink v-if="false" size="lg" to="/download">
+ {{ t('navigation_menu.download') }}
+ </ButtonLink>
+ <ButtonLink size="lg" to="/jobs">
+ {{ t('navigation_menu.jobs') }}
+ </ButtonLink>
+ <ButtonLink v-if="false" size="lg" to="/values">
+ {{ t('navigation_menu.values') }}
+ </ButtonLink>
+ <ButtonLink
+ size="lg"
+ to="https://rotki.readthedocs.io/en/latest/index.html"
+ external
  >
- <RuiButton variant="text" size="lg">
- {{ t('navigation_menu.documentation') }}
- <template #append>
- <RuiIcon name="external-link-line" />
- </template>
- </RuiButton>
- </a>
- <a href="https://blog.rotki.com/" rel="noreferrer" target="_blank">
- <RuiButton variant="text" size="lg">
- {{ t('navigation_menu.blog') }}
- <template #append>
- <RuiIcon name="external-link-line" />
- </template>
- </RuiButton>
- </a>
+ <span> {{ t('navigation_menu.documentation') }} </span>
+ <template #append>
+ <RuiIcon size="18" name="external-link-line" />
+ </template>
+ </ButtonLink>
+ <ButtonLink size="lg" to="https://blog.rotki.com" external>
+ <span> {{ t('navigation_menu.blog') }} </span>
+ <template #append>
+ <RuiIcon size="18" name="external-link-line" />
+ </template>
+ </ButtonLink>
  </div>
 </template>
diff --git a/components/account/activation/AccountActivate.vue b/components/account/activation/AccountActivate.vue
@@ -37,7 +37,7 @@ const css = useCssModule();
  <p>Your rotki account has been successfully activated.</p>
  <div>
  To see your dashboard click
- <ExternalLink same-tab text="here" url="/home" />
+ <ButtonLink to="/home" inline color="primary">here</ButtonLink>
  </div>
  </UserActionMessage>
  <UserActionMessage v-else>

diff --git a/components/account/home/AccountInformation.vue b/components/account/home/AccountInformation.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { RuiButton } from '@rotki/ui-library';
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
 import { get, set } from '@vueuse/core';
@@ -203,25 +204,22 @@ const css = useCssModule();
  @blur="v$.country.$touch()"
  />
 
- <ActionButton
- :class="css.confirm"
+ <RuiButton
+ variant="outlined"
+ size="lg"
+ class="uppercase outline-2 mt-4"
  :loading="loading"
- primary
- small
- text="Update"
+ rounded
+ color="primary"
  @click="update()"
  >
- <SpinnerIcon v-if="loading" class="animate-spin" />
- </ActionButton>
+ Update
+ </RuiButton>
  </CardContainer>
 </template>
 
 <style lang="scss" module>
 .info {
  @apply mt-8;
 }
-
-.confirm {
- @apply mt-4;
-}
 </style>
diff --git a/components/account/home/ApiKeys.vue b/components/account/home/ApiKeys.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { RuiButton } from '@rotki/ui-library';
 import { storeToRefs } from 'pinia';
 import { useMainStore } from '~/store';
 
@@ -47,13 +48,16 @@ const css = useCssModule();
  <CopyButton :class="css.button" :model-value="apiSecret" />
  </div>
  </div>
- <ActionButton
- :class="css.actionButton"
- primary
- small
- :text="hasApiKeys ? 'Regenerate' : 'Generate'"
+ <RuiButton
+ variant="outlined"
+ size="lg"
+ class="uppercase outline-2 mt-3"
+ rounded
+ color="primary"
  @click="regenerateKeys()"
- />
+ >
+ {{ hasApiKeys ? 'Regenerate' : 'Generate' }}
+ </RuiButton>
  </CardContainer>
 </template>
 
@@ -82,10 +86,6 @@ const css = useCssModule();
  @apply ml-3 mt-1 mr-0 mb-0;
 }
 
-.actionButton {
- @apply mt-3;
-}
-
 .heading {
  @apply my-4;
 }

diff --git a/components/account/home/CancelSubscription.vue b/components/account/home/CancelSubscription.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { RuiButton } from '@rotki/ui-library';
 import { type Subscription } from '~/types';
 import { useMainStore } from '~/store';
 
@@ -41,11 +42,14 @@ const css = useCssModule();
  <li>
  Did you know that as a premium user by providing your Github
  username you have priority for all issues reported in our
- <ExternalLink
- no-ref
- text="bug tracker"
- url="https://github.com/rotki/rotki/issues"
- />
+ <ButtonLink
+ inline
+ color="primary"
+ external
+ to="https://github.com/rotki/rotki/issues"
+ >
+ bug tracker
+ </ButtonLink>
  ? The same applies to any feature requests.
  </li>
  <li>
@@ -76,12 +80,27 @@ const css = useCssModule();
  </p>
 
  <div :class="css.buttons">
- <ActionButton filled small @click="confirm = false">
+ <RuiButton
+ variant="default"
+ size="lg"
+ class="uppercase"
+ rounded
+ color="primary"
+ @click="confirm = false"
+ >
  No don't cancel
- </ActionButton>
- <ActionButton primary small warning @click="cancelSubscription()">
+ </RuiButton>
+
+ <RuiButton
+ variant="outlined"
+ size="lg"
+ class="uppercase outline-2"
+ rounded
+ color="warning"
+ @click="cancelSubscription()"
+ >
  Yes, cancel my subscription
- </ActionButton>
+ </RuiButton>
  </div>
  </div>
  </ModalDialog>
@@ -114,10 +133,6 @@ const css = useCssModule();
 }
 
 .buttons {
- @apply flex flex-row mt-4 justify-end;
-
- button:first-child {
- @apply mr-2;
- }
+ @apply flex flex-row mt-4 justify-end space-x-2;
 }
 </style>
diff --git a/components/account/home/ChangePassword.vue b/components/account/home/ChangePassword.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { RuiButton } from '@rotki/ui-library';
 import { useVuelidate } from '@vuelidate/core';
 import { minLength, required, sameAs } from '@vuelidate/validators';
 import { storeToRefs } from 'pinia';
@@ -113,17 +114,18 @@ const css = useCssModule();
  />
 
  <div :class="css.row">
- <ActionButton
- :class="css.confirm"
+ <RuiButton
  :disabled="v$.$invalid"
+ variant="outlined"
+ size="lg"
+ class="uppercase outline-2 mt-4"
  :loading="loading"
- primary
- small
- text="Change Password"
+ rounded
+ color="primary"
  @click="changePassword()"
  >
- <SpinnerIcon v-if="loading" class="animate-spin" />
- </ActionButton>
+ Change Password
+ </RuiButton>
  <span v-if="success" :class="css.success">
  <CheckMarkIcon /> Your password has been changed.
  </span>
@@ -132,10 +134,6 @@ const css = useCssModule();
 </template>
 
 <style lang="scss" module>
-.confirm {
- @apply mt-4;
-}
-
 .row {
  @apply flex-row flex;
 }

diff --git a/components/account/home/DangerZone.vue b/components/account/home/DangerZone.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { RuiButton } from '@rotki/ui-library';
 import { storeToRefs } from 'pinia';
 import { useMainStore } from '~/store';
 import { type ActionResult } from '~/types/common';
@@ -45,14 +46,17 @@ const css = useCssModule();
  You cannot delete your account while you have an active subscription.
  </p>
 
- <ActionButton
+ <RuiButton
  :disabled="isSubscriber"
- primary
- small
- text="Delete My Account"
- warning
+ variant="outlined"
+ size="lg"
+ class="uppercase outline-2"
+ rounded
+ color="warning"
  @click="confirm = true"
- />
+ >
+ Delete My Account
+ </RuiButton>
 
  <ModalDialog v-model="confirm" padding="1rem">
  <div :class="css.title">Delete Account</div>
@@ -69,15 +73,26 @@ const css = useCssModule();
  <InputField id="user-confirm" v-model="usernameConfirmation" />
 
  <div :class="css.buttons">
- <ActionButton filled small text="Cancel" @click="confirm = false" />
- <ActionButton
- :disabled="username !== usernameConfirmation"
- primary
- small
- text="Confirm"
- warning
+ <RuiButton
+ variant="default"
+ size="lg"
+ class="uppercase"
+ rounded
+ color="warning"
+ @click="confirm = false"
+ >
+ Cancel
+ </RuiButton>
+ <RuiButton
+ variant="outlined"
+ size="lg"
+ class="uppercase outline-2"
+ rounded
+ color="warning"
  @click="deleteAccount()"
- />
+ >
+ Confirm
+ </RuiButton>
  </div>
  </ModalDialog>
  <ErrorNotification :visible="!!error">