diff --git a/front/src/modules/command-menu/components/CommandMenu.tsx b/front/src/modules/command-menu/components/CommandMenu.tsx
index 3da800dc6..c32265ccf 100644
--- a/front/src/modules/command-menu/components/CommandMenu.tsx
+++ b/front/src/modules/command-menu/components/CommandMenu.tsx
@@ -72,21 +72,25 @@ export function CommandMenu() {
No results found.
-
-
+
+
diff --git a/front/src/modules/command-menu/components/CommandMenuStyles.tsx b/front/src/modules/command-menu/components/CommandMenuStyles.tsx
index 35a525536..e2d3026eb 100644
--- a/front/src/modules/command-menu/components/CommandMenuStyles.tsx
+++ b/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-right: ${({ theme }) => theme.spacing(4)};
+ padding-left: ${({ theme }) => theme.spacing(2)};
+ padding-right: ${({ theme }) => theme.spacing(1)};
padding-top: ${({ theme }) => theme.spacing(2)};
text-transform: uppercase;
user-select: none;
diff --git a/front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx b/front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx
index d656e0450..71e9c904b 100644
--- a/front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx
+++ b/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,
+ });
},
};
diff --git a/front/src/modules/ui/components/buttons/MainButton.tsx b/front/src/modules/ui/components/buttons/MainButton.tsx
index ca607fac7..09b5cae87 100644
--- a/front/src/modules/ui/components/buttons/MainButton.tsx
+++ b/front/src/modules/ui/components/buttons/MainButton.tsx
@@ -35,7 +35,7 @@ const StyledButton = styled.button>`
box-shadow: ${({ theme }) => theme.boxShadow.light};
color: ${({ theme, variant, disabled }) => {
if (disabled) {
- return theme.font.color.extraLight;
+ return theme.font.color.light;
}
switch (variant) {
diff --git a/front/src/modules/ui/layout/navbar/NavItem.tsx b/front/src/modules/ui/layout/navbar/NavItem.tsx
index 565aa2e3a..60417f804 100644
--- a/front/src/modules/ui/layout/navbar/NavItem.tsx
+++ b/front/src/modules/ui/layout/navbar/NavItem.tsx
@@ -34,7 +34,7 @@ const StyledItem = styled.button`
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)};
diff --git a/front/src/modules/ui/themes/assets/dark-noise.png b/front/src/modules/ui/themes/assets/dark-noise.png
index e20f9e601..4dd60615a 100644
Binary files a/front/src/modules/ui/themes/assets/dark-noise.png and b/front/src/modules/ui/themes/assets/dark-noise.png differ