mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Apply new theme (#449)

Browse Source 
* Apply new theme

* Fix storybook

* Fixes

* Fix regressions
This commit is contained in:
Charles Bochet
2023-06-26 19:13:04 -07:00
committed by GitHub
parent 2a42ebb70d
commit d6364a9fdd
115 changed files with 818 additions and 721 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
front/src/modules/ui/components/menu/DropdownMenu.tsx
View File

@ -4,11 +4,11 @@ export const DropdownMenu = styled.div`
align-items: center;
backdrop-filter: blur(20px);
background: ${(props) => props.theme.secondaryBackgroundTransparent};
border: 1px solid ${(props) => props.theme.lightBorder};
border-radius: calc(${(props) => props.theme.borderRadius} * 2);
background: ${({ theme }) => theme.background.transparent.secondary};
border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: ${({ theme }) => theme.border.radius.md};
box-shadow: ${(props) => props.theme.modalBoxShadow};
box-shadow: ${({ theme }) => theme.boxShadow.strong};
display: flex;

14
front/src/modules/ui/components/menu/DropdownMenuButton.tsx
View File

@ -1,23 +1,23 @@
import styled from '@emotion/styled';
import { hoverBackground } from '@/ui/layout/styles/themes';
import { hoverBackground } from '@/ui/themes/effects';
export const DropdownMenuButton = styled.div`
--horizontal-padding: ${(props) => props.theme.spacing(1.5)};
--vertical-padding: ${(props) => props.theme.spacing(2)};
--horizontal-padding: ${({ theme }) => theme.spacing(1.5)};
--vertical-padding: ${({ theme }) => theme.spacing(2)};
align-items: center;
border-radius: ${(props) => props.theme.borderRadius};
color: ${(props) => props.theme.text60};
border-radius: ${({ theme }) => theme.border.radius.md};
color: ${({ theme }) => theme.font.color.secondary};
cursor: pointer;
display: flex;
flex-direction: row;
font-size: ${(props) => props.theme.fontSizeSmall};
font-size: ${({ theme }) => theme.font.size.sm};
gap: ${(props) => props.theme.spacing(2)};
gap: ${({ theme }) => theme.spacing(2)};
height: calc(32px - 2 * var(--vertical-padding));

6
front/src/modules/ui/components/menu/DropdownMenuCheckableItem.tsx
View File

@ -21,15 +21,15 @@ const StyledLeftContainer = styled.div`
align-items: center;
display: flex;
gap: ${(props) => props.theme.spacing(2)};
gap: ${({ theme }) => theme.spacing(2)};
`;
const StyledChildrenContainer = styled.div`
align-items: center;
display: flex;
font-size: ${(props) => props.theme.fontSizeSmall};
gap: ${(props) => props.theme.spacing(2)};
font-size: ${({ theme }) => theme.font.size.sm};
gap: ${({ theme }) => theme.spacing(2)};
`;
export function DropdownMenuCheckableItem({

12
front/src/modules/ui/components/menu/DropdownMenuItem.tsx
View File

@ -1,19 +1,19 @@
import styled from '@emotion/styled';
export const DropdownMenuItem = styled.div`
--horizontal-padding: ${(props) => props.theme.spacing(1.5)};
--vertical-padding: ${(props) => props.theme.spacing(2)};
--horizontal-padding: ${({ theme }) => theme.spacing(1.5)};
--vertical-padding: ${({ theme }) => theme.spacing(2)};
align-items: center;
border-radius: ${(props) => props.theme.borderRadius};
color: ${(props) => props.theme.text60};
border-radius: ${({ theme }) => theme.border.radius.sm};
color: ${({ theme }) => theme.font.color.secondary};
display: flex;
flex-direction: row;
font-size: ${(props) => props.theme.fontSizeSmall};
font-size: ${({ theme }) => theme.font.size.sm};
gap: ${(props) => props.theme.spacing(2)};
gap: ${({ theme }) => theme.spacing(2)};
height: calc(32px - 2 * var(--vertical-padding));

2
front/src/modules/ui/components/menu/DropdownMenuItemContainer.tsx
View File

@ -1,7 +1,7 @@
import styled from '@emotion/styled';
export const DropdownMenuItemContainer = styled.div`
--padding: ${(props) => props.theme.spacing(1 / 2)};
--padding: ${({ theme }) => theme.spacing(1 / 2)};
align-items: flex-start;
display: flex;

8
front/src/modules/ui/components/menu/DropdownMenuSearch.tsx
View File

@ -1,13 +1,13 @@
import { InputHTMLAttributes } from 'react';
import styled from '@emotion/styled';
import { textInputStyle } from '@/ui/layout/styles/themes';
import { textInputStyle } from '@/ui/themes/effects';
export const DropdownMenuSearchContainer = styled.div`
--vertical-padding: ${(props) => props.theme.spacing(1)};
--vertical-padding: ${({ theme }) => theme.spacing(1)};
align-items: center;
border-bottom: 1px solid ${(props) => props.theme.lightBorder};
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
display: flex;
flex-direction: row;
@ -18,7 +18,7 @@ export const DropdownMenuSearchContainer = styled.div`
`;
const StyledEditModeSearchInput = styled.input`
font-size: ${(props) => props.theme.fontSizeSmall};
font-size: ${({ theme }) => theme.font.size.sm};
${textInputStyle}

8
front/src/modules/ui/components/menu/DropdownMenuSelectableItem.tsx
View File

@ -3,7 +3,7 @@ import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconCheck } from '@/ui/icons/index';
import { hoverBackground } from '@/ui/layout/styles/themes';
import { hoverBackground } from '@/ui/themes/effects';
import { DropdownMenuButton } from './DropdownMenuButton';
@ -19,7 +19,7 @@ const DropdownMenuSelectableItemContainer = styled(DropdownMenuButton)<Props>`
align-items: center;
background: ${(props) =>
props.hovered ? props.theme.lightBackgroundTransparent : 'transparent'};
props.hovered ? props.theme.background.transparent.light : 'transparent'};
display: flex;
justify-content: space-between;
@ -29,7 +29,7 @@ const StyledLeftContainer = styled.div`
align-items: center;
display: flex;
gap: ${(props) => props.theme.spacing(2)};
gap: ${({ theme }) => theme.spacing(2)};
`;
const StyledRightIcon = styled.div`
@ -61,7 +61,7 @@ export function DropdownMenuSelectableItem({
>
<StyledLeftContainer>{children}</StyledLeftContainer>
<StyledRightIcon>
{selected && <IconCheck size={theme.iconSizeMedium} />}
{selected && <IconCheck size={theme.icon.size.md} />}
</StyledRightIcon>
</DropdownMenuSelectableItemContainer>
);

2
front/src/modules/ui/components/menu/DropdownMenuSeparator.tsx
View File

@ -1,7 +1,7 @@
import styled from '@emotion/styled';
export const DropdownMenuSeparator = styled.div`
background-color: ${(props) => props.theme.lightBorder};
background-color: ${({ theme }) => theme.border.color.light};
height: 1px;
width: 100%;