From c45bce36f985a550d7bfad744099b601cb61e449 Mon Sep 17 00:00:00 2001
From: Corentin Thomasset <corentin.thomasset74@gmail.com>
Date: Wed, 19 Apr 2023 21:38:59 +0200
Subject: [PATCH] refactor(ui): getting ride of naive ui buttons

---
 components.d.ts                               |  72 +++++-
 src/components/FavoriteButton.vue             |  14 +-
 src/components/InputCopyable.vue              |   4 +-
 src/components/NavbarButtons.vue              |  49 ++--
 src/components/TextareaCopyable.vue           |   6 +-
 src/layouts/base.layout.vue                   |  65 ++---
 src/pages/404.page.vue                        |   4 +-
 src/pages/About.vue                           |  39 +--
 .../base64-file-converter.vue                 |   6 +-
 .../base64-string-converter.vue               |   4 +-
 .../basic-auth-generator.vue                  |   2 +-
 src/tools/bcrypt/bcrypt.vue                   |   2 +-
 .../benchmark-builder/benchmark-builder.vue   |  28 +-
 .../benchmark-builder/dynamic-values.vue      |  16 +-
 src/tools/bip39-generator/bip39-generator.vue |  12 +-
 src/tools/chronometer/chronometer.vue         |   6 +-
 ...docker-run-to-docker-compose-converter.vue |   2 +-
 src/tools/hmac-generator/hmac-generator.vue   |   2 +-
 src/tools/html-entities/html-entities.vue     |   4 +-
 .../editor/menu-bar-item.vue                  |   8 +-
 .../ipv4-range-expander.vue                   |  10 +-
 .../ipv4-subnet-calculator.vue                |   8 +-
 .../lorem-ipsum-generator.vue                 |   2 +-
 .../mac-address-lookup/mac-address-lookup.vue |   2 +-
 .../otp-code-generator-and-validator.vue      |   6 +-
 .../token-display.vue                         |  17 +-
 .../qr-code-generator/qr-code-generator.vue   |   2 +-
 .../random-port-generator.vue                 |   4 +-
 .../roman-numeral-converter.vue               |   8 +-
 .../rsa-key-pair-generator.vue                |   2 +-
 src/tools/slugify-string/slugify-string.vue   |   2 +-
 .../svg-placeholder-generator.vue             |   6 +-
 .../text-to-nato-alphabet.vue                 |   2 +-
 .../token-generator/token-generator.tool.vue  |   4 +-
 src/tools/url-encoder/url-encoder.vue         |   4 +-
 src/tools/uuid-generator/uuid-generator.vue   |   4 +-
 src/ui/c-button/c-button.theme.ts             | 240 ++++++++++++++++++
 src/ui/c-button/c-button.vue                  | 113 +++++++++
 src/ui/c-link/c-link.theme.ts                 |  39 +++
 src/ui/c-link/c-link.vue                      |  49 ++++
 src/ui/theme/theme.models.ts                  |  13 +
 src/ui/theme/theme.store.ts                   |  20 ++
 src/ui/theme/themes.ts                        |  37 +++
 vite.config.ts                                |   3 +
 44 files changed, 738 insertions(+), 204 deletions(-)
 create mode 100644 src/ui/c-button/c-button.theme.ts
 create mode 100644 src/ui/c-button/c-button.vue
 create mode 100644 src/ui/c-link/c-link.theme.ts
 create mode 100644 src/ui/c-link/c-link.vue
 create mode 100644 src/ui/theme/theme.models.ts
 create mode 100644 src/ui/theme/theme.store.ts
 create mode 100644 src/ui/theme/themes.ts

diff --git a/components.d.ts b/components.d.ts
index caaa50a6..178523dc 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -9,13 +9,62 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    '404.page': typeof import('./src/pages/404.page.vue')['default']
+    About: typeof import('./src/pages/About.vue')['default']
+    App: typeof import('./src/App.vue')['default']
+    'Base.layout': typeof import('./src/layouts/base.layout.vue')['default']
+    Base64FileConverter: typeof import('./src/tools/base64-file-converter/base64-file-converter.vue')['default']
+    Base64StringConverter: typeof import('./src/tools/base64-string-converter/base64-string-converter.vue')['default']
+    BasicAuthGenerator: typeof import('./src/tools/basic-auth-generator/basic-auth-generator.vue')['default']
+    Bcrypt: typeof import('./src/tools/bcrypt/bcrypt.vue')['default']
+    BenchmarkBuilder: typeof import('./src/tools/benchmark-builder/benchmark-builder.vue')['default']
+    Bip39Generator: typeof import('./src/tools/bip39-generator/bip39-generator.vue')['default']
+    CaseConverter: typeof import('./src/tools/case-converter/case-converter.vue')['default']
+    CButton: typeof import('./src/ui/c-button/c-button.vue')['default']
+    ChmodCalculator: typeof import('./src/tools/chmod-calculator/chmod-calculator.vue')['default']
+    Chronometer: typeof import('./src/tools/chronometer/chronometer.vue')['default']
+    CLink: typeof import('./src/ui/c-link/c-link.vue')['default']
     CollapsibleToolMenu: typeof import('./src/components/CollapsibleToolMenu.vue')['default']
+    ColorConverter: typeof import('./src/tools/color-converter/color-converter.vue')['default']
     ColoredCard: typeof import('./src/components/ColoredCard.vue')['default']
+    CopyableIpLike: typeof import('./src/tools/ipv4-subnet-calculator/copyable-ip-like.vue')['default']
+    CrontabGenerator: typeof import('./src/tools/crontab-generator/crontab-generator.vue')['default']
+    DateTimeConverter: typeof import('./src/tools/date-time-converter/date-time-converter.vue')['default']
+    DeviceInformation: typeof import('./src/tools/device-information/device-information.vue')['default']
+    DockerRunToDockerComposeConverter: typeof import('./src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue')['default']
+    DynamicValues: typeof import('./src/tools/benchmark-builder/dynamic-values.vue')['default']
+    Editor: typeof import('./src/tools/html-wysiwyg-editor/editor/editor.vue')['default']
+    Encryption: typeof import('./src/tools/encryption/encryption.vue')['default']
+    EtaCalculator: typeof import('./src/tools/eta-calculator/eta-calculator.vue')['default']
     FavoriteButton: typeof import('./src/components/FavoriteButton.vue')['default']
     FormatTransformer: typeof import('./src/components/FormatTransformer.vue')['default']
+    GitMemo: typeof import('./src/tools/git-memo/git-memo.md')['default']
+    HashText: typeof import('./src/tools/hash-text/hash-text.vue')['default']
+    HmacGenerator: typeof import('./src/tools/hmac-generator/hmac-generator.vue')['default']
+    'Home.page': typeof import('./src/pages/Home.page.vue')['default']
+    HtmlEntities: typeof import('./src/tools/html-entities/html-entities.vue')['default']
+    HtmlWysiwygEditor: typeof import('./src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue')['default']
+    HttpStatusCodes: typeof import('./src/tools/http-status-codes/http-status-codes.vue')['default']
     InputCopyable: typeof import('./src/components/InputCopyable.vue')['default']
+    IntegerBaseConverter: typeof import('./src/tools/integer-base-converter/integer-base-converter.vue')['default']
+    Ipv4AddressConverter: typeof import('./src/tools/ipv4-address-converter/ipv4-address-converter.vue')['default']
+    Ipv4RangeExpander: typeof import('./src/tools/ipv4-range-expander/ipv4-range-expander.vue')['default']
+    Ipv4SubnetCalculator: typeof import('./src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue')['default']
+    Ipv6UlaGenerator: typeof import('./src/tools/ipv6-ula-generator/ipv6-ula-generator.vue')['default']
+    JsonMinify: typeof import('./src/tools/json-minify/json-minify.vue')['default']
+    JsonToYaml: typeof import('./src/tools/json-to-yaml-converter/json-to-yaml.vue')['default']
+    JsonViewer: typeof import('./src/tools/json-viewer/json-viewer.vue')['default']
+    JwtParser: typeof import('./src/tools/jwt-parser/jwt-parser.vue')['default']
+    KeycodeInfo: typeof import('./src/tools/keycode-info/keycode-info.vue')['default']
+    LoremIpsumGenerator: typeof import('./src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue')['default']
+    MacAddressLookup: typeof import('./src/tools/mac-address-lookup/mac-address-lookup.vue')['default']
+    MathEvaluator: typeof import('./src/tools/math-evaluator/math-evaluator.vue')['default']
+    MenuBar: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar.vue')['default']
+    MenuBarItem: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue')['default']
     MenuIconItem: typeof import('./src/components/MenuIconItem.vue')['default']
     MenuLayout: typeof import('./src/components/MenuLayout.vue')['default']
