From d36ee504dd11837186899acd63d03d930300f75b Mon Sep 17 00:00:00 2001
From: "Wu Baiyang (Student)" <bw350@students.waikato.ac.nz>
Date: Fri, 29 Aug 2025 15:01:29 +1200
Subject: [PATCH] Search setting button style improvement

---
 src/components/Settings/SearchBar.vue | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/Settings/SearchBar.vue b/src/components/Settings/SearchBar.vue
index 4d31d4e2..7b7811f2 100644
--- a/src/components/Settings/SearchBar.vue
+++ b/src/components/Settings/SearchBar.vue
@@ -39,8 +39,9 @@
         @click="showSearchPanel = !showSearchPanel"
         class="settings-toggle"
         type="button"
+        v-tooltip="showSearchPanel ? $t('Hide Search Options') : $t('Show Search Options')"
       >
-        {{ showSearchPanel ? 'Hide' : 'Show' }} Search Options
+        <IconConfigEditor />
       </button>
       <div v-show="showSearchPanel" class="settings-row">
         <label class="theme-label">
@@ -60,6 +61,7 @@
 import router from '@/router';
 import ArrowKeyNavigation from '@/utils/ArrowKeyNavigation';
 import ErrorHandler from '@/utils/ErrorHandler';
+import IconConfigEditor from '@/assets/interface-icons/config-editor.svg';
 import { getCustomKeyShortcuts } from '@/utils/ConfigHelpers';
 import { getSearchEngineFromBang, findUrlForSearchEngine, stripBangs } from '@/utils/Search';
 import {
@@ -74,6 +76,9 @@ export default {
   props: {
     minimalSearch: Boolean, // If true, then keep it simple
   },
+  components: {
+    IconConfigEditor,
+  },
   data() {
     return {
       input: '',
@@ -300,8 +305,8 @@ export default {
       background: var(--settings-background);
       color: var(--settings-text-color);
       border: none;
-      padding: 0.5rem 1rem;
-      margin: 0.5rem;
+      padding: 0.5rem;
+      margin: 0.5rem 0.5rem 0.5rem 0;
       border-radius: var(--curve-factor);
       cursor: pointer;
       &:hover {
@@ -309,6 +314,13 @@ export default {
         color: var(--settings-background);
       }
     }
+
+    .settings-toggle svg {
+      width: 1rem;
+      height: 1rem;
+      fill: currentColor;
+      display: block;
+    }
   }
 
   @include tablet {