refactor(ui): removed all n-space

2023-05-27 17:36:15 +02:00 · 2023-05-27 17:36:15 +02:00 · 5aeeb6ca0e
commit 5aeeb6ca0e
parent 34d8e5ce2c
40 changed files with 222 additions and 246 deletions
--- a/src/components/ColoredCard.vue
+++ b/src/components/ColoredCard.vue
@ -1,8 +1,6 @@
 <template>
  <c-card class="colored-card">
-    <n-space justify="space-between" align="center">
-      <n-icon class="icon" size="40" :component="icon" />
-    </n-space>
+    <n-icon class="icon" size="40" :component="icon" />
    <n-h3 class="title">
      <n-ellipsis>{{ title }}</n-ellipsis>
    </n-h3>
--- a/src/components/TextareaCopyable.vue
+++ b/src/components/TextareaCopyable.vue
@ -21,9 +21,9 @@
        <span>{{ tooltipText }}</span>
      </n-tooltip>
    </c-card>
-    <n-space v-if="copyPlacement === 'outside'" justify="center" mt-4>
+    <div v-if="copyPlacement === 'outside'" mt-4 flex justify-center>
      <c-button @click="onCopyClicked"> {{ tooltipText }} </c-button>
-    </n-space>
+    </div>
  </div>
 </template>

--- a/src/components/ToolCard.vue
+++ b/src/components/ToolCard.vue
@ -1,9 +1,9 @@
 <template>
  <router-link :to="tool.path">
    <c-card class="tool-card">
-      <n-space justify="space-between" align="center">
+      <div flex items-center justify-between>
        <n-icon class="icon" size="40" :component="tool.icon" />
-        <n-space align="center">
+        <div flex items-center gap-8px>
          <n-tag
            v-if="tool.isNew"
            size="small"
@ -17,8 +17,8 @@
          </n-tag>

          <favorite-button :tool="tool" />
-        </n-space>
-      </n-space>
+        </div>
+      </div>
      <n-h3 class="title">
        <n-ellipsis>{{ tool.name }}</n-ellipsis>
      </n-h3>
