From e4f0c8230f244697917711a155d780d7a1681e65 Mon Sep 17 00:00:00 2001
From: lukicenturi <lukicenturi@gmail.com>
Date: Fri, 21 Jul 2023 16:57:53 +0700
Subject: [PATCH] refactor: update button and link

---
 components/HeroArea.vue                       |  16 +-
 components/NavigationMenu.vue                 |  74 ++++------
 .../account/activation/AccountActivate.vue    |   2 +-
 .../account/home/AccountInformation.vue       |  20 ++-
 components/account/home/ApiKeys.vue           |  20 +--
 .../account/home/CancelSubscription.vue       |  43 ++++--
 components/account/home/ChangePassword.vue    |  20 ++-
 components/account/home/DangerZone.vue        |  43 ++++--
 components/account/login/LoginForm.vue        |  30 ++--
 .../account/password/PasswordChanged.vue      |   2 +-
 components/account/password/PasswordForm.vue  |  15 +-
 components/account/password/PasswordReset.vue |  19 ++-
 components/account/signup/SignupForm.vue      |  43 +++---
 components/checkout/CheckIcon.vue             |   8 +-
 components/checkout/SelectionButton.vue       |  15 +-
 components/checkout/plan/ChangePlanDialog.vue |  12 +-
 components/checkout/plan/SelectablePlan.vue   |   2 +-
 components/common/ActionButton.vue            | 137 ------------------
 components/common/ButtonLink.vue              |  43 ++++++
 components/common/ExternalLink.vue            |  36 -----
 components/download/DownloadButton.vue        |  14 +-
 components/features/details/DefiProtocols.vue |   9 +-
 .../details/SupportedExchangeDetails.vue      |   9 +-
 components/footer/FooterIconLinks.vue         |  16 +-
 components/footer/FooterLegalese.vue          |  36 ++---
 components/header/PageHeader.vue              |  33 ++++-
 components/plans/blocks/PlanBox.vue           |  14 +-
 components/plans/details/CustomPlan.vue       |  12 +-
 components/premium/details/GetPremium.vue     |  41 ++----
 components/products/ProductsPage.vue          |  13 +-
 components/products/SubscribeNowButton.vue    |  31 ++--
 error.vue                                     |  19 ++-
 plugins/ui-library.ts                         |   6 +-
 33 files changed, 398 insertions(+), 455 deletions(-)
 delete mode 100644 components/common/ActionButton.vue
 create mode 100644 components/common/ButtonLink.vue
 delete mode 100644 components/common/ExternalLink.vue

diff --git a/components/HeroArea.vue b/components/HeroArea.vue
index ea67571f..6f9b0883 100644
--- 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
index 51c3f091..5b20b46e 100644
--- 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
index a034d53f..b7d5b172 100644
--- 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
index 7efa6579..df0ffc24 100644
--- 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,16 +204,17 @@ 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>
 
@@ -220,8 +222,4 @@ const css = useCssModule();
 .info {
   @apply mt-8;
 }
-
-.confirm {
-  @apply mt-4;
-}
 </style>
