refactor(ui): replaced naive ui cards with custom ones

components.d.ts

@@ -5,138 +5,139 @@
 // Read more: https://github.com/vuejs/core/pull/3399
 import '@vue/runtime-core'
 
-export {}
+export {};
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    '404.page': typeof import('./src/pages/404.page.vue')['default']
-    About: typeof import('./src/pages/About.vue')['default']
-    App: typeof import('./src/App.vue')['default']
-    'Base.layout': typeof import('./src/layouts/base.layout.vue')['default']
-    Base64FileConverter: typeof import('./src/tools/base64-file-converter/base64-file-converter.vue')['default']
-    Base64StringConverter: typeof import('./src/tools/base64-string-converter/base64-string-converter.vue')['default']
-    BasicAuthGenerator: typeof import('./src/tools/basic-auth-generator/basic-auth-generator.vue')['default']
-    Bcrypt: typeof import('./src/tools/bcrypt/bcrypt.vue')['default']
-    BenchmarkBuilder: typeof import('./src/tools/benchmark-builder/benchmark-builder.vue')['default']
-    Bip39Generator: typeof import('./src/tools/bip39-generator/bip39-generator.vue')['default']
-    CaseConverter: typeof import('./src/tools/case-converter/case-converter.vue')['default']
-    CButton: typeof import('./src/ui/c-button/c-button.vue')['default']
-    ChmodCalculator: typeof import('./src/tools/chmod-calculator/chmod-calculator.vue')['default']
-    Chronometer: typeof import('./src/tools/chronometer/chronometer.vue')['default']
-    CLink: typeof import('./src/ui/c-link/c-link.vue')['default']
-    CollapsibleToolMenu: typeof import('./src/components/CollapsibleToolMenu.vue')['default']
-    ColorConverter: typeof import('./src/tools/color-converter/color-converter.vue')['default']
-    ColoredCard: typeof import('./src/components/ColoredCard.vue')['default']
-    CopyableIpLike: typeof import('./src/tools/ipv4-subnet-calculator/copyable-ip-like.vue')['default']
-    CrontabGenerator: typeof import('./src/tools/crontab-generator/crontab-generator.vue')['default']
-    DateTimeConverter: typeof import('./src/tools/date-time-converter/date-time-converter.vue')['default']
-    DeviceInformation: typeof import('./src/tools/device-information/device-information.vue')['default']
-    DockerRunToDockerComposeConverter: typeof import('./src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue')['default']
-    DynamicValues: typeof import('./src/tools/benchmark-builder/dynamic-values.vue')['default']
-    Editor: typeof import('./src/tools/html-wysiwyg-editor/editor/editor.vue')['default']
-    Encryption: typeof import('./src/tools/encryption/encryption.vue')['default']
-    EtaCalculator: typeof import('./src/tools/eta-calculator/eta-calculator.vue')['default']
-    FavoriteButton: typeof import('./src/components/FavoriteButton.vue')['default']
-    FormatTransformer: typeof import('./src/components/FormatTransformer.vue')['default']
-    GitMemo: typeof import('./src/tools/git-memo/git-memo.md')['default']
-    HashText: typeof import('./src/tools/hash-text/hash-text.vue')['default']
-    HmacGenerator: typeof import('./src/tools/hmac-generator/hmac-generator.vue')['default']
-    'Home.page': typeof import('./src/pages/Home.page.vue')['default']
-    HtmlEntities: typeof import('./src/tools/html-entities/html-entities.vue')['default']
-    HtmlWysiwygEditor: typeof import('./src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue')['default']
-    HttpStatusCodes: typeof import('./src/tools/http-status-codes/http-status-codes.vue')['default']
-    InputCopyable: typeof import('./src/components/InputCopyable.vue')['default']
-    IntegerBaseConverter: typeof import('./src/tools/integer-base-converter/integer-base-converter.vue')['default']
-    Ipv4AddressConverter: typeof import('./src/tools/ipv4-address-converter/ipv4-address-converter.vue')['default']
-    Ipv4RangeExpander: typeof import('./src/tools/ipv4-range-expander/ipv4-range-expander.vue')['default']
-    Ipv4SubnetCalculator: typeof import('./src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue')['default']
-    Ipv6UlaGenerator: typeof import('./src/tools/ipv6-ula-generator/ipv6-ula-generator.vue')['default']
-    JsonMinify: typeof import('./src/tools/json-minify/json-minify.vue')['default']
-    JsonToYaml: typeof import('./src/tools/json-to-yaml-converter/json-to-yaml.vue')['default']
-    JsonViewer: typeof import('./src/tools/json-viewer/json-viewer.vue')['default']
-    JwtParser: typeof import('./src/tools/jwt-parser/jwt-parser.vue')['default']
-    KeycodeInfo: typeof import('./src/tools/keycode-info/keycode-info.vue')['default']
-    LoremIpsumGenerator: typeof import('./src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue')['default']
-    MacAddressLookup: typeof import('./src/tools/mac-address-lookup/mac-address-lookup.vue')['default']
-    MathEvaluator: typeof import('./src/tools/math-evaluator/math-evaluator.vue')['default']
-    MenuBar: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar.vue')['default']
-    MenuBarItem: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue')['default']
-    MenuIconItem: typeof import('./src/components/MenuIconItem.vue')['default']
-    MenuLayout: typeof import('./src/components/MenuLayout.vue')['default']
-    MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
-    MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
-    NAlert: typeof import('naive-ui')['NAlert']
-    NAutoComplete: typeof import('naive-ui')['NAutoComplete']
-    NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
-    NButton: typeof import('naive-ui')['NButton']
-    NCard: typeof import('naive-ui')['NCard']
-    NCheckbox: typeof import('naive-ui')['NCheckbox']
-    NCode: typeof import('naive-ui')['NCode']
-    NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
-    NColorPicker: typeof import('naive-ui')['NColorPicker']
-    NConfigProvider: typeof import('naive-ui')['NConfigProvider']
-    NDatePicker: typeof import('naive-ui')['NDatePicker']
-    NDivider: typeof import('naive-ui')['NDivider']
-    NDynamicInput: typeof import('naive-ui')['NDynamicInput']
-    NEllipsis: typeof import('naive-ui')['NEllipsis']
-    NForm: typeof import('naive-ui')['NForm']
-    NFormItem: typeof import('naive-ui')['NFormItem']
-    NGi: typeof import('naive-ui')['NGi']
-    NGrid: typeof import('naive-ui')['NGrid']
-    NH1: typeof import('naive-ui')['NH1']
-    NH2: typeof import('naive-ui')['NH2']
-    NH3: typeof import('naive-ui')['NH3']
-    NIcon: typeof import('naive-ui')['NIcon']
-    NImage: typeof import('naive-ui')['NImage']
-    NInput: typeof import('naive-ui')['NInput']
-    NInputGroup: typeof import('naive-ui')['NInputGroup']
-    NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel']
-    NInputNumber: typeof import('naive-ui')['NInputNumber']
-    NLayout: typeof import('naive-ui')['NLayout']
-    NLayoutSider: typeof import('naive-ui')['NLayoutSider']
-    NMenu: typeof import('naive-ui')['NMenu']
-    NP: typeof import('naive-ui')['NP']
-    NPageHeader: typeof import('naive-ui')['NPageHeader']
-    NProgress: typeof import('naive-ui')['NProgress']
-    NScrollbar: typeof import('naive-ui')['NScrollbar']
-    NSelect: typeof import('naive-ui')['NSelect']
-    NSlider: typeof import('naive-ui')['NSlider']
-    NSpace: typeof import('naive-ui')['NSpace']
-    NStatistic: typeof import('naive-ui')['NStatistic']
-    NSwitch: typeof import('naive-ui')['NSwitch']
-    NTable: typeof import('naive-ui')['NTable']
-    NTag: typeof import('naive-ui')['NTag']
-    NText: typeof import('naive-ui')['NText']
-    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']
+    '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'];
+    CCard: typeof import('./src/ui/c-card/c-card.vue')['default'];
+    ChmodCalculator: typeof import('./src/tools/chmod-calculator/chmod-calculator.vue')['default'];
+    Chronometer: typeof import('./src/tools/chronometer/chronometer.vue')['default'];
+    CLink: typeof import('./src/ui/c-link/c-link.vue')['default'];
+    CollapsibleToolMenu: typeof import('./src/components/CollapsibleToolMenu.vue')['default'];
+    ColorConverter: typeof import('./src/tools/color-converter/color-converter.vue')['default'];
+    ColoredCard: typeof import('./src/components/ColoredCard.vue')['default'];
+    CopyableIpLike: typeof import('./src/tools/ipv4-subnet-calculator/copyable-ip-like.vue')['default'];
+    CrontabGenerator: typeof import('./src/tools/crontab-generator/crontab-generator.vue')['default'];
+    DateTimeConverter: typeof import('./src/tools/date-time-converter/date-time-converter.vue')['default'];
+    DeviceInformation: typeof import('./src/tools/device-information/device-information.vue')['default'];
+    DockerRunToDockerComposeConverter: typeof import('./src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue')['default'];
+    DynamicValues: typeof import('./src/tools/benchmark-builder/dynamic-values.vue')['default'];
+    Editor: typeof import('./src/tools/html-wysiwyg-editor/editor/editor.vue')['default'];
+    Encryption: typeof import('./src/tools/encryption/encryption.vue')['default'];
+    EtaCalculator: typeof import('./src/tools/eta-calculator/eta-calculator.vue')['default'];
+    FavoriteButton: typeof import('./src/components/FavoriteButton.vue')['default'];
+    FormatTransformer: typeof import('./src/components/FormatTransformer.vue')['default'];
+    GitMemo: typeof import('./src/tools/git-memo/git-memo.md')['default'];
+    HashText: typeof import('./src/tools/hash-text/hash-text.vue')['default'];
+    HmacGenerator: typeof import('./src/tools/hmac-generator/hmac-generator.vue')['default'];
+    'Home.page': typeof import('./src/pages/Home.page.vue')['default'];
+    HtmlEntities: typeof import('./src/tools/html-entities/html-entities.vue')['default'];
+    HtmlWysiwygEditor: typeof import('./src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue')['default'];
+    HttpStatusCodes: typeof import('./src/tools/http-status-codes/http-status-codes.vue')['default'];
+    InputCopyable: typeof import('./src/components/InputCopyable.vue')['default'];
+    IntegerBaseConverter: typeof import('./src/tools/integer-base-converter/integer-base-converter.vue')['default'];
+    Ipv4AddressConverter: typeof import('./src/tools/ipv4-address-converter/ipv4-address-converter.vue')['default'];
+    Ipv4RangeExpander: typeof import('./src/tools/ipv4-range-expander/ipv4-range-expander.vue')['default'];
+    Ipv4SubnetCalculator: typeof import('./src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue')['default'];
+    Ipv6UlaGenerator: typeof import('./src/tools/ipv6-ula-generator/ipv6-ula-generator.vue')['default'];
+    JsonMinify: typeof import('./src/tools/json-minify/json-minify.vue')['default'];
+    JsonToYaml: typeof import('./src/tools/json-to-yaml-converter/json-to-yaml.vue')['default'];
+    JsonViewer: typeof import('./src/tools/json-viewer/json-viewer.vue')['default'];
+    JwtParser: typeof import('./src/tools/jwt-parser/jwt-parser.vue')['default'];
+    KeycodeInfo: typeof import('./src/tools/keycode-info/keycode-info.vue')['default'];
+    LoremIpsumGenerator: typeof import('./src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue')['default'];
+    MacAddressLookup: typeof import('./src/tools/mac-address-lookup/mac-address-lookup.vue')['default'];
+    MathEvaluator: typeof import('./src/tools/math-evaluator/math-evaluator.vue')['default'];
+    MenuBar: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar.vue')['default'];
+    MenuBarItem: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue')['default'];
+    MenuIconItem: typeof import('./src/components/MenuIconItem.vue')['default'];
+    MenuLayout: typeof import('./src/components/MenuLayout.vue')['default'];
+    MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default'];
+    MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default'];
+    NAlert: typeof import('naive-ui')['NAlert'];
+    NAutoComplete: typeof import('naive-ui')['NAutoComplete'];
+    NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default'];
+    NButton: typeof import('naive-ui')['NButton'];
+    NCard: typeof import('naive-ui')['NCard'];
+    NCheckbox: typeof import('naive-ui')['NCheckbox'];
+    NCode: typeof import('naive-ui')['NCode'];
+    NCollapseTransition: typeof import('naive-ui')['NCollapseTransition'];
+    NColorPicker: typeof import('naive-ui')['NColorPicker'];
+    NConfigProvider: typeof import('naive-ui')['NConfigProvider'];
+    NDatePicker: typeof import('naive-ui')['NDatePicker'];
+    NDivider: typeof import('naive-ui')['NDivider'];
+    NDynamicInput: typeof import('naive-ui')['NDynamicInput'];
+    NEllipsis: typeof import('naive-ui')['NEllipsis'];
+    NForm: typeof import('naive-ui')['NForm'];
+    NFormItem: typeof import('naive-ui')['NFormItem'];
+    NGi: typeof import('naive-ui')['NGi'];
+    NGrid: typeof import('naive-ui')['NGrid'];
+    NH1: typeof import('naive-ui')['NH1'];
+    NH2: typeof import('naive-ui')['NH2'];
+    NH3: typeof import('naive-ui')['NH3'];
+    NIcon: typeof import('naive-ui')['NIcon'];
+    NImage: typeof import('naive-ui')['NImage'];
+    NInput: typeof import('naive-ui')['NInput'];
+    NInputGroup: typeof import('naive-ui')['NInputGroup'];
+    NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel'];
+    NInputNumber: typeof import('naive-ui')['NInputNumber'];
+    NLayout: typeof import('naive-ui')['NLayout'];
+    NLayoutSider: typeof import('naive-ui')['NLayoutSider'];
+    NMenu: typeof import('naive-ui')['NMenu'];
+    NP: typeof import('naive-ui')['NP'];
+    NPageHeader: typeof import('naive-ui')['NPageHeader'];
+    NProgress: typeof import('naive-ui')['NProgress'];
+    NScrollbar: typeof import('naive-ui')['NScrollbar'];
+    NSelect: typeof import('naive-ui')['NSelect'];
+    NSlider: typeof import('naive-ui')['NSlider'];
+    NSpace: typeof import('naive-ui')['NSpace'];
+    NStatistic: typeof import('naive-ui')['NStatistic'];
+    NSwitch: typeof import('naive-ui')['NSwitch'];
+    NTable: typeof import('naive-ui')['NTable'];
+    NTag: typeof import('naive-ui')['NTag'];
+    NText: typeof import('naive-ui')['NText'];
+    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'];
   }
 }

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

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

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"
@@ -20,7 +20,7 @@
         </template>
         <span>{{ tooltipText }}</span>
       </n-tooltip>