--- a/src/layouts/base.layout.vue
+++ b/src/layouts/base.layout.vue
@ -43,9 +43,9 @@ const tools = computed<ToolCategory[]>(() => [
      </router-link>

      <div class="sider-content">
-        <n-space v-if="styleStore.isSmallScreen" justify="center">
+        <div v-if="styleStore.isSmallScreen" flex justify-center>
          <navbar-buttons />
-        </n-space>
+        </div>

        <collapsible-tool-menu :tools-by-category="tools" />

--- a/src/layouts/tool.layout.vue
+++ b/src/layouts/tool.layout.vue
@ -29,7 +29,7 @@ useHead(head);
  <base-layout>
    <div class="tool-layout">
      <div class="tool-header">
-        <n-space align="center" justify="space-between" :wrap="false">
+        <div flex flex-nowrap items-center justify-between>
          <n-h1>
            {{ route.meta.name }}
          </n-h1>
@ -37,7 +37,7 @@ useHead(head);
          <div>
            <favorite-button :tool="{name: route.meta.name} as Tool" />
          </div>
-        </n-space>
+        </div>

        <div class="separator" />

--- a/src/tools/basic-auth-generator/basic-auth-generator.vue
+++ b/src/tools/basic-auth-generator/basic-auth-generator.vue
@ -18,9 +18,9 @@
        </n-scrollbar>
      </n-statistic>
    </c-card>
-    <n-space justify="center" mt-5>
+    <div mt-5 flex justify-center>
      <c-button @click="copy">Copy header</c-button>
-    </n-space>
+    </div>
  </div>
 </template>

--- a/src/tools/bcrypt/bcrypt.vue
+++ b/src/tools/bcrypt/bcrypt.vue
@ -15,9 +15,9 @@

    <c-input-text :value="hashed" readonly text-center />

-    <n-space justify="center" mt-5>
+    <div mt-5 flex justify-center>
      <c-button @click="copy"> Copy hash </c-button>
-    </n-space>
+    </div>
  </c-card>

  <c-card title="Compare string with hash">
--- a/src/tools/benchmark-builder/benchmark-builder.vue
+++ b/src/tools/benchmark-builder/benchmark-builder.vue
@ -1,6 +1,6 @@
 <template>
  <n-scrollbar style="flex: 1" x-scrollable>
-    <n-space :wrap="false" style="flex: 1" justify="center" :size="12" mb-5>
+    <div mb-5 flex flex-1 flex-nowrap justify-center gap-12px>
      <div v-for="(suite, index) of suites" :key="index">
        <c-card style="width: 294px">
          <c-input-text
@ -17,7 +17,7 @@
          </n-form-item>
        </c-card>

-        <n-space justify="center">
+        <div flex justify-center>
          <c-button v-if="suites.length > 1" variant="text" @click="suites.splice(index, 1)">
            <n-icon :component="Trash" depth="3" mr-2 size="18" />
            Delete suite
@ -29,14 +29,14 @@
            <n-icon :component="Plus" depth="3" mr-2 size="18" />
            Add suite
          </c-button>
-        </n-space>
+        </div>
      </div>
-    </n-space>
+    </div>
  </n-scrollbar>

  <div style="flex: 0 0 100%">
    <div style="max-width: 600px; margin: 0 auto">
-      <n-space justify="center">
+      <div mx-auto max-w-sm flex justify-center gap-3>
        <c-input-text v-model:value="unit" placeholder="Unit (eg: ms)" label="Unit" label-position="left" mb-4 />

        <c-button
@ -48,7 +48,7 @@
          "
          >Reset suites</c-button
        >
-      </n-space>
+      </div>

      <n-table>
        <thead>
@ -70,10 +70,10 @@
          </tr>
        </tbody>
      </n-table>
-      <n-space justify="center" mt-5>
+      <div mt-5 flex justify-center gap-3>
        <c-button @click="copyAsMarkdown">Copy as markdown table</c-button>
        <c-button @click="copyAsBulletList">Copy as bullet list</c-button>
-      </n-space>
+      </div>
    </div>
  </div>
 </template>
--- a/src/tools/benchmark-builder/dynamic-values.vue
+++ b/src/tools/benchmark-builder/dynamic-values.vue
@ -1,6 +1,6 @@
 <template>
  <div>
-    <n-space v-for="(value, index) of values" :key="index" :wrap="false" style="margin-bottom: 5px" :size="5">
+    <div v-for="(value, index) of values" :key="index" mb-2 flex flex-nowrap gap-2>
      <n-input-number
        :ref="refs.set"
        v-model:value="values[index]"
@ -17,7 +17,7 @@
        </template>
        Delete value
      </n-tooltip>
-    </n-space>
+    </div>

    <c-button @click="addValue">
      <n-icon :component="Plus" depth="3" mr-2 size="18" />
--- a/src/tools/chronometer/chronometer.vue
+++ b/src/tools/chronometer/chronometer.vue
@ -3,12 +3,12 @@
    <c-card>
      <div class="duration">{{ formatMs(counter) }}</div>
    </c-card>
-    <n-space justify="center" mt-5>
+    <div mt-5 flex justify-center gap-3>
      <c-button v-if="!isRunning" type="primary" @click="resume">Start</c-button>
      <c-button v-else type="warning" @click="pause">Stop</c-button>

      <c-button @click="counter = 0">Reset</c-button>
-    </n-space>
+    </div>
  </div>
 </template>

--- a/src/tools/crontab-generator/crontab-generator.vue
+++ b/src/tools/crontab-generator/crontab-generator.vue
@ -16,7 +16,7 @@

    <n-divider />

-    <n-space justify="center">
+    <div flex justify-center>
      <n-form :show-feedback="false" label-width="170" label-placement="left">
        <n-form-item label="Verbose">
          <n-switch v-model:value="cronstrueConfig.verbose" />
@ -28,7 +28,7 @@
          <n-switch v-model:value="cronstrueConfig.dayOfWeekStartIndexZero" />
        </n-form-item>
      </n-form>
-    </n-space>
+    </div>
  </c-card>
  <c-card>
    <pre>
@ -42,8 +42,8 @@
 * * * * * * command</pre
    >

-    <n-space v-if="styleStore.isSmallScreen" vertical>
-      <c-card v-for="{ symbol, meaning, example, equivalent } in helpers" :key="symbol" important:border-none>
+    <div v-if="styleStore.isSmallScreen">
+      <c-card v-for="{ symbol, meaning, example, equivalent } in helpers" :key="symbol" mb-3 important:border-none>
        <div>
          Symbol: <strong>{{ symbol }}</strong>
        </div>
@ -60,7 +60,7 @@
          Equivalent: <strong>{{ equivalent }}</strong>
        </div>
      </c-card>
-    </n-space>
+    </div>
    <n-table v-else size="small">
      <thead>
        <tr>
--- a/src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue
+++ b/src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue
@ -14,9 +14,9 @@

    <textarea-copyable :value="dockerCompose" language="yaml" />

-    <n-space justify="center" mt-5>
+    <div mt-5 flex justify-center>
      <c-button :disabled="dockerCompose === ''" secondary @click="download"> Download docker-compose.yml </c-button>
-    </n-space>
+    </div>

    <div v-if="notComposable.length > 0">
      <n-alert title="This options are not translatable to docker-compose" type="info" mt-5>
--- a/src/tools/encryption/encryption.vue
+++ b/src/tools/encryption/encryption.vue
@ -1,7 +1,7 @@
 <template>
  <c-card title="Encrypt">
-    <n-space item-style="flex: 1 1 0">
-      <n-form-item label="Your text:" :show-feedback="false">
+    <div flex gap-3>
+      <n-form-item label="Your text:" :show-feedback="false" flex-1>
        <n-input
          v-model:value="cypherInput"
          type="textarea"
@ -13,7 +13,7 @@
          spellcheck="false"
        />
      </n-form-item>
-      <n-space vertical>
+      <div flex flex-1 flex-col gap-2>
        <c-input-text v-model:value="cypherSecret" label="Your secret key:" clearable raw-text />

        <n-form-item label="Encryption algorithm:" :show-feedback="false">
@ -22,8 +22,8 @@
            :options="Object.keys(algos).map((label) => ({ label, value: label }))"
          />
        </n-form-item>
-      </n-space>
-    </n-space>
+      </div>
+    </div>
    <n-form-item label="Your text encrypted:" :show-feedback="false" mt-5>
      <n-input
        :value="cypherOutput"
@ -39,8 +39,8 @@
    </n-form-item>
  </c-card>
  <c-card title="Decrypt">
-    <n-space item-style="flex: 1 1 0">
-      <n-form-item label="Your encrypted text:" :show-feedback="false">
+    <div flex gap-3>
+      <n-form-item label="Your encrypted text:" :show-feedback="false" flex-1>
        <n-input
          v-model:value="decryptInput"
          type="textarea"
@ -52,7 +52,7 @@
          spellcheck="false"
        />
      </n-form-item>
-      <n-space vertical>
+      <div flex flex-1 flex-col gap-2>
        <c-input-text v-model:value="decryptSecret" label="Your secret key:" clearable raw-text />

        <n-form-item label="Encryption algorithm:" :show-feedback="false">
@ -61,8 +61,8 @@
            :options="Object.keys(algos).map((label) => ({ label, value: label }))"
          />
        </n-form-item>
-      </n-space>
-    </n-space>
+      </div>
+    </div>
    <n-form-item label="Your decrypted text:" :show-feedback="false" mt-5>
      <n-input
        :value="decryptOutput"
--- a/src/tools/eta-calculator/eta-calculator.vue
+++ b/src/tools/eta-calculator/eta-calculator.vue
@ -6,46 +6,40 @@
      {{ endAt }}.
    </n-text>
    <n-divider />
-    <n-space item-style="flex:1 1 0">
-      <div>
-        <n-space item-style="flex:1 1 0">
-          <n-form-item label="Amount of element to consume">
-            <n-input-number v-model:value="unitCount" :min="1" />
-          </n-form-item>
-          <n-form-item label="The consumption started at">
-            <n-date-picker v-model:value="startedAt" type="datetime" />
-          </n-form-item>
-        </n-space>
+    <div flex gap-2>
+      <n-form-item label="Amount of element to consume" flex-1>
+        <n-input-number v-model:value="unitCount" :min="1" />
+      </n-form-item>
+      <n-form-item label="The consumption started at" flex-1>
+        <n-date-picker v-model:value="startedAt" type="datetime" />
+      </n-form-item>
+    </div>

-        <n-form-item label="Amount of unit consumed by time span" :show-feedback="false">
-          <n-input-number v-model:value="unitPerTimeSpan" :min="1" />
-          <span style="margin: 0 10px">in</span>
-          <n-input-group>
-            <n-input-number v-model:value="timeSpan" :min="1" />
-            <n-select
-              v-model:value="timeSpanUnitMultiplier"
-              :options="[
-                { label: 'milliseconds', value: 1 },
-                { label: 'seconds', value: 1000 },
-                { label: 'minutes', value: 1000 * 60 },
-                { label: 'hours', value: 1000 * 60 * 60 },
-                { label: 'days', value: 1000 * 60 * 60 * 24 },
-              ]"
-            ></n-select>
-          </n-input-group>
-        </n-form-item>
+    <n-form-item label="Amount of unit consumed by time span" :show-feedback="false">
+      <n-input-number v-model:value="unitPerTimeSpan" :min="1" />
+      <span mx-3>in</span>
+      <n-input-group>
+        <n-input-number v-model:value="timeSpan" :min="1" />
+        <n-select
+          v-model:value="timeSpanUnitMultiplier"
+          :options="[
+            { label: 'milliseconds', value: 1 },
+            { label: 'seconds', value: 1000 },
+            { label: 'minutes', value: 1000 * 60 },
+            { label: 'hours', value: 1000 * 60 * 60 },
+            { label: 'days', value: 1000 * 60 * 60 * 24 },
+          ]"
+        ></n-select>
+      </n-input-group>
+    </n-form-item>

