fix: sidebar styles refactoring + light theme (#1208)

Author: 3em

apps/design-system/src/App.tsx

@@ -1,5 +1,14 @@
 import { FC } from 'react'
-import { createBrowserRouter, Link, Navigate, RouterProvider } from 'react-router-dom'
+import {
+  createBrowserRouter,
+  Link,
+  Navigate,
+  NavLink,
+  Outlet,
+  RouterProvider,
+  useMatches,
+  useSearchParams
+} from 'react-router-dom'
 
 import ComponentPage from '@/pages/component-page'
 import ViewPreview from '@/pages/view-preview/view-preview'
@@ -19,7 +28,15 @@ const App: FC = () => {
 
   return (
     <ThemeProvider {...themeStore}>
-      <RouterContextProvider Link={Link}>
+      <RouterContextProvider
+        Link={Link}
+        NavLink={NavLink}
+        Outlet={Outlet}
+        navigate={router.navigate}
+        location={{ ...window.location, state: {}, key: '' }}
+        useSearchParams={useSearchParams}
+        useMatches={useMatches}
+      >
         <RouterProvider router={router} />
       </RouterContextProvider>
     </ThemeProvider>

apps/design-system/src/pages/view-preview/app-view-wrapper.tsx

@@ -20,7 +20,51 @@ export const AppViewWrapper: FC<PropsWithChildren<AppViewWrapperProps>> = ({
 }) => {
   const [showMoreMenu, setShowMoreMenu] = useState(false)
   const [showSettingsMenu, setShowSettingsMenu] = useState(false)
-  const [pinnedMenu, setPinnedMenu] = useState<NavbarItemType[]>([])
+  const [pinnedMenu, setPinnedMenu] = useState<NavbarItemType[]>([
+    {
+      id: 0,
+      iconName: 'repositories-gradient',
+      title: 'Repositories',
+      description: 'Integrated & familiar git experience.',
+      to: '/pixel/repos',
+      permanentlyPinned: true
+    },
+    {
+      id: 1,
+      iconName: 'pipelines-gradient',
+      title: 'Pipelines',
+      description: 'Up to 4X faster than other solutions.',
+      to: '/pipelines',
+      permanentlyPinned: true
+    },
+    {
+      id: 3,
+      iconName: 'database-gradient',
+      title: 'Databases',
+      description: 'Manage all your infrastructure.',
+      to: '/databases'
+    },
+    {
+      id: 7,
+      iconName: 'dev-portal-gradient',
+      title: 'Developer Portal',
+      description: 'Built for developers, onboard in minutes.',
+      to: '/developer/portal'
+    },
+    {
+      id: 32,
+      iconName: 'user',
+      title: 'Users',
+      to: '/admin/default-settings'
+    },
+    {
+      id: 9,
+      iconName: 'dev-insights-gradient',
+      title: 'Developer Insights',
+      description: 'Actionable insights on SDLC.',
+      to: '/developer/insights'
+    }
+  ])
   const [recentMenu] = useState<NavbarItemType[]>([])
   const { moreMenu, settingsMenu } = useRootViewWrapperStore()
 
@@ -30,7 +74,6 @@ export const AppViewWrapper: FC<PropsWithChildren<AppViewWrapperProps>> = ({
 
   const onToggleMoreMenu = useCallback(() => {
     setShowSettingsMenu(false)
-    console.log('open more menu')
     setShowMoreMenu(current => !current)
   }, [])
 

packages/ui/src/components/app-sidebar/app-sidebar.tsx

@@ -1,13 +1,18 @@
 import { useState } from 'react'
 
+import {
+  Icon,
+  LanguageCode,
+  LanguageDialog,
+  LanguageInterface,
+  languages,
+  Sidebar,
+  Spacer,
+  ThemeDialog
+} from '@/components'
 import { IThemeStore, useRouterContext } from '@/context'
 import { TypesUser } from '@/types'
 import { TranslationStore } from '@/views'
-import { Icon } from '@components/icon'
-import { LanguageCode, LanguageDialog, LanguageInterface, languages } from '@components/language-selector'
-import { Sidebar } from '@components/sidebar/sidebar'
-import { Spacer } from '@components/spacer'
-import { ThemeDialog } from '@components/theme-selector-v2'
 
 import { SidebarItem } from './sidebar-item'
 import { SidebarSearchLegacy } from './sidebar-search-legacy'
@@ -69,16 +74,17 @@ export const AppSidebar = ({
 
   return (
     <>
-      <Sidebar.Root>
+      <Sidebar.Root className="z-20">
         <Sidebar.Header>
           {showNewSearch ? (
             <SearchProvider t={t}>
               <SidebarSearch
+                className="pb-3 pt-1.5"
                 t={t}
                 logo={
-                  <Link to="/" className="h-[58px] flex gap-2 items-center pl-3 justify-start">
-                    <Icon name="harness" size={20} className="text-foreground-accent" />
-                    <Icon name="harness-logo-text" size={68} className="text-foreground-1" />
+                  <Link to="/" className="flex h-[58px] items-center justify-start gap-0.5 pl-1">
+                    <Icon name="harness" size={18} className="text-sidebar-foreground-accent" />
+                    <Icon name="harness-logo-text" width={65} height={15} className="mb-px text-sidebar-foreground-1" />
                   </Link>
                 }
               />
@@ -87,16 +93,16 @@ export const AppSidebar = ({
             <SidebarSearchLegacy
               t={t}
               logo={
-                <Link className="flex items-center gap-1.5" to="/">
-                  <Icon name="harness" size={18} className="text-foreground-accent" />
-                  <Icon name="harness-logo-text" width={65} height={15} className="mb-0.5 text-foreground-1" />
+                <Link className="flex items-center gap-0.5" to="/">
+                  <Icon name="harness" size={18} className="text-sidebar-foreground-accent" />
+                  <Icon name="harness-logo-text" width={65} height={15} className="mb-px text-sidebar-foreground-1" />
                 </Link>
               }
             />
           )}
         </Sidebar.Header>
         <Sidebar.Content>
-          <Sidebar.Group className="px-2 pt-5">
+          <Sidebar.Group>
             <Sidebar.GroupContent>
               <Sidebar.Menu>
                 {pinnedMenuItems.map((item, index) => (
@@ -110,22 +116,20 @@ export const AppSidebar = ({
                   />
                 ))}
 
-                <Sidebar.MenuItem className="cursor-pointer">
+                <Sidebar.MenuItem>
                   <Sidebar.MenuButton asChild onClick={handleMoreMenu}>
-                    <div>
-                      <Icon name="ellipsis" size={12} className="text-icons-4 transition-colors hover:text-primary" />
-                      <span className="text-foreground-3 font-medium transition-colors hover:text-primary">
-                        {t('component:navbar.more', 'More')}
-                      </span>
-                    </div>
+                    <Sidebar.MenuItemText
+                      text={t('component:navbar.more', 'More')}
+                      icon={<Icon name="ellipsis" size={12} />}
+                    />
                   </Sidebar.MenuButton>
                 </Sidebar.MenuItem>
               </Sidebar.Menu>
             </Sidebar.GroupContent>
           </Sidebar.Group>
 
           {!!recentMenuItems.length && (
-            <Sidebar.Group title="Recent" className="border-t px-2 pt-3">
+            <Sidebar.Group title={t('component:navbar.recent', 'Recent')} className="border-t pt-2.5">
               <Sidebar.GroupLabel>{t('component:navbar.recent', 'Recent')}</Sidebar.GroupLabel>
               <Spacer size={2} />
               <Sidebar.GroupContent>
@@ -146,36 +150,32 @@ export const AppSidebar = ({
             </Sidebar.Group>
           )}
 
-          <Sidebar.Group className="border-t px-2 pt-5">
+          <Sidebar.Group className="border-t">
             <Sidebar.GroupContent>
               <Sidebar.Menu>
                 {!!currentUser?.admin && (
                   <Sidebar.MenuItem>
                     <Sidebar.MenuButton asChild onClick={() => navigate('/admin/default-settings')}>
-                      <div>
-                        <Icon name="account" size={12} className="text-icons-4 transition-colors hover:text-primary" />
-                        <span className="text-foreground-3 font-medium transition-colors hover:text-primary">
-                          {t('component:navbar.user-management', 'User Management')}
-                        </span>
-                      </div>
+                      <Sidebar.MenuItemText
+                        text={t('component:navbar.user-management', 'User Management')}
+                        icon={<Icon name="account" size={12} />}
+                      />
                     </Sidebar.MenuButton>
                   </Sidebar.MenuItem>
                 )}
                 <Sidebar.MenuItem>
                   <Sidebar.MenuButton asChild onClick={handleSettingsMenu}>
-                    <div>
-                      <Icon name="settings-1" size={12} className="text-icons-4 transition-colors hover:text-primary" />
-                      <span className="text-foreground-3 font-medium transition-colors hover:text-primary">
-                        {t('component:navbar.settings', 'Settings')}
-                      </span>
-                    </div>
+                    <Sidebar.MenuItemText
+                      text={t('component:navbar.settings', 'Settings')}
+                      icon={<Icon name="settings-1" size={12} />}
+                    />
                   </Sidebar.MenuButton>
                 </Sidebar.MenuItem>
               </Sidebar.Menu>
             </Sidebar.GroupContent>
           </Sidebar.Group>
         </Sidebar.Content>
-        <Sidebar.Footer className="border-t border-borders-1">
+        <Sidebar.Footer className="border-t border-sidebar-border-1">
           <User
             user={currentUser}
             openThemeDialog={() => setOpenThemeDialog(true)}

packages/ui/src/components/app-sidebar/sidebar-item.tsx

@@ -1,9 +1,5 @@
+import { DropdownMenu, Icon, IconProps, Sidebar, Text } from '@/components'
 import { useRouterContext } from '@/context'
-import { DropdownMenu } from '@components/dropdown-menu'
-import { Icon, IconProps } from '@components/icon'
-import { Sidebar } from '@components/sidebar/sidebar'
-import { Text } from '@components/text'
-import { cn } from '@utils/cn'
 import { TFunction } from 'i18next'
 
 interface NavbarItemType {
@@ -46,33 +42,41 @@ export const SidebarItem = ({
 
   const dropdownItems = isRecent ? (
     <>
-      <DropdownMenu.Item onSelect={handlePin} className="gap-2">
-        <Icon name="pin" size={12} />
-        <Text size={2} truncate>
-          {t('component:navbar.pin')}
+      <DropdownMenu.Item
+        className="text-sidebar-foreground-6 data-[highlighted]:bg-sidebar-background-2 data-[highlighted]:text-sidebar-foreground-1"
+        onSelect={handlePin}
+      >
+        <Text size={2} truncate color="inherit">
+          {t('component:navbar.pin', 'Pin')}
         </Text>
       </DropdownMenu.Item>
-      <DropdownMenu.Item onSelect={handleRemoveRecent} className="gap-2">
-        <Icon name="trash" size={12} />
-        <Text size={2} truncate>
-          {t('component:navbar.remove')}
+      <DropdownMenu.Item
+        className="text-sidebar-foreground-6 data-[highlighted]:bg-sidebar-background-2 data-[highlighted]:text-sidebar-foreground-1"
+        onSelect={handleRemoveRecent}
+      >
+        <Text size={2} truncate color="inherit">
+          {t('component:navbar.remove', 'Remove')}
         </Text>
       </DropdownMenu.Item>
     </>
   ) : (
     <>
-      <DropdownMenu.Item onSelect={handleCustomNav} className="gap-2">
-        <Icon name="list" size={12} />
-        <Text size={2} truncate>
-          {t('component:navbar.reorder')}
+      <DropdownMenu.Item
+        className="text-sidebar-foreground-6 data-[highlighted]:bg-sidebar-background-2 data-[highlighted]:text-sidebar-foreground-1"
+        onSelect={handleCustomNav}
+      >
+        <Text size={2} truncate color="inherit">
+          {t('component:navbar.reorder', 'Reorder')}
         </Text>
       </DropdownMenu.Item>
 
       {!item.permanentlyPinned ? (
-        <DropdownMenu.Item onSelect={handlePin} className="gap-2">
-          <Icon name="unpin" size={12} />
-          <Text size={2} truncate>
-            {t('component:navbar.unpin')}
+        <DropdownMenu.Item
+          className="text-sidebar-foreground-6 data-[highlighted]:bg-sidebar-background-2 data-[highlighted]:text-sidebar-foreground-1"
+          onSelect={handlePin}
+        >
+          <Text size={2} truncate color="inherit">
+            {t('component:navbar.unpin', 'Unpin')}
           </Text>
         </DropdownMenu.Item>
       ) : null}
@@ -83,42 +87,30 @@ export const SidebarItem = ({
     <Sidebar.MenuItem>
       <NavLink className="block" to={item.to || ''} end>
         {({ isActive }) => (
-          <div
-            className={cn('hover:bg-background-4 rounded text-foreground-3 transition-colors hover:text-primary', {
-              'bg-background-4': isActive
-            })}
-          >
-            <Sidebar.MenuButton asChild isActive={isActive}>
-              <div className="gap-2.5">
-                <Icon
-                  name={iconName!}
-                  size={12}
-                  className={cn({
-                    'text-primary': isActive
-                  })}
-                />
-                <span
-                  className={cn('font-medium', {
-                    'text-primary': isActive
-                  })}
-                >
-                  {item.title}
-                </span>
-              </div>
-            </Sidebar.MenuButton>
-          </div>
+          <Sidebar.MenuButton asChild isActive={isActive}>
+            <Sidebar.MenuItemText
+              text={item.title}
+              icon={iconName && <Icon name={iconName} size={12} />}
+              active={isActive}
+            />
+          </Sidebar.MenuButton>
         )}
       </NavLink>
 
       <DropdownMenu.Root>
-        <Sidebar.MenuAction>
-          <DropdownMenu.Trigger asChild>
-            <span className="absolute right-[-0.2rem] text-icons-4 opacity-0 hover:text-icons-2 focus:opacity-100 focus-visible:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 focus:outline-none focus:ring-0">
+        <DropdownMenu.Trigger asChild>
+          <Sidebar.MenuAction className="right-0 text-sidebar-icon-3 hover:text-sidebar-icon-1" showOnHover>
+            <span>
               <Icon name="menu-dots" size={12} />
             </span>
-          </DropdownMenu.Trigger>
-        </Sidebar.MenuAction>
-        <DropdownMenu.Content className="w-[128px]" align="end" sideOffset={-1} alignOffset={8}>
+          </Sidebar.MenuAction>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content
+          className="w-[128px] border-sidebar-border-3 bg-sidebar-background-4"
+          align="end"
+          sideOffset={3}
+          alignOffset={4}
+        >
           {dropdownItems}
         </DropdownMenu.Content>
       </DropdownMenu.Root>

packages/ui/src/components/app-sidebar/sidebar-search-legacy.tsx

@@ -24,8 +24,8 @@ function SidebarSearchLegacy({ logo, t }: ProjectProps) {
   }
 
   return (
-    <div className="flex w-full flex-col place-items-start px-2 pb-3">
-      <div className="flex h-[58px] items-center px-1">{logo}</div>
+    <div className="flex w-full flex-col place-items-start pb-3 pt-1.5">
+      <div className="flex h-[58px] items-center pl-1">{logo}</div>
       <SearchBox.Root
         width="full"
         placeholder={`${t('component:navbar.search', 'Search')}...`}
@@ -35,6 +35,7 @@ function SidebarSearchLegacy({ logo, t }: ProjectProps) {
         value=""
         onSearch={openSearchDialog}
         handleChange={openSearchDialog}
+        theme="sidebar"
       />
       <Dialog.Root open={isSearchDialogOpen} onOpenChange={closeSearchDialog}>
         <Dialog.Content className="h-[600px] max-w-[800px]">