Refactor the settings button in Home and MainView components from an IconButton to a standard button element with explicit styling

Author: robertpiosik

packages/vscode/src/views/panel/frontend/Home/Home.module.scss

@@ -35,6 +35,32 @@
     font-weight: 600;
     color: var(--vscode-icon-foreground);
   }
+
+  &__settings {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--padding-4px);
+    cursor: pointer;
+    text-decoration: none;
+    background: none;
+    border: none;
+    padding: 0;
+
+    &__icon-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      --size: 20px;
+      width: var(--size);
+      height: var(--size);
+      color: var(--vscode-icon-foreground);
+    }
+
+    &:hover .header__settings__icon-wrapper {
+      animation: rotate 4s linear infinite;
+    }
+  }
 }
 
 .content {
@@ -139,3 +165,12 @@
     color: var(--vscode-descriptionForeground);
   }
 }
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

packages/vscode/src/views/panel/frontend/Home/Home.tsx

@@ -46,12 +46,16 @@ export const Home: React.FC<Props> = (props) => {
           </div>
           <span className={styles['header__text']}>Home</span>
         </div>
-        <IconButton
-          codicon_icon="settings-gear"
-          on_click={handle_settings_click}
+        <button
+          className={styles['header__settings']}
+          onClick={handle_settings_click}
           title="Settings"
-          label="Settings"
-        />
+        >
+          Settings
+          <span className={styles['header__settings__icon-wrapper']}>
+            <span className={cn('codicon', 'codicon-settings-gear')} />
+          </span>
+        </button>
       </div>
 
       <Scrollable>

packages/vscode/src/views/panel/frontend/Main/MainView/MainView.module.scss

@@ -60,10 +60,31 @@
     flex: 1;
     display: flex;
     align-items: center;
+    gap: var(--padding-8px);
 
     &__dropdown {
       width: 100%;
     }
+
+    &__settings {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      --size: 20px;
+      width: var(--size);
+      height: var(--size);
+      color: var(--vscode-icon-foreground);
+      cursor: pointer;
+      text-decoration: none;
+      background: none;
+      border: none;
+      padding: 0;
+
+      &:hover > span {
+        animation: rotate 4s linear infinite;
+      }
+    }
   }
 }
 
@@ -249,3 +270,12 @@
   padding: 0 var(--padding-16px);
   position: relative;
 }
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

packages/vscode/src/views/panel/frontend/Main/MainView/MainView.tsx

@@ -155,7 +155,7 @@ export const MainView: React.FC<Props> = (props) => {
 
     const container_width = container_ref.current.offsetWidth
     const header_left_width = header_left_ref.current.offsetWidth
-    const calculated_width = container_width - header_left_width - 36 - 26 // 26 is for settings button and gap
+    const calculated_width = container_width - header_left_width - 36 - 20 // 26 is for settings button and gap
 
     set_dropdown_max_width(calculated_width)
   }
@@ -314,11 +314,14 @@ export const MainView: React.FC<Props> = (props) => {
               />
             )}
           </div>
-          <UiIconButton
-            codicon_icon="settings-gear"
-            on_click={() => props.on_quick_action_click('codeWebChat.settings')}
+
+          <button
+            className={styles['header__right__settings']}
+            onClick={() => props.on_quick_action_click('codeWebChat.settings')}
             title="Settings"
-          />
+          >
+            <span className={cn('codicon', 'codicon-settings-gear')} />
+          </button>
         </div>
       </div>
       <Scrollable scroll_to_top_key={scroll_to_top_key}>