feat: tweak command bar UI styles to match sketches (#7447)

frontend/src/component/commandBar/CommandBar.tsx

@@ -30,9 +30,11 @@ export const CommandResultsPaper = styled(Paper)(({ theme }) => ({
     position: 'absolute',
     width: '100%',
     left: 0,
-    top: '20px',
-    zIndex: 2,
-    padding: theme.spacing(4, 1.5, 1.5),
+    top: '39px',
+    zIndex: 4,
+    borderTop: theme.spacing(0),
+    padding: theme.spacing(4, 0, 1.5),
+    borderRadius: 0,
     borderBottomLeftRadius: theme.spacing(1),
     borderBottomRightRadius: theme.spacing(1),
     boxShadow: '0px 8px 20px rgba(33, 33, 33, 0.15)',
@@ -46,6 +48,7 @@ const StyledContainer = styled('div', {
 })<{
     active: boolean | undefined;
 }>(({ theme, active }) => ({
+    border: `1px solid transparent`,
     display: 'flex',
     flexGrow: 1,
     alignItems: 'center',
@@ -68,13 +71,15 @@ const StyledSearch = styled('div')(({ theme }) => ({
     width: '100%',
     zIndex: 3,
     '&:focus-within': {
-        borderColor: theme.palette.primary.main,
-        boxShadow: theme.boxShadows.main,
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0,
+        borderBottom: '0px',
     },
 }));
 
 const StyledInputBase = styled(InputBase)(({ theme }) => ({
     width: '100%',
+    minWidth: '300px',
     backgroundColor: theme.palette.background.elevation1,
 }));
 
@@ -180,7 +185,7 @@ export const CommandBar = () => {
             searchInputRef.current?.blur();
         }
     });
-    const placeholder = `Search (${hotkey})`;
+    const placeholder = `Command bar (${hotkey})`;
 
     useOnClickOutside([searchContainerRef], hideSuggestions);
     useOnBlur(searchContainerRef, hideSuggestions);
@@ -212,6 +217,7 @@ export const CommandBar = () => {
                         setShowSuggestions(true);
                     }}
                 />
+
                 <Box sx={{ width: (theme) => theme.spacing(4) }}>
                     <ConditionallyRender
                         condition={Boolean(value)}
@@ -239,7 +245,7 @@ export const CommandBar = () => {
             <ConditionallyRender
                 condition={Boolean(value) && showSuggestions}
                 show={
-                    <CommandResultsPaper className='dropdown-outline'>
+                    <CommandResultsPaper>
                         <CommandResultGroup
                             groupName={'Flags'}
                             icon={'flag'}
@@ -259,7 +265,7 @@ export const CommandBar = () => {
                 }
                 elseShow={
                     showSuggestions && (
-                        <CommandResultsPaper className='dropdown-outline'>
+                        <CommandResultsPaper>
                             <RecentlyVisited
                                 lastVisited={lastVisited}
                                 routes={allRoutes}

frontend/src/component/commandBar/PageSuggestions.tsx

@@ -11,16 +11,25 @@ import { IconRenderer } from 'component/layout/MainLayout/NavigationSidebar/Icon
 import type { Theme } from '@mui/material/styles/createTheme';
 
 const listItemButtonStyle = (theme: Theme) => ({
-    borderRadius: theme.spacing(0.5),
+    border: `1px solid transparent`,
     borderLeft: `${theme.spacing(0.5)} solid transparent`,
-    '&.Mui-selected': {
+    '&:hover': {
+        border: `1px solid ${theme.palette.primary.main}`,
         borderLeft: `${theme.spacing(0.5)} solid ${theme.palette.primary.main}`,
     },
 });
 
+const StyledContainer = styled('div')(({ theme }) => ({
+    marginBottom: theme.spacing(3),
+}));
+
+const StyledButtonTypography = styled(Typography)(({ theme }) => ({
+    fontSize: theme.fontSizes.smallerBody,
+}));
+
 const StyledTypography = styled(Typography)(({ theme }) => ({
-    fontSize: theme.fontSizes.bodySize,
-    padding: theme.spacing(0, 3),
+    fontSize: theme.fontSizes.smallBody,
+    padding: theme.spacing(0, 2.5),
 }));
 
 const StyledListItemIcon = styled(ListItemIcon)(({ theme }) => ({
@@ -30,6 +39,7 @@ const StyledListItemIcon = styled(ListItemIcon)(({ theme }) => ({
 
 const StyledListItemText = styled(ListItemText)(({ theme }) => ({
     margin: 0,
+    fontSize: theme.fontSizes.smallBody,
 }));
 
 const toListItemData = (
@@ -64,7 +74,7 @@ export const PageSuggestions = ({
     const filtered = pages.filter((page) => routes[page]);
     const pageItems = toListItemData(filtered, routes);
     return (
-        <>
+        <StyledContainer>
             <StyledTypography color='textSecondary'>Pages</StyledTypography>
             <List>
                 {pageItems.map((item, index) => (
@@ -75,15 +85,24 @@ export const PageSuggestions = ({
                         to={item.path}
                         sx={listItemButtonStyle}
                     >
-                        <StyledListItemIcon>{item.icon}</StyledListItemIcon>
+                        <StyledListItemIcon
+                            sx={(theme) => ({
+                                color: theme.palette.primary.main,
+                                fontSize: theme.fontSizes.smallBody,
+                                minWidth: theme.spacing(0.5),
+                                margin: theme.spacing(0, 1, 0, 0),
+                            })}
+                        >
+                            {item.icon}
+                        </StyledListItemIcon>
                         <StyledListItemText>
-                            <Typography color='textPrimary'>
+                            <StyledButtonTypography color='textPrimary'>
                                 {item.name}
-                            </Typography>
+                            </StyledButtonTypography>
                         </StyledListItemText>
                     </ListItemButton>
                 ))}
             </List>
-        </>
+        </StyledContainer>
     );
 };

frontend/src/component/commandBar/RecentlyVisited/RecentlyVisited.tsx

@@ -18,25 +18,41 @@ import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectO
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
 const listItemButtonStyle = (theme: Theme) => ({
-    borderRadius: theme.spacing(0.5),
+    border: `1px solid transparent`,
     borderLeft: `${theme.spacing(0.5)} solid transparent`,
-    '&.Mui-selected': {
+    '&:hover': {
+        border: `1px solid ${theme.palette.primary.main}`,
         borderLeft: `${theme.spacing(0.5)} solid ${theme.palette.primary.main}`,
     },
 });
 
+const StyledContainer = styled('div')(({ theme }) => ({
+    marginBottom: theme.spacing(3),
+}));
+
+const StyledButtonTypography = styled(Typography)(({ theme }) => ({
+    fontSize: theme.fontSizes.smallerBody,
+}));
+
+const ColoredStyledProjectIcon = styled(StyledProjectIcon)(({ theme }) => ({
+    fill: theme.palette.primary.main,
+    stroke: theme.palette.primary.main,
+}));
+
 const StyledTypography = styled(Typography)(({ theme }) => ({
-    fontSize: theme.fontSizes.bodySize,
-    padding: theme.spacing(0, 3),
+    fontSize: theme.fontSizes.smallBody,
+    padding: theme.spacing(0, 2.5),
 }));
 
 const StyledListItemIcon = styled(ListItemIcon)(({ theme }) => ({
-    minWidth: theme.spacing(4),
-    margin: theme.spacing(0.25, 0),
+    minWidth: theme.spacing(0.5),
+    margin: theme.spacing(0, 1, 0, 0),
+    color: theme.palette.primary.main,
 }));
 
 const StyledListItemText = styled(ListItemText)(({ theme }) => ({
     margin: 0,
+    fontSize: theme.fontSizes.smallBody,
 }));
 
 const toListItemButton = (
@@ -86,7 +102,9 @@ const RecentlyVisitedFeatureButton = ({
                 <Icon>{'flag'}</Icon>
             </StyledListItemIcon>
             <StyledListItemText>
-                <Typography color='textPrimary'>{featureId}</Typography>
+                <StyledButtonTypography color='textPrimary'>
+                    {featureId}
+                </StyledButtonTypography>
             </StyledListItemText>
         </ListItemButton>
     );
@@ -105,15 +123,19 @@ const RecentlyVisitedPathButton = ({
             to={path}
             sx={listItemButtonStyle}
         >
-            <StyledListItemIcon>
+            <StyledListItemIcon
+                sx={(theme) => ({ color: theme.palette.primary.main })}
+            >
                 <ConditionallyRender
                     condition={path === '/projects'}
-                    show={<StyledProjectIcon />}
+                    show={<ColoredStyledProjectIcon />}
                     elseShow={<IconRenderer path={path} />}
                 />
             </StyledListItemIcon>
             <StyledListItemText>
-                <Typography color='textPrimary'>{name}</Typography>
+                <StyledButtonTypography color='textPrimary'>
+                    {name}
+                </StyledButtonTypography>
             </StyledListItemText>
         </ListItemButton>
     );
@@ -135,10 +157,12 @@ const RecentlyVisitedProjectButton = ({
             sx={listItemButtonStyle}
         >
             <StyledListItemIcon>
-                <StyledProjectIcon />
+                <ColoredStyledProjectIcon />
             </StyledListItemIcon>
             <StyledListItemText>
-                <Typography color='textPrimary'>{project.name}</Typography>
+                <StyledButtonTypography color='textPrimary'>
+                    {project.name}
+                </StyledButtonTypography>
             </StyledListItemText>
         </ListItemButton>
     );
@@ -155,11 +179,11 @@ export const RecentlyVisited = ({
         toListItemButton(item, routes, index),
     );
     return (
-        <>
+        <StyledContainer>
             <StyledTypography color='textSecondary'>
                 Recently visited
             </StyledTypography>
             <List>{buttons}</List>
-        </>
+        </StyledContainer>
     );
 };