+    MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
+    MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
     NAlert: typeof import('naive-ui')['NAlert']
     NAutoComplete: typeof import('naive-ui')['NAutoComplete']
     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
@@ -37,7 +86,6 @@ declare module '@vue/runtime-core' {
     NH1: typeof import('naive-ui')['NH1']
     NH2: typeof import('naive-ui')['NH2']
     NH3: typeof import('naive-ui')['NH3']
-    NH4: typeof import('naive-ui')['NH4']
     NIcon: typeof import('naive-ui')['NIcon']
     NImage: typeof import('naive-ui')['NImage']
     NInput: typeof import('naive-ui')['NInput']
@@ -50,7 +98,6 @@ declare module '@vue/runtime-core' {
     NP: typeof import('naive-ui')['NP']
     NPageHeader: typeof import('naive-ui')['NPageHeader']
     NProgress: typeof import('naive-ui')['NProgress']
-    NResult: typeof import('naive-ui')['NResult']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSelect: typeof import('naive-ui')['NSelect']
     NSlider: typeof import('naive-ui')['NSlider']
@@ -63,12 +110,33 @@ declare module '@vue/runtime-core' {
     NTooltip: typeof import('naive-ui')['NTooltip']
     NUpload: typeof import('naive-ui')['NUpload']
     NUploadDragger: typeof import('naive-ui')['NUploadDragger']
+    OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
+    QrCodeGenerator: typeof import('./src/tools/qr-code-generator/qr-code-generator.vue')['default']
+    RandomPortGenerator: typeof import('./src/tools/random-port-generator/random-port-generator.vue')['default']
+    ResultRow: typeof import('./src/tools/ipv4-range-expander/result-row.vue')['default']
+    RomanNumeralConverter: typeof import('./src/tools/roman-numeral-converter/roman-numeral-converter.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    RsaKeyPairGenerator: typeof import('./src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue')['default']
     SearchBar: typeof import('./src/components/SearchBar.vue')['default']
     SearchBarItem: typeof import('./src/components/SearchBarItem.vue')['default']
+    SlugifyString: typeof import('./src/tools/slugify-string/slugify-string.vue')['default']
     SpanCopyable: typeof import('./src/components/SpanCopyable.vue')['default']
+    SqlPrettify: typeof import('./src/tools/sql-prettify/sql-prettify.vue')['default']
+    SvgPlaceholderGenerator: typeof import('./src/tools/svg-placeholder-generator/svg-placeholder-generator.vue')['default']
+    TemperatureConverter: typeof import('./src/tools/temperature-converter/temperature-converter.vue')['default']
     TextareaCopyable: typeof import('./src/components/TextareaCopyable.vue')['default']
+    TextStatistics: typeof import('./src/tools/text-statistics/text-statistics.vue')['default']
+    TextToNatoAlphabet: typeof import('./src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue')['default']
+    TokenDisplay: typeof import('./src/tools/otp-code-generator-and-validator/token-display.vue')['default']
+    'TokenGenerator.tool': typeof import('./src/tools/token-generator/token-generator.tool.vue')['default']
+    'Tool.layout': typeof import('./src/layouts/tool.layout.vue')['default']
     ToolCard: typeof import('./src/components/ToolCard.vue')['default']
+    UrlEncoder: typeof import('./src/tools/url-encoder/url-encoder.vue')['default']
+    UrlParser: typeof import('./src/tools/url-parser/url-parser.vue')['default']
+    UserAgentParser: typeof import('./src/tools/user-agent-parser/user-agent-parser.vue')['default']
+    UserAgentResultCards: typeof import('./src/tools/user-agent-parser/user-agent-result-cards.vue')['default']
+    UuidGenerator: typeof import('./src/tools/uuid-generator/uuid-generator.vue')['default']
+    YamlToJson: typeof import('./src/tools/yaml-to-json-converter/yaml-to-json.vue')['default']
   }
 }
diff --git a/src/components/FavoriteButton.vue b/src/components/FavoriteButton.vue
index 4b7f561f..60b2a2b9 100644
--- a/src/components/FavoriteButton.vue
+++ b/src/components/FavoriteButton.vue
@@ -1,11 +1,15 @@
 <template>
   <n-tooltip trigger="hover">
     <template #trigger>
-      <n-button circle quaternary :type="buttonType" :style="{ opacity: isFavorite ? 1 : 0.2 }" @click="toggleFavorite">
-        <template #icon>
-          <n-icon :component="FavoriteFilled" />
-        </template>
-      </n-button>
+      <c-button
+        variant="text"
+        circle
+        :type="buttonType"
+        :style="{ opacity: isFavorite ? 1 : 0.2 }"
+        @click="toggleFavorite"
+      >
+        <n-icon :component="FavoriteFilled" />
+      </c-button>
     </template>
     {{ isFavorite ? 'Remove from favorites' : 'Add to favorites' }}
   </n-tooltip>
diff --git a/src/components/InputCopyable.vue b/src/components/InputCopyable.vue
index 4105abfd..eaf29c81 100644
--- a/src/components/InputCopyable.vue
+++ b/src/components/InputCopyable.vue
@@ -3,9 +3,9 @@
     <template #suffix>
       <n-tooltip trigger="hover">
         <template #trigger>
-          <n-button quaternary circle @click="onCopyClicked">
+          <c-button circle variant="text" @click="onCopyClicked">
             <n-icon :component="ContentCopyFilled" />
-          </n-button>
+          </c-button>
         </template>
         {{ tooltipText }}
       </n-tooltip>
diff --git a/src/components/NavbarButtons.vue b/src/components/NavbarButtons.vue
index 5a1084fe..29d54178 100644
--- a/src/components/NavbarButtons.vue
+++ b/src/components/NavbarButtons.vue
@@ -1,56 +1,50 @@
 <template>
   <n-tooltip trigger="hover">
     <template #trigger>
-      <n-button
-        size="large"
+      <c-button
         circle
-        quaternary
-        tag="a"
+        variant="text"
         href="https://github.com/CorentinTh/it-tools"
-        rel="noopener"
         target="_blank"
+        rel="noopener noreferrer"
         aria-label="IT-Tools' GitHub repository"
       >
         <n-icon size="25" :component="BrandGithub" />
-      </n-button>
+      </c-button>
     </template>
     Github repository
   </n-tooltip>
 
   <n-tooltip trigger="hover">
     <template #trigger>
-      <n-button
-        size="large"
+      <c-button
         circle
-        quaternary
-        tag="a"
+        variant="text"
         href="https://twitter.com/ittoolsdottech"
         rel="noopener"
         target="_blank"
         aria-label="IT Tools' Twitter account"
       >
         <n-icon size="25" :component="BrandTwitter" />
-      </n-button>
+      </c-button>
     </template>
     IT Tools' Twitter account
   </n-tooltip>
 
-  <router-link to="/about" #="{ navigate, href }" custom>
-    <n-tooltip trigger="hover">
-      <template #trigger>
-        <n-button tag="a" :href="href" circle quaternary size="large" aria-label="About" @click="navigate">
-          <n-icon size="25" :component="InfoCircle" />
-        </n-button>
-      </template>
-      About
-    </n-tooltip>
-  </router-link>
   <n-tooltip trigger="hover">
     <template #trigger>
-      <n-button size="large" circle quaternary aria-label="Toggle dark/light mode" @click="isDarkTheme = !isDarkTheme">
+      <c-button circle variant="text" to="/about" aria-label="About">
+        <n-icon size="25" :component="InfoCircle" />
+      </c-button>
+    </template>
+    About
+  </n-tooltip>
+  <n-tooltip trigger="hover">
+    <template #trigger>
+      <c-button circle variant="text" aria-label="Toggle dark/light mode" @click="toggleDarkTheme">
         <n-icon v-if="isDarkTheme" size="25" :component="Sun" />
         <n-icon v-else size="25" :component="Moon" />
-      </n-button>
+      </c-button>
     </template>
     <span v-if="isDarkTheme">Light mode</span>
     <span v-else>Dark mode</span>
@@ -59,11 +53,20 @@
 
 <script setup lang="ts">
 import { useStyleStore } from '@/stores/style.store';
+import { useThemeStore } from '@/ui/theme/theme.store';
 import { BrandGithub, BrandTwitter, InfoCircle, Moon, Sun } from '@vicons/tabler';
 import { toRefs } from 'vue';
 
 const styleStore = useStyleStore();
 const { isDarkTheme } = toRefs(styleStore);
+
+const themeStore = useThemeStore();
+
+function toggleDarkTheme() {
+  isDarkTheme.value = !isDarkTheme.value;
+
+  themeStore.toggleTheme();
+}
 </script>
 
 <style lang="less" scoped>
diff --git a/src/components/TextareaCopyable.vue b/src/components/TextareaCopyable.vue
index 6be5652b..ac4f38f5 100644
--- a/src/components/TextareaCopyable.vue
+++ b/src/components/TextareaCopyable.vue
@@ -13,16 +13,16 @@
       <n-tooltip v-if="value" trigger="hover">
         <template #trigger>
           <div class="copy-button" :class="[copyPlacement]">
-            <n-button circle secondary size="large" @click="onCopyClicked">
+            <c-button circle important:h-10 important:w-10 @click="onCopyClicked">
               <n-icon size="22" :component="Copy" />
-            </n-button>
+            </c-button>
           </div>
         </template>
         <span>{{ tooltipText }}</span>
       </n-tooltip>
     </n-card>
     <n-space v-if="copyPlacement === 'outside'" justify="center" mt-4>
-      <n-button secondary @click="onCopyClicked"> {{ tooltipText }} </n-button>
+      <c-button @click="onCopyClicked"> {{ tooltipText }} </c-button>
     </n-space>
   </div>
 </template>
diff --git a/src/layouts/base.layout.vue b/src/layouts/base.layout.vue
index 1d57a5a9..631f547c 100644
--- a/src/layouts/base.layout.vue
+++ b/src/layouts/base.layout.vue
@@ -53,38 +53,25 @@ const tools = computed<ToolCategory[]>(() => [
           <div>
             IT-Tools
 
-            <n-button
-              text
-              tag="a"
-              target="_blank"
-              rel="noopener"
-              type="primary"
-              depth="3"
-              :href="`https://github.com/CorentinTh/it-tools/tree/v${version}`"
-            >
+            <c-link target="_blank" rel="noopener" :href="`https://github.com/CorentinTh/it-tools/tree/v${version}`">
               v{{ version }}
-            </n-button>
+            </c-link>
 
             <template v-if="commitSha && commitSha.length > 0">
               -
-              <n-button
-                text
-                tag="a"
+              <c-link
                 target="_blank"
                 rel="noopener"
                 type="primary"
-                depth="3"
                 :href="`https://github.com/CorentinTh/it-tools/tree/${commitSha}`"
               >
                 {{ commitSha }}
-              </n-button>
+              </c-link>
             </template>
           </div>
           <div>
             © {{ new Date().getFullYear() }}
-            <n-button text tag="a" target="_blank" rel="noopener" type="primary" href="https://github.com/CorentinTh">
-              Corentin Thomasset
-            </n-button>
+            <c-link target="_blank" rel="noopener" href="https://github.com/CorentinTh"> Corentin Thomasset </c-link>
           </div>
         </div>
       </div>
@@ -92,34 +79,24 @@ const tools = computed<ToolCategory[]>(() => [
 
     <template #content>
       <div class="navigation">
-        <n-button
+        <c-button
           :size="styleStore.isSmallScreen ? 'medium' : 'large'"
           circle
-          quaternary
+          variant="text"
           aria-label="Toggle menu"
           @click="styleStore.isMenuCollapsed = !styleStore.isMenuCollapsed"
         >
           <n-icon size="25" :component="Menu2" />
-        </n-button>
+        </c-button>
 
-        <router-link to="/" #="{ navigate, href }" custom>
-          <n-tooltip trigger="hover">
-            <template #trigger>
-              <n-button
-                tag="a"
-                :href="href"
-                :size="styleStore.isSmallScreen ? 'medium' : 'large'"
-                circle
-                quaternary
-                aria-label="Home"
-                @click="navigate"
-              >
-                <n-icon size="25" :component="Home2" />
-              </n-button>
-            </template>
-            Home
-          </n-tooltip>
-        </router-link>
+        <n-tooltip trigger="hover">
+          <template #trigger>
+            <c-button to="/" circle variant="text" aria-label="Home">
+              <n-icon size="25" :component="Home2" />
+            </c-button>
+          </template>
+          Home
+        </n-tooltip>
 
         <search-bar />
 
@@ -127,10 +104,8 @@ const tools = computed<ToolCategory[]>(() => [
 
         <n-tooltip trigger="hover">
           <template #trigger>
-            <n-button
+            <c-button
               round
-              type="primary"
-              tag="a"
               href="https://www.buymeacoffee.com/cthmsst"
               rel="noopener"
               target="_blank"
@@ -140,7 +115,7 @@ const tools = computed<ToolCategory[]>(() => [
             >
               Buy me a coffee
               <n-icon v-if="!styleStore.isSmallScreen" :component="Heart" ml-2 />
-            </n-button>
+            </c-button>
           </template>
           ❤ Support IT Tools development !
         </n-tooltip>
@@ -165,8 +140,8 @@ const tools = computed<ToolCategory[]>(() => [
 .support-button {
   background: rgb(37, 99, 108);
   background: linear-gradient(48deg, rgba(37, 99, 108, 1) 0%, rgba(59, 149, 111, 1) 60%, rgba(20, 160, 88, 1) 100%);
-  color: #fff;
-  transition: all ease 0.2s;
+  color: #fff !important;
+  transition: padding ease 0.2s !important;
 
   &:hover {
     color: #fff;
diff --git a/src/pages/404.page.vue b/src/pages/404.page.vue
index 4ec1cb46..fb879aa8 100644
--- a/src/pages/404.page.vue
+++ b/src/pages/404.page.vue
@@ -13,8 +13,6 @@ useHead({ title: 'Page not found - IT Tools' });
     <n-text mt-4 block depth="3">Sorry, this page does not seem to exist</n-text>
     <n-text mb-8 block depth="3">Maybe the cache is doing tricky things, try force-refreshing?</n-text>
 
-    <router-link to="/" #="{ navigate, href }" custom>
-      <n-button tag="a" :href="href" secondary @click="navigate"> Back home </n-button>
-    </router-link>
+    <c-button to="/"> Back home </c-button>
   </div>
 </template>
diff --git a/src/pages/About.vue b/src/pages/About.vue
index 91d5d1ba..6ed4d083 100644
--- a/src/pages/About.vue
+++ b/src/pages/About.vue
@@ -11,25 +11,21 @@ const { tracker } = useTracker();
     <n-h1>About</n-h1>
     <n-p>
       This wonderful website, made with ❤ by
-      <n-button text tag="a" href="https://github.com/CorentinTh" target="_blank" rel="noopener" type="primary">
-        Corentin Thomasset </n-button
-      >, aggregates useful tools for developer and people working in IT. If you find it useful, please fell free to
-      share it to people you think may find it useful too and don't forget to pin it in your shortcut bar !
+      <c-link href="https://github.com/CorentinTh" target="_blank" rel="noopener"> Corentin Thomasset </c-link>,
+      aggregates useful tools for developer and people working in IT. If you find it useful, please fell free to share
+      it to people you think may find it useful too and don't forget to pin it in your shortcut bar !
     </n-p>
     <n-p>
       IT Tools is open-source (under the MIT license) and free, and will always be, but it cost me money to host and
       renew the domain name, if you want to support my work, and encourage me to add more tools, please consider
       supporting by
-      <n-button
-        type="primary"
-        tag="a"
-        text
+      <c-link
         href="https://www.buymeacoffee.com/cthmsst"
         rel="noopener"
         target="_blank"
         @click="() => tracker.trackEvent({ eventName: 'Support button clicked' })"
       >
-        sponsoring me </n-button
+        sponsoring me </c-link
       >.
     </n-p>
 
@@ -37,16 +33,9 @@ const { tracker } = useTracker();
     <n-p>
       IT Tools is made in Vue JS (vue 3) with the the naive-ui component library and is hosted and continuously deployed
       by Vercel. Third party open-source libraries are used in some tools, you may find the complete list in the
-      <n-button
-        type="primary"
-        tag="a"
-        text
-        href="https://github.com/CorentinTh/it-tools/blob/main/package.json"
-        rel="noopener"
-        target="_blank"
-      >
+      <c-link href="https://github.com/CorentinTh/it-tools/blob/main/package.json" rel="noopener" target="_blank">
         package.json
-      </n-button>
+      </c-link>
       file of the repository.
     </n-p>
 
@@ -54,30 +43,24 @@ const { tracker } = useTracker();
     <n-p>
       If you need a tool that is currently not present here, and you think can be relevant, you are welcome to submit a
       feature request in the
-      <n-button
-        type="primary"
-        tag="a"
-        text
+      <c-link
         href="https://github.com/CorentinTh/it-tools/issues/new?assignees=CorentinTh&labels=enhancement&template=feature_request.md&title=%5BFEAT%5D%20My%20feature"
         rel="noopener"
         target="_blank"
       >
         issues section
-      </n-button>
+      </c-link>
       in the GitHub repository.
     </n-p>
     <n-p>
       And if you found a bug, or something broken that doesn't work as expected, please fill a bug report in the
-      <n-button
-        type="primary"
-        tag="a"
-        text
+      <c-link
         href="https://github.com/CorentinTh/it-tools/issues/new?assignees=CorentinTh&labels=bug&template=bug_report.md&title=%5BBUG%5D%20My%20bug"
         rel="noopener"
         target="_blank"
       >
         issues section
-      </n-button>
+      </c-link>
       in the GitHub repository.
     </n-p>
   </div>
diff --git a/src/tools/base64-file-converter/base64-file-converter.vue b/src/tools/base64-file-converter/base64-file-converter.vue
index a35534fb..f3516e1d 100644
--- a/src/tools/base64-file-converter/base64-file-converter.vue
+++ b/src/tools/base64-file-converter/base64-file-converter.vue
@@ -8,9 +8,9 @@
       <n-input v-model:value="base64Input" type="textarea" placeholder="Put your base64 file string here..." rows="5" />
     </n-form-item>
     <n-space justify="center">
-      <n-button :disabled="base64Input === '' || !base64InputValidation.isValid" secondary @click="downloadFile()">
+      <c-button :disabled="base64Input === '' || !base64InputValidation.isValid" @click="downloadFile()">
         Download file
-      </n-button>
+      </c-button>
     </n-space>
   </n-card>
 
@@ -26,7 +26,7 @@
 
     <n-input :value="fileBase64" type="textarea" readonly placeholder="File in base64 will be here" />
     <n-space justify="center">
-      <n-button secondary @click="copyFileBase64()"> Copy </n-button>
+      <c-button @click="copyFileBase64()"> Copy </c-button>
     </n-space>
   </n-card>
 </template>
diff --git a/src/tools/base64-string-converter/base64-string-converter.vue b/src/tools/base64-string-converter/base64-string-converter.vue
index 649f9d39..033d19b2 100644
--- a/src/tools/base64-string-converter/base64-string-converter.vue
+++ b/src/tools/base64-string-converter/base64-string-converter.vue
@@ -15,7 +15,7 @@
     </n-form-item>
 
     <n-space justify="center">
-      <n-button secondary @click="copyTextBase64()"> Copy base64 </n-button>
+      <c-button @click="copyTextBase64()"> Copy base64 </c-button>
     </n-space>
   </n-card>
 
@@ -29,7 +29,7 @@
     </n-form-item>
 
     <n-space justify="center">
-      <n-button secondary @click="copyText()"> Copy decoded string </n-button>
+      <c-button @click="copyText()"> Copy decoded string </c-button>
     </n-space>
   </n-card>
 </template>
diff --git a/src/tools/basic-auth-generator/basic-auth-generator.vue b/src/tools/basic-auth-generator/basic-auth-generator.vue
index 975071c3..877d339b 100644
--- a/src/tools/basic-auth-generator/basic-auth-generator.vue
+++ b/src/tools/basic-auth-generator/basic-auth-generator.vue
@@ -23,7 +23,7 @@
     </n-card>
     <br />
     <n-space justify="center">
-      <n-button secondary @click="copy">Copy header</n-button>
+      <c-button @click="copy">Copy header</c-button>
     </n-space>
   </div>
 </template>
diff --git a/src/tools/bcrypt/bcrypt.vue b/src/tools/bcrypt/bcrypt.vue
index 4104c744..fbbe8852 100644
--- a/src/tools/bcrypt/bcrypt.vue
+++ b/src/tools/bcrypt/bcrypt.vue
@@ -18,7 +18,7 @@
     </n-form>
     <br />
     <n-space justify="center">
-      <n-button secondary @click="copy"> Copy hash </n-button>
+      <c-button @click="copy"> Copy hash </c-button>
     </n-space>
   </n-card>
 
diff --git a/src/tools/benchmark-builder/benchmark-builder.vue b/src/tools/benchmark-builder/benchmark-builder.vue
index f11a9dc6..37e072b3 100644
--- a/src/tools/benchmark-builder/benchmark-builder.vue
+++ b/src/tools/benchmark-builder/benchmark-builder.vue
@@ -14,18 +14,17 @@
         </n-card>
 
         <n-space justify="center">
-          <n-button v-if="suites.length > 1" quaternary @click="suites.splice(index, 1)">
-            <template #icon>
-              <n-icon :component="Trash" depth="3" />
-            </template>
+          <c-button v-if="suites.length > 1" variant="text" @click="suites.splice(index, 1)">
+            <n-icon :component="Trash" depth="3" mr-2 size="18" />
             Delete suite
-          </n-button>
-          <n-button quaternary @click="suites.splice(index + 1, 0, { data: [0], title: `Suite ${suites.length + 1}` })">
-            <template #icon>
-              <n-icon :component="Plus" depth="3" />
-            </template>
+          </c-button>
+          <c-button
+            variant="text"
+            @click="suites.splice(index + 1, 0, { data: [0], title: `Suite ${suites.length + 1}` })"
+          >
+            <n-icon :component="Plus" depth="3" mr-2 size="18" />
             Add suite
-          </n-button>
+          </c-button>
         </n-space>
       </div>
     </n-space>
@@ -39,15 +38,14 @@
           <n-input v-model:value="unit" placeholder="Unit (eg: ms)" />
         </n-form-item>
 
-        <n-button
-          tertiary
+        <c-button
           @click="
             suites = [
               { title: 'Suite 1', data: [] },
               { title: 'Suite 2', data: [] },
             ]
           "
-          >Reset suites</n-button
+          >Reset suites</c-button
         >
       </n-space>
 
@@ -73,8 +71,8 @@
       </n-table>
       <br />
       <n-space justify="center">
-        <n-button tertiary @click="copyAsMarkdown">Copy as markdown table</n-button>
-        <n-button tertiary @click="copyAsBulletList">Copy as bullet list</n-button>
+        <c-button @click="copyAsMarkdown">Copy as markdown table</c-button>
+        <c-button @click="copyAsBulletList">Copy as bullet list</c-button>
       </n-space>
     </div>
   </div>
diff --git a/src/tools/benchmark-builder/dynamic-values.vue b/src/tools/benchmark-builder/dynamic-values.vue
index 70268aed..189be9ea 100644
--- a/src/tools/benchmark-builder/dynamic-values.vue
+++ b/src/tools/benchmark-builder/dynamic-values.vue
@@ -11,22 +11,18 @@
       />
       <n-tooltip>
         <template #trigger>
-          <n-button circle quaternary @click="values.splice(index, 1)">
-            <template #icon>
-              <n-icon :component="Trash" depth="3" />
-            </template>
-          </n-button>
+          <c-button circle variant="text" @click="values.splice(index, 1)">
+            <n-icon :component="Trash" depth="3" size="18" />
+          </c-button>
         </template>
         Delete value
       </n-tooltip>
     </n-space>
 
-    <n-button tertiary @click="addValue">
-      <template #icon>
-        <n-icon :component="Plus" />
-      </template>
+    <c-button @click="addValue">
+      <n-icon :component="Plus" depth="3" mr-2 size="18" />
       Add a measure
-    </n-button>
+    </c-button>
   </div>
 </template>
 
diff --git a/src/tools/bip39-generator/bip39-generator.vue b/src/tools/bip39-generator/bip39-generator.vue
index 26556cf8..fbfd39c5 100644
--- a/src/tools/bip39-generator/bip39-generator.vue
+++ b/src/tools/bip39-generator/bip39-generator.vue
@@ -18,16 +18,16 @@
           >
             <n-input-group>
               <n-input v-model:value="entropy" placeholder="Your string..." />
-              <n-button @click="refreshEntropy">
+              <c-button @click="refreshEntropy">
                 <n-icon size="22">
                   <Refresh />
                 </n-icon>
-              </n-button>
-              <n-button @click="copyEntropy">
+              </c-button>
+              <c-button @click="copyEntropy">
                 <n-icon size="22">
                   <Copy />
                 </n-icon>
-              </n-button>
+              </c-button>
             </n-input-group>
           </n-form-item>
         </n-gi>
@@ -48,9 +48,9 @@
             spellcheck="false"
           />
 
-          <n-button @click="copyPassphrase">
+          <c-button @click="copyPassphrase">
             <n-icon size="22" :component="Copy" />
-          </n-button>
+          </c-button>
         </n-input-group>
       </n-form-item>
     </n-card>
diff --git a/src/tools/chronometer/chronometer.vue b/src/tools/chronometer/chronometer.vue
index 16009ff0..b78a52f3 100644
--- a/src/tools/chronometer/chronometer.vue
+++ b/src/tools/chronometer/chronometer.vue
@@ -5,10 +5,10 @@
     </n-card>
     <br />
     <n-space justify="center">
-      <n-button v-if="!isRunning" secondary type="primary" @click="resume">Start</n-button>
-      <n-button v-else secondary type="warning" @click="pause">Stop</n-button>
+      <c-button v-if="!isRunning" secondary type="primary" @click="resume">Start</c-button>
+      <c-button v-else secondary type="warning" @click="pause">Stop</c-button>
 
-      <n-button secondary @click="counter = 0">Reset</n-button>
+      <c-button @click="counter = 0">Reset</c-button>
     </n-space>
   </div>
 </template>
diff --git a/src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue b/src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue
index a106878d..b7fc58a2 100644
--- a/src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue
+++ b/src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue
@@ -16,7 +16,7 @@
     <br />
     <br />
     <n-space justify="center">
-      <n-button :disabled="dockerCompose === ''" secondary @click="download"> Download docker-compose.yml </n-button>
+      <c-button :disabled="dockerCompose === ''" secondary @click="download"> Download docker-compose.yml </c-button>
     </n-space>
 
     <div v-if="notComposable.length > 0">
diff --git a/src/tools/hmac-generator/hmac-generator.vue b/src/tools/hmac-generator/hmac-generator.vue
index 9cf2c9bf..46b0f1f3 100644
--- a/src/tools/hmac-generator/hmac-generator.vue
+++ b/src/tools/hmac-generator/hmac-generator.vue
@@ -43,7 +43,7 @@
       <n-input readonly :value="hmac" type="textarea" placeholder="The result of the HMAC..." />
     </n-form-item>
     <n-space justify="center">
-      <n-button secondary @click="copy()">Copy HMAC</n-button>
+      <c-button @click="copy()">Copy HMAC</c-button>
     </n-space>
   </div>
 </template>
diff --git a/src/tools/html-entities/html-entities.vue b/src/tools/html-entities/html-entities.vue
index 74812595..889626bc 100644
--- a/src/tools/html-entities/html-entities.vue
+++ b/src/tools/html-entities/html-entities.vue
@@ -20,7 +20,7 @@
     </n-form-item>
 
     <n-space justify="center">
-      <n-button secondary @click="copyEscaped"> Copy </n-button>
+      <c-button @click="copyEscaped"> Copy </c-button>
     </n-space>
   </n-card>
   <n-card title="Unescape html entities">
@@ -44,7 +44,7 @@
     </n-form-item>
 
     <n-space justify="center">
-      <n-button secondary @click="copyUnescaped"> Copy </n-button>
+      <c-button @click="copyUnescaped"> Copy </c-button>
     </n-space>
   </n-card>
 </template>
diff --git a/src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue b/src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue
index 52bc0d28..a185618b 100644
--- a/src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue
+++ b/src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue
@@ -1,11 +1,9 @@
 <template>
   <n-tooltip trigger="hover">
     <template #trigger>
-      <n-button circle quaternary :type="isActive?.() ? 'primary' : 'default'" @click="action">
-        <template #icon>
-          <n-icon :component="icon" />
-        </template>
-      </n-button>
+      <c-button circle variant="text" :type="isActive?.() ? 'primary' : 'default'" @click="action">
+        <n-icon :component="icon" />
+      </c-button>
     </template>
 
     {{ title }}
diff --git a/src/tools/ipv4-range-expander/ipv4-range-expander.vue b/src/tools/ipv4-range-expander/ipv4-range-expander.vue
index 6cbff1cc..05b15b29 100644
--- a/src/tools/ipv4-range-expander/ipv4-range-expander.vue
+++ b/src/tools/ipv4-range-expander/ipv4-range-expander.vue
@@ -39,10 +39,10 @@
               The end IPv4 address is lower than the start IPv4 address. This is not valid and no result could be
               calculated. In the most cases the solution to solve this problem is to change start and end address.
             </n-text>
-            <n-button quaternary @click="onSwitchStartEndClicked">
-              <n-icon :component="ChangeCircleOutlined" />
-              &nbsp;&nbsp;Switch start and end IPv4 address
-            </n-button>
+            <c-button @click="onSwitchStartEndClicked">
+              <n-icon mr-2 :component="Exchange" depth="3" size="22" />
+              Switch start and end IPv4 address
+            </c-button>
           </n-space>
         </n-alert>
       </div>
@@ -52,7 +52,7 @@
 
 <script setup lang="ts">
 import { useValidation } from '@/composable/validation';
-import { ChangeCircleOutlined } from '@vicons/material';
+import { Exchange } from '@vicons/tabler';
 import { isValidIpv4 } from '../ipv4-address-converter/ipv4-address-converter.service';
 import type { Ipv4RangeExpanderResult } from './ipv4-range-expander.types';
 import { calculateCidr } from './ipv4-range-expander.service';
diff --git a/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue b/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue
index 48b96fa1..6e3d2eb6 100644
--- a/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue
+++ b/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue
@@ -20,14 +20,14 @@
       </n-table>
 
       <n-space style="margin-top: 14px" justify="space-between">
-        <n-button tertiary @click="switchToBlock({ count: -1 })">
+        <c-button @click="switchToBlock({ count: -1 })">
           <n-icon :component="ArrowLeft" />
           Previous block
-        </n-button>
-        <n-button tertiary @click="switchToBlock({ count: 1 })">
+        </c-button>
+        <c-button @click="switchToBlock({ count: 1 })">
           Next block
           <n-icon :component="ArrowRight" />
-        </n-button>
+        </c-button>
       </n-space>
     </div>
   </div>
diff --git a/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue b/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue
index 65a536ef..b4e410ab 100644
--- a/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue
+++ b/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue
@@ -22,7 +22,7 @@
     <br />
     <br />
     <n-space justify="center">
-      <n-button secondary autofocus @click="copy"> Copy </n-button>
+      <c-button autofocus @click="copy"> Copy </c-button>
     </n-space>
   </n-card>
 </template>
diff --git a/src/tools/mac-address-lookup/mac-address-lookup.vue b/src/tools/mac-address-lookup/mac-address-lookup.vue
index 99b8342d..32b6af56 100644
--- a/src/tools/mac-address-lookup/mac-address-lookup.vue
+++ b/src/tools/mac-address-lookup/mac-address-lookup.vue
@@ -24,7 +24,7 @@
     </n-form-item>
 
     <n-space justify="center">
-      <n-button :disabled="!details" tertiary> Copy vendor info </n-button>
+      <c-button :disabled="!details"> Copy vendor info </c-button>
     </n-space>
   </div>
 </template>
diff --git a/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue b/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue
index d7bbd2b8..fd9f1737 100644
--- a/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue
+++ b/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue
@@ -5,9 +5,9 @@
         <template #suffix>
           <n-tooltip trigger="hover">
             <template #trigger>
-              <n-button quaternary circle @click="refreshSecret">
+              <c-button circle variant="text" @click="refreshSecret">
                 <n-icon :component="Refresh" />
-              </n-button>
+              </c-button>
             </template>
             Generate secret token
           </n-tooltip>
@@ -23,7 +23,7 @@
     </div>
     <n-space justify="center" vertical align="center" style="margin-top: 10px">
       <n-image :src="qrcode"></n-image>
-      <n-button secondary tag="a" :href="keyUri" target="_blank">Open Key URI in new tab</n-button>
+      <c-button :href="keyUri" target="_blank">Open Key URI in new tab</c-button>
     </n-space>
   </div>
   <div style="max-width: 350px">
diff --git a/src/tools/otp-code-generator-and-validator/token-display.vue b/src/tools/otp-code-generator-and-validator/token-display.vue
index ce11ccd5..6eadcb27 100644
--- a/src/tools/otp-code-generator-and-validator/token-display.vue
+++ b/src/tools/otp-code-generator-and-validator/token-display.vue
@@ -8,31 +8,30 @@
     <n-input-group>
       <n-tooltip trigger="hover" placement="bottom">
         <template #trigger>
-          <n-button data-test-id="previous-otp" secondary @click.prevent="copyPrevious(tokens.previous)">{{
-            tokens.previous
-          }}</n-button>
+          <c-button important:h-12 data-test-id="previous-otp" @click.prevent="copyPrevious(tokens.previous)">
+            {{ tokens.previous }}
+          </c-button>
         </template>
         <div>{{ previousCopied ? 'Copied !' : 'Copy previous OTP' }}</div>
       </n-tooltip>
       <n-tooltip trigger="hover" placement="bottom">
         <template #trigger>
-          <n-button
-            tertiary
-            type="primary"
+          <c-button
             data-test-id="current-otp"
             class="current-otp"
+            important:h-12
             @click.prevent="copyCurrent(tokens.current)"
           >
             {{ tokens.current }}
-          </n-button>
+          </c-button>
         </template>
         <div>{{ currentCopied ? 'Copied !' : 'Copy current OTP' }}</div>
       </n-tooltip>
       <n-tooltip trigger="hover" placement="bottom">
         <template #trigger>
-          <n-button secondary data-test-id="next-otp" @click.prevent="copyNext(tokens.next)">{{
+          <c-button important:h-12 data-test-id="next-otp" @click.prevent="copyNext(tokens.next)">{{
             tokens.next
-          }}</n-button>
+          }}</c-button>
         </template>
         <div>{{ nextCopied ? 'Copied !' : 'Copy next OTP' }}</div>
       </n-tooltip>
diff --git a/src/tools/qr-code-generator/qr-code-generator.vue b/src/tools/qr-code-generator/qr-code-generator.vue
index 9800f283..7878edd9 100644
--- a/src/tools/qr-code-generator/qr-code-generator.vue
+++ b/src/tools/qr-code-generator/qr-code-generator.vue
@@ -28,7 +28,7 @@
       <n-gi>
         <n-space justify="center" align="center" vertical>
           <n-image :src="qrcode" width="200" />
-          <n-button secondary @click="download"> Download qr-code </n-button>
+          <c-button @click="download"> Download qr-code </c-button>
         </n-space>
       </n-gi>
     </n-grid>
diff --git a/src/tools/random-port-generator/random-port-generator.vue b/src/tools/random-port-generator/random-port-generator.vue
index fac04854..d9305e6f 100644
--- a/src/tools/random-port-generator/random-port-generator.vue
+++ b/src/tools/random-port-generator/random-port-generator.vue
@@ -4,8 +4,8 @@
       {{ port }}
     </div>
     <n-space justify="center">
-      <n-button secondary @click="copy"> Copy </n-button>
-      <n-button secondary @click="refreshPort"> Refresh </n-button>
+      <c-button @click="copy"> Copy </c-button>
+      <c-button @click="refreshPort"> Refresh </c-button>
     </n-space>
   </n-card>
 </template>
diff --git a/src/tools/roman-numeral-converter/roman-numeral-converter.vue b/src/tools/roman-numeral-converter/roman-numeral-converter.vue
index 609b46c4..ba6da18e 100644
--- a/src/tools/roman-numeral-converter/roman-numeral-converter.vue
+++ b/src/tools/roman-numeral-converter/roman-numeral-converter.vue
@@ -8,9 +8,9 @@
         <div class="result">
           {{ outputRoman }}
         </div>
-        <n-button secondary autofocus :disabled="validationNumeral.validationStatus === 'error'" @click="copyRoman">
+        <c-button autofocus :disabled="validationNumeral.validationStatus === 'error'" @click="copyRoman">
           Copy
-        </n-button>
+        </c-button>
       </n-space>
     </n-card>
     <br />
@@ -22,9 +22,7 @@
         <div class="result">
           {{ outputNumeral }}
         </div>
-        <n-button secondary autofocus :disabled="validationRoman.validationStatus === 'error'" @click="copyArabic">
-          Copy
-        </n-button>
+        <c-button :disabled="validationRoman.validationStatus === 'error'" @click="copyArabic"> Copy </c-button>
       </n-space>
     </n-card>
   </div>
diff --git a/src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue b/src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue
index 852205d2..0c5034ca 100644
--- a/src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue
+++ b/src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue
@@ -5,7 +5,7 @@
         <n-input-number v-model:value="bits" min="256" max="16384" step="8" />
       </n-form-item>
 
-      <n-button tertiary @click="refreshCerts">Refresh key-pair</n-button>
+      <c-button @click="refreshCerts">Refresh key-pair</c-button>
     </n-space>
   </div>
 
diff --git a/src/tools/slugify-string/slugify-string.vue b/src/tools/slugify-string/slugify-string.vue
index be5db145..c4c3bd12 100644
--- a/src/tools/slugify-string/slugify-string.vue
+++ b/src/tools/slugify-string/slugify-string.vue
@@ -14,7 +14,7 @@
     </n-form-item>
 
     <n-space justify="center">
-      <n-button secondary :disabled="slug.length === 0" @click="copy">Copy slug</n-button>
+      <c-button :disabled="slug.length === 0" @click="copy">Copy slug</c-button>
     </n-space>
   </div>
 </template>
diff --git a/src/tools/svg-placeholder-generator/svg-placeholder-generator.vue b/src/tools/svg-placeholder-generator/svg-placeholder-generator.vue
index 299a3fd0..404e552e 100644
--- a/src/tools/svg-placeholder-generator/svg-placeholder-generator.vue
+++ b/src/tools/svg-placeholder-generator/svg-placeholder-generator.vue
@@ -38,9 +38,9 @@
     </n-form-item>
 
     <n-space justify="center">
-      <n-button secondary @click="copySVG()">Copy svg</n-button>
-      <n-button secondary @click="copyBase64()">Copy base64</n-button>
-      <n-button secondary @click="download()">Download svg</n-button>
+      <c-button @click="copySVG()">Copy svg</c-button>
+      <c-button @click="copyBase64()">Copy base64</c-button>
+      <c-button @click="download()">Download svg</c-button>
     </n-space>
   </div>
 
diff --git a/src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue b/src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue
index fc3abb5f..0e4edccc 100644
--- a/src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue
+++ b/src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue
@@ -11,7 +11,7 @@
       </n-card>
 
       <n-space justify="center">
-        <n-button secondary autofocus @click="copy"> Copy NATO string </n-button>
+        <c-button autofocus @click="copy"> Copy NATO string </c-button>
       </n-space>
     </n-space>
   </div>
diff --git a/src/tools/token-generator/token-generator.tool.vue b/src/tools/token-generator/token-generator.tool.vue
index 123e337e..54a2c18d 100644
--- a/src/tools/token-generator/token-generator.tool.vue
+++ b/src/tools/token-generator/token-generator.tool.vue
@@ -44,8 +44,8 @@
       <br />
       <br />
       <n-space justify="center">
-        <n-button secondary autofocus @click="copy"> Copy </n-button>
-        <n-button secondary @click="refreshToken"> Refresh </n-button>
+        <c-button @click="copy"> Copy </c-button>
+        <c-button @click="refreshToken"> Refresh </c-button>
       </n-space>
     </n-card>
   </div>
diff --git a/src/tools/url-encoder/url-encoder.vue b/src/tools/url-encoder/url-encoder.vue
index edbb4623..dcd8a95a 100644
--- a/src/tools/url-encoder/url-encoder.vue
+++ b/src/tools/url-encoder/url-encoder.vue
@@ -24,7 +24,7 @@
     </n-form-item>
 
     <n-space justify="center">
-      <n-button secondary @click="copyEncoded"> Copy </n-button>
+      <c-button @click="copyEncoded"> Copy </c-button>
     </n-space>
   </n-card>
   <n-card title="Decode">
@@ -52,7 +52,7 @@
     </n-form-item>
 
     <n-space justify="center">
-      <n-button secondary @click="copyDecoded"> Copy </n-button>
+      <c-button @click="copyDecoded"> Copy </c-button>
     </n-space>
   </n-card>
 </template>
diff --git a/src/tools/uuid-generator/uuid-generator.vue b/src/tools/uuid-generator/uuid-generator.vue
index 76df1138..b2c74134 100644
--- a/src/tools/uuid-generator/uuid-generator.vue
+++ b/src/tools/uuid-generator/uuid-generator.vue
@@ -19,8 +19,8 @@
     />
 
     <n-space justify="center">
-      <n-button secondary autofocus @click="copy"> Copy </n-button>
-      <n-button secondary @click="refreshUUIDs"> Refresh </n-button>
+      <c-button autofocus @click="copy"> Copy </c-button>
+      <c-button @click="refreshUUIDs"> Refresh </c-button>
     </n-space>
   </n-space>
 </template>
diff --git a/src/ui/c-button/c-button.theme.ts b/src/ui/c-button/c-button.theme.ts
new file mode 100644
index 00000000..2f25e6fd
--- /dev/null
+++ b/src/ui/c-button/c-button.theme.ts
@@ -0,0 +1,240 @@
+import { defineThemes } from '../theme/theme.models';
+import { appThemes } from '../theme/themes';
+
+export const { useTheme } = defineThemes({
+  dark: {
+    basic: {
+      default: {
+        textColor: appThemes.dark.text.baseColor,
+        backgroundColor: 'rgba(255, 255, 255, 0.08)',
+
+        hover: {
+          textColor: appThemes.dark.text.baseColor,
+          backgroundColor: 'rgba(255, 255, 255, 0.12)',
+        },
+
+        pressed: {
+          textColor: appThemes.dark.text.baseColor,
+          backgroundColor: 'rgba(255, 255, 255, 0.24)',
+        },
+
+        outline: {
+          color: appThemes.dark.primary.color,
+        },
+      },
+
+      primary: {
+        textColor: appThemes.dark.text.baseColor,
+        backgroundColor: appThemes.dark.primary.color,
+
+        hover: {
+          textColor: appThemes.dark.text.baseColor,
+          backgroundColor: appThemes.dark.primary.colorHover,
+        },
+
+        pressed: {
+          textColor: appThemes.dark.text.baseColor,
+          backgroundColor: appThemes.dark.primary.colorPressed,
+        },
+
+        outline: {
+          color: appThemes.dark.primary.color,
+        },
+      },
+
+      warning: {
+        textColor: appThemes.dark.text.baseColor,
+        backgroundColor: appThemes.dark.warning.color,
+
+        hover: {
+          textColor: appThemes.dark.text.baseColor,
+          backgroundColor: appThemes.dark.warning.colorHover,
+        },
+
+        pressed: {
+          textColor: appThemes.dark.text.baseColor,
+          backgroundColor: appThemes.dark.warning.colorPressed,
+        },
+
+        outline: {
+          color: appThemes.dark.warning.color,
+        },
+      },
+    },
+
+    text: {
+      default: {
+        textColor: appThemes.dark.text.baseColor,
+        backgroundColor: 'transparent',
+
+        hover: {
+          textColor: appThemes.dark.text.baseColor,
+          backgroundColor: 'rgba(255, 255, 255, 0.12)',
+        },
+
+        pressed: {
+          textColor: appThemes.dark.text.baseColor,
+          backgroundColor: 'rgba(255, 255, 255, 0.82)',
+        },
+
+        outline: {
+          color: appThemes.dark.primary.color,
+        },
+      },
+
+      primary: {
+        textColor: appThemes.dark.text.baseColor,
+        backgroundColor: appThemes.dark.primary.color,
+
+        hover: {
+          textColor: appThemes.dark.text.baseColor,
+          backgroundColor: appThemes.dark.primary.colorHover,
+        },
+
+        pressed: {
+          textColor: appThemes.dark.text.baseColor,
+          backgroundColor: appThemes.dark.primary.colorPressed,
+        },
+
+        outline: {
+          color: appThemes.dark.primary.color,
+        },
+      },
+
+      warning: {
+        textColor: appThemes.dark.text.baseColor,
+        backgroundColor: appThemes.dark.warning.color,
+
+        hover: {
+          textColor: appThemes.dark.text.baseColor,
+          backgroundColor: appThemes.dark.warning.colorHover,
+        },
+
+        pressed: {
+          textColor: appThemes.dark.text.baseColor,
+          backgroundColor: appThemes.dark.warning.colorPressed,
+        },
+
+        outline: {
+          color: appThemes.dark.warning.color,
+        },
+      },
+    },
+  },
+  light: {
+    basic: {
+      default: {
+        textColor: appThemes.light.text.baseColor,
+        backgroundColor: 'rgba(46, 51, 56, 0.05)',
+
+        hover: {
+          textColor: appThemes.light.text.baseColor,
+          backgroundColor: 'rgba(46, 51, 56, 0.09)',
+        },
+
+        pressed: {
+          textColor: appThemes.light.text.baseColor,
+          backgroundColor: 'rgba(46, 51, 56, 0.22)',
+        },
+
+        outline: {
+          color: appThemes.light.primary.color,
+        },
+      },
+
+      primary: {
+        textColor: appThemes.dark.text.baseColor,
+        backgroundColor: appThemes.light.primary.color,
+
+        hover: {
+          textColor: appThemes.dark.text.baseColor,
+          backgroundColor: appThemes.light.primary.colorHover,
+        },
+
+        pressed: {
+          textColor: appThemes.dark.text.baseColor,
+          backgroundColor: appThemes.light.primary.colorPressed,
+        },
+
+        outline: {
+          color: appThemes.light.primary.color,
+        },
+      },
+
+      warning: {
+        textColor: appThemes.dark.text.baseColor,
+        backgroundColor: appThemes.light.warning.color,
+
+        hover: {
+          textColor: appThemes.dark.text.baseColor,
+          backgroundColor: appThemes.light.warning.colorHover,
+        },
+
+        pressed: {
+          textColor: appThemes.dark.text.baseColor,
+          backgroundColor: appThemes.light.warning.colorPressed,
+        },
+
+        outline: {
+          color: appThemes.light.warning.color,
+        },
+      },
+    },
+    text: {
+      default: {
+        textColor: appThemes.light.text.baseColor,
+        backgroundColor: 'transparent',
+
+        hover: {
+          textColor: appThemes.light.text.baseColor,
+          backgroundColor: 'rgba(46, 51, 56, 0.09)',
+        },
+
+        pressed: {
+          textColor: appThemes.light.text.baseColor,
+          backgroundColor: 'rgba(46, 51, 56, 0.13)',
+        },
+
+        outline: {
+          color: appThemes.light.primary.color,
+        },
+      },
+      primary: {
+        textColor: appThemes.light.primary.color,
+        backgroundColor: 'transparent',
+
+        hover: {
+          textColor: appThemes.light.primary.colorHover,
+          backgroundColor: 'rgba(46, 51, 56, 0.09)',
+        },
+
+        pressed: {
+          textColor: appThemes.light.primary.colorPressed,
+          backgroundColor: 'rgba(46, 51, 56, 0.13)',
+        },
+
+        outline: {
+          color: appThemes.light.primary.color,
+        },
+      },
+      warning: {
+        textColor: appThemes.light.warning.color,
+        backgroundColor: 'transparent',
+
+        hover: {
+          textColor: appThemes.light.warning.colorHover,
+          backgroundColor: 'rgba(46, 51, 56, 0.09)',
+        },
+
+        pressed: {
+          textColor: appThemes.light.warning.colorPressed,
+          backgroundColor: 'rgba(46, 51, 56, 0.13)',
+        },
+
+        outline: {
+          color: appThemes.light.warning.color,
+        },
+      },
+    },
+  },
+});
diff --git a/src/ui/c-button/c-button.vue b/src/ui/c-button/c-button.vue
new file mode 100644
index 00000000..a179cc20
--- /dev/null
+++ b/src/ui/c-button/c-button.vue
@@ -0,0 +1,113 @@
+<template>
+  <component
+    :is="tag"
+    :href="href ?? to"
+    class="c-button"
+    :class="{ disabled, round, circle }"
+    :to="to"
+    @click="handleClick"
+  >
+    <slot />
+  </component>
+</template>
+
+<script lang="ts" setup>
+import type { RouteLocationRaw } from 'vue-router';
+import { useTheme } from './c-button.theme';
+
+const props = withDefaults(
+  defineProps<{
+    type?: 'default' | 'primary';
+    variant?: 'basic' | 'text';
+    disabled?: boolean;
+    round?: boolean;
+    circle?: boolean;
+    href?: string;
+    to?: RouteLocationRaw;
+  }>(),
+  {
+    type: 'default',
+    variant: 'basic',
+    disabled: false,
+    round: false,
+    circle: false,
+    href: undefined,
+    to: undefined,
+  },
+);
+const { variant, disabled, round, circle, href, type, to } = toRefs(props);
+
+const emits = defineEmits(['click']);
+
+function handleClick(event: MouseEvent) {
+  if (!disabled.value) {
+    emits('click', event);
+  }
+}
+
+const theme = useTheme();
+const variantTheme = computed(() => theme.value[variant.value][type.value]);
+const tag = computed(() => {
+  if (href.value) {
+    return 'a';
+  }
+  if (to.value) {
+    return 'router-link';
+  }
+  return 'button';
+});
+</script>
+
+<style lang="less" scoped>
+.c-button {
+  margin: 0;
+  line-height: 1;
+  font-family: inherit;
+  font-size: inherit;
+  border: none;
+  text-align: center;
+  cursor: pointer;
+  text-decoration: none;
+  height: 34px;
+  font-weight: 400;
+  color: v-bind('variantTheme.textColor');
+  padding: 0 14px;
+  border-radius: 4px;
+  transition: background-color cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
+
+  background-color: v-bind('variantTheme.backgroundColor');
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+
+  // outline-offset: 1px;
+  &.round {
+    border-radius: 100px;
+  }
+
+  &.circle {
+    border-radius: 40px;
+    width: 34px;
+  }
+
+  &:not(.disabled) {
+    &:hover {
+      background-color: v-bind('variantTheme.hover.backgroundColor');
+    }
+
+    &:active {
+      background-color: v-bind('variantTheme.pressed.backgroundColor');
+    }
+  }
+
+  &:focus {
+    outline: 2px solid v-bind('variantTheme.outline.color');
+  }
+
+  &.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+</style>
diff --git a/src/ui/c-link/c-link.theme.ts b/src/ui/c-link/c-link.theme.ts
new file mode 100644
index 00000000..2d90bc0c
--- /dev/null
+++ b/src/ui/c-link/c-link.theme.ts
@@ -0,0 +1,39 @@
+import { defineThemes } from '../theme/theme.models';
+import { appThemes } from '../theme/themes';
+
+export const { useTheme } = defineThemes({
+  dark: {
+    default: {
+      textColor: appThemes.dark.primary.color,
+
+      hover: {
+        textColor: appThemes.dark.primary.colorHover,
+      },
+
+      pressed: {
+        textColor: appThemes.dark.primary.colorPressed,
+      },
+
+      outline: {
+        color: appThemes.dark.primary.color,
+      },
+    },
+  },
+  light: {
+    default: {
+      textColor: appThemes.light.primary.color,
+
+      hover: {
+        textColor: appThemes.light.primary.colorHover,
+      },
+
+      pressed: {
+        textColor: appThemes.light.primary.colorPressed,
+      },
+
+      outline: {
+        color: appThemes.light.primary.color,
+      },
+    },
+  },
+});
diff --git a/src/ui/c-link/c-link.vue b/src/ui/c-link/c-link.vue
new file mode 100644
index 00000000..df101208
--- /dev/null
+++ b/src/ui/c-link/c-link.vue
@@ -0,0 +1,49 @@
+<template>
+  <component :is="tag" :href="href ?? to" class="c-link" :to="to">
+    <slot />
+  </component>
+</template>
+
+<script lang="ts" setup>
+import { RouterLink, type RouteLocationRaw } from 'vue-router';
+import { useTheme } from './c-link.theme';
+
+const props = defineProps<{
+  href?: string;
+  to?: RouteLocationRaw;
+}>();
+
+const { href, to } = toRefs(props);
+
+const theme = useTheme();
+const tag = computed(() => (href?.value ? 'a' : RouterLink));
+</script>
+
+<style lang="less" scoped>
+.c-link {
+  line-height: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  border: none;
+  cursor: pointer;
+  text-decoration: none;
+  font-weight: 400;
+  color: v-bind('theme.default.textColor');
+  border-radius: 4px;
+  transition: color cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
+
+  outline-offset: 1px;
+
+  &:hover {
+    color: v-bind('theme.default.hover.textColor');
+  }
+
+  &:active {
+    color: v-bind('theme.default.textColor');
+  }
+
+  &:focus {
+    color: v-bind('theme.default.outline.color');
+  }
+}
+</style>
diff --git a/src/ui/theme/theme.models.ts b/src/ui/theme/theme.models.ts
new file mode 100644
index 00000000..850afe95
--- /dev/null
+++ b/src/ui/theme/theme.models.ts
@@ -0,0 +1,13 @@
+import { useThemeStore } from './theme.store';
+
+export { defineThemes };
+
+function defineThemes<Theme>(themes: { light: Theme; dark: Theme }) {
+  return {
+    themes,
+    useTheme() {
+      const themeStore = useThemeStore();
+      return computed(() => themes[themeStore.themeType]);
+    },
+  };
+}
diff --git a/src/ui/theme/theme.store.ts b/src/ui/theme/theme.store.ts
new file mode 100644
index 00000000..e2457fca
--- /dev/null
+++ b/src/ui/theme/theme.store.ts
@@ -0,0 +1,20 @@
+import { defineStore } from 'pinia';
+
+export const useThemeStore = defineStore('ui-theme', {
+  state: () => ({
+    themeType: useStorage<'dark' | 'light'>('ui-store:theme-type', 'dark') as Ref<'dark' | 'light'>,
+  }),
+  getters: {
+    isDarkTheme(): boolean {
+      return this.themeType === 'dark';
+    },
+    isLightTheme(): boolean {
+      return this.themeType === 'light';
+    },
+  },
+  actions: {
+    toggleTheme() {
+      this.themeType = this.isDarkTheme ? 'light' : 'dark';
+    },
+  },
+});
diff --git a/src/ui/theme/themes.ts b/src/ui/theme/themes.ts
new file mode 100644
index 00000000..94c87f63
--- /dev/null
+++ b/src/ui/theme/themes.ts
@@ -0,0 +1,37 @@
+import { defineThemes } from './theme.models';
+
+export const { themes: appThemes, useTheme: useAppTheme } = defineThemes({
+  light: {
+    text: {
+      baseColor: 'rgb(51, 54, 57)',
+    },
+
+    primary: {
+      color: '#18a058',
+      colorHover: '#1ea54c',
+      colorPressed: '#0C7A43',
+    },
+
+    warning: {
+      color: '#f59e0b',
+      colorHover: '#f59e0b',
+      colorPressed: '#f59e0b',
+    },
+  },
+  dark: {
+    text: {
+      baseColor: 'rgba(255, 255, 255, 0.82)',
+    },
+
+    primary: {
+      color: '#1ea54c',
+      colorHover: '#36AD6A',
+      colorPressed: '#0C7A43',
+    },
+    warning: {
+      color: '#f59e0b',
+      colorHover: '#f59e0b',
+      colorPressed: '#f59e0b',
+    },
+  },
+});
diff --git a/vite.config.ts b/vite.config.ts
index fa3d7456..0112ebd2 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -73,6 +73,9 @@ export default defineConfig({
       },
     }),
     Components({
+      dirs: ['src/'],
+      extensions: ['vue', 'md'],
+      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
       resolvers: [NaiveUiResolver()],
     }),
     Unocss(),