-        <n-divider />
-        <n-space vertical>
-          <c-card>
-            <n-statistic label="Total duration">{{ formatMsDuration(durationMs) }}</n-statistic>
-          </c-card>
-          <c-card>
-            <n-statistic label="It will end ">{{ endAt }}</n-statistic>
-          </c-card>
-        </n-space>
-      </div>
-    </n-space>
+    <n-divider />
+    <c-card mb-2>
+      <n-statistic label="Total duration">{{ formatMsDuration(durationMs) }}</n-statistic>
+    </c-card>
+    <c-card>
+      <n-statistic label="It will end ">{{ endAt }}</n-statistic>
+    </c-card>
  </div>
 </template>

--- a/src/tools/hmac-generator/hmac-generator.vue
+++ b/src/tools/hmac-generator/hmac-generator.vue
@ -6,15 +6,15 @@
    <n-form-item label="Secret key">
      <n-input v-model:value="secret" placeholder="Enter the secret key..." />
    </n-form-item>
-    <n-space item-style="flex:1 1 0">
-      <n-form-item label="Hashing function">
+    <div flex gap-2>
+      <n-form-item label="Hashing function" flex-1>
        <n-select
          v-model:value="hashFunction"
          placeholder="Select an hashing function..."
          :options="Object.keys(algos).map((label) => ({ label, value: label }))"
        />
      </n-form-item>
