aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--components.d.ts3
-rw-r--r--src/components/CollapsibleToolMenu.vue31
-rw-r--r--src/pages/404.page.vue17
-rw-r--r--src/tools/base64-file-converter/base64-file-converter.vue4
-rw-r--r--src/tools/eta-calculator/eta-calculator.vue7
-rw-r--r--src/tools/ipv4-range-expander/ipv4-range-expander.vue4
-rw-r--r--src/tools/ipv4-range-expander/result-row.vue6
-rw-r--r--src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue10
-rw-r--r--src/tools/json-diff/diff-viewer/diff-viewer.vue4
-rw-r--r--src/tools/jwt-parser/jwt-parser.vue14
-rw-r--r--src/tools/keycode-info/keycode-info.vue10
-rw-r--r--src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue10
-rw-r--r--src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue4
-rw-r--r--src/tools/user-agent-parser/user-agent-result-cards.vue2
14 files changed, 52 insertions, 74 deletions
diff --git a/components.d.ts b/components.d.ts
index d4a7a52..2514849 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 7a81924..3a025ba 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 293a8f9..2bf49bc 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 fc7f92f..e607c01 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 01abcbd..8a45fc5 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 16ce62f..6eb3c92 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 efa0b64..565fb17 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 3cc0c0b..3e2f437 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 08c4784..1c585df 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 d5b1168..6b30fc0 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 19d48df..a999d8a 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 995050c..fde65f4 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 aafabcb..bd8482c 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 84a933b..ed4724c 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>
generated by cgit v1.2.3 (git 2.39.1) at 2025-07-22 11:50:30 +0000