Commandbar and dark mode UI fixes (#491)

* Improve dark mode

* Improve commandbar style and add interactions

front/src/modules/command-menu/components/CommandMenu.tsx

@@ -72,21 +72,25 @@ export function CommandMenu() {
       <StyledInput placeholder="Search" />
       <StyledList>
         <StyledEmpty>No results found.</StyledEmpty>
-        <StyledGroup heading="Go to">
+        <StyledGroup heading="Navigate">
-          <CommandMenuItem to="/people" label="People" shortcuts={['G', 'P']} />
+          <CommandMenuItem
+            to="/people"
+            label="Go to People"
+            shortcuts={['G', 'P']}
+          />
           <CommandMenuItem
             to="/companies"
-            label="Companies"
+            label="Go to Companies"
             shortcuts={['G', 'C']}
           />
           <CommandMenuItem
             to="/opportunities"
-            label="Opportunities"
+            label="Go to Opportunities"
             shortcuts={['G', 'O']}
           />
           <CommandMenuItem
             to="/settings/profile"
-            label="Settings"
+            label="Go to Settings"
             shortcuts={['G', 'S']}
           />
         </StyledGroup>

front/src/modules/command-menu/components/CommandMenuStyles.tsx

@@ -10,6 +10,7 @@ export const StyledDialog = styled(Command.Dialog)`
   max-width: 640px;
   overflow: hidden;
   padding: 0;
+  padding: ${({ theme }) => theme.spacing(1)};
   position: fixed;
   top: 50%;
   transform: translate(-50%, -50%);
@@ -27,10 +28,14 @@ export const StyledInput = styled(Command.Input)`
   outline: none;
   padding: ${({ theme }) => theme.spacing(5)};
   width: 100%;
+  &::placeholder {
+    color: ${({ theme }) => theme.font.color.light};
+  }
 `;
 
 export const StyledMenuItem = styled(Command.Item)`
   align-items: center;
+  border-radius: 4px;
   color: ${({ theme }) => theme.font.color.primary};
   cursor: pointer;
   display: flex;
@@ -38,7 +43,7 @@ export const StyledMenuItem = styled(Command.Item)`
   gap: ${({ theme }) => theme.spacing(3)};
   height: 40px;
   justify-content: space-between;
-  padding: 0 ${({ theme }) => theme.spacing(4)};
+  padding: 0 ${({ theme }) => theme.spacing(1)};
   position: relative;
   transition: all 150ms ease;
   transition-property: none;
@@ -88,8 +93,8 @@ export const StyledGroup = styled(Command.Group)`
     font-size: ${({ theme }) => theme.font.size.xs};
     font-weight: ${({ theme }) => theme.font.weight.semiBold};
     padding-bottom: ${({ theme }) => theme.spacing(2)};
-    padding-left: ${({ theme }) => theme.spacing(4)};
+    padding-left: ${({ theme }) => theme.spacing(2)};
-    padding-right: ${({ theme }) => theme.spacing(4)};
+    padding-right: ${({ theme }) => theme.spacing(1)};
     padding-top: ${({ theme }) => theme.spacing(2)};
     text-transform: uppercase;
     user-select: none;

front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx

@@ -1,8 +1,9 @@
 import { MemoryRouter } from 'react-router-dom';
 import type { Meta, StoryObj } from '@storybook/react';
-import { fireEvent } from '@storybook/testing-library';
+import { fireEvent, userEvent, within } from '@storybook/testing-library';
 
 import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+import { sleep } from '~/testing/sleep';
 
 import { CommandMenu } from '../CommandMenu';
 
@@ -34,5 +35,25 @@ export const CmdK: Story = {
       code: 'KeyK',
       metaKey: true,
     });
+
+    await sleep(50);
+
+    const canvas = within(document.body);
+
+    const searchInput = await canvas.findByPlaceholderText('Search');
+
+    await userEvent.type(searchInput, '{arrowdown}');
+    await userEvent.type(searchInput, '{arrowup}');
+    await userEvent.type(searchInput, '{arrowdown}');
+    await userEvent.type(searchInput, '{arrowdown}');
+    await userEvent.type(searchInput, '{enter}');
+
+    await sleep(50);
+
+    fireEvent.keyDown(canvasElement, {
+      key: 'k',
+      code: 'KeyK',
+      metaKey: true,
+    });
   },
 };

front/src/modules/ui/components/buttons/MainButton.tsx

@@ -35,7 +35,7 @@ const StyledButton = styled.button<Pick<Props, 'fullWidth' | 'variant'>>`
   box-shadow: ${({ theme }) => theme.boxShadow.light};
   color: ${({ theme, variant, disabled }) => {
     if (disabled) {
-      return theme.font.color.extraLight;
+      return theme.font.color.light;
     }
 
     switch (variant) {

front/src/modules/ui/layout/navbar/NavItem.tsx

@@ -34,7 +34,7 @@ const StyledItem = styled.button<StyledItemProps>`
       return props.theme.color.red;
     }
     if (props.soon) {
-      return props.theme.font.color.extraLight;
+      return props.theme.font.color.light;
     }
     return props.theme.font.color.secondary;
   }};
@@ -70,7 +70,7 @@ const StyledSoonPill = styled.div`
   align-items: center;
   border-radius: 50px;
   background-color: ${({ theme }) => theme.background.transparent.light};
-  font-size: ${({ theme }) => theme.font.size.xxs};
+  font-size: ${({ theme }) => theme.font.size.xs};
   height: 16px;
   padding-left: ${({ theme }) => theme.spacing(2)};
   padding-right: ${({ theme }) => theme.spacing(2)};