-      <n-form-item label="Output encoding">
+      <n-form-item label="Output encoding" flex-1>
        <n-select
          v-model:value="encoding"
          placeholder="Select the result encoding..."
@ -38,13 +38,13 @@
          ]"
        />
      </n-form-item>
-    </n-space>
+    </div>
    <n-form-item label="HMAC of your text">
      <n-input readonly :value="hmac" type="textarea" placeholder="The result of the HMAC..." />
    </n-form-item>
-    <n-space justify="center">
+    <div flex justify-center>
      <c-button @click="copy()">Copy HMAC</c-button>
-    </n-space>
+    </div>
  </div>
 </template>

--- a/src/tools/html-entities/html-entities.vue
+++ b/src/tools/html-entities/html-entities.vue
@ -19,9 +19,9 @@
      />
    </n-form-item>

-    <n-space justify="center">
+    <div flex justify-center>
      <c-button @click="copyEscaped"> Copy </c-button>
-    </n-space>
+    </div>
  </c-card>
  <c-card title="Unescape html entities">
    <n-form-item label="Your escaped string :">
@ -43,9 +43,9 @@
      />
    </n-form-item>

-    <n-space justify="center">
+    <div flex justify-center>
      <c-button @click="copyUnescaped"> Copy </c-button>
-    </n-space>
+    </div>
  </c-card>
 </template>

--- a/src/tools/html-wysiwyg-editor/editor/menu-bar.vue
+++ b/src/tools/html-wysiwyg-editor/editor/menu-bar.vue
@ -1,10 +1,10 @@
 <template>
-  <n-space align="center" :size="0">
+  <div flex items-center>
    <template v-for="(item, index) in items">
      <n-divider v-if="item.type === 'divider'" :key="`divider${index}`" vertical />
      <menu-bar-item v-else-if="item.type === 'button'" :key="index" v-bind="item" />
    </template>
-  </n-space>
+  </div>
 </template>

 <script setup lang="ts">
--- a/src/tools/http-status-codes/http-status-codes.vue
+++ b/src/tools/http-status-codes/http-status-codes.vue
@ -21,10 +21,8 @@
      <n-h2> {{ category }} </n-h2>

      <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-text strong block text-lg> {{ code }} {{ name }} </n-text>
+        <n-text block depth="3">{{ description }} {{ type !== 'HTTP' ? `For ${type}.` : '' }}</n-text>
      </c-card>
    </div>
  </div>
--- a/src/tools/ipv4-range-expander/ipv4-range-expander.vue
+++ b/src/tools/ipv4-range-expander/ipv4-range-expander.vue
@ -1,61 +1,56 @@
 <template>
  <div>
-    <n-space item-style="flex:1 1 0">
-      <div>
-        <div mb-4 flex gap-4>
-          <c-input-text
-            v-model:value="rawStartAddress"
-            label="Start address"
-            placeholder="Start IPv4 address..."
-            :validation="startIpValidation"
-            clearable
-          />
+    <div mb-4 flex gap-4>
+      <c-input-text
+        v-model:value="rawStartAddress"
+        label="Start address"
+        placeholder="Start IPv4 address..."
+        :validation="startIpValidation"
+        clearable
+      />

-          <c-input-text
-            v-model:value="rawEndAddress"
-            label="End address"
-            placeholder="End IPv4 address..."
-            :validation="endIpValidation"
-            clearable
-          />
-        </div>
+      <c-input-text
+        v-model:value="rawEndAddress"
+        label="End address"
+        placeholder="End IPv4 address..."
+        :validation="endIpValidation"
+        clearable
+      />
+    </div>

