use confirmDialog and GButton in SettingsPanel

Author: ahmedhamidawan

client/src/components/Panels/SettingsPanel.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { faUndo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BButton, BModal } from "bootstrap-vue";
 import { ref } from "vue";
 
+import { useConfirmDialog } from "@/composables/confirmDialog";
 import { useActivityStore } from "@/stores/activityStore";
 import localize from "@/utils/localization";
 
+import GButton from "../BaseComponents/GButton.vue";
 import ActivitySettings from "@/components/ActivityBar/ActivitySettings.vue";
 import DelayedInput from "@/components/Common/DelayedInput.vue";
 import ActivityPanel from "@/components/Panels/ActivityPanel.vue";
@@ -21,11 +22,25 @@ const emit = defineEmits<{
     (e: "activityClicked", activityId: string): void;
 }>();
 
+const { confirm } = useConfirmDialog();
+
 const activityStore = useActivityStore(props.activityBarId);
 
-const confirmRestore = ref(false);
 const query = ref("");
 
+async function confirmRestore() {
+    const confirmed = await confirm(
+        localize("Are you sure you want to reset the activity bar to its default settings?"),
+        {
+            title: localize("Restore Activity Bar Defaults"),
+        },
+    );
+
+    if (confirmed) {
+        activityStore.restore();
+    }
+}
+
 function onQuery(newQuery: string) {
     query.value = newQuery;
 }
@@ -37,27 +52,20 @@ function onQuery(newQuery: string) {
             <DelayedInput :delay="100" :placeholder="props.searchPlaceholder" @change="onQuery" />
         </template>
         <template v-slot:header-buttons>
-            <BButton
-                v-b-tooltip.bottom.hover
+            <GButton
                 data-description="restore factory settings"
-                size="sm"
-                variant="link"
+                size="small"
+                transparent
+                color="blue"
                 :title="localize('Restore default')"
-                @click="confirmRestore = true">
+                @click="confirmRestore">
                 <span v-localize>Reset</span>
                 <FontAwesomeIcon :icon="faUndo" fixed-width />
-            </BButton>
+            </GButton>
         </template>
         <ActivitySettings
             :query="query"
             :activity-bar-id="props.activityBarId"
             @activityClicked="(...args) => emit('activityClicked', ...args)" />
-        <BModal
-            v-model="confirmRestore"
-            :title="localize('Restore Activity Bar Defaults')"
-            title-tag="h2"
-            @ok="activityStore.restore()">
-            <p v-localize>Are you sure you want to reset the activity bar to its default settings?</p>
-        </BModal>
     </ActivityPanel>
 </template>