chore: Update buttons in conversation screens - 2 (#11134)

app/javascript/dashboard/components/NetworkNotification.vue

@@ -11,6 +11,8 @@ import {
 } from 'dashboard/helper/routeHelpers';
 import { useEventListener } from '@vueuse/core';
 
+import Button from 'dashboard/components-next/button/Button.vue';
+
 const { t } = useI18n();
 const route = useRoute();
 
@@ -107,34 +109,31 @@ onBeforeUnmount(() => {
 
 <template>
   <transition name="network-notification-fade" tag="div">
-    <div v-show="showNotification" class="fixed z-50 top-4 left-2 group">
+    <div v-show="showNotification" class="fixed z-50 top-2 left-2 group">
       <div
-        class="relative flex items-center justify-between w-full px-2 py-1 bg-yellow-200 rounded-lg shadow-lg dark:bg-yellow-700"
+        class="relative flex items-center justify-between w-full px-2 py-1 bg-n-amber-4 dark:bg-n-amber-8 rounded-lg shadow-lg"
       >
-        <fluent-icon
-          :icon="iconName"
-          class="text-yellow-700/50 dark:text-yellow-50"
-          size="18"
-        />
-        <span
-          class="px-2 text-xs font-medium tracking-wide text-yellow-700/70 dark:text-yellow-50"
-        >
+        <fluent-icon :icon="iconName" class="text-n-amber-12" size="18" />
+        <span class="px-2 text-xs font-medium tracking-wide text-n-amber-12">
           {{ bannerText }}
         </span>
-        <woot-button
+        <Button
           v-if="canRefresh"
+          ghost
+          sm
+          amber
+          icon="i-lucide-refresh-ccw"
           :title="$t('NETWORK.BUTTON.REFRESH')"
-          variant="clear"
-          size="small"
-          color-scheme="warning"
-          icon="arrow-clockwise"
+          class="!text-n-amber-12 dark:!text-n-amber-9"
           @click="refreshPage"
         />
-        <woot-button
-          variant="clear"
-          size="small"
-          color-scheme="warning"
-          icon="dismiss"
+
+        <Button
+          ghost
+          sm
+          amber
+          icon="i-lucide-x"
+          class="!text-n-amber-12 dark:!text-n-amber-9"
           @click="closeNotification"
         />
       </div>