-        <n-table v-if="showResult" data-test-id="result">
-          <thead>
-            <tr>
-              <th scope="col">&nbsp;</th>
-              <th scope="col">old value</th>
-              <th scope="col">new value</th>
-            </tr>
-          </thead>
-          <tbody>
-            <result-row
-              v-for="{ label, getOldValue, getNewValue } in calculatedValues"
-              :key="label"
-              :label="label"
-              :old-value="getOldValue(result)"
-              :new-value="getNewValue(result)"
-            />
-          </tbody>
-        </n-table>
-        <n-alert
-          v-else-if="startIpValidation.isValid && endIpValidation.isValid"
-          title="Invalid combination of start and end IPv4 address"
-          type="error"
-        >
-          <n-space vertical>
-            <n-text depth="3">
-              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>
-            <c-button @click="onSwitchStartEndClicked">
-              <n-icon mr-2 :component="Exchange" depth="3" size="22" />
-              Switch start and end IPv4 address
-            </c-button>
-          </n-space>
-        </n-alert>
-      </div>
-    </n-space>
+    <n-table v-if="showResult" data-test-id="result">
+      <thead>
+        <tr>
+          <th scope="col">&nbsp;</th>
+          <th scope="col">old value</th>
+          <th scope="col">new value</th>
+        </tr>
+      </thead>
+      <tbody>
+        <result-row
+          v-for="{ label, getOldValue, getNewValue } in calculatedValues"
+          :key="label"
+          :label="label"
+          :old-value="getOldValue(result)"
+          :new-value="getNewValue(result)"
+        />
+      </tbody>
+    </n-table>
+    <n-alert
+      v-else-if="startIpValidation.isValid && endIpValidation.isValid"
+      title="Invalid combination of start and end IPv4 address"
+      type="error"
+    >
+      <n-text depth="3" my-3 block>
+        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>
+
+      <c-button @click="onSwitchStartEndClicked">
+        <n-icon mr-2 :component="Exchange" depth="3" size="22" />
+        Switch start and end IPv4 address
+      </c-button>
+    </n-alert>
  </div>
 </template>

--- a/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue
+++ b/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue
@ -23,7 +23,7 @@
        </tbody>
      </n-table>

-      <n-space style="margin-top: 14px" justify="space-between">
+      <div mt-3 flex items-center justify-between>
        <c-button @click="switchToBlock({ count: -1 })">
          <n-icon :component="ArrowLeft" />
          Previous block
@ -32,7 +32,7 @@
          Next block
          <n-icon :component="ArrowRight" />
        </c-button>
-      </n-space>
+      </div>
    </div>
  </div>
 </template>
--- a/src/tools/json-diff/diff-viewer/diff-viewer.vue
+++ b/src/tools/json-diff/diff-viewer/diff-viewer.vue
@ -1,10 +1,10 @@
 <template>
  <div v-if="showResults">
-    <n-space justify="center">
+    <div flex justify-center>
      <n-form-item label="Only show differences" label-placement="left">
        <n-switch v-model:value="onlyShowDifferences" />
      </n-form-item>
-    </n-space>
+    </div>

    <c-card data-test-id="diff-result">
      <n-text v-if="jsonAreTheSame" depth="3" block text-center italic> The provided JSONs are the same </n-text>
--- a/src/tools/json-viewer/json-viewer.vue
+++ b/src/tools/json-viewer/json-viewer.vue
@ -1,13 +1,13 @@
 <template>
  <div style="flex: 0 0 100%">
-    <n-space style="margin: 0 auto; max-width: 600px" justify="center">
+    <div style="margin: 0 auto; max-width: 600px" flex justify-center gap-3>
      <n-form-item label="Sort keys :" label-placement="left" label-width="100">
        <n-switch v-model:value="sortKeys" />
      </n-form-item>
      <n-form-item label="Indent size :" label-placement="left" label-width="100" :show-feedback="false">
        <n-input-number v-model:value="indentSize" min="0" max="10" style="width: 100px" />
      </n-form-item>
-    </n-space>
+    </div>
  </div>

  <n-form-item
--- a/src/tools/jwt-parser/jwt-parser.vue
+++ b/src/tools/jwt-parser/jwt-parser.vue
@ -10,20 +10,12 @@
          <th colspan="2" class="table-header">{{ section.title }}</th>
          <tr v-for="{ claim, claimDescription, friendlyValue, value } in decodedJWT[section.key]" :key="claim + value">
            <td class="claims">
-              <n-space>
-                <n-text strong>{{ claim }}</n-text>
-                <template v-if="claimDescription">
-                  <n-text depth="3">({{ claimDescription }})</n-text>
-                </template>
-              </n-space>
+              <n-text strong>{{ claim }}</n-text>
+              <n-text v-if="claimDescription" depth="3" ml-2>({{ claimDescription }})</n-text>
            </td>
            <td>
-              <n-space>
-                <n-text>{{ value }}</n-text>
-                <template v-if="friendlyValue">
-                  <n-text depth="3">({{ friendlyValue }})</n-text>
-                </template>
-              </n-space>
+              <n-text>{{ value }}</n-text>
+              <n-text v-if="friendlyValue" ml-2 depth="3">({{ friendlyValue }})</n-text>
            </td>
          </tr>
        </template>
--- a/src/tools/list-converter/list-converter.vue
+++ b/src/tools/list-converter/list-converter.vue
@ -1,6 +1,6 @@
 <template>
  <div style="flex: 0 0 100%">
