refactor(ui): getting ride of naive ui buttons

src/tools/base64-file-converter/base64-file-converter.vue

@@ -8,9 +8,9 @@
       <n-input v-model:value="base64Input" type="textarea" placeholder="Put your base64 file string here..." rows="5" />
     </n-form-item>
     <n-space justify="center">
-      <n-button :disabled="base64Input === '' || !base64InputValidation.isValid" secondary @click="downloadFile()">
+      <c-button :disabled="base64Input === '' || !base64InputValidation.isValid" @click="downloadFile()">
         Download file
-      </n-button>
+      </c-button>
     </n-space>
   </n-card>
 
@@ -26,7 +26,7 @@
 
     <n-input :value="fileBase64" type="textarea" readonly placeholder="File in base64 will be here" />
     <n-space justify="center">
-      <n-button secondary @click="copyFileBase64()"> Copy </n-button>
+      <c-button @click="copyFileBase64()"> Copy </c-button>
     </n-space>
   </n-card>
 </template>

src/tools/base64-string-converter/base64-string-converter.vue

@@ -15,7 +15,7 @@
     </n-form-item>
 
     <n-space justify="center">
-      <n-button secondary @click="copyTextBase64()"> Copy base64 </n-button>
+      <c-button @click="copyTextBase64()"> Copy base64 </c-button>
     </n-space>
   </n-card>
 
@@ -29,7 +29,7 @@
     </n-form-item>
 
     <n-space justify="center">
-      <n-button secondary @click="copyText()"> Copy decoded string </n-button>
+      <c-button @click="copyText()"> Copy decoded string </c-button>
     </n-space>
   </n-card>
 </template>

src/tools/basic-auth-generator/basic-auth-generator.vue

@@ -23,7 +23,7 @@
     </n-card>
     <br />
     <n-space justify="center">
-      <n-button secondary @click="copy">Copy header</n-button>
+      <c-button @click="copy">Copy header</c-button>
     </n-space>
   </div>
 </template>

src/tools/bcrypt/bcrypt.vue

@@ -18,7 +18,7 @@
     </n-form>
     <br />
     <n-space justify="center">
-      <n-button secondary @click="copy"> Copy hash </n-button>
+      <c-button @click="copy"> Copy hash </c-button>
     </n-space>
   </n-card>
 

src/tools/benchmark-builder/benchmark-builder.vue

@@ -14,18 +14,17 @@
         </n-card>
 
         <n-space justify="center">
-          <n-button v-if="suites.length > 1" quaternary @click="suites.splice(index, 1)">
-            <template #icon>
-              <n-icon :component="Trash" depth="3" />
-            </template>
+          <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
-          </n-button>
-          <n-button quaternary @click="suites.splice(index + 1, 0, { data: [0], title: `Suite ${suites.length + 1}` })">
-            <template #icon>
-              <n-icon :component="Plus" depth="3" />
-            </template>
+          </c-button>
+          <c-button
+            variant="text"
+            @click="suites.splice(index + 1, 0, { data: [0], title: `Suite ${suites.length + 1}` })"
+          >
+            <n-icon :component="Plus" depth="3" mr-2 size="18" />
             Add suite
-          </n-button>
+          </c-button>
         </n-space>
       </div>
     </n-space>
@@ -39,15 +38,14 @@
           <n-input v-model:value="unit" placeholder="Unit (eg: ms)" />
         </n-form-item>
 
-        <n-button
-          tertiary
+        <c-button
           @click="
             suites = [
               { title: 'Suite 1', data: [] },
               { title: 'Suite 2', data: [] },
             ]
           "
-          >Reset suites</n-button
+          >Reset suites</c-button
         >
       </n-space>
 
@@ -73,8 +71,8 @@
       </n-table>
       <br />
       <n-space justify="center">
-        <n-button tertiary @click="copyAsMarkdown">Copy as markdown table</n-button>
-        <n-button tertiary @click="copyAsBulletList">Copy as bullet list</n-button>
+        <c-button @click="copyAsMarkdown">Copy as markdown table</c-button>
+        <c-button @click="copyAsBulletList">Copy as bullet list</c-button>
       </n-space>
     </div>
   </div>

src/tools/benchmark-builder/dynamic-values.vue

@@ -11,22 +11,18 @@
       />
       <n-tooltip>
         <template #trigger>
