Make Settings Sidebar a bit dimmer (#10201)

https://github.com/enso-org/enso/assets/61194245/98eaac8b-2284-4b98-a8f8-a9fe19d3227b


This PR partially depends on https://github.com/enso-org/enso/pull/10199

app/ide-desktop/lib/dashboard/src/components/styled/SidebarTabButton.tsx

@@ -1,10 +1,8 @@
 /** @file A styled button representing a tab on a sidebar. */
 import * as React from 'react'
 
-import * as aria from '#/components/aria'
-import StatelessSpinner, * as statelessSpinner from '#/components/StatelessSpinner'
-import SvgMask from '#/components/SvgMask'
-import UnstyledButton from '#/components/UnstyledButton'
+import type * as aria from '#/components/aria'
+import * as ariaComponent from '#/components/AriaComponents'
 
 // ========================
 // === SidebarTabButton ===
@@ -20,38 +18,23 @@ export interface SidebarTabButtonProps {
   readonly icon: string
   readonly label: string
   readonly onPress: (event: aria.PressEvent) => void
-  readonly isPending?: boolean
 }
 
 /** A styled button representing a tab on a sidebar. */
 export default function SidebarTabButton(props: SidebarTabButtonProps) {
-  const {
-    isDisabled = false,
-    autoFocus = false,
-    active = false,
-    icon,
-    label,
-    onPress,
-    isPending = false,
-  } = props
+  const { isDisabled = false, active = false, icon, label, onPress } = props
 
   return (
-    <UnstyledButton
-      autoFocus={autoFocus}
+    <ariaComponent.Button
+      variant="ghost"
+      size="medium"
       onPress={onPress}
       isDisabled={isDisabled}
-      className={`relative rounded-full ${active ? 'focus-default' : ''}`}
+      icon={icon}
+      rounded="full"
+      className={active ? 'bg-white opacity-100' : ''}
     >
-      <div
-        className={`button icon-with-text h-row px-button-x transition-colors selectable hover:bg-selected-frame ${active ? 'disabled bg-selected-frame active' : ''}`}
-      >
-        {active && isPending ? (
-          <StatelessSpinner state={statelessSpinner.SpinnerState.loadingMedium} size={16} />
-        ) : (
-          <SvgMask src={icon} />
-        )}
-        <aria.Text className="text">{label}</aria.Text>
-      </div>
-    </UnstyledButton>
+      {label}
+    </ariaComponent.Button>
   )
 }

app/ide-desktop/lib/dashboard/src/layouts/SettingsSidebar.tsx

@@ -12,6 +12,7 @@ import * as textProvider from '#/providers/TextProvider'
 import SettingsTab from '#/layouts/Settings/SettingsTab'
 
 import * as aria from '#/components/aria'
+import * as ariaComponents from '#/components/AriaComponents'
 import FocusArea from '#/components/styled/FocusArea'
 import SidebarTabButton from '#/components/styled/SidebarTabButton'
 
@@ -133,6 +134,8 @@ export default function SettingsSidebar(props: SettingsSidebarProps) {
               >
                 {section.name}
               </aria.Header>
+
+              <ariaComponents.ButtonGroup gap="xxsmall" direction="column" align="start">
                 {section.tabs.map(tab => (
                   <SidebarTabButton
                     key={tab.settingsTab}
@@ -146,6 +149,7 @@ export default function SettingsSidebar(props: SettingsSidebarProps) {
                     }}
                   />
                 ))}
+              </ariaComponents.ButtonGroup>
             </div>
           ))}
         </div>