-    <n-space item-style="flex: 1 1 0" style="margin: 0 auto; max-width: 600px" justify="center">
+    <div style="margin: 0 auto; max-width: 600px">
      <c-card>
        <div flex>
          <div>
@ -73,7 +73,7 @@
          </div>
        </div>
      </c-card>
-    </n-space>
+    </div>
  </div>
  <format-transformer
    input-label="Your input data"
--- a/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue
+++ b/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue
@ -18,9 +18,9 @@

    <n-input :value="loremIpsumText" type="textarea" placeholder="Your lorem ipsum..." readonly autosize mt-5 />

-    <n-space justify="center" mt-5>
+    <div mt-5 flex justify-center>
      <c-button autofocus @click="copy"> Copy </c-button>
-    </n-space>
+    </div>
  </c-card>
 </template>

--- a/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue
+++ b/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue
@ -25,10 +25,10 @@
      <n-progress :percentage="(100 * interval) / 30" :color="theme.primaryColor" :show-indicator="false" />
      <div style="text-align: center">Next in {{ String(Math.floor(30 - interval)).padStart(2, '0') }}s</div>
    </div>
-    <n-space justify="center" vertical align="center" style="margin-top: 10px">
+    <div mt-4 flex flex-col items-center justify-center gap-3>
      <n-image :src="qrcode"></n-image>
      <c-button :href="keyUri" target="_blank">Open Key URI in new tab</c-button>
-    </n-space>
+    </div>
  </div>
  <div style="max-width: 350px">
    <input-copyable
--- a/src/tools/otp-code-generator-and-validator/token-display.vue
+++ b/src/tools/otp-code-generator-and-validator/token-display.vue
@ -1,10 +1,10 @@
 <template>
  <div>
-    <n-space class="labels" item-style="flex: 1 1 0" w-full align="center">
-      <div style="text-align: left">Previous</div>
-      <div style="text-align: center">Current OTP</div>
-      <div style="text-align: right">Next</div>
-    </n-space>
+    <div class="labels" w-full flex items-center>
+      <div flex-1 text-left>Previous</div>
+      <div flex-1 text-center>Current OTP</div>
+      <div flex-1 text-right>Next</div>
+    </div>
    <n-input-group>
      <n-tooltip trigger="hover" placement="bottom">
        <template #trigger>
@ -63,7 +63,6 @@ const { tokens } = toRefs(props);

 .labels {
  div {
-    text-align: center;
    padding: 0 2px 6px 2px;
    line-height: 1.25;
  }
--- a/src/tools/qr-code-generator/qr-code-generator.vue
+++ b/src/tools/qr-code-generator/qr-code-generator.vue
@ -26,10 +26,10 @@
        </n-form>
      </n-gi>
      <n-gi>
-        <n-space justify="center" align="center" vertical>
+        <div flex flex-col items-center gap-3>
          <n-image :src="qrcode" width="200" />
          <c-button @click="download"> Download qr-code </c-button>
-        </n-space>
+        </div>
      </n-gi>
    </n-grid>
  </c-card>
--- a/src/tools/random-port-generator/random-port-generator.vue
+++ b/src/tools/random-port-generator/random-port-generator.vue
@ -3,10 +3,10 @@
    <div class="port">
      {{ port }}
    </div>
-    <n-space justify="center">
+    <div flex justify-center gap-3>
      <c-button @click="copy"> Copy </c-button>
      <c-button @click="refreshPort"> Refresh </c-button>
-    </n-space>
+    </div>
  </c-card>
 </template>

--- a/src/tools/roman-numeral-converter/roman-numeral-converter.vue
+++ b/src/tools/roman-numeral-converter/roman-numeral-converter.vue
@ -1,7 +1,7 @@
 <template>
  <div>
    <c-card title="Arabic to roman">
-      <n-space align="center" justify="space-between">
+      <div flex items-center justify-between>
        <n-form-item v-bind="validationNumeral as any">
          <n-input-number v-model:value="inputNumeral" :min="1" style="width: 200px" :show-button="false" />
        </n-form-item>
@ -11,17 +11,17 @@
        <c-button autofocus :disabled="validationNumeral.validationStatus === 'error'" @click="copyRoman">
          Copy
        </c-button>
-      </n-space>
+      </div>
    </c-card>
    <c-card title="Roman to arabic" mt-5>
-      <n-space align="center" justify="space-between">
+      <div flex items-center justify-between>
        <c-input-text v-model:value="inputRoman" style="width: 200px" :validation="validationRoman" />

        <div class="result">
          {{ outputNumeral }}
        </div>
        <c-button :disabled="!validationRoman.isValid" @click="copyArabic"> Copy </c-button>
-      </n-space>
+      </div>
    </c-card>
  </div>
 </template>
--- a/src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue
+++ b/src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue
@ -1,12 +1,12 @@
 <template>
  <div style="flex: 0 0 100%">
-    <n-space item-style="flex: 1 1 0" style="margin: 0 auto; max-width: 600px" justify="center">
+    <div item-style="flex: 1 1 0" style="max-width: 600px" mx-auto flex gap-3>
      <n-form-item label="Bits :" v-bind="bitsValidationAttrs as any" label-placement="left" label-width="100">
        <n-input-number v-model:value="bits" min="256" max="16384" step="8" />
      </n-form-item>

      <c-button @click="refreshCerts">Refresh key-pair</c-button>
-    </n-space>
+    </div>
  </div>

  <div>
--- a/src/tools/slugify-string/slugify-string.vue
+++ b/src/tools/slugify-string/slugify-string.vue
@ -13,9 +13,9 @@
      ></n-input>
    </n-form-item>

-    <n-space justify="center">
+    <div flex justify-center>
      <c-button :disabled="slug.length === 0" @click="copy">Copy slug</c-button>
-    </n-space>
+    </div>
  </div>
 </template>

--- a/src/tools/sql-prettify/sql-prettify.vue
+++ b/src/tools/sql-prettify/sql-prettify.vue
@ -1,7 +1,7 @@
 <template>
  <div style="flex: 0 0 100%">
-    <n-space item-style="flex:1 1 0" style="margin: 0 auto; max-width: 600px" :vertical="styleStore.isSmallScreen">
-      <n-form-item label="Dialect" label-width="500">
+    <div mx-auto style="max-width: 600px" flex gap-2 :class="{ 'flex-col': styleStore.isSmallScreen }">
+      <n-form-item label="Dialect" label-width="500" flex-1>
        <n-select
          v-model:value="config.language"
          :options="[
@ -21,7 +21,7 @@
          ]"
        />
      </n-form-item>