-          <n-button circle quaternary @click="values.splice(index, 1)">
-            <template #icon>
-              <n-icon :component="Trash" depth="3" />
-            </template>
-          </n-button>
+          <c-button circle variant="text" @click="values.splice(index, 1)">
+            <n-icon :component="Trash" depth="3" size="18" />
+          </c-button>
         </template>
         Delete value
       </n-tooltip>
     </n-space>
 
-    <n-button tertiary @click="addValue">
-      <template #icon>
-        <n-icon :component="Plus" />
-      </template>
+    <c-button @click="addValue">
+      <n-icon :component="Plus" depth="3" mr-2 size="18" />
       Add a measure
-    </n-button>
+    </c-button>
   </div>
 </template>
 

src/tools/bip39-generator/bip39-generator.vue

@@ -18,16 +18,16 @@
           >
             <n-input-group>
               <n-input v-model:value="entropy" placeholder="Your string..." />
-              <n-button @click="refreshEntropy">
+              <c-button @click="refreshEntropy">
                 <n-icon size="22">
                   <Refresh />
                 </n-icon>
-              </n-button>
-              <n-button @click="copyEntropy">
+              </c-button>
+              <c-button @click="copyEntropy">
                 <n-icon size="22">
                   <Copy />
                 </n-icon>
-              </n-button>
+              </c-button>
             </n-input-group>
           </n-form-item>
         </n-gi>
@@ -48,9 +48,9 @@
             spellcheck="false"
           />
 
-          <n-button @click="copyPassphrase">
+          <c-button @click="copyPassphrase">
             <n-icon size="22" :component="Copy" />
-          </n-button>
+          </c-button>
         </n-input-group>
       </n-form-item>
     </n-card>

src/tools/chronometer/chronometer.vue

@@ -5,10 +5,10 @@
     </n-card>
     <br />
     <n-space justify="center">
-      <n-button v-if="!isRunning" secondary type="primary" @click="resume">Start</n-button>
-      <n-button v-else secondary type="warning" @click="pause">Stop</n-button>
+      <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>
 
-      <n-button secondary @click="counter = 0">Reset</n-button>
+      <c-button @click="counter = 0">Reset</c-button>
     </n-space>
   </div>
 </template>

src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue

@@ -16,7 +16,7 @@
     <br />
     <br />
     <n-space justify="center">
-      <n-button :disabled="dockerCompose === ''" secondary @click="download"> Download docker-compose.yml </n-button>
+      <c-button :disabled="dockerCompose === ''" secondary @click="download"> Download docker-compose.yml </c-button>
     </n-space>
 
     <div v-if="notComposable.length > 0">

src/tools/hmac-generator/hmac-generator.vue

@@ -43,7 +43,7 @@
       <n-input readonly :value="hmac" type="textarea" placeholder="The result of the HMAC..." />
     </n-form-item>
     <n-space justify="center">
-      <n-button secondary @click="copy()">Copy HMAC</n-button>
+      <c-button @click="copy()">Copy HMAC</c-button>
     </n-space>
   </div>
 </template>

src/tools/html-entities/html-entities.vue

@@ -20,7 +20,7 @@
     </n-form-item>
 
     <n-space justify="center">
-      <n-button secondary @click="copyEscaped"> Copy </n-button>
+      <c-button @click="copyEscaped"> Copy </c-button>
     </n-space>
   </n-card>
   <n-card title="Unescape html entities">
@@ -44,7 +44,7 @@
     </n-form-item>
 
     <n-space justify="center">
-      <n-button secondary @click="copyUnescaped"> Copy </n-button>
+      <c-button @click="copyUnescaped"> Copy </c-button>
     </n-space>
   </n-card>
 </template>

src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue

@@ -1,11 +1,9 @@
 <template>
   <n-tooltip trigger="hover">
     <template #trigger>
-      <n-button circle quaternary :type="isActive?.() ? 'primary' : 'default'" @click="action">
-        <template #icon>
-          <n-icon :component="icon" />
-        </template>
-      </n-button>
+      <c-button circle variant="text" :type="isActive?.() ? 'primary' : 'default'" @click="action">
+        <n-icon :component="icon" />
+      </c-button>
     </template>
 
     {{ title }}

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

@@ -39,10 +39,10 @@
               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>
-            <n-button quaternary @click="onSwitchStartEndClicked">
-              <n-icon :component="ChangeCircleOutlined" />
-              &nbsp;&nbsp;Switch start and end IPv4 address
-            </n-button>
+            <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>
@@ -52,7 +52,7 @@
 
 <script setup lang="ts">
 import { useValidation } from '@/composable/validation';
