refactor(ui): replaced some n-input with c-input-text

src/tools/ipv4-address-converter/ipv4-address-converter.vue

@@ -1,23 +1,20 @@
 <template>
   <div>
-    <n-form-item label="An ipv4 address:" v-bind="validationAttrs">
-      <n-input v-model:value="rawIpAddress" placeholder="An ipv4 address..." />
-    </n-form-item>
+    <c-input-text v-model:value="rawIpAddress" label="The ipv4 address:" placeholder="The ipv4 address..." readonly />
 
-    <n-divider style="margin-top: 0" mt-0 />
+    <n-divider />
 
-    <n-form-item
+    <input-copyable
       v-for="{ label, value } of convertedSections"
       :key="label"
       :label="label"
-      label-placement="left"
-      label-width="100"
-    >
-      <input-copyable
-        :value="validationAttrs.validationStatus === 'error' ? '' : value"
-        placeholder="Set a correct ipv4 address"
-      />
-    </n-form-item>
+      label-position="left"
+      label-width="100px"
+      label-align="right"
+      mb-2
+      :value="validationAttrs.validationStatus === 'error' ? '' : value"
+      placeholder="Set a correct ipv4 address"
+    />
   </div>
 </template>
 
@@ -33,7 +30,7 @@ const convertedSections = computed(() => {
 
   return [
     {
-      label: 'Decimal : ',
+      label: 'Decimal: ',
       value: String(ipInDecimal),
     },
     {