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

CorentinTh · Apr 20, 2023 · f080933 · f080933 · vercel · Apr 20, 2023
1 parent bb32513
commit f080933
Show file tree

Hide file tree

Showing 40 changed files with 352 additions and 304 deletions.
diff --git a/components.d.ts b/components.d.ts
diff --git 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">

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

diff --git 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"
@@ -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>

diff --git 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,19 +29,22 @@
           <br />&nbsp;
         </n-ellipsis>
       </div>
-    </n-card>
+    </c-card>
   </router-link>
 </template>
 
 <script setup lang="ts">
 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 {

diff --git 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"
@@ -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">

diff --git 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>
@@ -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">

diff --git a/src/tools/basic-auth-generator/basic-auth-generator.vue b/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>

diff --git 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
@@ -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">

diff --git a/src/tools/benchmark-builder/benchmark-builder.vue b/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)">

diff --git a/src/tools/bip39-generator/bip39-generator.vue b/src/tools/bip39-generator/bip39-generator.vue
@@ -1,59 +1,57 @@
 <template>
   <div>
-    <n-card>
-      <n-grid cols="3" x-gap="12">
-        <n-gi span="1">
-          <n-form-item label="Language:">
-            <n-select
-              v-model:value="language"
-              :options="Object.keys(languages).map((label) => ({ label, value: label }))"
-            />
-          </n-form-item>
-        </n-gi>
-        <n-gi span="2">
-          <n-form-item
-            label="Entropy (seed):"
-            :feedback="entropyValidation.message"
-            :validation-status="entropyValidation.status"
-          >
-            <n-input-group>
-              <n-input v-model:value="entropy" placeholder="Your string..." />
-              <c-button @click="refreshEntropy">
-                <n-icon size="22">
-                  <Refresh />
-                </n-icon>
-              </c-button>
-              <c-button @click="copyEntropy">
-                <n-icon size="22">
-                  <Copy />
-                </n-icon>
-              </c-button>
-            </n-input-group>
-          </n-form-item>
-        </n-gi>
-      </n-grid>
-      <n-form-item
-        label="Passphrase (mnemonic):"
-        :feedback="mnemonicValidation.message"
-        :validation-status="mnemonicValidation.status"
-      >
-        <n-input-group>
-          <n-input
-            v-model:value="passphrase"
-            style="text-align: center; flex: 1"
-            placeholder="Your mnemonic..."
-            autocomplete="off"
-            autocorrect="off"
-            autocapitalize="off"
-            spellcheck="false"
+    <n-grid cols="3" x-gap="12">
+      <n-gi span="1">
+        <n-form-item label="Language:">
+          <n-select
+            v-model:value="language"
+            :options="Object.keys(languages).map((label) => ({ label, value: label }))"
           />
+        </n-form-item>
+      </n-gi>
+      <n-gi span="2">
+        <n-form-item
+          label="Entropy (seed):"
+          :feedback="entropyValidation.message"
+          :validation-status="entropyValidation.status"
+        >
+          <n-input-group>
+            <n-input v-model:value="entropy" placeholder="Your string..." />
+            <c-button @click="refreshEntropy">
+              <n-icon size="22">
+                <Refresh />
+              </n-icon>
+            </c-button>
+            <c-button @click="copyEntropy">
+              <n-icon size="22">
+                <Copy />
+              </n-icon>
+            </c-button>
+          </n-input-group>
+        </n-form-item>
+      </n-gi>
+    </n-grid>
+    <n-form-item
+      label="Passphrase (mnemonic):"
+      :feedback="mnemonicValidation.message"
+      :validation-status="mnemonicValidation.status"
+    >
+      <n-input-group>
+        <n-input
+          v-model:value="passphrase"
+          style="text-align: center; flex: 1"
+          placeholder="Your mnemonic..."
+          autocomplete="off"
+          autocorrect="off"
+          autocapitalize="off"
+          spellcheck="false"
+        />
 
-          <c-button @click="copyPassphrase">
-            <n-icon size="22" :component="Copy" />
-          </c-button>
-        </n-input-group>
-      </n-form-item>
-    </n-card>
+        <c-button @click="copyPassphrase">
+          <n-icon size="22" :component="Copy" />
+        </c-button>
+      </n-input-group>
+    </n-form-item>
   </div>
 </template>
 

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

diff --git a/src/tools/chronometer/chronometer.vue b/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>

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