-      <n-form-item label="Keyword case">
+      <n-form-item label="Keyword case" flex-1>
        <n-select
          v-model:value="config.keywordCase"
          :options="[
@ -31,7 +31,7 @@
          ]"
        />
      </n-form-item>
-      <n-form-item label="Indent style">
+      <n-form-item label="Indent style" flex-1>
        <n-select
          v-model:value="config.indentStyle"
          :options="[
@ -41,7 +41,7 @@
          ]"
        />
      </n-form-item>
-    </n-space>
+    </div>
  </div>

  <n-form-item label="Your SQL query">
--- a/src/tools/svg-placeholder-generator/svg-placeholder-generator.vue
+++ b/src/tools/svg-placeholder-generator/svg-placeholder-generator.vue
@ -1,24 +1,24 @@
 <template>
  <div>
    <n-form label-placement="left" label-width="100">
-      <n-space item-style="flex:1 1 0">
-        <n-form-item label="Width (in px)">
+      <div flex gap-3>
+        <n-form-item label="Width (in px)" flex-1>
          <n-input-number v-model:value="width" placeholder="SVG width..." min="1" />
        </n-form-item>
-        <n-form-item label="Background">
+        <n-form-item label="Background" flex-1>
          <n-color-picker v-model:value="bgColor" :modes="['hex']" />
        </n-form-item>
-      </n-space>
-      <n-space item-style="flex:1 1 0">
-        <n-form-item label="Height (in px)">
+      </div>
+      <div flex gap-3>
+        <n-form-item label="Height (in px)" flex-1>
          <n-input-number v-model:value="height" placeholder="SVG height..." min="1" />
        </n-form-item>
-        <n-form-item label="Text color">
+        <n-form-item label="Text color" flex-1>
          <n-color-picker v-model:value="fgColor" :modes="['hex']" />
        </n-form-item>
-      </n-space>
-      <n-space item-style="flex:1 1 0">
-        <n-form-item label="Font size">
+      </div>
+      <div flex gap-3>
+        <n-form-item label="Font size" flex-1>
          <n-input-number v-model:value="fontSize" placeholder="Font size..." min="1" />
        </n-form-item>

@ -29,8 +29,9 @@
          label-position="left"
          label-width="100px"
          label-align="right"
+          flex-1
        />
-      </n-space>
+      </div>
      <n-form-item label="Use exact size" label-placement="left">
        <n-switch v-model:value="useExactSize" />
      </n-form-item>
@ -43,16 +44,14 @@
      <textarea-copyable :value="base64" copy-placement="none" />
    </n-form-item>

-    <n-space justify="center">
+    <div flex justify-center gap-3>
      <c-button @click="copySVG()">Copy svg</c-button>
      <c-button @click="copyBase64()">Copy base64</c-button>
      <c-button @click="download()">Download svg</c-button>
-    </n-space>
+    </div>
  </div>

-  <n-space vertical justify="start">
-    <img :src="base64" alt="Image" />
-  </n-space>
+  <img :src="base64" alt="Image" />
 </template>

 <script setup lang="ts">
--- a/src/tools/text-statistics/text-statistics.vue
+++ b/src/tools/text-statistics/text-statistics.vue
@ -2,12 +2,12 @@
  <c-card>
    <n-input v-model:value="text" type="textarea" placeholder="Your text..." rows="5" />