-import { ChangeCircleOutlined } from '@vicons/material';
+import { Exchange } from '@vicons/tabler';
 import { isValidIpv4 } from '../ipv4-address-converter/ipv4-address-converter.service';
 import type { Ipv4RangeExpanderResult } from './ipv4-range-expander.types';
 import { calculateCidr } from './ipv4-range-expander.service';

src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue

@@ -20,14 +20,14 @@
       </n-table>
 
       <n-space style="margin-top: 14px" justify="space-between">
-        <n-button tertiary @click="switchToBlock({ count: -1 })">
+        <c-button @click="switchToBlock({ count: -1 })">
           <n-icon :component="ArrowLeft" />
           Previous block
-        </n-button>
-        <n-button tertiary @click="switchToBlock({ count: 1 })">
+        </c-button>
+        <c-button @click="switchToBlock({ count: 1 })">
           Next block
           <n-icon :component="ArrowRight" />
-        </n-button>
+        </c-button>
       </n-space>
     </div>
   </div>

src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue

@@ -22,7 +22,7 @@
     <br />
     <br />
     <n-space justify="center">
-      <n-button secondary autofocus @click="copy"> Copy </n-button>
+      <c-button autofocus @click="copy"> Copy </c-button>
     </n-space>
   </n-card>
 </template>

src/tools/mac-address-lookup/mac-address-lookup.vue

@@ -24,7 +24,7 @@
     </n-form-item>
 
     <n-space justify="center">
-      <n-button :disabled="!details" tertiary> Copy vendor info </n-button>
+      <c-button :disabled="!details"> Copy vendor info </c-button>
     </n-space>
   </div>
 </template>

src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue

@@ -5,9 +5,9 @@
         <template #suffix>
           <n-tooltip trigger="hover">
             <template #trigger>
-              <n-button quaternary circle @click="refreshSecret">
+              <c-button circle variant="text" @click="refreshSecret">
                 <n-icon :component="Refresh" />
-              </n-button>
+              </c-button>
             </template>
             Generate secret token
           </n-tooltip>
@@ -23,7 +23,7 @@
     </div>
     <n-space justify="center" vertical align="center" style="margin-top: 10px">
       <n-image :src="qrcode"></n-image>
-      <n-button secondary tag="a" :href="keyUri" target="_blank">Open Key URI in new tab</n-button>
+      <c-button :href="keyUri" target="_blank">Open Key URI in new tab</c-button>
     </n-space>
   </div>
   <div style="max-width: 350px">

src/tools/otp-code-generator-and-validator/token-display.vue

@@ -8,31 +8,30 @@
     <n-input-group>
       <n-tooltip trigger="hover" placement="bottom">
         <template #trigger>
-          <n-button data-test-id="previous-otp" secondary @click.prevent="copyPrevious(tokens.previous)">{{
-            tokens.previous
-          }}</n-button>
+          <c-button important:h-12 data-test-id="previous-otp" @click.prevent="copyPrevious(tokens.previous)">
+            {{ tokens.previous }}
+          </c-button>
         </template>
         <div>{{ previousCopied ? 'Copied !' : 'Copy previous OTP' }}</div>
       </n-tooltip>
       <n-tooltip trigger="hover" placement="bottom">
         <template #trigger>
-          <n-button
-            tertiary
-            type="primary"
+          <c-button
             data-test-id="current-otp"
             class="current-otp"
+            important:h-12
             @click.prevent="copyCurrent(tokens.current)"
           >
             {{ tokens.current }}
-          </n-button>
+          </c-button>
         </template>
         <div>{{ currentCopied ? 'Copied !' : 'Copy current OTP' }}</div>
       </n-tooltip>
       <n-tooltip trigger="hover" placement="bottom">
         <template #trigger>
-          <n-button secondary data-test-id="next-otp" @click.prevent="copyNext(tokens.next)">{{
+          <c-button important:h-12 data-test-id="next-otp" @click.prevent="copyNext(tokens.next)">{{
             tokens.next
-          }}</n-button>
+          }}</c-button>
         </template>
         <div>{{ nextCopied ? 'Copied !' : 'Copy next OTP' }}</div>
       </n-tooltip>

src/tools/qr-code-generator/qr-code-generator.vue

@@ -28,7 +28,7 @@
       <n-gi>
         <n-space justify="center" align="center" vertical>
           <n-image :src="qrcode" width="200" />
-          <n-button secondary @click="download"> Download qr-code </n-button>
+          <c-button @click="download"> Download qr-code </c-button>
         </n-space>
       </n-gi>
     </n-grid>

