update icon and color

apps/app/src/components/Sidebar/SidebarHead/ToggleCollapseButton.module.scss

@@ -34,7 +34,7 @@
   .btn-toggle-collapse {
     &:global {
       &.btn.btn-primary {
-        --bs-btn-color: var(--grw-sidebar-nav-btn-color, var(--bs-gray-600));
+        --bs-btn-color: var(--grw-sidebar-nav-btn-color, var(--bs-gray-500));
         --bs-btn-hover-bg: var(--grw-sidebar-nav-btn-hover-bg, var(--grw-highlight-300));
       }
     }
@@ -44,7 +44,7 @@
   .btn-toggle-collapse {
     &:global {
       &.btn.btn-primary {
-        --bs-btn-color: var(--grw-sidebar-nav-btn-color, var(--bs-gray-500));
+        --bs-btn-color: var(--grw-sidebar-nav-btn-color, var(--bs-gray-600));
         --bs-btn-hover-bg: var(--grw-sidebar-nav-btn-hover-bg, var(--grw-highlight-700));
       }
     }

apps/app/src/components/Sidebar/SidebarHead/ToggleCollapseButton.tsx

@@ -17,10 +17,11 @@ export const ToggleCollapseButton = memo((): JSX.Element => {
   }, [isCollapsedMode, mutateCollapsedContentsOpened, mutateCollapsedMode]);
 
   const rotationClass = isCollapsedMode ? 'rotate180' : '';
+  const icon = isCollapsedMode ? 'keyboard_double_arrow_left' : 'first_page';
 
   return (
     <button type="button" className={`btn btn-primary ${styles['btn-toggle-collapse']} p-2`} onClick={toggle}>
-      <span className={`material-icons fs-2 ${rotationClass}`}>first_page</span>
+      <span className={`material-icons fs-2 ${rotationClass}`}>{icon}</span>
     </button>
   );
 });