chore(version): release 2023.04.23-92bd835

docs(changelog): update changelog for 2023.04.23-92bd835
feat(ui-lib): demo pages for c-lib components
2025-11-03 21:43:21 +00:00 · 2023-04-23 22:44:35 +02:00 · 2023-04-23 22:44:35 +02:00 · 2023-04-23 22:43:06 +02:00 · 2023-04-23 17:11:04 +02:00 · 2023-04-23 15:24:20 +02:00
105 changed files with 1980 additions and 617 deletions
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -27,5 +27,8 @@ jobs:
      - name: Run unit test
        run: pnpm test

+      - name: Type check
+        run: pnpm typecheck
+
      - name: Build the app
        run: pnpm build
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,25 @@

 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

+## Version 2023.04.23-92bd835
+
+### Features
+- **ui-lib**: demo pages for c-lib components (92bd835)
+- **new-tool**: diff of two json objects (362f2fa)
+- **ipv4-range-expander**: expands a given IPv4 start and end address to a valid IPv4 subnet (#366) (df989e2)
+- **date converter**: auto focus main input (6d22025)
+
+### Bug fixes
+- **ts**: cleaned legacy typechecking warning (e88c1d5)
+- **mac-address-lookup**: added copy handler on button click (c311e38)
+
+### Refactoring
+- **ui-lib**: prevent c-button to shrink (61ece23)
+- **ui**: replaced naive ui cards with custom ones (f080933)
+- **clean**: removed unused lodash import (bb32513)
+- **clean**: removed useless br tags (74073f5)
+- **ui**: getting ride of naive ui buttons (c45bce3)
+
 ## Version 2023.04.14-dbad773

 ### Features
--- a/components.d.ts
+++ b/components.d.ts
@@ -9,13 +9,70 @@ 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']
+    'CButton.demo': typeof import('./src/ui/c-button/c-button.demo.vue')['default']
+    CCard: typeof import('./src/ui/c-card/c-card.vue')['default']
+    'CCard.demo': typeof import('./src/ui/c-card/c-card.demo.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']
+    'CLink.demo': typeof import('./src/ui/c-link/c-link.demo.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']
+    'Demo.routes': typeof import('./src/ui/demo/demo.routes.vue')['default']
+    DemoWrapper: typeof import('./src/ui/demo/demo-wrapper.vue')['default']
+    DeviceInformation: typeof import('./src/tools/device-information/device-information.vue')['default']
+    DiffViewer: typeof import('./src/tools/json-diff/diff-viewer/diff-viewer.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']
+    JsonDiff: typeof import('./src/tools/json-diff/json-diff.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 +94,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 +106,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,11 +118,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']
  }
 }
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "it-tools",
-  "version": "2023.4.14-dbad773",
+  "version": "2023.4.23-92bd835",
  "description": "Collection of handy online tools for developers, with great UX. ",
  "keywords": [
    "productivity",
@@ -54,7 +54,6 @@
    "date-fns": "^2.29.3",
    "figue": "^1.2.0",
    "fuse.js": "^6.6.2",
-    "hash-wasm": "^4.9.0",
    "highlight.js": "^11.7.0",
    "json5": "^2.2.3",
    "jwt-decode": "^3.1.2",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -64,9 +64,6 @@ dependencies:
  fuse.js:
    specifier: ^6.6.2
    version: 6.6.2
-  hash-wasm:
-    specifier: ^4.9.0
-    version: 4.9.0
  highlight.js:
    specifier: ^11.7.0
    version: 11.7.0
@@ -5015,10 +5012,6 @@ packages:
    resolution: {integrity: sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==}
    dev: true

-  /hash-wasm@4.9.0:
-    resolution: {integrity: sha512-7SW7ejyfnRxuOc7ptQHSf4LDoZaWOivfzqw+5rpcQku0nHfmicPKE51ra9BiRLAmT8+gGLestr1XroUkqdjL6w==}
-    dev: false
-
  /header-case@2.0.4:
    resolution: {integrity: sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==}
    dependencies:
--- a/scripts/create-tool.mjs
+++ b/scripts/create-tool.mjs
@@ -29,9 +29,9 @@ createToolFile(
  `${toolName}.vue`,
  `
 <template>
-  <n-card>
+  <div>
    Lorem ipsum
-  </n-card>
+  </div>
 </template>

 <script setup lang="ts">
--- a/src/components/ColoredCard.vue
+++ b/src/components/ColoredCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <n-card class="colored-card">
+  <c-card class="colored-card">
    <n-space justify="space-between" align="center">
      <n-icon class="icon" size="40" :component="icon" />
    </n-space>
@@ -12,7 +12,7 @@
        <slot />
      </n-ellipsis>
    </div>
-  </n-card>
+  </c-card>
 </template>

 <script setup lang="ts">
--- 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>
+      <c-button
+        variant="text"
+        circle
+        :type="buttonType"
+        :style="{ opacity: isFavorite ? 1 : 0.2 }"
+        @click="toggleFavorite"
+      >
        <n-icon :component="FavoriteFilled" />
-        </template>
-      </n-button>
+      </c-button>
    </template>
    {{ isFavorite ? 'Remove from favorites' : 'Add to favorites' }}
  </n-tooltip>
--- 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>
--- 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">
+      <c-button circle variant="text" to="/about" aria-label="About">
        <n-icon size="25" :component="InfoCircle" />
-        </n-button>
+      </c-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" 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>
--- a/src/components/SearchBar.vue
+++ b/src/components/SearchBar.vue
@@ -81,7 +81,7 @@ function onFocus() {
    <n-auto-complete
      v-model:value="queryString"
      :options="options"
-      :on-select="(value) => onSelect(String(value))"
+      :on-select="(value: string | number) => onSelect(String(value))"
      :render-label="renderOption"
      :default-value="'aa'"
      :get-show="() => displayDropDown"
--- a/src/tools/ipv4-subnet-calculator/copyable-ip-like.vue
+++ b/src/tools/ipv4-subnet-calculator/copyable-ip-like.vue
@@ -1,7 +1,7 @@
 <template>
  <n-tooltip trigger="hover">
    <template #trigger>
-      <span class="ip" @click="handleClick">{{ ip }}</span>
+      <span class="value" @click="handleClick">{{ value }}</span>
    </template>
    {{ tooltipText }}
  </n-tooltip>
@@ -11,13 +11,13 @@
 import { useClipboard } from '@vueuse/core';
 import { ref, toRefs } from 'vue';

-const props = withDefaults(defineProps<{ ip?: string }>(), { ip: '' });
-const { ip } = toRefs(props);
+const props = withDefaults(defineProps<{ value?: string }>(), { value: '' });
+const { value } = toRefs(props);

 const initialText = 'Copy to clipboard';
 const tooltipText = ref(initialText);

-const { copy } = useClipboard({ source: ip });
+const { copy } = useClipboard({ source: value });

 function handleClick() {
  copy();
@@ -28,8 +28,8 @@ function handleClick() {
 </script>

 <style scoped lang="less">
-.ip {
-  font-family: monospace;
+.value {
  cursor: pointer;
+  font-family: monospace;
 }
 </style>
--- a/src/components/TextareaCopyable.vue
+++ b/src/components/TextareaCopyable.vue
@@ -1,6 +1,6 @@
 <template>
  <div style="overflow-x: hidden; width: 100%">
-    <n-card class="result-card">
+    <c-card class="result-card">
      <n-scrollbar
        x-scrollable
        trigger="none"
@@ -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>
+    </c-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>
--- a/src/components/ToolCard.vue
+++ b/src/components/ToolCard.vue
@@ -1,6 +1,6 @@
 <template>
  <router-link :to="tool.path">
-    <n-card class="tool-card">
+    <c-card class="tool-card">
      <n-space justify="space-between" align="center">
        <n-icon class="icon" size="40" :component="tool.icon" />
        <n-space align="center">
@@ -29,7 +29,7 @@
          <br />&nbsp;
        </n-ellipsis>
      </div>
-    </n-card>
+    </c-card>
  </router-link>
 </template>

@@ -37,11 +37,14 @@
 import type { Tool } from '@/tools/tools.types';
 import { useThemeVars } from 'naive-ui';
 import { toRefs } from 'vue';
+import { useAppTheme } from '@/ui/theme/themes';
 import FavoriteButton from './FavoriteButton.vue';

 const props = defineProps<{ tool: Tool & { category: string } }>();
 const { tool } = toRefs(props);
 const theme = useThemeVars();
+
+const appTheme = useAppTheme();
 </script>

 <style lang="less" scoped>
@@ -50,8 +53,11 @@ a {
 }

 .tool-card {
+  transition: border-color ease 0.5s;
+  border-width: 2px !important;
+
  &:hover {
-    border-color: var(--n-color-target);
+    border-color: v-bind('appTheme.primary.colorHover');
  }

  .icon {
--- a/src/composable/copy.ts
+++ b/src/composable/copy.ts
@@ -1,9 +1,8 @@
-import { useClipboard } from '@vueuse/core';
+import { useClipboard, type MaybeRef, get } from '@vueuse/core';
 import { useMessage } from 'naive-ui';
-import type { Ref } from 'vue';

-export function useCopy({ source, text = 'Copied to the clipboard' }: { source: Ref; text?: string }) {
-  const { copy } = useClipboard({ source });
+export function useCopy({ source, text = 'Copied to the clipboard' }: { source: MaybeRef<unknown>; text?: string }) {
+  const { copy } = useClipboard({ source: computed(() => String(get(source))) });
  const message = useMessage();

  return {
--- a/src/composable/queryParams.ts
+++ b/src/composable/queryParams.ts
@@ -26,7 +26,7 @@ function useQueryParam<T>({ name, defaultValue }: { name: string; defaultValue:

  return computed<T>({
    get() {
-      return transformer.fromQuery(proxy.value) as T;
+      return transformer.fromQuery(proxy.value) as unknown as T;
    },
    set(value) {
      proxy.value = transformer.toQuery(value as never);
--- a/src/config.ts
+++ b/src/config.ts
@@ -23,9 +23,9 @@ export const config = figue({
    env: {
      doc: 'Application current env',
      format: 'enum',
-      values: ['production', 'development', 'test'],
+      values: ['production', 'development', 'preview', 'test'],
      default: 'development',
-      env: 'MODE',
+      env: 'VITE_VERCEL_ENV',
    },
  },
  plausible: {
--- 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"
-              >
+            <c-button to="/" circle variant="text" aria-label="Home">
              <n-icon size="25" :component="Home2" />
-              </n-button>
+            </c-button>
          </template>
          Home
        </n-tooltip>
-        </router-link>

        <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;
--- 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>
--- 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>
--- a/src/router.ts
+++ b/src/router.ts
@@ -4,6 +4,7 @@ import HomePage from './pages/Home.page.vue';
 import NotFound from './pages/404.page.vue';
 import { tools } from './tools';
 import { config } from './config';
+import { routes as demoRoutes } from './ui/demo/demo.routes';

 const toolsRoutes = tools.map(({ path, name, component, ...config }) => ({
  path,
@@ -32,6 +33,7 @@ const router = createRouter({
    },
    ...toolsRoutes,
    ...toolsRedirectRoutes,
+    ...(config.app.env === 'development' ? demoRoutes : []),
    { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
  ],
 });
--- a/src/tools/argon2-hash-generator/argon2-hash-generator.e2e.spec.ts
+++ b/src/tools/argon2-hash-generator/argon2-hash-generator.e2e.spec.ts
@@ -1,37 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-test.describe('Tool - Argon2 hash generator', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto('/argon2-hash-generator');
-  });
-
-  test('Has correct title', async ({ page }) => {
-    await expect(page).toHaveTitle('Argon2 hash generator - IT Tools');
-  });
-
-  test('hash a string a verify that the result match', async ({ page }) => {
-    await page.getByTestId('input').fill('azerty');
-
-    await new Promise((resolve) => setTimeout(resolve, 500));
-    const hash = await page.getByTestId('hash').inputValue();
-
-    await page.getByTestId('compare-string').fill('azerty');
-    await page.getByTestId('compare-hash').fill(hash);
-
-    await new Promise((resolve) => setTimeout(resolve, 500));
-    const doTheyMatch = await page.getByTestId('do-they-match').innerText();
-
-    expect(doTheyMatch.trim()).toEqual('Yes');
-  });
-
-  test('hash a string a verify that the does not result match another string', async ({ page }) => {
-    await page.getByTestId('input').fill('azerty');
-    const hash = await page.getByTestId('hash').inputValue();
-
-    await page.getByTestId('compare-string').fill('NOT AZERTY');
-    await page.getByTestId('compare-hash').fill(hash);
-    const doTheyMatch = await page.getByTestId('do-they-match').innerText();
-
-    expect(doTheyMatch.trim()).toEqual('No');
-  });
-});
--- a/src/tools/argon2-hash-generator/argon2-hash-generator.vue
+++ b/src/tools/argon2-hash-generator/argon2-hash-generator.vue
@@ -1,107 +0,0 @@
-<template>
-  <n-card title="Hash">
-    <n-form label-width="120">
-      <n-form-item label="Your string: " label-placement="left">
-        <n-input
-          v-model:value="input"
-          placeholder="Your string to bcrypt..."
-          autocomplete="off"
-          autocorrect="off"
-          autocapitalize="off"
-          spellcheck="false"
-          :input-props="{
-            'data-test-id': 'input',
-          }"
-        />
-      </n-form-item>
-      <n-form-item label="Iteration: " label-placement="left">
-        <n-input-number v-model:value="iterations" placeholder="Iterations..." min="0" w-full />
-      </n-form-item>
-      <n-form-item label="Memory size: " label-placement="left">
-        <n-input-number v-model:value="memorySize" placeholder="Memory size..." min="0" w-full />
-      </n-form-item>
-      <n-input
-        :value="hashed"
-        readonly
-        style="text-align: center"
-        placeholder="Set a string to hash above..."
-        :input-props="{
-          'data-test-id': 'hash',
-        }"
-      />
-    </n-form>
-    <br />
-    <n-space justify="center">
-      <n-button secondary @click="copy"> Copy hash </n-button>
-    </n-space>
-  </n-card>
-
-  <n-card title="Compare string with hash">
-    <n-form label-width="120">
-      <n-form-item label="Your string: " label-placement="left">
-        <n-input
-          v-model:value="compareString"
-          placeholder="Your string to compare..."
-          autocomplete="off"
-          autocorrect="off"
-          autocapitalize="off"
-          spellcheck="false"
-          :input-props="{
-            'data-test-id': 'compare-string',
-          }"
-        />
-      </n-form-item>
-      <n-form-item label="Your hash: " label-placement="left">
-        <n-input
-          v-model:value="compareHash"
-          placeholder="Your hash to compare..."
-          autocomplete="off"
-          autocorrect="off"
-          autocapitalize="off"
-          spellcheck="false"
-          :input-props="{
-            'data-test-id': 'compare-hash',
-          }"
-        />
-      </n-form-item>
-      <n-form-item label="Do they match ? " label-placement="left" :show-feedback="false">
-        <span data-test-id="do-they-match">
-          <n-tag v-if="compareMatch" :bordered="false" type="success" round>Yes</n-tag>
-          <n-tag v-else :bordered="false" type="error" round>No</n-tag>
-        </span>
-      </n-form-item>
-    </n-form>
-  </n-card>
-</template>
-
-<script setup lang="ts">
-import { useCopy } from '@/composable/copy';
-import { argon2id, argon2Verify } from 'hash-wasm';
-
-const input = ref('');
-const iterations = ref(32);
-const memorySize = ref(512);
-const hashLength = ref(32);
-
-const hashed = computedAsync(
-  async () =>
-    argon2id({
-      password: input.value,
-      salt: window.crypto.getRandomValues(new Uint8Array(16)),
-      parallelism: 1,
-      iterations: iterations.value,
-      memorySize: memorySize.value,
-      hashLength: hashLength.value,
-      outputType: 'encoded',
-    }),
-  '',
-);
-const { copy } = useCopy({ source: hashed, text: 'Hashed string copied to the clipboard' });
-
-const compareString = ref('');
-const compareHash = ref('');
-const compareMatch = computedAsync(
-  () => argon2Verify({ password: compareString.value, hash: compareHash.value }),
-  false,
-);
-</script>
--- a/src/tools/argon2-hash-generator/index.ts
+++ b/src/tools/argon2-hash-generator/index.ts
@@ -1,12 +0,0 @@
-import { Lock } from '@vicons/tabler';
-import { defineTool } from '../tool';
-
-export const tool = defineTool({
-  name: 'Argon2 hash generator',
-  path: '/argon2-hash-generator',
-  description: 'Hash and compare string (password) using Argon2',
-  keywords: ['argon2', 'hash', 'generator', 'password', 'salt', 'crypto', 'security'],
-  component: () => import('./argon2-hash-generator.vue'),
-  icon: Lock,
-  createdAt: new Date('2023-04-16'),
-});
--- a/src/tools/base64-file-converter/base64-file-converter.vue
+++ b/src/tools/base64-file-converter/base64-file-converter.vue
@@ -1,5 +1,5 @@
 <template>
-  <n-card title="Base64 to file">
+  <c-card title="Base64 to file">
    <n-form-item
      :feedback="base64InputValidation.message"
      :validation-status="base64InputValidation.status"
@@ -8,13 +8,13 @@
      <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>
+  </c-card>

-  <n-card title="File to base64">
+  <c-card title="File to base64">
    <n-upload v-model:file-list="fileList" :show-file-list="true" :on-before-upload="onUpload" list-type="image">
      <n-upload-dragger>
        <div mb-2>
@@ -26,9 +26,9 @@

    <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>
+  </c-card>
 </template>

 <script setup lang="ts">
--- a/src/tools/base64-string-converter/base64-string-converter.vue
+++ b/src/tools/base64-string-converter/base64-string-converter.vue
@@ -1,5 +1,5 @@
 <template>
-  <n-card title="String to base64">
+  <c-card title="String to base64">
    <n-form-item label="String to encode">
      <n-input v-model:value="textInput" type="textarea" placeholder="Put your string here..." rows="5" />
    </n-form-item>
@@ -15,11 +15,11 @@
    </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>
+  </c-card>

-  <n-card title="Base64 to string">
+  <c-card title="Base64 to string">
    <n-form-item label="Base64 string to decode" v-bind="b64Validation.attrs">
      <n-input v-model:value="base64Input" type="textarea" placeholder="Your base64 string..." rows="5" />
    </n-form-item>
@@ -29,9 +29,9 @@
    </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>
+  </c-card>
 </template>

 <script setup lang="ts">
--- a/src/tools/basic-auth-generator/basic-auth-generator.vue
+++ b/src/tools/basic-auth-generator/basic-auth-generator.vue
@@ -13,17 +13,15 @@
      />
    </n-form-item>

-    <br />
-    <n-card>
+    <c-card>
      <n-statistic label="Authorization header:" class="header">
        <n-scrollbar x-scrollable style="max-width: 550px; margin-bottom: -10px; padding-bottom: 10px" trigger="none">
          {{ header }}
        </n-scrollbar>
      </n-statistic>
-    </n-card>
-    <br />
-    <n-space justify="center">
-      <n-button secondary @click="copy">Copy header</n-button>
+    </c-card>
+    <n-space justify="center" mt-5>
+      <c-button @click="copy">Copy header</c-button>
    </n-space>
  </div>
 </template>
--- a/src/tools/bcrypt/bcrypt.vue
+++ b/src/tools/bcrypt/bcrypt.vue
@@ -1,5 +1,5 @@
 <template>
-  <n-card title="Hash">
+  <c-card title="Hash">
    <n-form label-width="120">
      <n-form-item label="Your string: " label-placement="left">
        <n-input
@@ -16,13 +16,12 @@
      </n-form-item>
      <n-input :value="hashed" readonly style="text-align: center" />
    </n-form>
-    <br />
-    <n-space justify="center">
-      <n-button secondary @click="copy"> Copy hash </n-button>
+    <n-space justify="center" mt-5>
+      <c-button @click="copy"> Copy hash </c-button>
    </n-space>
-  </n-card>
+  </c-card>

-  <n-card title="Compare string with hash">
+  <c-card title="Compare string with hash">
    <n-form label-width="120">
      <n-form-item label="Your string: " label-placement="left">
        <n-input
@@ -37,7 +36,7 @@
      <n-form-item label="Your hash: " label-placement="left">
        <n-input
          v-model:value="compareHash"
-          placeholder="Your hash to compare..."
+          placeholder="Your hahs to compare..."
          autocomplete="off"
          autocorrect="off"
          autocapitalize="off"
@@ -45,17 +44,21 @@
        />
      </n-form-item>
      <n-form-item label="Do they match ? " label-placement="left" :show-feedback="false">
-        <n-tag v-if="compareMatch" :bordered="false" type="success" round>Yes</n-tag>
-        <n-tag v-else :bordered="false" type="error" round>No</n-tag>
+        <div class="compare-result" :class="{ positive: compareMatch }">
+          {{ compareMatch ? 'Yes' : 'No' }}
+        </div>
      </n-form-item>
    </n-form>
-  </n-card>
+  </c-card>
 </template>

 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import { hashSync, compareSync } from 'bcryptjs';
 import { useCopy } from '@/composable/copy';
+import { useThemeVars } from 'naive-ui';
+
+const themeVars = useThemeVars();

 const input = ref('');
 const saltCount = ref(10);
@@ -66,3 +69,13 @@ const compareString = ref('');
 const compareHash = ref('');
 const compareMatch = computed(() => compareSync(compareString.value, compareHash.value));
 </script>
+
+<style lang="less" scoped>
+.compare-result {
+  color: v-bind('themeVars.errorColor');
+
+  &.positive {
+    color: v-bind('themeVars.successColor');
+  }
+}
+</style>
--- a/src/tools/benchmark-builder/benchmark-builder.vue
+++ b/src/tools/benchmark-builder/benchmark-builder.vue
@@ -1,8 +1,8 @@
 <template>
  <n-scrollbar style="flex: 1" x-scrollable>
-    <n-space :wrap="false" style="flex: 1" justify="center" :size="0">
+    <n-space :wrap="false" style="flex: 1" justify="center" :size="0" mb-5>
      <div v-for="(suite, index) of suites" :key="index">
-        <n-card style="width: 292px; margin: 0 8px 5px">
+        <c-card style="width: 292px; margin: 0 8px 5px">
          <n-form-item label="Suite name:" :show-feedback="false" label-placement="left">
            <n-input v-model:value="suite.title" placeholder="Suite name..." />
          </n-form-item>
@@ -11,25 +11,23 @@
          <n-form-item label="Suite values" :show-feedback="false">
            <dynamic-values v-model:values="suite.data" />
          </n-form-item>
-        </n-card>
+        </c-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>
-    <br />
  </n-scrollbar>

  <div style="flex: 0 0 100%">
@@ -39,15 +37,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>

@@ -71,10 +68,9 @@
          </tr>
        </tbody>
      </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>
+      <n-space justify="center" mt-5>
+        <c-button @click="copyAsMarkdown">Copy as markdown table</c-button>
+        <c-button @click="copyAsBulletList">Copy as bullet list</c-button>
      </n-space>
    </div>
  </div>
--- 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>

--- a/src/tools/bip39-generator/bip39-generator.vue
+++ b/src/tools/bip39-generator/bip39-generator.vue
@@ -1,6 +1,5 @@
 <template>
  <div>
-    <n-card>
    <n-grid cols="3" x-gap="12">
      <n-gi span="1">
        <n-form-item label="Language:">
@@ -18,16 +17,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,12 +47,11 @@
          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>
  </div>
 </template>

--- a/src/tools/case-converter/case-converter.vue
+++ b/src/tools/case-converter/case-converter.vue
@@ -1,5 +1,5 @@
 <template>
-  <n-card>
+  <c-card>
    <n-form label-width="120" label-placement="left" :show-feedback="false">
      <n-form-item label="Your string:">
        <n-input v-model:value="input" />
@@ -41,7 +41,7 @@
        <input-copyable :value="snakeCase(input, baseConfig)" />
      </n-form-item>
    </n-form>
-  </n-card>
+  </c-card>
 </template>

 <script setup lang="ts">
--- a/src/tools/chronometer/chronometer.vue
+++ b/src/tools/chronometer/chronometer.vue
@@ -1,14 +1,13 @@
 <template>
  <div>
-    <n-card>
+    <c-card>
      <div class="duration">{{ formatMs(counter) }}</div>
-    </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-card>
+    <n-space justify="center" mt-5>
+      <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>
--- a/src/tools/color-converter/color-converter.vue
+++ b/src/tools/color-converter/color-converter.vue
@@ -1,5 +1,5 @@
 <template>
-  <n-card>
+  <c-card>
    <n-form label-width="100" label-placement="left">
      <n-form-item label="color picker:">
        <n-color-picker
@@ -30,7 +30,7 @@
        <input-copyable v-model:value="cmyk" :on-input="(v: string) => onInputUpdated(v, 'cmyk')" />
      </n-form-item>
    </n-form>
-  </n-card>
+  </c-card>
 </template>

 <script setup lang="ts">
--- a/src/tools/crontab-generator/crontab-generator.vue
+++ b/src/tools/crontab-generator/crontab-generator.vue
@@ -1,5 +1,5 @@
 <template>
-  <n-card>
+  <c-card>
    <n-form-item
      class="cron"
      :show-label="false"
@@ -27,8 +27,8 @@
        </n-form-item>
      </n-form>
    </n-space>
-  </n-card>
-  <n-card>
+  </c-card>
+  <c-card>
    <pre>
 ┌──────────── [optional] seconds (0 - 59)
 | ┌────────── minute (0 - 59)
@@ -41,7 +41,7 @@
    >

    <n-space v-if="styleStore.isSmallScreen" vertical>
-      <n-card v-for="{ symbol, meaning, example, equivalent } in helpers" :key="symbol" embedded :bordered="false">
+      <c-card v-for="{ symbol, meaning, example, equivalent } in helpers" :key="symbol" important:border-none>
        <div>
          Symbol: <strong>{{ symbol }}</strong>
        </div>
@@ -57,7 +57,7 @@
        <div>
          Equivalent: <strong>{{ equivalent }}</strong>
        </div>
-      </n-card>
+      </c-card>
    </n-space>
    <n-table v-else size="small">
      <thead>
@@ -79,7 +79,7 @@
        </tr>
      </tbody>
    </n-table>
-  </n-card>
+  </c-card>
 </template>

 <script setup lang="ts">
--- a/src/tools/date-time-converter/date-time-converter.vue
+++ b/src/tools/date-time-converter/date-time-converter.vue
@@ -4,6 +4,7 @@
      <n-input-group>
        <n-input
          v-model:value="inputDate"
+          autofocus
          :on-input="onDateInputChanged"
          placeholder="Put you date string here..."
          clearable
--- a/src/tools/device-information/device-information.vue
+++ b/src/tools/device-information/device-information.vue
@@ -1,8 +1,7 @@
 <template>
-  <n-card v-for="{ name, information } in sections" :key="name" :title="name">
+  <c-card v-for="{ name, information } in sections" :key="name" :title="name">
    <n-grid cols="1 400:2" x-gap="12" y-gap="12">
      <n-gi v-for="{ label, value: { value } } in information" :key="label" class="information">
-        <n-card :bordered="false" embedded>
        <div class="label">
          {{ label }}
        </div>
@@ -13,10 +12,9 @@
          </n-ellipsis>
          <div v-else class="undefined-value">unknown</div>
        </div>
-        </n-card>
      </n-gi>
    </n-grid>
-  </n-card>
+  </c-card>
 </template>

 <script setup lang="ts">
@@ -81,6 +79,10 @@ const sections = [

 <style lang="less" scoped>
 .information {
+  padding: 14px 16px;
+  border-radius: 4px;
+  background-color: #aaaaaa11;
+
  .label {
    font-size: 14px;
    opacity: 0.8;
--- 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
@@ -13,15 +13,13 @@
    <n-divider />

    <textarea-copyable :value="dockerCompose" language="yaml" />
-    <br />
-    <br />
-    <n-space justify="center">
-      <n-button :disabled="dockerCompose === ''" secondary @click="download"> Download docker-compose.yml </n-button>
+
+    <n-space justify="center" mt-5>
+      <c-button :disabled="dockerCompose === ''" secondary @click="download"> Download docker-compose.yml </c-button>
    </n-space>

    <div v-if="notComposable.length > 0">
-      <br />
-      <n-alert title="This options are not translatable to docker-compose" type="info">
+      <n-alert title="This options are not translatable to docker-compose" type="info" mt-5>
        <ul>
          <li v-for="(message, index) of notComposable" :key="index">{{ message }}</li>
        </ul>
@@ -29,10 +27,10 @@
    </div>

    <div v-if="notImplemented.length > 0">
-      <br />
      <n-alert
        title="This options are not yet implemented and therefore haven't been translated to docker-compose"
        type="warning"
+        mt-5
      >
        <ul>
          <li v-for="(message, index) of notImplemented" :key="index">{{ message }}</li>
@@ -41,8 +39,7 @@
    </div>

    <div v-if="errors.length > 0">
-      <br />
-      <n-alert title="The following errors occured" type="error">
+      <n-alert title="The following errors occured" type="error" mt-5>
        <ul>
          <li v-for="(message, index) of errors" :key="index">{{ message }}</li>
        </ul>
--- a/src/tools/encryption/encryption.vue
+++ b/src/tools/encryption/encryption.vue
@@ -1,5 +1,5 @@
 <template>
-  <n-card title="Encrypt">
+  <c-card title="Encrypt">
    <n-space item-style="flex: 1 1 0">
      <n-form-item label="Your text:" :show-feedback="false">
        <n-input
@@ -21,8 +21,7 @@
        </n-form-item>
      </n-space>
    </n-space>
-    <br />
-    <n-form-item label="Your text encrypted:" :show-feedback="false">
+    <n-form-item label="Your text encrypted:" :show-feedback="false" mt-5>
      <n-input
        :value="cypherOutput"
        type="textarea"
@@ -35,8 +34,8 @@
        spellcheck="false"
      />
    </n-form-item>
-  </n-card>
-  <n-card title="Decrypt">
+  </c-card>
+  <c-card title="Decrypt">
    <n-space item-style="flex: 1 1 0">
      <n-form-item label="Your encrypted text:" :show-feedback="false">
        <n-input
@@ -58,8 +57,7 @@
        </n-form-item>
      </n-space>
    </n-space>
-    <br />
-    <n-form-item label="Your decrypted text:" :show-feedback="false">
+    <n-form-item label="Your decrypted text:" :show-feedback="false" mt-5>
      <n-input
        :value="decryptOutput"
        type="textarea"
@@ -72,7 +70,7 @@
        spellcheck="false"
      />
    </n-form-item>
-  </n-card>
+  </c-card>
 </template>

 <script setup lang="ts">
--- a/src/tools/eta-calculator/eta-calculator.vue
+++ b/src/tools/eta-calculator/eta-calculator.vue
@@ -5,7 +5,6 @@
      hours and 10 minutes to wash them all, and if you start now, you'll end
      {{ endAt }}.
    </n-text>
-    <br />
    <n-divider />
    <n-space item-style="flex:1 1 0">
      <div>
@@ -38,12 +37,12 @@

        <n-divider />
        <n-space vertical>
-          <n-card>
+          <c-card>
            <n-statistic label="Total duration">{{ formatMsDuration(durationMs) }}</n-statistic>
-          </n-card>
-          <n-card>
+          </c-card>
+          <c-card>
            <n-statistic label="It will end ">{{ endAt }}</n-statistic>
-          </n-card>
+          </c-card>
        </n-space>
      </div>
    </n-space>
--- a/src/tools/hash-text/hash-text.vue
+++ b/src/tools/hash-text/hash-text.vue
@@ -1,6 +1,6 @@
 <template>
  <div>
-    <n-card>
+    <c-card>
      <n-input v-model:value="clearText" type="textarea" placeholder="Your string to hash..." rows="3" />

      <n-divider />
@@ -35,7 +35,7 @@
          <input-copyable :value="hashText(algo, clearText)" readonly />
        </n-input-group>
      </div>
-    </n-card>
+    </c-card>
  </div>
 </template>

--- 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>
--- a/src/tools/html-entities/html-entities.vue
+++ b/src/tools/html-entities/html-entities.vue
@@ -1,5 +1,5 @@
 <template>
-  <n-card title="Escape html entities">
+  <c-card title="Escape html entities">
    <n-form-item label="Your string :">
      <n-input
        v-model:value="escapeInput"
@@ -20,10 +20,10 @@
    </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">
+  </c-card>
+  <c-card title="Unescape html entities">
    <n-form-item label="Your escaped string :">
      <n-input
        v-model:value="unescapeInput"
@@ -44,9 +44,9 @@
    </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>
+  </c-card>
 </template>

 <script setup lang="ts">
--- a/src/tools/html-wysiwyg-editor/editor/editor.vue
+++ b/src/tools/html-wysiwyg-editor/editor/editor.vue
@@ -1,12 +1,12 @@
 <template>
-  <n-card v-if="editor" class="editor">
-    <template #header>
+  <c-card v-if="editor" important:p0>
    <menu-bar class="editor-header" :editor="editor" />
    <n-divider style="margin-top: 0" />
-    </template>

+    <div px8 pb6>
      <editor-content class="editor-content" :editor="editor" />
-  </n-card>
+    </div>
+  </c-card>
 </template>

 <script setup lang="ts">
@@ -34,10 +34,6 @@ tryOnBeforeUnmount(() => {
 </script>

 <style scoped lang="less">
-::v-deep(.n-card-header) {
-  padding: 0;
-}
-
 ::v-deep(.ProseMirror-focused) {
  outline: none;
 }
--- 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>
+      <c-button circle variant="text" :type="isActive?.() ? 'primary' : 'default'" @click="action">
        <n-icon :component="icon" />
-        </template>
-      </n-button>
+      </c-button>
    </template>

    {{ title }}
--- a/src/tools/http-status-codes/http-status-codes.vue
+++ b/src/tools/http-status-codes/http-status-codes.vue
@@ -20,21 +20,18 @@
    <div v-for="{ codes, category } of codesByCategoryFiltered" :key="category" mb-8>
      <n-h2> {{ category }} </n-h2>

-      <n-space vertical :size="20">
-        <n-card v-for="{ code, description, name, type } of codes" :key="code">
+      <c-card v-for="{ code, description, name, type } of codes" :key="code" mb-2>
        <n-space align="center">
          <n-text strong text-lg> {{ code }} {{ name }} </n-text>
        </n-space>
        <n-text depth="3">{{ description }} {{ type !== 'HTTP' ? `For ${type}.` : '' }}</n-text>
-        </n-card>
-      </n-space>
+      </c-card>
    </div>
  </div>
 </template>

 <script setup lang="ts">
 import { useFuzzySearch } from '@/composable/fuzzySearch';
-import _ from 'lodash';
 import { SearchRound } from '@vicons/material';
 import { codesByCategories } from './http-status-codes.constants';

--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -1,7 +1,8 @@
 import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
-import { tool as argon2HashGenerator } from './argon2-hash-generator';
+import { tool as jsonDiff } from './json-diff';
+import { tool as ipv4RangeExpander } from './ipv4-range-expander';
 import { tool as httpStatusCodes } from './http-status-codes';
 import { tool as yamlToJson } from './yaml-to-json-converter';
 import { tool as jsonToYaml } from './json-to-yaml-converter';
@@ -57,17 +58,7 @@ import { tool as macAddressLookup } from './mac-address-lookup';
 export const toolsByCategory: ToolCategory[] = [
  {
    name: 'Crypto',
-    components: [
-      tokenGenerator,
-      hashText,
-      bcrypt,
-      argon2HashGenerator,
-      uuidGenerator,
-      cypher,
-      bip39,
-      hmacGenerator,
-      rsaKeyPairGenerator,
-    ],
+    components: [tokenGenerator, hashText, bcrypt, uuidGenerator, cypher, bip39, hmacGenerator, rsaKeyPairGenerator],
  },
  {
    name: 'Converter',
@@ -101,6 +92,7 @@ export const toolsByCategory: ToolCategory[] = [
      htmlWysiwygEditor,
      userAgentParser,
      httpStatusCodes,
+      jsonDiff,
    ],
  },
  {
@@ -122,7 +114,7 @@ export const toolsByCategory: ToolCategory[] = [
  },
  {
    name: 'Network',
-    components: [ipv4SubnetCalculator, ipv4AddressConverter, macAddressLookup, ipv6UlaGenerator],
+    components: [ipv4SubnetCalculator, ipv4AddressConverter, ipv4RangeExpander, macAddressLookup, ipv6UlaGenerator],
  },
  {
    name: 'Math',
--- a/src/tools/integer-base-converter/integer-base-converter.vue
+++ b/src/tools/integer-base-converter/integer-base-converter.vue
@@ -1,6 +1,6 @@
 <template>
  <div>
-    <n-card>
+    <c-card>
      <div v-if="styleStore.isSmallScreen">
        <n-input-group>
          <n-input-group-label style="flex: 0 0 120px"> Input number: </n-input-group-label>
@@ -75,7 +75,7 @@
          :placeholder="`Base ${outputBase} will be here...`"
        />
      </n-input-group>
-    </n-card>
+    </c-card>
  </div>
 </template>

--- a/src/tools/ipv4-range-expander/index.ts
+++ b/src/tools/ipv4-range-expander/index.ts
@@ -0,0 +1,13 @@
+import { UnfoldMoreOutlined } from '@vicons/material';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'IPv4 range expander',
+  path: '/ipv4-range-expander',
+  description:
+    'Given a start and an end IPv4 address this tool calculates a valid IPv4 network with its CIDR notation.',
+  keywords: ['ipv4', 'range', 'expander', 'subnet', 'creator', 'cidr'],
+  component: () => import('./ipv4-range-expander.vue'),
+  icon: UnfoldMoreOutlined,
+  createdAt: new Date('2023-04-19'),
+});
--- a/src/tools/ipv4-range-expander/ipv4-range-expander.e2e.spec.ts
+++ b/src/tools/ipv4-range-expander/ipv4-range-expander.e2e.spec.ts
@@ -0,0 +1,32 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Tool - IPv4 range expander', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/ipv4-range-expander');
+  });
+
+  test('Has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('IPv4 range expander - IT Tools');
+  });
+
+  test('Calculates correct for valid input', async ({ page }) => {
+    await page.getByPlaceholder('Start IPv4 address...').fill('192.168.1.1');
+    await page.getByPlaceholder('End IPv4 address...').fill('192.168.7.255');
+
+    expect(await page.getByTestId('start-address.old').textContent()).toEqual('192.168.1.1');
+    expect(await page.getByTestId('start-address.new').textContent()).toEqual('192.168.0.0');
+    expect(await page.getByTestId('end-address.old').textContent()).toEqual('192.168.7.255');
+    expect(await page.getByTestId('end-address.new').textContent()).toEqual('192.168.7.255');
+    expect(await page.getByTestId('addresses-in-range.old').textContent()).toEqual('1,791');
+    expect(await page.getByTestId('addresses-in-range.new').textContent()).toEqual('2,048');
+    expect(await page.getByTestId('cidr.old').textContent()).toEqual('');
+    expect(await page.getByTestId('cidr.new').textContent()).toEqual('192.168.0.0/21');
+  });
+
+  test('Hides result for invalid input', async ({ page }) => {
+    await page.getByPlaceholder('Start IPv4 address...').fill('192.168.1.1');
+    await page.getByPlaceholder('End IPv4 address...').fill('192.168.0.255');
+
+    await expect(page.getByTestId('result')).not.toBeVisible();
+  });
+});
--- a/src/tools/ipv4-range-expander/ipv4-range-expander.service.test.ts
+++ b/src/tools/ipv4-range-expander/ipv4-range-expander.service.test.ts
@@ -0,0 +1,21 @@
+import { expect, describe, it } from 'vitest';
+import { calculateCidr } from './ipv4-range-expander.service';
+
+describe('ipv4RangeExpander', () => {
+  describe('when there are two valid ipv4 addresses given', () => {
+    it('should calculate valid cidr for given addresses', () => {
+      const result = calculateCidr({ startIp: '192.168.1.1', endIp: '192.168.7.255' });
+
+      expect(result).toBeDefined();
+      expect(result?.oldSize).toEqual(1791);
+      expect(result?.newSize).toEqual(2048);
+      expect(result?.newStart).toEqual('192.168.0.0');
+      expect(result?.newEnd).toEqual('192.168.7.255');
+      expect(result?.newCidr).toEqual('192.168.0.0/21');
+    });
+
+    it('should return empty result for invalid input', () => {
+      expect(calculateCidr({ startIp: '192.168.7.1', endIp: '192.168.6.255' })).not.toBeDefined();
+    });
+  });
+});
--- a/src/tools/ipv4-range-expander/ipv4-range-expander.service.ts
+++ b/src/tools/ipv4-range-expander/ipv4-range-expander.service.ts
@@ -0,0 +1,63 @@
+import type { Ipv4RangeExpanderResult } from './ipv4-range-expander.types';
+import { convertBase } from '../integer-base-converter/integer-base-converter.model';
+import { ipv4ToInt } from '../ipv4-address-converter/ipv4-address-converter.service';
+export { calculateCidr };
+
+function bits2ip(ipInt: number) {
+  return (ipInt >>> 24) + '.' + ((ipInt >> 16) & 255) + '.' + ((ipInt >> 8) & 255) + '.' + (ipInt & 255);
+}
+
+function getRangesize(start: string, end: string) {
+  if (start == null || end == null) return -1;
+
+  return 1 + parseInt(end, 2) - parseInt(start, 2);
+}
+
+function getCidr(start: string, end: string) {
+  if (start == null || end == null) return null;
+
+  const range = getRangesize(start, end);
+  if (range < 1) {
+    return null;
+  }
+
+  let mask = 32;
+  for (let i = 0; i < 32; i++) {
+    if (start[i] !== end[i]) {
+      mask = i;
+      break;
+    }
+  }
+
+  const newStart = start.substring(0, mask) + '0'.repeat(32 - mask);
+  const newEnd = end.substring(0, mask) + '1'.repeat(32 - mask);
+
+  return { start: newStart, end: newEnd, mask: mask };
+}
+
+function calculateCidr({ startIp, endIp }: { startIp: string; endIp: string }) {
+  const start = convertBase({
+    value: ipv4ToInt({ ip: startIp }).toString(),
+    fromBase: 10,
+    toBase: 2,
+  });
+  const end = convertBase({
+    value: ipv4ToInt({ ip: endIp }).toString(),
+    fromBase: 10,
+    toBase: 2,
+  });
+
+  const cidr = getCidr(start, end);
+  if (cidr != null) {
+    const result: Ipv4RangeExpanderResult = {};
+    result.newEnd = bits2ip(parseInt(cidr.end, 2));
+    result.newStart = bits2ip(parseInt(cidr.start, 2));
+    result.newCidr = result.newStart + '/' + cidr.mask;
+    result.newSize = getRangesize(cidr.start, cidr.end);
+
+    result.oldSize = getRangesize(start, end);
+    return result;
+  }
+
+  return undefined;
+}
--- a/src/tools/ipv4-range-expander/ipv4-range-expander.types.ts
+++ b/src/tools/ipv4-range-expander/ipv4-range-expander.types.ts
@@ -0,0 +1,7 @@
+export type Ipv4RangeExpanderResult = {
+  oldSize?: number;
+  newStart?: string;
+  newEnd?: string;
+  newCidr?: string;
+  newSize?: number;
+};
--- a/src/tools/ipv4-range-expander/ipv4-range-expander.vue
+++ b/src/tools/ipv4-range-expander/ipv4-range-expander.vue
@@ -0,0 +1,110 @@
+<template>
+  <div>
+    <n-space item-style="flex:1 1 0">
+      <div>
+        <n-space item-style="flex:1 1 0">
+          <n-form-item label="Start address" v-bind="startIpValidation.attrs">
+            <n-input v-model:value="rawStartAddress" placeholder="Start IPv4 address..." />
+          </n-form-item>
+          <n-form-item label="End address" v-bind="endIpValidation.attrs">
+            <n-input v-model:value="rawEndAddress" placeholder="End IPv4 address..." />
+          </n-form-item>
+        </n-space>
+
+        <n-table v-if="showResult" data-test-id="result">
+          <thead>
+            <tr>
+              <th scope="col">&nbsp;</th>
+              <th scope="col">old value</th>
+              <th scope="col">new value</th>
+            </tr>
+          </thead>
+          <tbody>
+            <result-row
+              v-for="{ label, getOldValue, getNewValue } in calculatedValues"
+              :key="label"
+              :label="label"
+              :old-value="getOldValue(result)"
+              :new-value="getNewValue(result)"
+            />
+          </tbody>
+        </n-table>
+        <n-alert
+          v-else-if="startIpValidation.isValid && endIpValidation.isValid"
+          title="Invalid combination of start and end IPv4 address"
+          type="error"
+        >
+          <n-space vertical>
+            <n-text depth="3">
+              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>
+            <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>
+    </n-space>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useValidation } from '@/composable/validation';
+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';
+import ResultRow from './result-row.vue';
+
+const rawStartAddress = useStorage('ipv4-range-expander:startAddress', '192.168.1.1');
+const rawEndAddress = useStorage('ipv4-range-expander:endAddress', '192.168.6.255');
+
+const result = computed(() => calculateCidr({ startIp: rawStartAddress.value, endIp: rawEndAddress.value }));
+
+const calculatedValues: {
+  label: string;
+  getOldValue: (result: Ipv4RangeExpanderResult | undefined) => string | undefined;
+  getNewValue: (result: Ipv4RangeExpanderResult | undefined) => string | undefined;
+}[] = [
+  {
+    label: 'Start address',
+    getOldValue: () => rawStartAddress.value,
+    getNewValue: (result) => result?.newStart,
+  },
+  {
+    label: 'End address',
+    getOldValue: () => rawEndAddress.value,
+    getNewValue: (result) => result?.newEnd,
+  },
+  {
+    label: 'Addresses in range',
+    getOldValue: (result) => result?.oldSize?.toLocaleString(),
+    getNewValue: (result) => result?.newSize?.toLocaleString(),
+  },
+  {
+    label: 'CIDR',
+    getOldValue: () => '',
+    getNewValue: (result) => result?.newCidr,
+  },
+];
+
+const showResult = computed(() => endIpValidation.isValid && startIpValidation.isValid && result.value !== undefined);
+const startIpValidation = useValidation({
+  source: rawStartAddress,
+  rules: [{ message: 'Invalid ipv4 address', validator: (ip) => isValidIpv4({ ip }) }],
+});
+const endIpValidation = useValidation({
+  source: rawEndAddress,
+  rules: [{ message: 'Invalid ipv4 address', validator: (ip) => isValidIpv4({ ip }) }],
+});
+
+function onSwitchStartEndClicked() {
+  const tmpStart = rawStartAddress.value;
+  rawStartAddress.value = rawEndAddress.value;
+  rawEndAddress.value = tmpStart;
+}
+</script>
+
+<style lang="less" scoped></style>
--- a/src/tools/ipv4-range-expander/result-row.vue
+++ b/src/tools/ipv4-range-expander/result-row.vue
@@ -0,0 +1,27 @@
+<template>
+  <tr>
+    <td>
+      <n-text strong>{{ label }}</n-text>
+    </td>
+    <td :data-test-id="testId + '.old'"><span-copyable :value="oldValue" class="monospace" /></td>
+    <td :data-test-id="testId + '.new'">
+      <span-copyable :value="newValue"></span-copyable>
+    </td>
+  </tr>
+</template>
+
+<script setup lang="ts">
+import SpanCopyable from '@/components/SpanCopyable.vue';
+import _ from 'lodash';
+
+const props = withDefaults(defineProps<{ label: string; oldValue?: string; newValue?: string }>(), {
+  label: '',
+  oldValue: '',
+  newValue: '',
+});
+const { label, oldValue, newValue } = toRefs(props);
+
+const testId = computed(() => _.kebabCase(label.value));
+</script>
+
+<style scoped lang="less"></style>
--- a/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue
+++ b/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue
@@ -12,7 +12,7 @@
              <n-text strong>{{ label }}</n-text>
            </td>
            <td>
-              <copyable-ip-like v-if="getValue(networkInfo)" :ip="getValue(networkInfo)"></copyable-ip-like>
+              <span-copyable v-if="getValue(networkInfo)" :value="getValue(networkInfo)"></span-copyable>
              <n-text v-else depth="3">{{ undefinedFallback }}</n-text>
            </td>
          </tr>
@@ -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>
@@ -41,8 +41,8 @@ import { useValidation } from '@/composable/validation';
 import { isNotThrowing } from '@/utils/boolean';
 import { useStorage } from '@vueuse/core';
 import { ArrowLeft, ArrowRight } from '@vicons/tabler';
+import SpanCopyable from '@/components/SpanCopyable.vue';
 import { getIPClass } from './ipv4-subnet-calculator.models';
-import CopyableIpLike from './copyable-ip-like.vue';

 const ip = useStorage('ipv4-subnet-calculator:ip', '192.168.0.1/24');

--- a/src/tools/json-diff/diff-viewer/diff-viewer.models.tsx
+++ b/src/tools/json-diff/diff-viewer/diff-viewer.models.tsx
@@ -0,0 +1,119 @@
+import _ from 'lodash';
+import { useCopy } from '@/composable/copy';
+import type { Difference, ArrayDifference, ObjectDifference } from '../json-diff.types';
+
+export const DiffRootViewer = ({ diff }: { diff: Difference }) => {
+  return (
+    <div class={'diffs-viewer'}>
+      <ul>{DiffViewer({ diff, showKeys: false })}</ul>
+    </div>
+  );
+};
+
+const DiffViewer = ({ diff, showKeys = true }: { diff: Difference; showKeys?: boolean }) => {
+  const { type, status } = diff;
+
+  if (status === 'updated') {
+    return ComparisonViewer({ diff, showKeys });
+  }
+
+  if (type === 'array') {
+    return ChildrenViewer({ diff, showKeys, showChildrenKeys: false, openTag: '[', closeTag: ']' });
+  }
+
+  if (type === 'object') {
+    return ChildrenViewer({ diff, showKeys, openTag: '{', closeTag: '}' });
+  }
+
+  return LineDiffViewer({ diff, showKeys });
+};
+
+const LineDiffViewer = ({ diff, showKeys }: { diff: Difference; showKeys?: boolean }) => {
+  const { value, key, status, oldValue } = diff;
+  const valueToDisplay = status === 'removed' ? oldValue : value;
+
+  return (
+    <li>
+      <span class={[status, 'result']}>
+        {showKeys && (
+          <>
+            <span class={'key'}>{key}</span>
+            {': '}
+          </>
+        )}
+        {Value({ value: valueToDisplay, status })}
+      </span>
+      ,
+    </li>
+  );
+};
+
+const ComparisonViewer = ({ diff, showKeys }: { diff: Difference; showKeys?: boolean }) => {
+  const { value, key, oldValue } = diff;
+
+  return (
+    <li class={'updated-line'}>
+      {showKeys && (
+        <>
+          <span class={'key'}>{key}</span>
+          {': '}
+        </>
+      )}
+      {Value({ value: oldValue, status: 'removed' })}
+      {Value({ value, status: 'added' })},
+    </li>
+  );
+};
+
+const ChildrenViewer = ({
+  diff,
+  openTag,
+  closeTag,
+  showKeys,
+  showChildrenKeys = true,
+}: {
+  diff: ArrayDifference | ObjectDifference;
+  showKeys: boolean;
+  showChildrenKeys?: boolean;
+  openTag: string;
+  closeTag: string;
+}) => {
+  const { children, key, status, type } = diff;
+
+  return (
+    <li>
+      <div class={[type, status]} style={{ display: 'inline-block' }}>
+        {showKeys && (
+          <>
+            <span class={'key'}>{key}</span>
+            {': '}
+          </>
+        )}
+
+        {openTag}
+        {children.length > 0 && <ul>{children.map((diff) => DiffViewer({ diff, showKeys: showChildrenKeys }))}</ul>}
+        {closeTag + ','}
+      </div>
+    </li>
+  );
+};
+
+function formatValue(value: unknown) {
+  if (_.isNull(value)) {
+    return 'null';
+  }
+
+  return JSON.stringify(value);
+}
+
+const Value = ({ value, status }: { value: unknown; status: string }) => {
+  const formatedValue = formatValue(value);
+
+  const { copy } = useCopy({ source: formatedValue });
+
+  return (
+    <span class={['value', status]} onClick={copy}>
+      {formatedValue}
+    </span>
+  );
+};
--- a/src/tools/json-diff/diff-viewer/diff-viewer.vue
+++ b/src/tools/json-diff/diff-viewer/diff-viewer.vue
@@ -0,0 +1,110 @@
+<template>
+  <div v-if="showResults">
+    <n-space justify="center">
+      <n-form-item label="Only show differences" label-placement="left">
+        <n-switch v-model:value="onlyShowDifferences" />
+      </n-form-item>
+    </n-space>
+
+    <c-card data-test-id="diff-result">
+      <n-text v-if="jsonAreTheSame" depth="3" block text-center italic> The provided JSONs are the same </n-text>
+      <diff-root-viewer v-else :diff="result" />
+    </c-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useAppTheme } from '@/ui/theme/themes';
+import _ from 'lodash';
+import { DiffRootViewer } from './diff-viewer.models';
+import { diff } from '../json-diff.models';
+
+const onlyShowDifferences = ref(false);
+const props = defineProps<{ leftJson: unknown; rightJson: unknown }>();
+const { leftJson, rightJson } = toRefs(props);
+const appTheme = useAppTheme();
+
+const result = computed(() =>
+  diff(leftJson.value, rightJson.value, { onlyShowDifferences: onlyShowDifferences.value }),
+);
+
+const jsonAreTheSame = computed(() => _.isEqual(leftJson.value, rightJson.value));
+const showResults = computed(() => !_.isUndefined(leftJson.value) && !_.isUndefined(rightJson.value));
+</script>
+
+<style lang="less" scoped>
+::v-deep(.diffs-viewer) {
+  color: v-bind('appTheme.text.mutedColor');
+
+  & > ul {
+    padding-left: 0 !important;
+  }
+
+  ul {
+    list-style: none;
+    padding-left: 20px;
+    margin: 0;
+
+    li {
+      .updated-line {
+        padding: 3px 0;
+      }
+
+      .result,
+      .array,
+      .object,
+      .value {
+        &:not(:last-child) {
+          margin-right: 4px;
+        }
+
+        &.added {
+          padding: 3px 5px;
+          border-radius: 4px;
+          background-color: v-bind('appTheme.success.colorFaded');
+          color: v-bind('appTheme.success.color');
+          .key {
+            color: inherit;
+          }
+        }
+
+        &.removed {
+          padding: 3px 5px;
+          border-radius: 4px;
+          background-color: v-bind('appTheme.error.colorFaded');
+          color: v-bind('appTheme.error.color');
+
+          .key {
+            color: inherit;
+          }
+        }
+      }
+
+      .value {
+        cursor: pointer;
+        border: 1px solid transparent;
+        transition: border-color 0.2s ease-in-out;
+
+        &.added:hover {
+          border-color: v-bind('appTheme.success.color');
+        }
+
+        &.removed:hover {
+          border-color: v-bind('appTheme.error.color');
+        }
+      }
+
+      .added .added,
+      .removed .removed {
+        background-color: transparent;
+        color: inherit;
+      }
+
+      .key {
+        font-weight: 500;
+        color: v-bind('appTheme.text.baseColor');
+      }
+    }
+  }
+}
+</style>
--- a/src/tools/json-diff/index.ts
+++ b/src/tools/json-diff/index.ts
@@ -0,0 +1,12 @@
+import { CompareArrowsRound } from '@vicons/material';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'JSON diff',
+  path: '/json-diff',
+  description: 'Compare two JSON objects and get the differences between them.',
+  keywords: ['json', 'diff', 'compare', 'difference', 'object', 'data'],
+  component: () => import('./json-diff.vue'),
+  icon: CompareArrowsRound,
+  createdAt: new Date('2023-04-20'),
+});
--- a/src/tools/json-diff/json-diff.e2e.spec.ts
+++ b/src/tools/json-diff/json-diff.e2e.spec.ts
@@ -0,0 +1,39 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Tool - JSON diff', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/json-diff');
+  });
+
+  test('Has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('JSON diff - IT Tools');
+  });
+
+  test('Identical JSONs have a custom result message', async ({ page }) => {
+    await page.getByTestId('leftJson').fill('{"foo":"bar"}');
+    await page.getByTestId('rightJson').fill('{   "foo":  "bar" }  ');
+
+    const result = await page.getByTestId('diff-result').innerText();
+
+    expect(result).toContain('The provided JSONs are the same');
+  });
+
+  test('Different JSONs have differences listed', async ({ page }) => {
+    await page.getByTestId('leftJson').fill('{"foo":"bar"}');
+    await page.getByTestId('rightJson').fill('{"foo":"buz","baz":"qux"}');
+
+    const result = await page.getByTestId('diff-result').innerText();
+
+    expect(result).toContain(`{\nfoo: "bar""buz",\nbaz: "qux",\n},`);
+  });
+
+  test('Different JSONs have only differences listed when "Only show differences" is checked', async ({ page }) => {
+    await page.getByTestId('leftJson').fill('{"foo":"bar"}');
+    await page.getByTestId('rightJson').fill('{"foo":"bar","baz":"qux"}');
+    await page.getByRole('switch').click();
+
+    const result = await page.getByTestId('diff-result').innerText();
+
+    expect(result).toContain(`{\nbaz: "qux",\n},`);
+  });
+});
--- a/src/tools/json-diff/json-diff.models.test.ts
+++ b/src/tools/json-diff/json-diff.models.test.ts
@@ -0,0 +1,80 @@
+import { expect, describe, it } from 'vitest';
+import { diff } from './json-diff.models';
+
+describe('json-diff models', () => {
+  describe('diff', () => {
+    it('list object differences', () => {
+      const obj = { a: 1, b: 2 };
+      const newObj = { a: 1, b: 2, c: 3 };
+      const result = diff(obj, newObj);
+
+      expect(result).toEqual({
+        key: '',
+        type: 'object',
+        children: [
+          {
+            key: 'a',
+            type: 'value',
+            value: 1,
+            oldValue: 1,
+            status: 'unchanged',
+          },
+          {
+            key: 'b',
+            type: 'value',
+            value: 2,
+            oldValue: 2,
+            status: 'unchanged',
+          },
+          {
+            key: 'c',
+            type: 'value',
+            value: 3,
+            oldValue: undefined,
+            status: 'added',
+          },
+        ],
+        oldValue: { a: 1, b: 2 },
+        value: { a: 1, b: 2, c: 3 },
+        status: 'children-updated',
+      });
+    });
+
+    it('list array differences', () => {
+      const obj = [1, 2];
+      const newObj = [1, 2, 3];
+      const result = diff(obj, newObj);
+
+      expect(result).toEqual({
+        key: '',
+        type: 'array',
+        children: [
+          {
+            key: 0,
+            type: 'value',
+            value: 1,
+            oldValue: 1,
+            status: 'unchanged',
+          },
+          {
+            key: 1,
+            type: 'value',
+            value: 2,
+            oldValue: 2,
+            status: 'unchanged',
+          },
+          {
+            key: 2,
+            type: 'value',
+            value: 3,
+            oldValue: undefined,
+            status: 'added',
+          },
+        ],
+        oldValue: [1, 2],
+        value: [1, 2, 3],
+        status: 'children-updated',
+      });
+    });
+  });
+});
--- a/src/tools/json-diff/json-diff.models.ts
+++ b/src/tools/json-diff/json-diff.models.ts
@@ -0,0 +1,140 @@
+import _ from 'lodash';
+import type { Difference, DifferenceStatus } from './json-diff.types';
+
+export { diff };
+
+function diff(
+  obj: unknown,
+  newObj: unknown,
+  { onlyShowDifferences = false }: { onlyShowDifferences?: boolean } = {},
+): Difference {
+  if (_.isArray(obj) && _.isArray(newObj)) {
+    return {
+      key: '',
+      type: 'array',
+      children: diffArrays(obj, newObj, { onlyShowDifferences }),
+      oldValue: obj,
+      value: newObj,
+      status: getStatus(obj, newObj),
+    };
+  }
+
+  if (_.isObject(obj) && _.isObject(newObj)) {
+    return {
+      key: '',
+      type: 'object',
+      children: diffObjects(obj as Record<string, unknown>, newObj as Record<string, unknown>, { onlyShowDifferences }),
+      oldValue: obj,
+      value: newObj,
+      status: getStatus(obj, newObj),
+    };
+  }
+
+  return {
+    key: '',
+    type: 'value',
+    oldValue: obj,
+    value: newObj,
+    status: getStatus(obj, newObj),
+  };
+}
+
+function diffObjects(
+  obj: Record<string, unknown>,
+  newObj: Record<string, unknown>,
+  { onlyShowDifferences = false }: { onlyShowDifferences?: boolean } = {},
+): Difference[] {
+  const keys = Object.keys({ ...obj, ...newObj });
+  return keys
+    .map((key) => createDifference(obj?.[key], newObj?.[key], key, { onlyShowDifferences }))
+    .filter((diff) => !onlyShowDifferences || diff.status !== 'unchanged');
+}
+
+function createDifference(
+  value: unknown,
+  newValue: unknown,
+  key: string | number,
+  { onlyShowDifferences = false }: { onlyShowDifferences?: boolean } = {},
+): Difference {
+  const type = getType(value);
+
+  if (type === 'object') {
+    return {
+      key,
+      type,
+      children: diffObjects(value as Record<string, unknown>, newValue as Record<string, unknown>, {
+        onlyShowDifferences,
+      }),
+      oldValue: value,
+      value: newValue,
+      status: getStatus(value, newValue),
+    };
+  }
+
+  if (type === 'array') {
+    return {
+      key,
+      type,
+      children: diffArrays(value as unknown[], newValue as unknown[], { onlyShowDifferences }),
+      value: newValue,
+      oldValue: value,
+      status: getStatus(value, newValue),
+    };
+  }
+
+  return {
+    key,
+    type,
+    value: newValue,
+    oldValue: value,
+    status: getStatus(value, newValue),
+  };
+}
+
+function diffArrays(
+  arr: unknown[],
+  newArr: unknown[],
+  { onlyShowDifferences = false }: { onlyShowDifferences?: boolean } = {},
+): Difference[] {
+  const maxLength = Math.max(0, arr?.length, newArr?.length);
+  return Array.from({ length: maxLength }, (_, i) =>
+    createDifference(arr?.[i], newArr?.[i], i, { onlyShowDifferences }),
+  ).filter((diff) => !onlyShowDifferences || diff.status !== 'unchanged');
+}
+
+function getType(value: unknown): 'object' | 'array' | 'value' {
+  if (value === null) {
+    return 'value';
+  }
+  if (Array.isArray(value)) {
+    return 'array';
+  }
+  if (typeof value === 'object') {
+    return 'object';
+  }
+  return 'value';
+}
+
+function getStatus(value: unknown, newValue: unknown): DifferenceStatus {
+  if (value === undefined) {
+    return 'added';
+  }
+
+  if (newValue === undefined) {
+    return 'removed';
+  }
+
+  const bothAreObjects = getType(value) === 'object' && getType(newValue) === 'object';
+  const bothAreArrays = getType(value) === 'array' && getType(newValue) === 'array';
+  const bothAreDeepEqual = _.isEqual(value, newValue);
+
+  if (bothAreDeepEqual) {
+    return 'unchanged';
+  }
+
+  if (bothAreObjects || bothAreArrays) {
+    return 'children-updated';
+  }
+
+  return 'updated';
+}
--- a/src/tools/json-diff/json-diff.types.ts
+++ b/src/tools/json-diff/json-diff.types.ts
@@ -0,0 +1,29 @@
+export type DifferenceStatus = 'added' | 'removed' | 'updated' | 'unchanged' | 'children-updated';
+
+export type ObjectDifference = {
+  key: string | number;
+  type: 'object';
+  children: Difference[];
+  status: DifferenceStatus;
+  oldValue: unknown;
+  value: unknown;
+};
+
+export type ValueDifference = {
+  key: string | number;
+  type: 'value';
+  value: unknown;
+  oldValue: unknown;
+  status: DifferenceStatus;
+};
+
+export type ArrayDifference = {
+  key: number | string;
+  type: 'array';
+  children: Difference[];
+  status: DifferenceStatus;
+  oldValue: unknown;
+  value: unknown;
+};
+
+export type Difference = ObjectDifference | ValueDifference | ArrayDifference;
--- a/src/tools/json-diff/json-diff.vue
+++ b/src/tools/json-diff/json-diff.vue
@@ -0,0 +1,59 @@
+<template>
+  <n-form-item label="Your first json" v-bind="leftJsonValidation.attrs">
+    <n-input
+      v-model:value="rawLeftJson"
+      placeholder="Paste your first json here..."
+      type="textarea"
+      rows="20"
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck="false"
+      :input-props="{ 'data-test-id': 'leftJson' }"
+    />
+  </n-form-item>
+  <n-form-item label="Your json to compare" v-bind="rightJsonValidation.attrs">
+    <n-input
+      v-model:value="rawRightJson"
+      placeholder="Paste your json to compare here..."
+      type="textarea"
+      rows="20"
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck="false"
+      :input-props="{ 'data-test-id': 'rightJson' }"
+    />
+  </n-form-item>
+
+  <DiffsViewer :left-json="leftJson" :right-json="rightJson" />
+</template>
+
+<script setup lang="ts">
+import JSON5 from 'json5';
+
+import { withDefaultOnError } from '@/utils/defaults';
+import { useValidation } from '@/composable/validation';
+import { isNotThrowing } from '@/utils/boolean';
+import DiffsViewer from './diff-viewer/diff-viewer.vue';
+
+const rawLeftJson = ref('');
+const rawRightJson = ref('');
+
+const leftJson = computed(() => withDefaultOnError(() => JSON5.parse(rawLeftJson.value), undefined));
+const rightJson = computed(() => withDefaultOnError(() => JSON5.parse(rawRightJson.value), undefined));
+
+const createJsonValidation = (json: Ref) =>
+  useValidation({
+    source: json,
+    rules: [
+      {
+        validator: (value) => value === '' || isNotThrowing(() => JSON5.parse(value)),
+        message: 'Invalid JSON',
+      },
+    ],
+  });
+
+const leftJsonValidation = createJsonValidation(rawLeftJson);
+const rightJsonValidation = createJsonValidation(rawRightJson);
+</script>
--- a/src/tools/json-viewer/json.models.ts
+++ b/src/tools/json-viewer/json.models.ts
@@ -9,7 +9,7 @@ function sortObjectKeys<T>(obj: T): T {
  }

  if (Array.isArray(obj)) {
-    return obj.map(sortObjectKeys) as T;
+    return obj.map(sortObjectKeys) as unknown as T;
  }

  return Object.keys(obj)
--- a/src/tools/jwt-parser/jwt-parser.vue
+++ b/src/tools/jwt-parser/jwt-parser.vue
@@ -1,5 +1,5 @@
 <template>
-  <n-card>
+  <c-card>
    <n-form-item label="JWT to decode" :feedback="validation.message" :validation-status="validation.status">
      <n-input v-model:value="rawJwt" type="textarea" placeholder="Put your token here..." rows="5" />
    </n-form-item>
@@ -29,7 +29,7 @@
        </template>
      </tbody>
    </n-table>
-  </n-card>
+  </c-card>
 </template>

 <script setup lang="ts">
--- a/src/tools/keycode-info/keycode-info.vue
+++ b/src/tools/keycode-info/keycode-info.vue
@@ -1,9 +1,9 @@
 <template>
  <div>
-    <n-card style="text-align: center; padding: 40px 0; margin-bottom: 26px">
+    <c-card style="text-align: center; padding: 40px 0; margin-bottom: 26px">
      <n-h2 v-if="event">{{ event.key }}</n-h2>
      <n-text strong depth="3">Press the key on your keyboard you want to get info about this key</n-text>
-    </n-card>
+    </c-card>

    <n-input-group v-for="({ label, value, placeholder }, i) of fields" :key="i" style="margin-bottom: 5px">
      <n-input-group-label style="flex: 0 0 150px"> {{ label }} </n-input-group-label>
--- a/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue
+++ b/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue
@@ -1,5 +1,5 @@
 <template>
-  <n-card>
+  <c-card>
    <n-form-item label="Paragraphs" :show-feedback="false" label-width="200" label-placement="left">
      <n-slider v-model:value="paragraphs" :step="1" :min="1" :max="20" />
    </n-form-item>
@@ -16,15 +16,12 @@
      <n-switch v-model:value="asHTML" />
    </n-form-item>

-    <br />
+    <n-input :value="loremIpsumText" type="textarea" placeholder="Your lorem ipsum..." readonly autosize mt-5 />

-    <n-input :value="loremIpsumText" type="textarea" placeholder="Your lorem ipsum..." readonly autosize />
-    <br />
-    <br />
-    <n-space justify="center">
-      <n-button secondary autofocus @click="copy"> Copy </n-button>
+    <n-space justify="center" mt-5>
+      <c-button autofocus @click="copy"> Copy </c-button>
    </n-space>
-  </n-card>
+  </c-card>
 </template>

 <script setup lang="ts">
--- a/src/tools/mac-address-lookup/mac-address-lookup.vue
+++ b/src/tools/mac-address-lookup/mac-address-lookup.vue
@@ -14,17 +14,17 @@
    </n-form-item>

    <n-form-item label="Vendor info:">
-      <n-card>
+      <c-card>
        <n-text v-if="details">
          <div v-for="(detail, index) of details.split('\n')" :key="index">{{ detail }}</div>
        </n-text>

        <n-text v-else depth="3" italic>Unknown vendor for this address</n-text>
-      </n-card>
+      </c-card>
    </n-form-item>

    <n-space justify="center">
-      <n-button :disabled="!details" tertiary> Copy vendor info </n-button>
+      <c-button :disabled="!details" @click="copy"> Copy vendor info </c-button>
    </n-space>
  </div>
 </template>
@@ -32,6 +32,7 @@
 <script setup lang="ts">
 import db from 'oui/oui.json';
 import { macAddressValidation } from '@/utils/macAddress';
+import { useCopy } from '@/composable/copy';

 const getVendorValue = (address: string) => address.trim().replace(/[.:-]/g, '').toUpperCase().substring(0, 6);

@@ -39,6 +40,8 @@ const macAddress = ref('20:37:06:12:34:56');
 const details = computed<string | undefined>(() => db[getVendorValue(macAddress.value)]);

 const { attrs: validationAttrs } = macAddressValidation(macAddress);
+
+const { copy } = useCopy({ source: details, text: 'Vendor info copied to the clipboard' });
 </script>

 <style lang="less" scoped></style>
--- a/src/tools/math-evaluator/math-evaluator.vue
+++ b/src/tools/math-evaluator/math-evaluator.vue
@@ -11,12 +11,10 @@
      autocapitalize="off"
      spellcheck="false"
    />
-    <br />
-    <br />

-    <n-card v-if="result !== ''" title="Result ">
+    <c-card v-if="result !== ''" title="Result " mt-5>
      {{ result }}
-    </n-card>
+    </c-card>
  </div>
 </template>

--- a/src/tools/mime-types/mime-types.vue
+++ b/src/tools/mime-types/mime-types.vue
@@ -1,5 +1,5 @@
 <template>
-  <n-card>
+  <c-card>
    <n-h2 style="margin-bottom: 0">Mime type to extension</n-h2>
    <div style="opacity: 0.8">Now witch file extensions are associated to a mime-type</div>
    <n-form-item>
@@ -27,9 +27,9 @@
        </n-tag>
      </div>
    </div>
-  </n-card>
+  </c-card>

-  <n-card>
+  <c-card>
    <n-h2 style="margin-bottom: 0">File extension to mime type</n-h2>
    <div style="opacity: 0.8">Now witch mime type is associated to a file extension</div>
    <n-form-item>
@@ -51,7 +51,7 @@
        </n-tag>
      </div>
    </div>
-  </n-card>
+  </c-card>

  <div>
    <n-table>
--- 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">
--- 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>
--- a/src/tools/qr-code-generator/qr-code-generator.vue
+++ b/src/tools/qr-code-generator/qr-code-generator.vue
@@ -1,5 +1,5 @@
 <template>
-  <n-card>
+  <c-card>
    <n-grid x-gap="12" y-gap="12" cols="1 600:3">
      <n-gi span="2">
        <n-form label-width="130" label-placement="left">
@@ -28,11 +28,11 @@
      <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>
-  </n-card>
+  </c-card>
 </template>

 <script setup lang="ts">
--- a/src/tools/random-port-generator/random-port-generator.vue
+++ b/src/tools/random-port-generator/random-port-generator.vue
@@ -1,13 +1,13 @@
 <template>
-  <n-card>
+  <c-card>
    <div class="port">
      {{ 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>
+  </c-card>
 </template>

 <script setup lang="ts">
--- a/src/tools/roman-numeral-converter/roman-numeral-converter.vue
+++ b/src/tools/roman-numeral-converter/roman-numeral-converter.vue
@@ -1,6 +1,6 @@
 <template>
  <div>
-    <n-card title="Arabic to roman">
+    <c-card title="Arabic to roman">
      <n-space align="center" justify="space-between">
        <n-form-item v-bind="validationNumeral">
          <n-input-number v-model:value="inputNumeral" :min="1" style="width: 200px" :show-button="false" />
@@ -8,13 +8,12 @@
        <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 />
-    <n-card title="Roman to arabic">
+    </c-card>
+    <c-card title="Roman to arabic" mt-5>
      <n-space align="center" justify="space-between">
        <n-form-item v-bind="validationRoman">
          <n-input v-model:value="inputRoman" style="width: 200px" />
@@ -22,11 +21,9 @@
        <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>
+    </c-card>
  </div>
 </template>

--- 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>

--- 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>
--- 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>

--- a/src/tools/text-statistics/text-statistics.vue
+++ b/src/tools/text-statistics/text-statistics.vue
@@ -1,15 +1,14 @@
 <template>
-  <n-card>
+  <c-card>
    <n-input v-model:value="text" type="textarea" placeholder="Your text..." rows="5" />
-    <br />
-    <br />
-    <n-space justify="space-around">
+
+    <n-space justify="space-around" mt-5>
      <n-statistic label="Character count" :value="text.length" />
      <n-statistic label="Word count" :value="text === '' ? 0 : text.split(/\s+/).length" />
      <n-statistic label="Line count" :value="text === '' ? 0 : text.split(/\r\n|\r|\n/).length" />
      <n-statistic label="Byte size" :value="formatBytes(getStringSizeInBytes(text))" />
    </n-space>
-  </n-card>
+  </c-card>
 </template>

 <script setup lang="ts">
--- a/src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue
+++ b/src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue
@@ -6,12 +6,12 @@

    <n-space v-if="natoText" vertical>
      <n-text>Your text in NATO phonetic alphabet</n-text>
-      <n-card>
+      <c-card>
        {{ natoText }}
-      </n-card>
+      </c-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>
--- a/src/tools/token-generator/token-generator.tool.vue
+++ b/src/tools/token-generator/token-generator.tool.vue
@@ -1,6 +1,6 @@
 <template>
  <div>
-    <n-card>
+    <c-card>
      <n-form label-placement="left" label-width="140">
        <n-space justify="center" item-style="padding: 0" :size="0">
          <div>
@@ -41,13 +41,12 @@
        autocapitalize="off"
        spellcheck="false"
      />
-      <br />
-      <br />
-      <n-space justify="center">
-        <n-button secondary autofocus @click="copy"> Copy </n-button>
-        <n-button secondary @click="refreshToken"> Refresh </n-button>
+
+      <n-space justify="center" mt-5>
+        <c-button @click="copy"> Copy </c-button>
+        <c-button @click="refreshToken"> Refresh </c-button>
      </n-space>
-    </n-card>
+    </c-card>
  </div>
 </template>

--- a/src/tools/url-encoder/url-encoder.vue
+++ b/src/tools/url-encoder/url-encoder.vue
@@ -1,5 +1,5 @@
 <template>
-  <n-card title="Encode">
+  <c-card title="Encode">
    <n-form-item
      label="Your string :"
      :feedback="encodedValidation.message"
@@ -24,10 +24,10 @@
    </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">
+  </c-card>
+  <c-card title="Decode">
    <n-form-item
      label="Your encoded string :"
      :feedback="decodeValidation.message"
@@ -52,9 +52,9 @@
    </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>
+  </c-card>
 </template>

 <script setup lang="ts">
--- a/src/tools/url-parser/url-parser.vue
+++ b/src/tools/url-parser/url-parser.vue
@@ -1,5 +1,5 @@
 <template>
-  <n-card>
+  <c-card>
    <n-form-item label="Your url to parse:" :feedback="validation.message" :validation-status="validation.status">
      <n-input v-model:value="urlToParse" placeholder="Your url to parse..." />
    </n-form-item>
@@ -23,7 +23,7 @@
        <input-copyable :value="v" readonly />
      </n-input-group>
    </n-form>
-  </n-card>
+  </c-card>
 </template>

 <script setup lang="ts">
--- a/src/tools/user-agent-parser/user-agent-parser.types.ts
+++ b/src/tools/user-agent-parser/user-agent-parser.types.ts
@@ -6,7 +6,7 @@ export type UserAgentResultSection = {
  icon?: Component;
  content: {
    label: string;
-    getValue: (blocks: UAParser.IResult) => string | undefined;
+    getValue: (blocks?: UAParser.IResult) => string | undefined;
    undefinedFallback?: string;
  }[];
 };
--- a/src/tools/user-agent-parser/user-agent-parser.vue
+++ b/src/tools/user-agent-parser/user-agent-parser.vue
@@ -40,12 +40,12 @@ const sections: UserAgentResultSection[] = [
    content: [
      {
        label: 'Name',
-        getValue: (block) => block.browser.name,
+        getValue: (block) => block?.browser.name,
        undefinedFallback: 'No browser name available',
      },
      {
        label: 'Version',
-        getValue: (block) => block.browser.version,
+        getValue: (block) => block?.browser.version,
        undefinedFallback: 'No browser version available',
      },
    ],
@@ -56,12 +56,12 @@ const sections: UserAgentResultSection[] = [
    content: [
      {
        label: 'Name',
-        getValue: (block) => block.engine.name,
+        getValue: (block) => block?.engine.name,
        undefinedFallback: 'No engine name available',
      },
      {
        label: 'Version',
-        getValue: (block) => block.engine.version,
+        getValue: (block) => block?.engine.version,
        undefinedFallback: 'No engine version available',
      },
    ],
@@ -72,12 +72,12 @@ const sections: UserAgentResultSection[] = [
    content: [
      {
        label: 'Name',
-        getValue: (block) => block.os.name,
+        getValue: (block) => block?.os.name,
        undefinedFallback: 'No OS name available',
      },
      {
        label: 'Version',
-        getValue: (block) => block.os.version,
+        getValue: (block) => block?.os.version,
        undefinedFallback: 'No OS version available',
      },
    ],
@@ -88,17 +88,17 @@ const sections: UserAgentResultSection[] = [
    content: [
      {
        label: 'Model',
-        getValue: (block) => block.device.model,
+        getValue: (block) => block?.device.model,
        undefinedFallback: 'No device model available',
      },
      {
        label: 'Type',
-        getValue: (block) => block.device.type,
+        getValue: (block) => block?.device.type,
        undefinedFallback: 'No device type available',
      },
      {
        label: 'Vendor',
-        getValue: (block) => block.device.vendor,
+        getValue: (block) => block?.device.vendor,
        undefinedFallback: 'No device vendor available',
      },
    ],
@@ -109,7 +109,7 @@ const sections: UserAgentResultSection[] = [
    content: [
      {
        label: 'Architecture',
-        getValue: (block) => block.cpu.architecture,
+        getValue: (block) => block?.cpu.architecture,
        undefinedFallback: 'No CPU architecture available',
      },
    ],
--- a/src/tools/user-agent-parser/user-agent-result-cards.vue
+++ b/src/tools/user-agent-parser/user-agent-result-cards.vue
@@ -2,7 +2,7 @@
  <div>
    <n-grid :x-gap="12" :y-gap="8" cols="1 s:2" responsive="screen">
      <n-gi v-for="{ heading, icon, content } in sections" :key="heading">
-        <n-card style="height: 100%">
+        <c-card h-full>
          <n-page-header>
            <template #title>
              {{ heading }}
@@ -12,9 +12,7 @@
            </template>
          </n-page-header>

-          <br />
-
-          <n-space>
+          <n-space mt-5>
            <span v-for="{ label, getValue } in content" :key="label">
              <n-tooltip v-if="getValue(userAgentInfo)" trigger="hover">
                <template #trigger>
@@ -31,7 +29,7 @@
              <n-text v-if="getValue(userAgentInfo) === undefined" depth="3">{{ undefinedFallback }}</n-text>
            </span>
          </n-space>
-        </n-card>
+        </c-card>
      </n-gi>
    </n-grid>
  </div>
--- 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>
--- a/src/ui/c-button/c-button.demo.vue
+++ b/src/ui/c-button/c-button.demo.vue
@@ -0,0 +1,29 @@
+<template>
+  <div v-for="buttonVariant of buttonVariants" :key="buttonVariant">
+    <h2>{{ _.capitalize(buttonVariant) }}</h2>
+
+    <c-button v-for="buttonType of buttonTypes" :key="buttonType" :variant="buttonVariant" :type="buttonType" mx-1>
+      Button
+    </c-button>
+
+    <c-button
+      v-for="buttonType of buttonTypes"
+      :key="buttonType"
+      :variant="buttonVariant"
+      :type="buttonType"
+      circle
+      mx-1
+    >
+      A
+    </c-button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import _ from 'lodash';
+
+const buttonVariants = ['basic', 'text'];
+const buttonTypes = ['default', 'primary'];
+</script>
+
+<style lang="less" scoped></style>
--- a/src/ui/c-button/c-button.theme.ts
+++ b/src/ui/c-button/c-button.theme.ts
@@ -0,0 +1,76 @@
+import { darken, lighten } from '../color/color.models';
+import { defineThemes } from '../theme/theme.models';
+import { appThemes } from '../theme/themes';
+
+const createState = ({
+  textColor,
+  backgroundColor,
+  hoverBackground,
+  hoveredTextColor = textColor,
+  pressedBackground,
+  pressedTextColor = textColor,
+}: {
+  textColor: string;
+  backgroundColor: string;
+  hoverBackground: string;
+  hoveredTextColor?: string;
+  pressedBackground: string;
+  pressedTextColor?: string;
+}) => ({
+  textColor,
+  backgroundColor,
+  hover: { textColor: hoveredTextColor, backgroundColor: hoverBackground },
+  pressed: { textColor: pressedTextColor, backgroundColor: pressedBackground },
+});
+
+const createTheme = ({ style }: { style: 'light' | 'dark' }) => {
+  const theme = appThemes[style];
+
+  return {
+    basic: {
+      default: createState({
+        textColor: theme.text.baseColor,
+        backgroundColor: theme.default.color,
+        hoverBackground: theme.default.colorHover,
+        pressedBackground: theme.default.colorPressed,
+      }),
+      primary: createState({
+        textColor: theme.primary.color,
+        backgroundColor: theme.primary.colorFaded,
+        hoverBackground: lighten(theme.primary.colorFaded, 30),
+        pressedBackground: darken(theme.primary.colorFaded, 30),
+      }),
+      warning: createState({
+        textColor: theme.text.baseColor,
+        backgroundColor: theme.warning.color,
+        hoverBackground: theme.warning.colorHover,
+        pressedBackground: theme.warning.colorPressed,
+      }),
+    },
+    text: {
+      default: createState({
+        textColor: theme.text.baseColor,
+        backgroundColor: 'transparent',
+        hoverBackground: theme.default.colorHover,
+        pressedBackground: theme.default.colorPressed,
+      }),
+      primary: createState({
+        textColor: theme.primary.color,
+        backgroundColor: 'transparent',
+        hoverBackground: theme.primary.colorFaded,
+        pressedBackground: darken(theme.primary.colorFaded, 30),
+      }),
+      warning: createState({
+        textColor: theme.text.baseColor,
+        backgroundColor: theme.warning.color,
+        hoverBackground: theme.warning.colorHover,
+        pressedBackground: theme.warning.colorPressed,
+      }),
+    },
+  };
+};
+
+export const { useTheme } = defineThemes({
+  dark: createTheme({ style: 'dark' }),
+  light: createTheme({ style: 'light' }),
+});
--- a/src/ui/c-button/c-button.vue
+++ b/src/ui/c-button/c-button.vue
@@ -0,0 +1,115 @@
+<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';
+import { useAppTheme } from '../theme/themes';
+
+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';
+});
+const appTheme = useAppTheme();
+</script>
+
+<style lang="less" scoped>
+.c-button {
+  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;
+  flex-shrink: 0;
+
+  // 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: 1px solid v-bind('appTheme.primary.color');
+  }
+
+  &.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+</style>
--- a/src/ui/c-card/c-card.demo.vue
+++ b/src/ui/c-card/c-card.demo.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <h2>Default</h2>
+
+    <c-card title="Title">
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae ipsa reiciendis facilis officia nulla.
+      Laboriosam cumque molestias excepturi doloribus nulla nemo quod ratione rerum possimus. Excepturi nihil possimus
+      error itaque.
+    </c-card>
+  </div>
+</template>
+
+<script lang="ts" setup></script>
--- a/src/ui/c-card/c-card.theme.ts
+++ b/src/ui/c-card/c-card.theme.ts
@@ -0,0 +1,12 @@
+import { defineThemes } from '../theme/theme.models';
+
+export const { useTheme } = defineThemes({
+  dark: {
+    backgroundColor: '#232323',
+    borderColor: '#282828',
+  },
+  light: {
+    backgroundColor: '#ffffff',
+    borderColor: '#efeff5',
+  },
+});
--- a/src/ui/c-card/c-card.vue
+++ b/src/ui/c-card/c-card.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="c-card">
+    <div v-if="title" class="c-card-title">
+      {{ title }}
+    </div>
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useTheme } from './c-card.theme';
+
+const props = defineProps<{
+  title?: string;
+}>();
+
+const { title } = toRefs(props);
+
+const theme = useTheme();
+</script>
+
+<style lang="less" scoped>
+.c-card {
+  background-color: v-bind('theme.backgroundColor');
+  border: 1px solid v-bind('theme.borderColor');
+  border-radius: 4px;
+  padding: 20px 24px;
+
+  &-title {
+    font-size: 16px;
+    font-weight: 500;
+    margin-bottom: 20px;
+  }
+}
+</style>
--- a/src/ui/c-link/c-link.demo.vue
+++ b/src/ui/c-link/c-link.demo.vue
@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <h2>Default</h2>
+    <c-link mx-1> Link </c-link>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import CLink from './c-link.vue';
+</script>
+
+<style lang="less" scoped></style>
--- a/src/ui/c-link/c-link.theme.ts
+++ 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,
+      },
+    },
+  },
+});
--- a/src/ui/c-link/c-link.vue
+++ b/src/ui/c-link/c-link.vue
@@ -0,0 +1,57 @@
+<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(() => {
+  if (href?.value) {
+    return 'a';
+  }
+  if (to?.value) {
+    return RouterLink;
+  }
+  return 'span';
+});
+</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>
--- a/src/ui/color/color.models.test.ts
+++ b/src/ui/color/color.models.test.ts
@@ -0,0 +1,40 @@
+import { describe, test, expect } from 'vitest';
+import { darken, lighten, setOpacity } from './color.models';
+
+describe('color models', () => {
+  describe('lighten', () => {
+    test('lightens a color', () => {
+      expect(lighten('#000000', 10)).toBe('#0a0a0a');
+      expect(lighten('#000000', 20)).toBe('#141414');
+      expect(lighten('#ffffff', 30)).toBe('#ffffff');
+    });
+
+    test('lightens a color with alpha', () => {
+      expect(lighten('#00000080', 10)).toBe('#0a0a0a80');
+      expect(lighten('#00000080', 20)).toBe('#14141480');
+      expect(lighten('#ffffff80', 30)).toBe('#ffffff80');
+    });
+  });
+
+  describe('darken', () => {
+    test('darkens a color', () => {
+      expect(darken('#ffffff', 10)).toBe('#f5f5f5');
+      expect(darken('#ffffff', 20)).toBe('#ebebeb');
+      expect(darken('#000000', 30)).toBe('#000000');
+    });
+
+    test('darkens a color with alpha', () => {
+      expect(darken('#ffffff80', 10)).toBe('#f5f5f580');
+    });
+  });
+
+  describe('setOpacity', () => {
+    test('sets the opacity of a color', () => {
+      expect(setOpacity('#000000', 0.5)).toBe('#00000080');
+    });
+
+    test('sets the opacity of a color with alpha', () => {
+      expect(setOpacity('#00000000', 0.5)).toBe('#00000080');
+    });
+  });
+});
--- a/src/ui/color/color.models.ts
+++ b/src/ui/color/color.models.ts
@@ -0,0 +1,33 @@
+export { lighten, darken, setOpacity };
+
+const clampHex = (value: number) => Math.max(0, Math.min(255, Math.round(value)));
+
+function lighten(color: string, amount: number): string {
+  const alpha = color.length === 9 ? color.slice(7) : '';
+  const num = parseInt(color.slice(1, 7), 16);
+
+  const r = clampHex(((num >> 16) & 255) + amount);
+  const g = clampHex(((num >> 8) & 255) + amount);
+  const b = clampHex((num & 255) + amount);
+
+  return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}${alpha}`;
+}
+
+function darken(color: string, amount: number): string {
+  return lighten(color, -amount);
+}
+
+function setOpacity(color: string, opacity: number): string {
+  const alpha = clampHex(Math.round(opacity * 255))
+    .toString(16)
+    .padStart(2, '0');
+
+  if (color.length === 7) {
+    return `${color}${alpha}`;
+  }
+
+  if (color.length === 9) {
+    return `${color.slice(0, 7)}${alpha}`;
+  }
+  throw new Error('Invalid hex color');
+}
--- a/src/ui/demo/demo-wrapper.vue
+++ b/src/ui/demo/demo-wrapper.vue
@@ -0,0 +1,33 @@
+<template>
+  <div mt-2 w-full p-8>
+    <h1>c-lib components</h1>
+
+    <div flex>
+      <div w-30 b-r b-gray b-op-10 b-r-solid pr-4>
+        <c-button
+          v-for="{ name } of demoRoutes"
+          :key="name"
+          variant="text"
+          :to="{ name }"
+          w-full
+          important:justify-start
+          :type="route.name === name ? 'primary' : 'default'"
+        >
+          {{ name }}
+        </c-button>
+      </div>
+
+      <div flex-1 pl-4>
+        <router-view />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { demoRoutes } from './demo.routes';
+
+const route = useRoute();
+</script>
+
+<style lang="less" scoped></style>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Corentin Thomasset	daf2cf0285	chore(version): release 2023.04.23-92bd835	2023-04-23 22:44:35 +02:00
Corentin Thomasset	b7aaea1b58	docs(changelog): update changelog for 2023.04.23-92bd835	2023-04-23 22:44:35 +02:00
Corentin Thomasset	92bd83536f	feat(ui-lib): demo pages for c-lib components	2023-04-23 22:43:06 +02:00
Corentin Thomasset	e88c1d5f2c	fix(ts): cleaned legacy typechecking warning	2023-04-23 17:11:04 +02:00
Corentin Thomasset	362f2fa280	feat(new-tool): diff of two json objects	2023-04-23 15:24:20 +02:00
Corentin Thomasset	61ece2387f	refactor(ui-lib): prevent c-button to shrink	2023-04-20 21:03:20 +02:00
Corentin Thomasset	f080933d2a	refactor(ui): replaced naive ui cards with custom ones	2023-04-20 20:57:38 +02:00
Corentin Thomasset	bb32513bd3	refactor(clean): removed unused lodash import	2023-04-19 22:58:07 +02:00
Corentin Thomasset	c311e3824d	fix(mac-address-lookup): added copy handler on button click	2023-04-19 22:56:50 +02:00
Corentin Thomasset	74073f5038	refactor(clean): removed useless br tags	2023-04-19 22:50:02 +02:00
Corentin Thomasset	c45bce36f9	refactor(ui): getting ride of naive ui buttons	2023-04-19 22:33:22 +02:00
cgoIT	df989e24b3	feat(ipv4-range-expander): expands a given IPv4 start and end address to a valid IPv4 subnet (#366 ) * feat(ipv4-range-expander): expands a given IPv4 start and end address to a valid IPv4 subnet * feat(ipv4-range-expander): remove old component copyable-ip-like.vue * feat(ipv4-range-expander): fix sonar findings * feat(ipv4-range-expander): changes due to review * feat(ipv4-range-expander): only show n-alert if both ipv4 addresses are valid	2023-04-19 20:30:45 +02:00
Corentin Thomasset	6d2202597c	feat(date converter): auto focus main input	2023-04-19 13:07:24 +02:00