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

Refactor/dropdown menu (#279)

Browse Source 
* Created dropdown menu UI component with story

* Added all components for composing Dropdown Menus

* Better component naming and reordered stories

* Solved comment thread from review
This commit is contained in:
Lucas Bordeau
2023-06-13 15:15:19 +02:00
committed by GitHub
parent 16e1b862d9
commit 3a719001de
15 changed files with 614 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
front/src/modules/ui/layout/styles/themes.ts
View File

@ -49,6 +49,7 @@ const lightThemeSpecific = {
primaryBorder: 'rgba(0, 0, 0, 0.08)',
lightBorder: '#f5f5f5',
mediumBorder: '#ebebeb',
clickableElementBackgroundHover: 'rgba(0, 0, 0, 0.04)',
clickableElementBackgroundTransition: 'background 0.1s ease',
@ -72,6 +73,8 @@ const lightThemeSpecific = {
blueLowTransparency: 'rgba(25, 97, 237, 0.32)',
boxShadow: '0px 2px 4px 0px #0F0F0F0A',
modalBoxShadow: '0px 3px 12px rgba(0, 0, 0, 0.09)',
};
const darkThemeSpecific: typeof lightThemeSpecific = {
@ -94,6 +97,7 @@ const darkThemeSpecific: typeof lightThemeSpecific = {
primaryBorder: 'rgba(255, 255, 255, 0.08)',
lightBorder: '#222222',
mediumBorder: '#141414',
text100: '#ffffff',
text80: '#cccccc',
@ -113,13 +117,14 @@ const darkThemeSpecific: typeof lightThemeSpecific = {
blueHighTransparency: 'rgba(104, 149, 236, 0.03)',
blueLowTransparency: 'rgba(104, 149, 236, 0.32)',
boxShadow: '0px 2px 4px 0px #0F0F0F0A', // TODO change color for dark theme
modalBoxShadow: '0px 3px 12px rgba(0, 0, 0, 0.09)', // TODO change color for dark theme
};
export const overlayBackground = (props: any) =>
css`
background: ${props.theme.secondaryBackgroundTransparent};
backdrop-filter: blur(8px);
box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.09);
box-shadow: ${props.theme.modalBoxShadow};
`;
export const textInputStyle = (props: any) =>
@ -137,6 +142,14 @@ export const textInputStyle = (props: any) =>
}
`;
export const hoverBackground = (props: any) =>
css`
transition: background 0.1s ease;
&:hover {
background: rgba(0, 0, 0, 0.04);
}
`;
export const lightTheme = { ...commonTheme, ...lightThemeSpecific };
export const darkTheme = { ...commonTheme, ...darkThemeSpecific };