diff --git a/components/account/home/ApiKeys.vue b/components/account/home/ApiKeys.vue
index b04354cb..55497de7 100644
--- 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
index 3de6770f..6599c3b9 100644
--- 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
index 6aba131b..3e625974 100644
--- 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
index 7cdd2d19..87b85838 100644
--- 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">
diff --git a/components/account/login/LoginForm.vue b/components/account/login/LoginForm.vue
index 26f5ca70..5056da60 100644
--- a/components/account/login/LoginForm.vue
+++ b/components/account/login/LoginForm.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { RuiButton } from '@rotki/ui-library';
 import { useMainStore } from '~/store';
 
 const props = withDefaults(defineProps<{ modal?: boolean }>(), {
@@ -82,30 +83,29 @@ const css = useCssModule();
     </div>
 
     <div :class="css.buttonContainer">
-      <ActionButton
-        :class="css.button"
+      <RuiButton
         :disabled="!valid"
-        primary
-        small
-        text="Sign in"
+        variant="default"
+        size="lg"
+        class="w-full"
+        color="primary"
         @click="performLogin()"
-      />
+      >
+        Sign in
+      </RuiButton>
     </div>
 
     <div :class="css.reset">
-      <ExternalLink same-tab text="Forgot password?" url="/password/recover" />
+      <ButtonLink to="/password/recover" color="primary">
+        Forgot password?
+      </ButtonLink>
     </div>
 
     <div :class="css.divider" />
 
     <div :class="css.create">
       First time premium?
-      <ExternalLink
-        :class="css.signup"
-        same-tab
-        text="Sign up now"
-        url="/signup"
-      />
+      <ButtonLink to="/signup" inline color="primary"> Sign up now </ButtonLink>
     </div>
   </BoxContainer>
 </template>
@@ -118,10 +118,6 @@ const css = useCssModule();
   @apply flex flex-row align-middle justify-center mt-8;
 }
 
-.button {
-  width: 288px;
-}
-
 .reset {
   @apply flex flex-row justify-center text-rui-primary focus:text-yellow-800 my-6;
 
diff --git a/components/account/password/PasswordChanged.vue b/components/account/password/PasswordChanged.vue
index 27c92fcf..ef5b9e2a 100644
--- a/components/account/password/PasswordChanged.vue
+++ b/components/account/password/PasswordChanged.vue
@@ -5,7 +5,7 @@
       <template #header>Password changed.</template>
       <div>
         Your password has been changed. Go to your
-        <ExternalLink same-tab text="account" url="/home" />.
+        <ButtonLink to="/home" inline color="primary">account</ButtonLink>.
       </div>
     </UserActionMessage>
   </PageContainer>
diff --git a/components/account/password/PasswordForm.vue b/components/account/password/PasswordForm.vue
index 64315f1e..ec17cbdd 100644
--- a/components/account/password/PasswordForm.vue
+++ b/components/account/password/PasswordForm.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { RuiButton } from '@rotki/ui-library';
 import { useVuelidate } from '@vuelidate/core';
 import { email, required } from '@vuelidate/validators';
 import { FetchError } from 'ofetch';
@@ -83,17 +84,17 @@ const css = useCssModule();
           @captcha-id="setCaptchaId($event)"
         />
 
-        <ActionButton
-          :class="css.button"
+        <RuiButton
           :disabled="v$.$invalid || loading"
           :loading="loading"
-          primary
-          small
-          text="Submit"
+          variant="default"
+          size="lg"
+          class="w-full"
+          color="primary"
           @click="reset()"
         >
-          <SpinnerIcon v-if="loading" class="animate-spin" />
-        </ActionButton>
+          Submit
+        </RuiButton>
       </BoxContainer>
     </div>
   </PageContainer>
diff --git a/components/account/password/PasswordReset.vue b/components/account/password/PasswordReset.vue
index 740dcbec..371035eb 100644
--- a/components/account/password/PasswordReset.vue
+++ b/components/account/password/PasswordReset.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 { set } from '@vueuse/core';
@@ -153,14 +154,16 @@ const css = useCssModule();
           autocomplete="new-password"
         />
         <div :class="css.buttonWrapper">
-          <ActionButton
-            :class="css.button"
+          <RuiButton
             :disabled="!valid"
-            primary
-            small
-            text="Submit"
+            variant="default"
+            size="lg"
+            class="w-full mt-16"
+            color="primary"
             @click="submit()"
-          />
+          >
+            Submit
+          </RuiButton>
         </div>
       </BoxContainer>
     </div>
@@ -168,10 +171,6 @@ const css = useCssModule();
 </template>
 
 <style lang="scss" module>
-.button {
-  @apply mt-16;
-}
-
 .buttonWrapper {
   @apply flex flex-row align-middle justify-center;
 }
diff --git a/components/account/signup/SignupForm.vue b/components/account/signup/SignupForm.vue
index 2da8738e..d5b924c4 100644
--- a/components/account/signup/SignupForm.vue
+++ b/components/account/signup/SignupForm.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { RuiButton } from '@rotki/ui-library';
 import {
   email,
   helpers,
@@ -130,16 +131,21 @@ const css = useCssModule();
         <div :class="css.hint">
           <span :class="css.important">Important</span> Note: Creating an
           account in rotki.com is only needed to purchase a
-          <ExternalLink same-tab text="premium subscription" url="/products" />
+          <ButtonLink to="/products" inline color="primary">
+            premium subscription
+          </ButtonLink>
           Rotki is a local application and the account you create when you use
           it is stored on your computer. This is not the same account as premium
           and credentials for one account don't work for the other. To use Rotki
           simply
-          <ExternalLink
-            noreferrer
-            text="download"
-            url="https://github.com/rotki/rotki/releases/latest"
-          />
+          <ButtonLink
+            inline
+            color="primary"
+            external
+            to="/https://github.com/rotki/rotki/releases/latest"
+          >
+            download
+          </ButtonLink>
           and run it. Proceed only if you intend to purchase premium and unlock
           the premium features of the application.
         </div>
@@ -318,22 +324,27 @@ const css = useCssModule();
           />
           <span :class="css.terms">
             I have read and agreed to the
-            <ExternalLink text="Terms of Service" url="/tos" />
+            <ButtonLink inline color="primary" to="/tos">
+              Terms of Service
+            </ButtonLink>
             and the
-            <ExternalLink text="Privacy Policy" url="/privacy-policy" />
+            <ButtonLink inline color="primary" to="/privacy-policy">
+              Privacy Policy
+            </ButtonLink>
           </span>
         </label>
 
-        <ActionButton
-          :class="css.button"
+        <RuiButton
           :disabled="!termsAccepted || !recaptchaPassed || loading"
           :loading="loading"
-          primary
-          text="Create Account"
+          variant="default"
+          size="lg"
+          class="w-full mt-12"
+          color="primary"
           @click="signup(state)"
         >
-          <SpinnerIcon v-if="loading" class="animate-spin" />
-        </ActionButton>
+          Create Account
+        </RuiButton>
       </div>
     </div>
   </PageContainer>
@@ -404,10 +415,6 @@ const css = useCssModule();
   color: #808080;
 }
 
-.button {
-  margin-top: 48px;
-}
-
 .recaptcha {
   @apply mt-12;
 }
diff --git a/components/checkout/CheckIcon.vue b/components/checkout/CheckIcon.vue
index 3ea874bf..8ac0dd7b 100644
--- a/components/checkout/CheckIcon.vue
+++ b/components/checkout/CheckIcon.vue
@@ -1,5 +1,9 @@
 <template>
-  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    class="text-rui-primary"
+  >
     <g id="check" transform="translate(-684 -281)">
       <rect
         data-name="Rectangle 6"
@@ -12,7 +16,7 @@
         <path
           d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm-.957,13.393a.718.718,0,0,1-.979-.029L6.493,11.793l1.014-1.014,3.064,3.1L16.5,8.607l.943,1.071Z"
           data-name="Path 75"
-          fill="#da4e24"
+          fill="currentColor"
         />
       </g>
     </g>
diff --git a/components/checkout/SelectionButton.vue b/components/checkout/SelectionButton.vue
index 7968af1d..09b1cf63 100644
--- a/components/checkout/SelectionButton.vue
+++ b/components/checkout/SelectionButton.vue
@@ -39,8 +39,6 @@ const css = useCssModule();
 </template>
 
 <style lang="scss" module>
-$color: #da4e24;
-
 .text {
   @apply font-bold;
 
@@ -49,7 +47,7 @@ $color: #da4e24;
   letter-spacing: 0;
 
   &:not(.selected) {
-    color: $color;
+    @apply text-rui-primary;
   }
 
   &.selected {
@@ -59,8 +57,7 @@ $color: #da4e24;
 
 .button {
   background: 0 0 no-repeat padding-box;
-  border: 1px solid $color;
-  @apply relative overflow-hidden rounded-full py-1.5 px-4;
+  @apply relative overflow-hidden rounded-full py-1.5 px-4 border border-rui-primary;
 
   &::after {
     content: '';
@@ -89,9 +86,7 @@ $color: #da4e24;
   }
 
   &.selected {
-    background-color: $color;
-
-    @apply hover:scale-100;
+    @apply hover:scale-100 bg-rui-primary;
 
     &::after {
       content: unset;
@@ -99,9 +94,7 @@ $color: #da4e24;
   }
 
   &:focus {
-    @apply outline-none;
-
-    color: rgba($color, 0.7);
+    @apply outline-none text-rui-primary-lighter;
   }
 }
 </style>
diff --git a/components/checkout/plan/ChangePlanDialog.vue b/components/checkout/plan/ChangePlanDialog.vue
index dd03110d..fad6f454 100644
--- a/components/checkout/plan/ChangePlanDialog.vue
+++ b/components/checkout/plan/ChangePlanDialog.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { RuiButton } from '@rotki/ui-library';
 import { get, set, toRefs } from '@vueuse/core';
 import { storeToRefs } from 'pinia';
 import { type ComputedRef } from 'vue';
@@ -80,7 +81,16 @@ const css = useCssModule();
         </CustomCheckbox>
       </div>
       <div :class="css.buttons">
-        <ActionButton text="Cancel" primary small @click="cancel()" />
+        <RuiButton
+          variant="outlined"
+          size="lg"
+          class="uppercase outline-2"
+          rounded
+          color="primary"
+          @click="cancel()"
+        >
+          Cancel
+        </RuiButton>
       </div>
     </div>
   </ModalDialog>
diff --git a/components/checkout/plan/SelectablePlan.vue b/components/checkout/plan/SelectablePlan.vue
index fb665e83..41bdee3f 100644
--- a/components/checkout/plan/SelectablePlan.vue
+++ b/components/checkout/plan/SelectablePlan.vue
@@ -86,7 +86,7 @@ const css = useCssModule();
 
   &.selected {
     background-color: #fff;
-    border-color: #da4e24;
+    @apply border-rui-primary;
     box-shadow: 0 4px 8px #0003;
   }
 
diff --git a/components/common/ActionButton.vue b/components/common/ActionButton.vue
deleted file mode 100644
index c163c46c..00000000
--- a/components/common/ActionButton.vue
+++ /dev/null
@@ -1,137 +0,0 @@
-<script setup lang="ts">
-withDefaults(
-  defineProps<{
-    text?: string | null;
-    primary?: boolean;
-    filled?: boolean;
-    href?: string;
-    disabled?: boolean;
-    small?: boolean;
-    loading?: boolean;
-    warning?: boolean;
-  }>(),
-  {
-    text: null,
-    primary: false,
-    filled: false,
-    disabled: false,
-    small: false,
-    loading: false,
-    warning: false,
-    href: '',
-  },
-);
-
-const emit = defineEmits<{
-  (e: 'click'): void;
-}>();
-
-const css = useCssModule();
-</script>
-
-<template>
-  <button
-    :class="{
-      [css.button]: true,
-      [css.loading]: loading,
-      [css.large]: !small,
-      [css.primary]: primary,
-      [css.secondary]: !primary,
-      [css.filled]: filled,
-      [css.small]: small,
-      [css.warning]: warning,
-      'cursor-not-allowed': loading,
-    }"
-    :disabled="disabled"
-    @click="emit('click')"
-  >
-    <span :class="css.row">
-      <slot />
-      {{ text }}
-    </span>
-  </button>
-</template>
-
-<style lang="scss" module>
-@import '@/assets/css/media.scss';
-@import '@/assets/css/main.scss';
-
-.button {
-  @apply relative overflow-hidden transition transform hover:scale-110 font-bold;
-
-  &::after {
-    content: '';
-    width: 300px;
-    height: 300px;
-    @apply absolute z-10 left-1/2 top-1/2 bg-black bg-opacity-10 transform -translate-x-1/2 -translate-y-1/2 transition-all duration-300 scale-0 rounded-full;
-  }
-
-  &:hover::after {
-    @apply scale-100;
-  }
-
-  &:disabled {
-    @apply hover:scale-100;
-
-    &::after {
-      content: unset;
-    }
-  }
-}
-
-.small {
-  @apply rounded focus:outline-none px-4 bg-rui-primary-darker font-bold;
-
-  $button-height: 48px;
-
-  height: $button-height !important;
-
-  @include text-size(16px, 19px);
-
-  @include for-size(phone-only) {
-    height: $button-height * $mobile-button-percentage;
-  }
-}
-
-.large {
-  @apply uppercase rounded-full border-2 focus:outline-none focus:ring-1 focus:ring-rui-primary focus:ring-opacity-75;
-
-  $button-height: 65px;
-  $button-width: 275px;
-
-  height: $button-height;
-  width: $button-width;
-  @include text-size(18px, 32px);
-
-  @include for-size(phone-only) {
-    height: $button-height * $mobile-button-percentage;
-    width: $button-width * $mobile-button-percentage;
-  }
-}
-
-.large:disabled,
-.small:disabled {
-  @apply bg-rui-grey-400 hover:bg-rui-grey-400;
-}
-
-.loading:disabled,
-.primary {
-  @apply text-white bg-rui-primary;
-}
-
-.warning {
-  @apply text-white bg-red-600 hover:bg-red-500;
-}
-
-.secondary {
-  @apply text-rui-primary border-rui-primary hover:bg-rui-grey-100;
-}
-
-.filled {
-  @apply text-rui-primary border-transparent hover:bg-rui-grey-100 bg-white;
-}
-
-.row {
-  @apply inline-flex items-center align-middle relative z-20;
-}
-</style>
diff --git a/components/common/ButtonLink.vue b/components/common/ButtonLink.vue
new file mode 100644
index 00000000..dabad8bd
--- /dev/null
+++ b/components/common/ButtonLink.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { RuiButton } from '@rotki/ui-library';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+withDefaults(
+  defineProps<{
+    to: string;
+    external?: boolean;
+    inline?: boolean;
+  }>(),
+  {
+    external: false,
+    inline: false,
+  },
+);
+
+const attrs = useAttrs();
+</script>
+
+<template>
+  <NuxtLink
+    class="inline-flex"
+    :href="external ? to : undefined"
+    :to="external ? undefined : to"
+    :target="external ? '_blank' : '_self'"
+    :rel="external ? 'noreferrer' : null"
+  >
+    <RuiButton
+      v-bind="{ variant: 'text', ...attrs }"
+      :class="{ ['inline-flex py-0 !px-1 !text-[1em]']: inline }"
+    >
+      <slot>
+        {{ to }}
+      </slot>
+      <template #append>
+        <slot name="append" />
+      </template>
+    </RuiButton>
+  </NuxtLink>
+</template>
diff --git a/components/common/ExternalLink.vue b/components/common/ExternalLink.vue
deleted file mode 100644
index 47462369..00000000
--- a/components/common/ExternalLink.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import { RuiButton } from '@rotki/ui-library';
-
-const props = withDefaults(
-  defineProps<{
-    url: string;
-    text?: string;
-    sameTab?: boolean;
-    noRef?: boolean;
-  }>(),
-  {
-    text: '',
-    sameTab: false,
-    noRef: false,
-  },
-);
-
-const { text, url } = toRefs(props);
-const display = computed(() => (text.value ? text.value : url.value));
-
-const attrs = useAttrs();
-</script>
-
-<template>
-  <NuxtLink
-    :href="url"
-    :target="sameTab ? '_self' : '_blank'"
-    :rel="noRef ? 'noreferrer' : null"
-  >
-    <RuiButton v-bind="attrs" variant="text">
-      <slot>
-        {{ display }}
-      </slot>
-    </RuiButton>
-  </NuxtLink>
-</template>
diff --git a/components/download/DownloadButton.vue b/components/download/DownloadButton.vue
index a160f0e4..ff22fad3 100644
--- a/components/download/DownloadButton.vue
+++ b/components/download/DownloadButton.vue
@@ -1,9 +1,21 @@
 <script setup lang="ts">
+import { RuiButton } from '@rotki/ui-library';
 const emit = defineEmits<{ (e: 'click'): void }>();
 
 const { t } = useI18n();
 </script>
 
 <template>
-  <ActionButton primary :text="t('actions.download')" @click="emit('click')" />
+  <div>
+    <RuiButton
+      variant="default"
+      size="lg"
+      class="!py-4 !px-10 !text-xl uppercase"
+      rounded
+      color="primary"
+      @click="emit('click')"
+    >
+      {{ t('actions.download') }}
+    </RuiButton>
+  </div>
 </template>
diff --git a/components/features/details/DefiProtocols.vue b/components/features/details/DefiProtocols.vue
index 8bd53da5..e800f361 100644
--- a/components/features/details/DefiProtocols.vue
+++ b/components/features/details/DefiProtocols.vue
@@ -25,12 +25,9 @@ const css = useCssModule();
     <div :class="css['list-container']">
       <ItemList :list="defi" />
     </div>
-    <ExternalLink
-      :class="css.link"
-      same-tab
-      :text="t('home.more_information')"
-      url="/supported#defi"
-    />
+    <ButtonLink :class="css.link" to="/supported#defi">
+      {{ t('home.more_information') }}
+    </ButtonLink>
   </FeatureContainer>
 </template>
 
diff --git a/components/features/details/SupportedExchangeDetails.vue b/components/features/details/SupportedExchangeDetails.vue
index 21ce8834..7d410fb5 100644
--- a/components/features/details/SupportedExchangeDetails.vue
+++ b/components/features/details/SupportedExchangeDetails.vue
@@ -24,12 +24,9 @@ const { t } = useI18n();
       <ItemList :list="column1" />
       <ItemList :list="column2" />
     </div>
-    <ExternalLink
-      :class="css.link"
-      same-tab
-      :text="t('home.more_information')"
-      url="/supported"
-    />
+    <ButtonLink :class="css.link" to="/supported">
+      {{ t('home.more_information') }}
+    </ButtonLink>
   </FeatureContainer>
 </template>
 
diff --git a/components/footer/FooterIconLinks.vue b/components/footer/FooterIconLinks.vue
index 166c2702..961d328c 100644
--- a/components/footer/FooterIconLinks.vue
+++ b/components/footer/FooterIconLinks.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { RuiButton, RuiIcon } from '@rotki/ui-library';
+import { RuiIcon } from '@rotki/ui-library';
 
 const menus = [
   {
@@ -32,14 +32,12 @@ const menus = [
 <template>
   <div class="flex flex-wrap items-center space-x-4">
     <div v-for="menu in menus" :key="menu.title">
-      <a :href="menu.href" rel="noreferrer" target="_blank" :title="menu.title">
-        <RuiButton size="lg" variant="text">
-          <span class="flex items-center">
-            <span v-if="menu.showText" class="mr-4">{{ menu.title }}</span>
-            <RuiIcon :name="menu.icon" />
-          </span>
-        </RuiButton>
-      </a>
+      <ButtonLink size="lg" :to="menu.href" :title="menu.title" external>
+        <span class="flex space-x-2 items-center">
+          <span v-if="menu.showText">{{ menu.title }}</span>
+          <RuiIcon :name="menu.icon" />
+        </span>
+      </ButtonLink>
     </div>
   </div>
 </template>
diff --git a/components/footer/FooterLegalese.vue b/components/footer/FooterLegalese.vue
index d062fb5a..d699197a 100644
--- a/components/footer/FooterLegalese.vue
+++ b/components/footer/FooterLegalese.vue
@@ -4,29 +4,19 @@ const { t } = useI18n();
 
 <template>
   <div class="flex flex-wrap justify-center space-x-2">
-    <ExternalLink
+    <ButtonLink size="lg" to="/impressum">
+      {{ t('footer_legalese.impressum') }}
+    </ButtonLink>
+    <ButtonLink size="lg" to="/privacy-policy">
+      {{ t('footer_legalese.privacy_policy') }}
+    </ButtonLink>
+    <ButtonLink size="lg" to="/tos">{{ t('footer_legalese.tos') }}</ButtonLink>
+    <ButtonLink
       size="lg"
-      same-tab
-      :text="t('footer_legalese.impressum')"
-      url="/impressum"
-    />
-    <ExternalLink
-      size="lg"
-      same-tab
-      :text="t('footer_legalese.privacy_policy')"
-      url="/privacy-policy"
-    />
-    <ExternalLink
-      size="lg"
-      same-tab
-      :text="t('footer_legalese.tos')"
-      url="/tos"
-    />
-    <ExternalLink
-      size="lg"
-      no-ref
-      :text="t('footer_legalese.faq')"
-      url="https://rotki.readthedocs.io/en/latest/faq.html"
-    />
+      to="https://rotki.readthedocs.io/en/latest/faq.html"
+      external
+    >
+      {{ t('footer_legalese.faq') }}
+    </ButtonLink>
   </div>
 </template>
diff --git a/components/header/PageHeader.vue b/components/header/PageHeader.vue
index e3dcc980..5baa8300 100644
--- a/components/header/PageHeader.vue
+++ b/components/header/PageHeader.vue
@@ -1,6 +1,16 @@
 <script setup lang="ts">
-import { RuiButton, RuiLogo } from '@rotki/ui-library';
+import { RuiButton, RuiIcon, RuiLogo } from '@rotki/ui-library';
+import { storeToRefs } from 'pinia';
+import { useMainStore } from '~/store';
 const { t } = useI18n();
+
+const store = useMainStore();
+const { authenticated } = storeToRefs(store);
+
+const logout = async () => {
+  await store.logout(true);
+  await navigateTo('/login');
+};
 </script>
 
 <template>
@@ -14,11 +24,24 @@ const { t } = useI18n();
       <div>
         <NavigationMenu />
       </div>
-      <NuxtLink to="/home">
-        <RuiButton rounded color="primary">
-          {{ t('page_header.manage_premium') }}
+      <div class="flex items-center space-x-2">
+        <NuxtLink to="/home">
+          <RuiButton rounded color="primary">
+            {{ t('page_header.manage_premium') }}
+          </RuiButton>
+        </NuxtLink>
+        <RuiButton
+          v-if="authenticated"
+          title="Logout"
+          color="primary"
+          variant="text"
+          icon
+          class="!p-2"
+          @click="logout()"
+        >
+          <RuiIcon name="logout-box-r-line" />
         </RuiButton>
-      </NuxtLink>
+      </div>
     </div>
   </div>
 </template>
diff --git a/components/plans/blocks/PlanBox.vue b/components/plans/blocks/PlanBox.vue
index cd821c5a..7feb3148 100644
--- a/components/plans/blocks/PlanBox.vue
+++ b/components/plans/blocks/PlanBox.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { RuiButton } from '@rotki/ui-library';
 import { get } from '@vueuse/core';
 
 const props = defineProps<{
@@ -29,8 +30,17 @@ const css = useCssModule();
     </div>
     <div :class="css.description">
       <slot />
-      <div :class="css.button">
-        <ActionButton :text="action" @click="buttonClicked()" />
+      <div :class="css.button" class="flex justify-center">
+        <RuiButton
+          variant="outlined"
+          size="lg"
+          class="!py-4 !px-10 !text-xl uppercase outline-2"
+          rounded
+          color="primary"
+          @click="buttonClicked()"
+        >
+          {{ action }}
+        </RuiButton>
       </div>
     </div>
   </div>
diff --git a/components/plans/details/CustomPlan.vue b/components/plans/details/CustomPlan.vue
index 29e62a34..c0d3f761 100644
--- a/components/plans/details/CustomPlan.vue
+++ b/components/plans/details/CustomPlan.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { RuiButton } from '@rotki/ui-library';
+
 const { t } = useI18n();
 const css = useCssModule();
 </script>
@@ -19,7 +21,15 @@ const css = useCssModule();
               {{ t('home.plans.details.custom.subtitle') }}
             </div>
             <div :class="css.button">
-              <ActionButton :text="t('actions.get_in_touch')" />
+              <RuiButton
+                variant="outlined"
+                size="lg"
+                class="!py-4 !px-10 !text-xl uppercase outline-2"
+                rounded
+                color="primary"
+              >
+                {{ t('actions.get_in_touch') }}
+              </RuiButton>
             </div>
           </div>
         </div>
diff --git a/components/premium/details/GetPremium.vue b/components/premium/details/GetPremium.vue
index 2da2edd8..1d51473b 100644
--- a/components/premium/details/GetPremium.vue
+++ b/components/premium/details/GetPremium.vue
@@ -1,34 +1,19 @@
 <script setup lang="ts">
 const { t } = useI18n();
-const css = useCssModule();
 </script>
 
 <template>
-  <div :class="css.container">
-    <ActionButton
-      filled
-      :text="t('actions.get_premium')"
-      @click="navigateTo('/products')"
-    />
-  </div>
+  <PremiumFeature>
+    <div class="mt-20 flex justify-center flex-col">
+      <ButtonLink
+        to="/products"
+        variant="default"
+        size="lg"
+        class="text-rui-primary !py-4 !px-10 !text-xl uppercase"
+        rounded
+      >
+        {{ t('actions.get_premium') }}
+      </ButtonLink>
+    </div>
+  </PremiumFeature>
 </template>
-
-<style lang="scss" module>
-@import '@/assets/css/media.scss';
-@import '@/assets/css/main.scss';
-
-.container {
-  @apply flex flex-col align-middle self-center;
-
-  margin-top: 105px;
-
-  @include for-size(phone-only) {
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  @include for-size(tablet-landscape-up) {
-    width: 42%;
-  }
-}
-</style>
diff --git a/components/products/ProductsPage.vue b/components/products/ProductsPage.vue
index 544628a2..c02d2efb 100644
--- a/components/products/ProductsPage.vue
+++ b/components/products/ProductsPage.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-const goToProductsDetail = () => navigateTo('/products/details');
-
 const css = useCssModule();
 </script>
 
@@ -80,9 +78,16 @@ const css = useCssModule();
           </ProductDescription>
           <div :class="css.actions">
             <SubscribeNowButton />
-            <ActionButton @click="goToProductsDetail()">
+            <ButtonLink
+              variant="outlined"
+              size="lg"
+              class="!py-4 !px-10 !text-xl uppercase outline-2"
+              rounded
+              color="primary"
+              to="/products/details"
+            >
               More Details
-            </ActionButton>
+            </ButtonLink>
           </div>
         </div>
       </div>
diff --git a/components/products/SubscribeNowButton.vue b/components/products/SubscribeNowButton.vue
index 256e2c4c..493ca224 100644
--- a/components/products/SubscribeNowButton.vue
+++ b/components/products/SubscribeNowButton.vue
@@ -28,26 +28,37 @@ const allowNavigation = computed(() => {
   const { emailConfirmed } = get(account);
   return emailConfirmed;
 });
-
-const goToCheckoutPlan = () => navigateTo('/checkout/plan');
-
-const goToAccount = () => navigateTo('/home');
 </script>
 
 <template>
   <InfoTooltip v-if="!hasActiveSubscription" :disabled="!showTooltip">
     <template #activator>
-      <ActionButton
-        primary
+      <ButtonLink
+        variant="default"
+        size="lg"
+        class="!py-4 !px-10 !text-xl uppercase"
+        rounded
+        filled
+        color="primary"
         :disabled="!allowNavigation"
-        @click="goToCheckoutPlan()"
+        to="/checkout/plan"
       >
         Subscribe now
-      </ActionButton>
+      </ButtonLink>
     </template>
     <span> {{ t('subscription.error.unverified_email') }}</span>
   </InfoTooltip>
-  <ActionButton v-else primary @click="goToAccount()">
+
+  <ButtonLink
+    v-else
+    variant="default"
+    size="lg"
+    class="!py-4 !px-10 !text-xl uppercase"
+    rounded
+    filled
+    color="primary"
+    to="/home"
+  >
     Manage Premium
-  </ActionButton>
+  </ButtonLink>
 </template>
diff --git a/error.vue b/error.vue
index 74e93a4a..6a5164e5 100644
--- a/error.vue
+++ b/error.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { RuiButton } from '@rotki/ui-library';
 import { get } from '@vueuse/core';
 import { commonAttrs, noIndex } from '~/utils/metadata';
 
@@ -26,12 +27,18 @@ useHead(() => ({
     <div v-if="error" :class="css.wrapper">
       <h1 :class="css.title">{{ statusCode }}</h1>
       <p :class="css.subtitle">{{ title }}</p>
-      <ActionButton
-        :text="t('actions.go_back_home')"
-        primary
-        small
-        @click="handleError()"
-      />
+
+      <div class="flex justify-center">
+        <RuiButton
+          variant="default"
+          size="lg"
+          filled
+          color="primary"
+          @click="handleError()"
+        >
+          {{ t('actions.go_back_home') }}
+        </RuiButton>
+      </div>
     </div>
   </PageContainer>
 </template>
diff --git a/plugins/ui-library.ts b/plugins/ui-library.ts
index 9b2a195c..d024f22b 100644
--- a/plugins/ui-library.ts
+++ b/plugins/ui-library.ts
@@ -2,6 +2,7 @@ import {
   RiDiscordLine,
   RiExternalLinkLine,
   RiGithubLine,
+  RiLogoutBoxRLine,
   RiMailSendLine,
   RiTwitterLine,
   RuiPlugin,
@@ -12,11 +13,12 @@ export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.use(RuiPlugin, {
     mode: 'light',
     icons: [
+      RiDiscordLine,
       RiExternalLinkLine,
       RiGithubLine,
-      RiTwitterLine,
-      RiDiscordLine,
+      RiLogoutBoxRLine,
       RiMailSendLine,
+      RiTwitterLine,
     ],
   });
 });