refactor(clean): removed useless br tags

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

@@ -13,7 +13,6 @@
       />
     </n-form-item>
 
-    <br />
     <n-card>
       <n-statistic label="Authorization header:" class="header">
         <n-scrollbar x-scrollable style="max-width: 550px; margin-bottom: -10px; padding-bottom: 10px" trigger="none">
@@ -21,8 +20,7 @@
         </n-scrollbar>
       </n-statistic>
     </n-card>
-    <br />
+    <n-space justify="center" mt-5>
-    <n-space justify="center">
       <c-button @click="copy">Copy header</c-button>
     </n-space>
   </div>

src/tools/bcrypt/bcrypt.vue

@@ -16,8 +16,7 @@
       </n-form-item>
       <n-input :value="hashed" readonly style="text-align: center" />
     </n-form>
-    <br />
+    <n-space justify="center" mt-5>
-    <n-space justify="center">
       <c-button @click="copy"> Copy hash </c-button>
     </n-space>
   </n-card>

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="0">
+    <n-space :wrap="false" style="flex: 1" justify="center" :size="0" mb-5>
       <div v-for="(suite, index) of suites" :key="index">
         <n-card style="width: 292px; margin: 0 8px 5px">
           <n-form-item label="Suite name:" :show-feedback="false" label-placement="left">
@@ -28,7 +28,6 @@
         </n-space>
       </div>
     </n-space>
-    <br />
   </n-scrollbar>
 
   <div style="flex: 0 0 100%">
@@ -69,8 +68,7 @@
           </tr>
         </tbody>
       </n-table>
-      <br />
+      <n-space justify="center" mt-5>
-      <n-space justify="center">
         <c-button @click="copyAsMarkdown">Copy as markdown table</c-button>
         <c-button @click="copyAsBulletList">Copy as bullet list</c-button>
       </n-space>

src/tools/chronometer/chronometer.vue

@@ -3,8 +3,7 @@
     <n-card>
       <div class="duration">{{ formatMs(counter) }}</div>
     </n-card>
-    <br />
+    <n-space justify="center" mt-5>
-    <n-space justify="center">
       <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>
 

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

@@ -13,15 +13,13 @@
     <n-divider />
 
     <textarea-copyable :value="dockerCompose" language="yaml" />
-    <br />
+
-    <br />
+    <n-space justify="center" mt-5>
-    <n-space justify="center">
       <c-button :disabled="dockerCompose === ''" secondary @click="download"> Download docker-compose.yml </c-button>
     </n-space>
 
     <div v-if="notComposable.length > 0">
-      <br />
+      <n-alert title="This options are not translatable to docker-compose" type="info" mt-5>
-      <n-alert title="This options are not translatable to docker-compose" type="info">
         <ul>
           <li v-for="(message, index) of notComposable" :key="index">{{ message }}</li>
         </ul>
@@ -29,10 +27,10 @@
     </div>
 
     <div v-if="notImplemented.length > 0">
-      <br />
       <n-alert
         title="This options are not yet implemented and therefore haven't been translated to docker-compose"
         type="warning"
+        mt-5
       >
         <ul>
           <li v-for="(message, index) of notImplemented" :key="index">{{ message }}</li>
@@ -41,8 +39,7 @@
     </div>
 
     <div v-if="errors.length > 0">
-      <br />
+      <n-alert title="The following errors occured" type="error" mt-5>
-      <n-alert title="The following errors occured" type="error">
         <ul>
           <li v-for="(message, index) of errors" :key="index">{{ message }}</li>
         </ul>

src/tools/encryption/encryption.vue

@@ -21,8 +21,7 @@
         </n-form-item>
       </n-space>
     </n-space>
-    <br />
+    <n-form-item label="Your text encrypted:" :show-feedback="false" mt-5>
-    <n-form-item label="Your text encrypted:" :show-feedback="false">
       <n-input
         :value="cypherOutput"
         type="textarea"
@@ -58,8 +57,7 @@
         </n-form-item>
       </n-space>
     </n-space>
-    <br />
+    <n-form-item label="Your decrypted text:" :show-feedback="false" mt-5>
-    <n-form-item label="Your decrypted text:" :show-feedback="false">
       <n-input
         :value="decryptOutput"
         type="textarea"

src/tools/eta-calculator/eta-calculator.vue

@@ -5,7 +5,6 @@
       hours and 10 minutes to wash them all, and if you start now, you'll end
       {{ endAt }}.
     </n-text>
-    <br />
     <n-divider />
     <n-space item-style="flex:1 1 0">
       <div>

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

@@ -16,12 +16,9 @@
       <n-switch v-model:value="asHTML" />
     </n-form-item>
 
-    <br />
+    <n-input :value="loremIpsumText" type="textarea" placeholder="Your lorem ipsum..." readonly autosize mt-5 />
 
-    <n-input :value="loremIpsumText" type="textarea" placeholder="Your lorem ipsum..." readonly autosize />
+    <n-space justify="center" mt-5>
-    <br />
-    <br />
-    <n-space justify="center">
       <c-button autofocus @click="copy"> Copy </c-button>
     </n-space>
   </n-card>

src/tools/math-evaluator/math-evaluator.vue

@@ -11,10 +11,8 @@
       autocapitalize="off"
       spellcheck="false"
     />
-    <br />
-    <br />
 
-    <n-card v-if="result !== ''" title="Result ">
+    <n-card v-if="result !== ''" title="Result " mt-5>
       {{ result }}
     </n-card>
   </div>

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

@@ -13,8 +13,7 @@
         </c-button>
       </n-space>
     </n-card>
-    <br />
+    <n-card title="Roman to arabic" mt-5>
-    <n-card title="Roman to arabic">
       <n-space align="center" justify="space-between">
         <n-form-item v-bind="validationRoman">
           <n-input v-model:value="inputRoman" style="width: 200px" />

src/tools/text-statistics/text-statistics.vue

@@ -1,9 +1,8 @@
 <template>
   <n-card>
     <n-input v-model:value="text" type="textarea" placeholder="Your text..." rows="5" />
-    <br />
+
-    <br />
+    <n-space justify="space-around" mt-5>
-    <n-space justify="space-around">
       <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" />

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

@@ -41,9 +41,8 @@
         autocapitalize="off"
         spellcheck="false"
       />
-      <br />
+
-      <br />
+      <n-space justify="center" mt-5>
-      <n-space justify="center">
         <c-button @click="copy"> Copy </c-button>
         <c-button @click="refreshToken"> Refresh </c-button>
       </n-space>

src/tools/user-agent-parser/user-agent-result-cards.vue

@@ -12,9 +12,7 @@
             </template>
           </n-page-header>
 
-          <br />
+          <n-space mt-5>
-
-          <n-space>
             <span v-for="{ label, getValue } in content" :key="label">
               <n-tooltip v-if="getValue(userAgentInfo)" trigger="hover">
                 <template #trigger>