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