twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-11-23 14:03:35 +03:00
Code Issues 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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 7 deletions
Show Stats 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';
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};
box-shadow: ${({ theme }) => theme.boxShadow.strong};
box-shadow: ${({ theme }) => theme.boxShadow.superHeavy};
font-family: ${({ theme }) => theme.font.family};
left: 50%;
max-width: 640px;
@ -44,9 +45,9 @@ export const StyledDialog = styled.div`
`;
export const StyledInput = styled.input`
background: ${({ theme }) => theme.background.primary};
background: ${({ theme }) => theme.background.secondary};
border: none;
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
border-bottom: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: 0;
color: ${({ theme }) => theme.font.color.primary};
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)};
align-items: center;
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};
color: ${({ theme }) => theme.font.color.secondary};
cursor: pointer;

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

@ -1,7 +1,6 @@
import { grayScale, rgba } from './colors';
export const boxShadowLight = {
extraLight: `0px 1px 0px 0px ${rgba(grayScale.gray100, 0.04)}`,
light: `0px 2px 4px 0px ${rgba(
grayScale.gray100,
0.04,
@ -11,10 +10,16 @@ export const boxShadowLight = {
0.12,
)}, 0px 2px 4px 0px ${rgba(grayScale.gray100, 0.04)}`,
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 = {
extraLight: `0px 1px 0px 0px ${rgba(grayScale.gray100, 0.04)}`,
light: `0px 2px 4px 0px ${rgba(
grayScale.gray100,
0.04,
@ -24,4 +29,8 @@ export const boxShadowDark = {
0.16,
)}, 0px 2px 4px 0px ${rgba(grayScale.gray100, 0.08)}`,
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)}`,
};