admin/twenty
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

24
front/src/modules/comments/components/CommentThreadRelationPicker.tsx
View File

@ -36,7 +36,7 @@ const StyledContainer = styled.div`
align-items: flex-start;
display: flex;
flex-direction: row;
gap: ${(props) => props.theme.spacing(2)};
gap: ${({ theme }) => theme.spacing(2)};
justify-content: flex-start;
width: 100%;
@ -47,14 +47,14 @@ const StyledLabelContainer = styled.div`
display: flex;
flex-direction: row;
gap: ${(props) => props.theme.spacing(2)};
gap: ${({ theme }) => theme.spacing(2)};
padding-bottom: ${(props) => props.theme.spacing(2)};
padding-top: ${(props) => props.theme.spacing(2)};
padding-bottom: ${({ theme }) => theme.spacing(2)};
padding-top: ${({ theme }) => theme.spacing(2)};
`;
const StyledRelationLabel = styled.div`
color: ${(props) => props.theme.text60};
color: ${({ theme }) => theme.font.color.secondary};
display: flex;
flex-direction: row;
@ -62,8 +62,8 @@ const StyledRelationLabel = styled.div`
`;
const StyledRelationContainer = styled.div`
--horizontal-padding: ${(props) => props.theme.spacing(1)};
--vertical-padding: ${(props) => props.theme.spacing(1.5)};
--horizontal-padding: ${({ theme }) => theme.spacing(1)};
--vertical-padding: ${({ theme }) => theme.spacing(1.5)};
border: 1px solid transparent;
@ -72,11 +72,11 @@ const StyledRelationContainer = styled.div`
display: flex;
flex-wrap: wrap;
gap: ${(props) => props.theme.spacing(2)};
gap: ${({ theme }) => theme.spacing(2)};
&:hover {
background-color: ${(props) => props.theme.secondaryBackground};
border: 1px solid ${(props) => props.theme.lightBorder};
background-color: ${({ theme }) => theme.background.secondary};
border: 1px solid ${({ theme }) => theme.border.color.light};
}
min-height: calc(32px - 2 * var(--vertical-padding));
@ -88,7 +88,7 @@ const StyledRelationContainer = styled.div`
`;
const StyledMenuWrapper = styled.div`
z-index: ${(props) => props.theme.lastLayerZIndex};
z-index: ${({ theme }) => theme.lastLayerZIndex};
`;
export function CommentThreadRelationPicker({ commentThread }: OwnProps) {
@ -205,7 +205,7 @@ export function CommentThreadRelationPicker({ commentThread }: OwnProps) {
return (
<StyledContainer>
<StyledLabelContainer>
<IconArrowUpRight size={16} color={theme.text40} />
<IconArrowUpRight size={16} color={theme.font.color.tertiary} />
<StyledRelationLabel>Relations</StyledRelationLabel>
</StyledLabelContainer>
<StyledRelationContainer