From 72c98a3c5ee87f3eca6b1dfbd91ea7352a3f9a81 Mon Sep 17 00:00:00 2001
From: Corentin THOMASSET <corentin.thomasset74@gmail.com>
Date: Sun, 25 Jun 2023 15:49:43 +0200
Subject: [PATCH] refactor(ui): remove n-text (#506)

---
 components.d.ts                               |  3 ++
 src/components/CollapsibleToolMenu.vue        | 31 ++++---------------
 src/pages/404.page.vue                        | 17 +++++-----
 .../base64-file-converter.vue                 |  4 +--
 src/tools/eta-calculator/eta-calculator.vue   |  7 ++---
 .../ipv4-range-expander.vue                   |  4 +--
 src/tools/ipv4-range-expander/result-row.vue  |  6 ++--
 .../ipv4-subnet-calculator.vue                | 10 +++---
 .../json-diff/diff-viewer/diff-viewer.vue     |  4 +--
 src/tools/jwt-parser/jwt-parser.vue           | 14 ++++-----
 src/tools/keycode-info/keycode-info.vue       | 10 +++---
 .../phone-parser-and-formatter.vue            | 10 +++---
 .../text-to-nato-alphabet.vue                 |  4 +--
 .../user-agent-result-cards.vue               |  2 +-
 14 files changed, 52 insertions(+), 74 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index d4a7a52f..25148492 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -60,8 +60,10 @@ declare module '@vue/runtime-core' {
     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']
+    'IconMdi:kettleSteamOutline': typeof import('~icons/mdi/kettle-steam-outline')['default']
     IconMdiArrowRightBottom: typeof import('~icons/mdi/arrow-right-bottom')['default']
     IconMdiCamera: typeof import('~icons/mdi/camera')['default']
+    IconMdiChevronRight: typeof import('~icons/mdi/chevron-right')['default']
     IconMdiClose: typeof import('~icons/mdi/close')['default']
     IconMdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
     IconMdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
@@ -75,6 +77,7 @@ declare module '@vue/runtime-core' {
     IconMdiRefresh: typeof import('~icons/mdi/refresh')['default']
     IconMdiSearch: typeof import('~icons/mdi/search')['default']
     IconMdiSearchRound: typeof import('~icons/mdi/search-round')['default']
+    IconMdiTea: typeof import('~icons/mdi/tea')['default']
     IconMdiVideo: typeof import('~icons/mdi/video')['default']
     InputCopyable: typeof import('./src/components/InputCopyable.vue')['default']
     IntegerBaseConverter: typeof import('./src/tools/integer-base-converter/integer-base-converter.vue')['default']
diff --git a/src/components/CollapsibleToolMenu.vue b/src/components/CollapsibleToolMenu.vue
index 7a819248..3a025ba4 100644
--- a/src/components/CollapsibleToolMenu.vue
+++ b/src/components/CollapsibleToolMenu.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ChevronRight } from '@vicons/tabler';
 import { useStorage } from '@vueuse/core';
 import { useThemeVars } from 'naive-ui';
 import { RouterLink, useRoute } from 'vue-router';
@@ -47,13 +46,15 @@ const themeVars = useThemeVars();
 
 <template>
   <div v-for="{ name, tools, isCollapsed } of menuOptions" :key="name">
-    <n-text tag="div" depth="3" class="category-name" @click="toggleCategoryCollapse({ name })">
-      <n-icon :component="ChevronRight" :class="{ rotated: isCollapsed }" size="16" />
+    <div ml-6px mt-12px flex cursor-pointer items-center op-60 @click="toggleCategoryCollapse({ name })">
+      <span :class="{ 'rotate-0': isCollapsed, 'rotate-90': !isCollapsed }" text-16px lh-1 op-50 transition-transform>
+        <icon-mdi-chevron-right />
+      </span>
 
-      <span>
+      <span ml-8px text-13px>
         {{ name }}
       </span>
-    </n-text>
+    </div>
 
     <n-collapse-transition :show="!isCollapsed">
       <div class="menu-wrapper">
@@ -74,26 +75,6 @@ const themeVars = useThemeVars();
 </template>
 
 <style scoped lang="less">
-.category-name {
-  font-size: 0.93em;
-  padding: 12px 0 0px 0;
-  cursor: pointer;
-
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  .n-icon {
-    transition: transform ease 0.5s;
-    transform: rotate(90deg);
-    margin: 0 10px 0 7px;
-    opacity: 0.5;
-
-    &.rotated {
-      transform: rotate(0deg);
-    }
-  }
-}
-
 .menu-wrapper {
   display: flex;
   flex-direction: row;
diff --git a/src/pages/404.page.vue b/src/pages/404.page.vue
index 293a8f9c..2bf49bcb 100644
--- a/src/pages/404.page.vue
+++ b/src/pages/404.page.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { Coffee } from '@vicons/tabler';
 import { useHead } from '@vueuse/head';
 
 useHead({ title: 'Page not found - IT Tools' });
@@ -7,17 +6,19 @@ useHead({ title: 'Page not found - IT Tools' });
 
 <template>
   <div mt-20 flex flex-col items-center>
-    <n-icon :component="Coffee" size="100" depth="3" />
+    <span text-90px lh-1 op-50>
+      <icon-mdi:kettle-steam-outline />
+    </span>
 
-    <n-h1 m-0 mt-3>
+    <h1 m-0 mt-3>
       404 Not Found
-    </n-h1>
-    <n-text mt-4 block depth="3">
+    </h1>
+    <div mt-4 op-60>
       Sorry, this page does not seem to exist
-    </n-text>
-    <n-text mb-8 block depth="3">
+    </div>
+    <div mb-8 op-60>
       Maybe the cache is doing tricky things, try force-refreshing?
-    </n-text>
+    </div>
 
     <c-button to="/">
       Back home
diff --git a/src/tools/base64-file-converter/base64-file-converter.vue b/src/tools/base64-file-converter/base64-file-converter.vue
index fc7f92f9..e607c018 100644
--- a/src/tools/base64-file-converter/base64-file-converter.vue
+++ b/src/tools/base64-file-converter/base64-file-converter.vue
@@ -70,9 +70,9 @@ async function onUpload({ file: { file } }: { file: UploadFileInfo }) {
         <div mb-2>
           <n-icon size="35" :depth="3" :component="Upload" />
         </div>
-        <n-text style="font-size: 14px">
+        <div op-60>
           Click or drag a file to this area to upload
-        </n-text>
+        </div>
       </n-upload-dragger>
     </n-upload>
 
diff --git a/src/tools/eta-calculator/eta-calculator.vue b/src/tools/eta-calculator/eta-calculator.vue
index 01abcbd5..8a45fc57 100644
--- a/src/tools/eta-calculator/eta-calculator.vue
+++ b/src/tools/eta-calculator/eta-calculator.vue
@@ -25,11 +25,10 @@ const endAt = computed(() =>
 
 <template>
   <div>
-    <n-text depth="3" style="text-align: justify; width: 100%; display: inline-block">
+    <div text-justify op-70>
       With a concrete example, if you wash 3 plates in 5 minutes and you have 500 plates to wash, it will take you 5
-      hours and 10 minutes to wash them all, and if you start now, you'll end
-      {{ endAt }}.
-    </n-text>
+      hours and 10 minutes to wash them all.
+    </div>
     <n-divider />
     <div flex gap-2>
       <n-form-item label="Amount of element to consume" flex-1>
diff --git a/src/tools/ipv4-range-expander/ipv4-range-expander.vue b/src/tools/ipv4-range-expander/ipv4-range-expander.vue
index 16ce62fb..6eb3c922 100644
--- a/src/tools/ipv4-range-expander/ipv4-range-expander.vue
+++ b/src/tools/ipv4-range-expander/ipv4-range-expander.vue
@@ -105,10 +105,10 @@ function onSwitchStartEndClicked() {
       title="Invalid combination of start and end IPv4 address"
       type="error"
     >
-      <n-text depth="3" my-3 block>
+      <div my-3 op-70>
         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>
+      </div>
 
       <c-button @click="onSwitchStartEndClicked">
         <n-icon mr-2 :component="Exchange" depth="3" size="22" />
diff --git a/src/tools/ipv4-range-expander/result-row.vue b/src/tools/ipv4-range-expander/result-row.vue
index efa0b648..565fb177 100644
--- a/src/tools/ipv4-range-expander/result-row.vue
+++ b/src/tools/ipv4-range-expander/result-row.vue
@@ -14,10 +14,8 @@ const testId = computed(() => _.kebabCase(label.value));
 
 <template>
   <tr>
-    <td>
-      <n-text strong>
-        {{ label }}
-      </n-text>
+    <td font-bold>
+      {{ label }}
     </td>
     <td :data-test-id="`${testId}.old`">
       <SpanCopyable :value="oldValue" class="monospace" />
diff --git a/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue b/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue
index 3cc0c0b7..3e2f4378 100644
--- a/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue
+++ b/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue
@@ -96,16 +96,14 @@ function switchToBlock({ count = 1 }: { count?: number }) {
       <n-table>
         <tbody>
           <tr v-for="{ getValue, label, undefinedFallback } in sections" :key="label">
-            <td>
-              <n-text strong>
-                {{ label }}
-              </n-text>
+            <td font-bold>
+              {{ label }}
             </td>
             <td>
               <SpanCopyable v-if="getValue(networkInfo)" :value="getValue(networkInfo)" />
-              <n-text v-else depth="3">
+              <span v-else op-70>
                 {{ undefinedFallback }}
-              </n-text>
+              </span>
             </td>
           </tr>
         </tbody>
diff --git a/src/tools/json-diff/diff-viewer/diff-viewer.vue b/src/tools/json-diff/diff-viewer/diff-viewer.vue
index 08c47848..1c585df7 100644
--- a/src/tools/json-diff/diff-viewer/diff-viewer.vue
+++ b/src/tools/json-diff/diff-viewer/diff-viewer.vue
@@ -26,9 +26,9 @@ const showResults = computed(() => !_.isUndefined(leftJson.value) && !_.isUndefi
     </div>
 
     <c-card data-test-id="diff-result">
-      <n-text v-if="jsonAreTheSame" depth="3" block text-center italic>
+      <div v-if="jsonAreTheSame" text-center op-70>
         The provided JSONs are the same
-      </n-text>
+      </div>
       <DiffRootViewer v-else :diff="result" />
     </c-card>
   </div>
diff --git a/src/tools/jwt-parser/jwt-parser.vue b/src/tools/jwt-parser/jwt-parser.vue
index d5b1168a..6b30fc0c 100644
--- a/src/tools/jwt-parser/jwt-parser.vue
+++ b/src/tools/jwt-parser/jwt-parser.vue
@@ -40,18 +40,18 @@ const validation = useValidation({
           </th>
           <tr v-for="{ claim, claimDescription, friendlyValue, value } in decodedJWT[section.key]" :key="claim + value">
             <td class="claims">
-              <n-text strong>
+              <span font-bold>
                 {{ claim }}
-              </n-text>
-              <n-text v-if="claimDescription" depth="3" ml-2>
+              </span>
+              <span v-if="claimDescription" ml-2 op-70>
                 ({{ claimDescription }})
-              </n-text>
+              </span>
             </td>
             <td>
-              <n-text>{{ value }}</n-text>
-              <n-text v-if="friendlyValue" ml-2 depth="3">
+              <span>{{ value }}</span>
+              <span v-if="friendlyValue" ml-2 op-70>
                 ({{ friendlyValue }})
-              </n-text>
+              </span>
             </td>
           </tr>
         </template>
diff --git a/src/tools/keycode-info/keycode-info.vue b/src/tools/keycode-info/keycode-info.vue
index 19d48df0..a999d8ae 100644
--- a/src/tools/keycode-info/keycode-info.vue
+++ b/src/tools/keycode-info/keycode-info.vue
@@ -54,13 +54,13 @@ const fields = computed(() => {
 
 <template>
   <div>
-    <c-card style="text-align: center; padding: 40px 0; margin-bottom: 26px">
-      <n-h2 v-if="event">
+    <c-card mb-5 text-center important:py-12>
+      <div v-if="event" mb-2 text-3xl>
         {{ event.key }}
-      </n-h2>
-      <n-text strong depth="3">
+      </div>
+      <span lh-1 op-70>
         Press the key on your keyboard you want to get info about this key
-      </n-text>
+      </span>
     </c-card>
 
     <n-input-group v-for="({ label, value, placeholder }, i) of fields" :key="i" style="margin-bottom: 5px">
diff --git a/src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue b/src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue
index 995050c0..fde65f45 100644
--- a/src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue
+++ b/src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue
@@ -100,16 +100,14 @@ const countriesOptions = getCountries().map(code => ({
     <n-table v-if="parsedDetails">
       <tbody>
         <tr v-for="{ label, value } in parsedDetails" :key="label">
-          <td>
-            <n-text strong>
-              {{ label }}
-            </n-text>
+          <td font-bold>
+            {{ label }}
           </td>
           <td>
             <span-copyable v-if="value" :value="value" />
-            <n-text v-else depth="3" italic>
+            <span v-else op-70>
               Unknown
-            </n-text>
+            </span>
           </td>
         </tr>
       </tbody>
diff --git a/src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue b/src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue
index aafabcbd..bd8482c8 100644
--- a/src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue
+++ b/src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue
@@ -18,9 +18,9 @@ const { copy } = useCopy({ source: natoText, text: 'NATO alphabet string copied.
     />
 
     <div v-if="natoText">
-      <n-text mb-1 block>
+      <div mb-2>
         Your text in NATO phonetic alphabet
-      </n-text>
+      </div>
       <c-card>
         {{ natoText }}
       </c-card>
diff --git a/src/tools/user-agent-parser/user-agent-result-cards.vue b/src/tools/user-agent-parser/user-agent-result-cards.vue
index 84a933b3..ed4724cb 100644
--- a/src/tools/user-agent-parser/user-agent-result-cards.vue
+++ b/src/tools/user-agent-parser/user-agent-result-cards.vue
@@ -37,7 +37,7 @@ const { userAgentInfo, sections } = toRefs(props);
           </div>
           <div flex flex-col>
             <span v-for="{ label, getValue, undefinedFallback } in content" :key="label">
-              <n-text v-if="getValue(userAgentInfo) === undefined" depth="3">{{ undefinedFallback }}</n-text>
+              <span v-if="getValue(userAgentInfo) === undefined" op-70>{{ undefinedFallback }}</span>
             </span>
           </div>
         </c-card>