feat(SidebarToggle): replace menu icon with sidebar icon and update button accessibility

feat(buttons): enhance button styles with active state transformations and transitions
fix(Header): add delay for setting change to ensure button click animation completes

src/components/Elements/MainModal/components/SidebarToggle.jsx

@@ -1,4 +1,4 @@
-import { MdMenu } from 'react-icons/md';
+import { FiSidebar } from "react-icons/fi";
 import { Tooltip } from 'components/Elements';
 import { useT } from 'contexts/TranslationContext';
 
@@ -16,7 +16,7 @@ function SidebarToggle({ isCollapsed, onToggle }) {
         aria-label={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
         aria-expanded={!isCollapsed}
       >
-        <MdMenu />
+        <FiSidebar />
       </button>
     </Tooltip>
   );

src/components/Elements/MainModal/scss/modules/_buttons.scss

@@ -1,5 +1,17 @@
 @use 'scss/variables' as *;
 
+// Default button behavior for all modal buttons
+.btn-default {
+  @include modal-button(standard);
+
+  padding: 0 20px;
+  font-weight: 500;
+
+  &:active {
+    transform: scale(0.98) !important;
+  }
+}
+
 .updateCheck {
   flex-flow: row !important;
 }
@@ -11,6 +23,11 @@
   margin-top: 0;
   float: none !important;
   padding: 0 20px;
+  font-weight: 500;
+
+  &:active {
+    transform: scale(0.98) !important;
+  }
 }
 
 .btn-secondary {
@@ -20,6 +37,11 @@
   margin-top: 0;
   float: none !important;
   padding: 0 20px;
+  font-weight: 500;
+
+  &:active {
+    transform: scale(0.98) !important;
+  }
 }
 
 .btn-navigation {
@@ -27,7 +49,7 @@
 
   padding: 10px 20px;
   border-radius: 12px !important;
-  transition: all 0.2s ease;
+  transition: background 0.2s ease, transform 0.1s ease;
   position: relative;
 
   @include themed {
@@ -60,6 +82,10 @@
     }
   }
 
+  &:active {
+    transform: scale(0.98);
+  }
+
   span,
   svg {
     font-size: 1.1em !important;
@@ -112,7 +138,7 @@
   flex-flow: row;
   justify-content: center;
   gap: 20px;
-  transition: 0.5s;
+  transition: background 0.2s ease, transform 0.1s ease, border 0.2s ease, box-shadow 0.2s ease;
   cursor: pointer;
 
   &:hover {
@@ -125,13 +151,15 @@
     @include themed {
       background: t($modal-sidebarActive);
       box-shadow: 0 0 0 1px t($color);
+      transform: scale(0.98);
     }
   }
 
-  &:focus {
+  &:focus-visible {
     @include themed {
       background: t($modal-sidebarActive);
-      box-shadow: 0 0 0 1px t($color);
+      box-shadow: 0 0 0 2px t($color);
+      outline: none;
     }
   }
 
@@ -139,6 +167,7 @@
     @include themed {
       background: t($modal-sidebarActive);
       cursor: not-allowed;
+      opacity: 0.5;
     }
   }
 }
@@ -162,6 +191,11 @@ a.btn-collection {
   display: grid;
   place-content: center;
   border-radius: 8px !important;
+  padding: 0 !important;
 
   @include modal-button(standard);
+
+  &:active {
+    transform: scale(0.95) !important;
+  }
 }

src/components/Layout/Settings/Header/Header.jsx

@@ -22,24 +22,28 @@ function Header(props) {
 
   const changeSetting = () => {
     const toggle = localStorage.getItem(props.setting) === 'true';
-    localStorage.setItem(props.setting, !toggle);
-    setSetting(!toggle);
 
-    variables.stats.postEvent(
-      'setting',
-      `${props.name} ${setting === true ? 'enabled' : 'disabled'}`,
-    );
+    // Small delay to let the button click animation complete
+    setTimeout(() => {
+      localStorage.setItem(props.setting, !toggle);
+      setSetting(!toggle);
 
-    EventBus.emit('toggle', props.setting);
+      variables.stats.postEvent(
+        'setting',
+        `${props.name} ${setting === true ? 'enabled' : 'disabled'}`,
+      );
 
-    if (props.element) {
-      if (!document.querySelector(props.element)) {
-        document.querySelector('.reminder-info').style.display = 'flex';
-        return localStorage.setItem('showReminder', true);
+      EventBus.emit('toggle', props.setting);
+
+      if (props.element) {
+        if (!document.querySelector(props.element)) {
+          document.querySelector('.reminder-info').style.display = 'flex';
+          return localStorage.setItem('showReminder', true);
+        }
       }
-    }
 
-    EventBus.emit('refresh', props.category);
+      EventBus.emit('refresh', props.category);
+    }, 100);
   };
 
   const VisibilityToggle = () => (

src/scss/_variables.scss

@@ -238,7 +238,7 @@ $theme-map: null;
     flex-flow: row;
     justify-content: center;
     gap: 20px;
-    transition: 0.5s;
+    transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
     cursor: pointer;
 
     &:hover {
@@ -248,16 +248,19 @@ $theme-map: null;
     &:active {
       background: t($modal-sidebarActive);
       box-shadow: 0 0 0 1px t($color);
+      transform: scale(0.98);
     }
 
-    &:focus {
+    &:focus-visible {
       background: t($modal-sidebarActive);
-      box-shadow: 0 0 0 1px t($color);
+      box-shadow: 0 0 0 2px t($color);
+      outline: none;
     }
 
     &:disabled {
       background: t($modal-sidebarActive);
       cursor: not-allowed;
+      opacity: 0.5;
     }
   }
 }