-    </n-card>
+    </c-card>
     <n-space v-if="copyPlacement === 'outside'" justify="center" mt-4>
       <c-button @click="onCopyClicked"> {{ tooltipText }} </c-button>
     </n-space>

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 {

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"
@@ -12,9 +12,9 @@
         Download file
       </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>
@@ -28,7 +28,7 @@
     <n-space justify="center">
       <c-button @click="copyFileBase64()"> Copy </c-button>
     </n-space>
-  </n-card>
+  </c-card>
 </template>
 
 <script setup lang="ts">

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>
@@ -17,9 +17,9 @@
     <n-space justify="center">
       <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>
@@ -31,7 +31,7 @@
     <n-space justify="center">
       <c-button @click="copyText()"> Copy decoded string </c-button>
     </n-space>
-  </n-card>
+  </c-card>
 </template>
 
 <script setup lang="ts">

src/tools/basic-auth-generator/basic-auth-generator.vue

@@ -13,13 +13,13 @@
       />
     </n-form-item>
 
-    <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>
+    </c-card>
     <n-space justify="center" mt-5>
       <c-button @click="copy">Copy header</c-button>
     </n-space>

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
@@ -19,9 +19,9 @@
     <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
@@ -49,7 +49,7 @@
         </div>
       </n-form-item>
     </n-form>
-  </n-card>
+  </c-card>
 </template>
 
 <script setup lang="ts">

src/tools/benchmark-builder/benchmark-builder.vue

@@ -2,7 +2,7 @@
   <n-scrollbar style="flex: 1" x-scrollable>
     <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,7 +11,7 @@
           <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">
           <c-button v-if="suites.length > 1" variant="text" @click="suites.splice(index, 1)">

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:">
@@ -53,7 +52,6 @@
         </c-button>
       </n-input-group>
     </n-form-item>
-    </n-card>
   </div>
 </template>
 

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

src/tools/chronometer/chronometer.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <n-card>
+    <c-card>
       <div class="duration">{{ formatMs(counter) }}</div>
-    </n-card>
+    </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>

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

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

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;

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
@@ -34,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
@@ -70,7 +70,7 @@
         spellcheck="false"
       />
     </n-form-item>
-  </n-card>
+  </c-card>
 </template>
 
 <script setup lang="ts">

src/tools/eta-calculator/eta-calculator.vue

@@ -37,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>

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>
 

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"
@@ -22,8 +22,8 @@
     <n-space justify="center">
       <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"
@@ -46,7 +46,7 @@
     <n-space justify="center">
       <c-button @click="copyUnescaped"> Copy </c-button>
     </n-space>
-  </n-card>
+  </c-card>
 </template>
 
 <script setup lang="ts">

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

src/tools/http-status-codes/http-status-codes.vue

@@ -20,14 +20,12 @@
     <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>

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>
 

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

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>

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>
@@ -21,7 +21,7 @@
     <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">

src/tools/mac-address-lookup/mac-address-lookup.vue

@@ -14,13 +14,13 @@
     </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">

src/tools/math-evaluator/math-evaluator.vue

@@ -12,9 +12,9 @@
       spellcheck="false"
     />
 
-    <n-card v-if="result !== ''" title="Result " mt-5>
+    <c-card v-if="result !== ''" title="Result " mt-5>
       {{ result }}
-    </n-card>
+    </c-card>
   </div>
 </template>
 

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>

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">
@@ -32,7 +32,7 @@
         </n-space>
       </n-gi>
     </n-grid>
-  </n-card>
+  </c-card>
 </template>
 
 <script setup lang="ts">

src/tools/random-port-generator/random-port-generator.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-card>
+  <c-card>
     <div class="port">
       {{ port }}
     </div>
@@ -7,7 +7,7 @@
       <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">

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" />
@@ -12,8 +12,8 @@
           Copy
         </c-button>
       </n-space>
-    </n-card>
-    <n-card title="Roman to arabic" mt-5>
+    </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" />
@@ -23,7 +23,7 @@
         </div>
         <c-button :disabled="validationRoman.validationStatus === 'error'" @click="copyArabic"> Copy </c-button>
       </n-space>
-    </n-card>
+    </c-card>
   </div>
 </template>
 

src/tools/text-statistics/text-statistics.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-card>
+  <c-card>
     <n-input v-model:value="text" type="textarea" placeholder="Your text..." rows="5" />
 
     <n-space justify="space-around" mt-5>
@@ -8,7 +8,7 @@
       <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">

src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue

@@ -6,9 +6,9 @@
 
     <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">
         <c-button autofocus @click="copy"> Copy NATO string </c-button>

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>
@@ -46,7 +46,7 @@
         <c-button @click="copy"> Copy </c-button>
         <c-button @click="refreshToken"> Refresh </c-button>
       </n-space>
-    </n-card>
+    </c-card>
   </div>
 </template>
 

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"
@@ -26,8 +26,8 @@
     <n-space justify="center">
       <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"
@@ -54,7 +54,7 @@
     <n-space justify="center">
       <c-button @click="copyDecoded"> Copy </c-button>
     </n-space>
-  </n-card>
+  </c-card>
 </template>
 
 <script setup lang="ts">

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

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 }}
@@ -29,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>

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',
+  },
+});

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>