refactor(ui): getting ride of naive ui buttons

1 files changed, 5 insertions, 5 deletions

diff --git a/src/tools/ipv4-range-expander/ipv4-range-expander.vue b/src/tools/ipv4-range-expander/ipv4-range-expander.vue
index 6cbff1c..05b15b2 100644
--- a/src/tools/ipv4-range-expander/ipv4-range-expander.vue
+++ b/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';