-    <n-space justify="space-around" mt-5>
-      <n-statistic label="Character count" :value="text.length" />
-      <n-statistic label="Word count" :value="text === '' ? 0 : text.split(/\s+/).length" />
-      <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>
+    <div mt-5 flex>
+      <n-statistic label="Character count" :value="text.length" flex-1 />
+      <n-statistic label="Word count" :value="text === '' ? 0 : text.split(/\s+/).length" flex-1 />
+      <n-statistic label="Line count" :value="text === '' ? 0 : text.split(/\r\n|\r|\n/).length" flex-1 />
+      <n-statistic label="Byte size" :value="formatBytes(getStringSizeInBytes(text))" flex-1 />
+    </div>
  </c-card>
 </template>

--- a/src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue
+++ b/src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue
@ -8,16 +8,16 @@
      mb-5
    />

-    <n-space v-if="natoText" vertical>
-      <n-text>Your text in NATO phonetic alphabet</n-text>
+    <div v-if="natoText">
+      <n-text mb-1 block>Your text in NATO phonetic alphabet</n-text>
      <c-card>
        {{ natoText }}
      </c-card>

-      <n-space justify="center">
+      <div mt-3 flex justify-center>
        <c-button autofocus @click="copy"> Copy NATO string </c-button>
-      </n-space>
-    </n-space>
+      </div>
+    </div>
  </div>
 </template>

--- a/src/tools/token-generator/token-generator.tool.vue
+++ b/src/tools/token-generator/token-generator.tool.vue
@ -2,7 +2,7 @@
  <div>
    <c-card>
      <n-form label-placement="left" label-width="140">
-        <n-space justify="center" item-style="padding: 0" :size="0">
+        <div flex justify-center>
          <div>
            <n-form-item label="Uppercase (ABC...)">
              <n-switch v-model:value="withUppercase" />
@ -22,7 +22,7 @@
              <n-switch v-model:value="withSymbols" />
            </n-form-item>
          </div>
-        </n-space>
+        </div>
      </n-form>

      <n-form-item :label="`Length (${length})`" label-placement="left">
@ -42,10 +42,10 @@
        spellcheck="false"
      />

-      <n-space justify="center" mt-5>
+      <div mt-5 flex justify-center gap-3>
        <c-button @click="copy"> Copy </c-button>
        <c-button @click="refreshToken"> Refresh </c-button>
-      </n-space>
+      </div>
    </c-card>
  </div>
 </template>
--- a/src/tools/url-encoder/url-encoder.vue
+++ b/src/tools/url-encoder/url-encoder.vue
@ -23,9 +23,9 @@
      />
    </n-form-item>

-    <n-space justify="center">
+    <div flex justify-center>
      <c-button @click="copyEncoded"> Copy </c-button>
-    </n-space>
+    </div>
  </c-card>
  <c-card title="Decode">
    <n-form-item
@ -51,9 +51,9 @@
      />
    </n-form-item>

-    <n-space justify="center">
+    <div flex justify-center>
      <c-button @click="copyDecoded"> Copy </c-button>
-    </n-space>
+    </div>
  </c-card>
 </template>

--- a/src/tools/user-agent-parser/user-agent-result-cards.vue
+++ b/src/tools/user-agent-parser/user-agent-result-cards.vue
@ -12,7 +12,7 @@
            </template>
          </n-page-header>

-          <n-space mt-5>
+          <div mt-5 flex gap-2>
            <span v-for="{ label, getValue } in content" :key="label">
              <n-tooltip v-if="getValue(userAgentInfo)" trigger="hover">
                <template #trigger>
@ -23,12 +23,12 @@
                {{ label }}
              </n-tooltip>
            </span>
-          </n-space>
-          <n-space vertical>
+          </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>
-          </n-space>
+          </div>
        </c-card>
      </n-gi>
    </n-grid>
--- a/src/tools/uuid-generator/uuid-generator.vue
+++ b/src/tools/uuid-generator/uuid-generator.vue
@ -1,9 +1,9 @@
 <template>
-  <n-space vertical :size="20">
-    <n-space align="center" justify="center">
+  <div>
+    <div flex items-center justify-center gap-3>
      Quantity :
      <n-input-number v-model:value="count" :min="1" :max="50" placeholder="UUID quantity" />
-    </n-space>
+    </div>

    <n-input
      style="text-align: center; font-family: monospace"
@ -16,13 +16,14 @@
      autocorrect="off"
      autocapitalize="off"
      spellcheck="false"
+      my-3
    />

-    <n-space justify="center">
+    <div flex justify-center gap-3>
      <c-button autofocus @click="copy"> Copy </c-button>
      <c-button @click="refreshUUIDs"> Refresh </c-button>
-    </n-space>
-  </n-space>
+    </div>
+  </div>
 </template>

 <script setup lang="ts">