src/tools/random-port-generator/random-port-generator.vue

@@ -4,8 +4,8 @@
       {{ port }}
     </div>
     <n-space justify="center">
-      <n-button secondary @click="copy"> Copy </n-button>
-      <n-button secondary @click="refreshPort"> Refresh </n-button>
+      <c-button @click="copy"> Copy </c-button>
+      <c-button @click="refreshPort"> Refresh </c-button>
     </n-space>
   </n-card>
 </template>

src/tools/roman-numeral-converter/roman-numeral-converter.vue

@@ -8,9 +8,9 @@
         <div class="result">
           {{ outputRoman }}
         </div>
-        <n-button secondary autofocus :disabled="validationNumeral.validationStatus === 'error'" @click="copyRoman">
+        <c-button autofocus :disabled="validationNumeral.validationStatus === 'error'" @click="copyRoman">
           Copy
-        </n-button>
+        </c-button>
       </n-space>
     </n-card>
     <br />
@@ -22,9 +22,7 @@
         <div class="result">
           {{ outputNumeral }}
         </div>
-        <n-button secondary autofocus :disabled="validationRoman.validationStatus === 'error'" @click="copyArabic">
-          Copy
-        </n-button>
+        <c-button :disabled="validationRoman.validationStatus === 'error'" @click="copyArabic"> Copy </c-button>
       </n-space>
     </n-card>
   </div>

src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue

@@ -5,7 +5,7 @@
         <n-input-number v-model:value="bits" min="256" max="16384" step="8" />
       </n-form-item>
 
-      <n-button tertiary @click="refreshCerts">Refresh key-pair</n-button>
+      <c-button @click="refreshCerts">Refresh key-pair</c-button>
     </n-space>
   </div>
 

src/tools/slugify-string/slugify-string.vue

@@ -14,7 +14,7 @@
     </n-form-item>
 
     <n-space justify="center">
-      <n-button secondary :disabled="slug.length === 0" @click="copy">Copy slug</n-button>
+      <c-button :disabled="slug.length === 0" @click="copy">Copy slug</c-button>
     </n-space>
   </div>
 </template>

src/tools/svg-placeholder-generator/svg-placeholder-generator.vue

@@ -38,9 +38,9 @@
     </n-form-item>
 
     <n-space justify="center">
-      <n-button secondary @click="copySVG()">Copy svg</n-button>
-      <n-button secondary @click="copyBase64()">Copy base64</n-button>
-      <n-button secondary @click="download()">Download svg</n-button>
+      <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>
 

src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue

@@ -11,7 +11,7 @@
       </n-card>
 
       <n-space justify="center">
-        <n-button secondary autofocus @click="copy"> Copy NATO string </n-button>
+        <c-button autofocus @click="copy"> Copy NATO string </c-button>
       </n-space>
     </n-space>
   </div>

src/tools/token-generator/token-generator.tool.vue

@@ -44,8 +44,8 @@
       <br />
       <br />
       <n-space justify="center">
-        <n-button secondary autofocus @click="copy"> Copy </n-button>
-        <n-button secondary @click="refreshToken"> Refresh </n-button>
+        <c-button @click="copy"> Copy </c-button>
+        <c-button @click="refreshToken"> Refresh </c-button>
       </n-space>
     </n-card>
   </div>

src/tools/url-encoder/url-encoder.vue

@@ -24,7 +24,7 @@
     </n-form-item>
 
     <n-space justify="center">
-      <n-button secondary @click="copyEncoded"> Copy </n-button>
+      <c-button @click="copyEncoded"> Copy </c-button>
     </n-space>
   </n-card>
   <n-card title="Decode">
@@ -52,7 +52,7 @@
     </n-form-item>
 
     <n-space justify="center">
-      <n-button secondary @click="copyDecoded"> Copy </n-button>
+      <c-button @click="copyDecoded"> Copy </c-button>
     </n-space>
   </n-card>
 </template>

src/tools/uuid-generator/uuid-generator.vue

@@ -19,8 +19,8 @@
     />
 
     <n-space justify="center">
-      <n-button secondary autofocus @click="copy"> Copy </n-button>
-      <n-button secondary @click="refreshUUIDs"> Refresh </n-button>
+      <c-button autofocus @click="copy"> Copy </c-button>
+      <c-button @click="refreshUUIDs"> Refresh </c-button>
     </n-space>
   </n-space>
 </template>