refactor(ui): remove n-text (#506)

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

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 })">
+    <div ml-6px mt-12px flex cursor-pointer items-center op-60 @click="toggleCategoryCollapse({ name })">
-      <n-icon :component="ChevronRight" :class="{ rotated: isCollapsed }" size="16" />
+      <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;

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>
+    </h1>
-    <n-text mt-4 block depth="3">
+    <div mt-4 op-60>
       Sorry, this page does not seem to exist
-    </n-text>
+    </div>
-    <n-text mb-8 block depth="3">
+    <div mb-8 op-60>
       Maybe the cache is doing tricky things, try force-refreshing?
-    </n-text>
+    </div>
 
     <c-button to="/">
       Back home

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>
 

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
+      hours and 10 minutes to wash them all.
-      {{ endAt }}.
+    </div>
-    </n-text>
     <n-divider />
     <div flex gap-2>
       <n-form-item label="Amount of element to consume" flex-1>

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

src/tools/ipv4-range-expander/result-row.vue

@@ -14,10 +14,8 @@ const testId = computed(() => _.kebabCase(label.value));
 
 <template>
   <tr>
-    <td>
+    <td font-bold>
-      <n-text strong>
+      {{ label }}
-        {{ label }}
-      </n-text>
     </td>
     <td :data-test-id="`${testId}.old`">
       <SpanCopyable :value="oldValue" class="monospace" />

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>
+            <td font-bold>
-              <n-text strong>
+              {{ label }}
-                {{ label }}
-              </n-text>
             </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>

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>

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>
+              </span>
-              <n-text v-if="claimDescription" depth="3" ml-2>
+              <span v-if="claimDescription" ml-2 op-70>
                 ({{ claimDescription }})
-              </n-text>
+              </span>
             </td>
             <td>
-              <n-text>{{ value }}</n-text>
+              <span>{{ value }}</span>
-              <n-text v-if="friendlyValue" ml-2 depth="3">
+              <span v-if="friendlyValue" ml-2 op-70>
                 ({{ friendlyValue }})
-              </n-text>
+              </span>
             </td>
           </tr>
         </template>

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">
+    <c-card mb-5 text-center important:py-12>
-      <n-h2 v-if="event">
+      <div v-if="event" mb-2 text-3xl>
         {{ event.key }}
-      </n-h2>
+      </div>
-      <n-text strong depth="3">
+      <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">

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>
+          <td font-bold>
-            <n-text strong>
+            {{ label }}
-              {{ label }}
-            </n-text>
           </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>

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>

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>