admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

2980-Fix: CommandGroup background (#2985)

Browse Source 
* 2980-fix: CommandGroup background

* Box Shadow fix

* suggested color fixes

* Fix related to design dicussion: add border + make everything background secondary

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Kanav Arora
2023-12-19 20:11:58 +05:30
committed by GitHub
parent 0f7ddd2f14
commit ffcdace113
3 changed files with 19 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx
View File

@ -27,9 +27,10 @@ import { CommandGroup } from './CommandGroup';
import { CommandMenuItem } from './CommandMenuItem'; import { CommandMenuItem } from './CommandMenuItem';
export const StyledDialog = styled.div` export const StyledDialog = styled.div`
background: ${({ theme }) => theme.background.primary}; background: ${({ theme }) => theme.background.secondary};
border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: ${({ theme }) => theme.border.radius.md}; border-radius: ${({ theme }) => theme.border.radius.md};
box-shadow: ${({ theme }) => theme.boxShadow.strong}; box-shadow: ${({ theme }) => theme.boxShadow.superHeavy};
font-family: ${({ theme }) => theme.font.family}; font-family: ${({ theme }) => theme.font.family};
left: 50%; left: 50%;
max-width: 640px; max-width: 640px;
@ -44,9 +45,9 @@ export const StyledDialog = styled.div`
`; `;
export const StyledInput = styled.input` export const StyledInput = styled.input`
background: ${({ theme }) => theme.background.primary}; background: ${({ theme }) => theme.background.secondary};
border: none; border: none;
border-bottom: 1px solid ${({ theme }) => theme.border.color.light}; border-bottom: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: 0; border-radius: 0;
color: ${({ theme }) => theme.font.color.primary}; color: ${({ theme }) => theme.font.color.primary};
font-size: ${({ theme }) => theme.font.size.lg}; font-size: ${({ theme }) => theme.font.size.lg};

4
packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemCommand.tsx
View File

@ -31,7 +31,9 @@ const StyledMenuItemCommandContainer = styled.div<{ isSelected?: boolean }>`
--vertical-padding: ${({ theme }) => theme.spacing(2)}; --vertical-padding: ${({ theme }) => theme.spacing(2)};
align-items: center; align-items: center;
background: ${({ isSelected, theme }) => background: ${({ isSelected, theme }) =>
isSelected ? theme.background.transparent.light : theme.background.primary}; isSelected
? theme.background.transparent.light
: theme.background.secondary};
border-radius: ${({ theme }) => theme.border.radius.sm}; border-radius: ${({ theme }) => theme.border.radius.sm};
color: ${({ theme }) => theme.font.color.secondary}; color: ${({ theme }) => theme.font.color.secondary};
cursor: pointer; cursor: pointer;

13
packages/twenty-front/src/modules/ui/theme/constants/boxShadow.ts
View File

@ -1,7 +1,6 @@
import { grayScale, rgba } from './colors'; import { grayScale, rgba } from './colors';
export const boxShadowLight = { export const boxShadowLight = {
extraLight: `0px 1px 0px 0px ${rgba(grayScale.gray100, 0.04)}`,
light: `0px 2px 4px 0px ${rgba( light: `0px 2px 4px 0px ${rgba(
grayScale.gray100, grayScale.gray100,
0.04, 0.04,
@ -11,10 +10,16 @@ export const boxShadowLight = {
0.12, 0.12,
)}, 0px 2px 4px 0px ${rgba(grayScale.gray100, 0.04)}`, )}, 0px 2px 4px 0px ${rgba(grayScale.gray100, 0.04)}`,
underline: `0px 1px 0px 0px ${rgba(grayScale.gray100, 0.32)}`, underline: `0px 1px 0px 0px ${rgba(grayScale.gray100, 0.32)}`,
superHeavy: `0px 0px 8px 0px ${rgba(
grayScale.gray100,
0.16,
)}, 0px 8px 64px -16px ${rgba(
grayScale.gray100,
0.48,
)}, 0px 24px 56px -16px ${rgba(grayScale.gray100, 0.08)}`,
}; };
export const boxShadowDark = { export const boxShadowDark = {
extraLight: `0px 1px 0px 0px ${rgba(grayScale.gray100, 0.04)}`,
light: `0px 2px 4px 0px ${rgba( light: `0px 2px 4px 0px ${rgba(
grayScale.gray100, grayScale.gray100,
0.04, 0.04,
@ -24,4 +29,8 @@ export const boxShadowDark = {
0.16, 0.16,
)}, 0px 2px 4px 0px ${rgba(grayScale.gray100, 0.08)}`, )}, 0px 2px 4px 0px ${rgba(grayScale.gray100, 0.08)}`,
underline: `0px 1px 0px 0px ${rgba(grayScale.gray100, 0.32)}`, underline: `0px 1px 0px 0px ${rgba(grayScale.gray100, 0.32)}`,
superHeavy: `2px 4px 16px 0px ${rgba(
grayScale.gray100,
0.12,
)}, 0px 2px 4px 0px ${rgba(grayScale.gray100, 0.04)}`,
}; };