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

6
front/src/modules/ui/components/table/ColumnHead.tsx
View File

@ -11,13 +11,13 @@ const StyledTitle = styled.div`
display: flex;
flex-direction: row;
font-weight: 500;
height: ${(props) => props.theme.spacing(8)};
padding-left: ${(props) => props.theme.spacing(2)};
height: ${({ theme }) => theme.spacing(8)};
padding-left: ${({ theme }) => theme.spacing(2)};
`;
const StyledIcon = styled.div`
display: flex;
margin-right: ${(props) => props.theme.spacing(1)};
margin-right: ${({ theme }) => theme.spacing(1)};
`;
export function ColumnHead({ viewName, viewIcon }: OwnProps) {

16
front/src/modules/ui/components/table/EntityTable.tsx
View File

@ -40,15 +40,15 @@ const StyledTable = styled.table`
border-radius: 4px;
border-spacing: 0;
margin-left: ${(props) => props.theme.table.horizontalCellMargin};
margin-right: ${(props) => props.theme.table.horizontalCellMargin};
margin-left: ${({ theme }) => theme.table.horizontalCellMargin};
margin-right: ${({ theme }) => theme.table.horizontalCellMargin};
table-layout: fixed;
width: calc(100% - ${(props) => props.theme.table.horizontalCellMargin} * 2);
width: calc(100% - ${({ theme }) => theme.table.horizontalCellMargin} * 2);
th {
border: 1px solid ${(props) => props.theme.tertiaryBackground};
border: 1px solid ${({ theme }) => theme.background.tertiary};
border-collapse: collapse;
color: ${(props) => props.theme.text40};
color: ${({ theme }) => theme.font.color.tertiary};
padding: 0;
text-align: left;
@ -66,9 +66,9 @@ const StyledTable = styled.table`
}
td {
border: 1px solid ${(props) => props.theme.tertiaryBackground};
border: 1px solid ${({ theme }) => theme.background.tertiary};
border-collapse: collapse;
color: ${(props) => props.theme.text80};
color: ${({ theme }) => theme.font.color.primary};
padding: 0;
text-align: left;
@ -102,7 +102,7 @@ const StyledTableScrollableContainer = styled.div`
const StyledRow = styled.tr<{ selected: boolean }>`
background: ${(props) =>
props.selected ? props.theme.secondaryBackground : 'none'};
props.selected ? props.theme.background.secondary : 'none'};
`;
export function EntityTable<TData extends { id: string }, SortField>({

10
front/src/modules/ui/components/table/action-bar/EntityTableActionBar.tsx
View File

@ -16,17 +16,17 @@ type StyledContainerProps = {
const StyledContainer = styled.div<StyledContainerProps>`
align-items: center;
background: ${(props) => props.theme.secondaryBackground};
border: 1px solid ${(props) => props.theme.primaryBorder};
background: ${({ theme }) => theme.background.secondary};
border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: 8px;
bottom: ${(props) => (props.position.x ? 'auto' : '38px')};
box-shadow: ${(props) => props.theme.modalBoxShadow};
box-shadow: ${({ theme }) => theme.boxShadow.strong};
display: flex;
height: 48px;
left: ${(props) => (props.position.x ? `${props.position.x}px` : '50%')};
padding-left: ${(props) => props.theme.spacing(2)};
padding-right: ${(props) => props.theme.spacing(2)};
padding-left: ${({ theme }) => theme.spacing(2)};
padding-right: ${({ theme }) => theme.spacing(2)};
position: ${(props) => (props.position.x ? 'fixed' : 'absolute')};
top: ${(props) => (props.position.y ? `${props.position.y}px` : 'auto')};

10
front/src/modules/ui/components/table/action-bar/EntityTableActionBarButton.tsx
View File

@ -15,23 +15,25 @@ type StyledButtonProps = {
const StyledButton = styled.div<StyledButtonProps>`
border-radius: 4px;
color: ${(props) =>
props.type === 'warning' ? props.theme.red : props.theme.text60};
props.type === 'warning'
? props.theme.color.red
: props.theme.font.color.secondary};
cursor: pointer;
display: flex;
justify-content: center;
padding: ${(props) => props.theme.spacing(2)};
padding: ${({ theme }) => theme.spacing(2)};
transition: background 0.1s ease;
user-select: none;
&:hover {
background: ${(props) => props.theme.tertiaryBackground};
background: ${({ theme }) => theme.background.tertiary};
}
`;
const StyledButtonLabel = styled.div`
font-weight: 500;
margin-left: ${(props) => props.theme.spacing(2)};
margin-left: ${({ theme }) => theme.spacing(2)};
`;
export function EntityTableActionBarButton({

55
front/src/modules/ui/components/table/table-header/DropdownButton.tsx
View File

@ -2,12 +2,9 @@ import { ReactNode, useRef } from 'react';
import styled from '@emotion/styled';
import { IconChevronDown } from '@/ui/icons/index';
import { overlayBackground, textInputStyle } from '@/ui/themes/effects';
import { useOutsideAlerter } from '../../../hooks/useOutsideAlerter';
import {
overlayBackground,
textInputStyle,
} from '../../../layout/styles/themes';
type OwnProps = {
label: string;
@ -31,17 +28,17 @@ type StyledDropdownButtonProps = {
};
const StyledDropdownButton = styled.div<StyledDropdownButtonProps>`
background: ${(props) => props.theme.primaryBackground};
background: ${({ theme }) => theme.background.primary};
border-radius: 4px;
color: ${(props) => (props.isActive ? props.theme.blue : 'none')};
color: ${(props) => (props.isActive ? props.theme.color.blue : 'none')};
cursor: pointer;
display: flex;
filter: ${(props) => (props.isUnfolded ? 'brightness(0.95)' : 'none')};
padding: ${(props) => props.theme.spacing(1)};
padding-left: ${(props) => props.theme.spacing(2)};
padding: ${({ theme }) => theme.spacing(1)};
padding-left: ${({ theme }) => theme.spacing(2)};
padding-right: ${(props) => props.theme.spacing(2)};
padding-right: ${({ theme }) => theme.spacing(2)};
user-select: none;
&:hover {
@ -54,7 +51,7 @@ const StyledDropdown = styled.ul`
--wraper-border: 1px;
--wraper-border-radius: 8px;
border: var(--wraper-border) solid ${(props) => props.theme.primaryBorder};
border: var(--wraper-border) solid ${({ theme }) => theme.border.color.light};
border-radius: var(--wraper-border-radius);
display: flex;
flex-direction: column;
@ -80,17 +77,17 @@ const StyledDropdown = styled.ul`
const StyledDropdownItem = styled.li`
align-items: center;
border-radius: 2px;
color: ${(props) => props.theme.text60};
color: ${({ theme }) => theme.font.color.secondary};
cursor: pointer;
display: flex;
margin: 2px;
padding: ${(props) => props.theme.spacing(2)}
calc(${(props) => props.theme.spacing(2)} - 2px);
padding: ${({ theme }) => theme.spacing(2)}
calc(${({ theme }) => theme.spacing(2)} - 2px);
user-select: none;
width: calc(160px - ${(props) => props.theme.spacing(4)});
width: calc(160px - ${({ theme }) => theme.spacing(4)});
&:hover {
background: ${(props) => props.theme.lightBackgroundTransparent};
background: ${({ theme }) => theme.background.transparent.light};
}
`;
@ -102,18 +99,18 @@ const StyledDropdownItemClipped = styled.span`
const StyledDropdownTopOption = styled.li`
align-items: center;
border-bottom: 1px solid ${(props) => props.theme.lightBorder};
color: ${(props) => props.theme.text80};
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
color: ${({ theme }) => theme.font.color.primary};
cursor: pointer;
display: flex;
font-size: ${(props) => props.theme.fontSizeSmall};
font-weight: ${(props) => props.theme.fontWeightMedium};
font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${({ theme }) => theme.font.weight.medium};
justify-content: space-between;
padding: calc(${(props) => props.theme.spacing(2)})
calc(${(props) => props.theme.spacing(2)});
padding: calc(${({ theme }) => theme.spacing(2)})
calc(${({ theme }) => theme.spacing(2)});
&:hover {
background: ${(props) => props.theme.lightBackgroundTransparent};
background: ${({ theme }) => theme.background.transparent.light};
}
user-select: none;
`;
@ -121,19 +118,19 @@ const StyledDropdownTopOption = styled.li`
const StyledIcon = styled.div`
display: flex;
justify-content: center;
margin-right: ${(props) => props.theme.spacing(1)};
min-width: ${(props) => props.theme.spacing(4)};
margin-right: ${({ theme }) => theme.spacing(1)};
min-width: ${({ theme }) => theme.spacing(4)};
`;
const StyledSearchField = styled.li`
align-items: center;
border-bottom: var(--wraper-border) solid
${(props) => props.theme.primaryBorder};
color: ${(props) => props.theme.text60};
${({ theme }) => theme.border.color.light};
color: ${({ theme }) => theme.font.color.secondary};
cursor: pointer;
display: flex;
font-weight: ${(props) => props.theme.fontWeightMedium};
font-weight: ${({ theme }) => theme.font.weight.medium};
justify-content: space-between;
overflow: hidden;
@ -141,7 +138,7 @@ const StyledSearchField = styled.li`
input {
border-radius: 8px;
box-sizing: border-box;
font-family: ${(props) => props.theme.fontFamily};
font-family: ${({ theme }) => theme.font.family};
height: 36px;
padding: 8px;
width: 100%;
@ -192,7 +189,7 @@ function DropdownButton({
}
const StyleAngleDownContainer = styled.div`
color: ${(props) => props.theme.text40};
color: ${({ theme }) => theme.font.color.tertiary};
display: flex;
height: 100%;
justify-content: center;

18
front/src/modules/ui/components/table/table-header/SortAndFilterBar.tsx
View File

@ -20,7 +20,7 @@ type OwnProps<SortField, TData extends FilterableFieldsType> = {
const StyledBar = styled.div`
align-items: center;
border-top: 1px solid ${(props) => props.theme.primaryBorder};
border-top: 1px solid ${({ theme }) => theme.border.color.light};
display: flex;
flex-direction: row;
height: 40px;
@ -31,21 +31,21 @@ const StyledChipcontainer = styled.div`
align-items: center;
display: flex;
flex-direction: row;
gap: ${(props) => props.theme.spacing(1)};
gap: ${({ theme }) => theme.spacing(1)};
height: 40px;
justify-content: space-between;
margin-left: ${(props) => props.theme.spacing(2)};
margin-left: ${({ theme }) => theme.spacing(2)};
overflow-x: auto;
`;
const StyledCancelButton = styled.button`
background-color: inherit;
border: none;
color: ${(props) => props.theme.text60};
color: ${({ theme }) => theme.font.color.secondary};
cursor: pointer;
font-weight: 500;
margin-left: auto;
margin-right: ${(props) => props.theme.spacing(2)};
margin-right: ${({ theme }) => theme.spacing(2)};
padding: ${(props) => {
const horiz = props.theme.spacing(2);
const vert = props.theme.spacing(1);
@ -54,8 +54,8 @@ const StyledCancelButton = styled.button`
user-select: none;
&:hover {
background-color: ${(props) => props.theme.tertiaryBackground};
border-radius: ${(props) => props.theme.spacing(1)};
background-color: ${({ theme }) => theme.background.tertiary};
border-radius: ${({ theme }) => theme.spacing(1)};
}
`;
@ -78,9 +78,9 @@ function SortAndFilterBar<SortField, TData extends FilterableFieldsType>({
id={sort.key}
icon={
sort.order === 'desc' ? (
<IconArrowNarrowDown size={theme.iconSizeMedium} />
<IconArrowNarrowDown size={theme.icon.size.md} />
) : (
<IconArrowNarrowUp size={theme.iconSizeMedium} />
<IconArrowNarrowUp size={theme.icon.size.md} />
)
}
onRemove={() => onRemoveSort(sort.key)}

22
front/src/modules/ui/components/table/table-header/SortOrFilterChip.tsx
View File

@ -14,30 +14,34 @@ type OwnProps = {
const StyledChip = styled.div`
align-items: center;
background-color: ${(props) => props.theme.blueHighTransparency};
border: 1px solid ${(props) => props.theme.blueLowTransparency};
background-color: ${({ theme }) => theme.background.secondary};
border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: 50px;
color: ${(props) => props.theme.blue};
color: ${({ theme }) => theme.color.blue};
display: flex;
flex-direction: row;
flex-shrink: 0;
font-size: ${(props) => props.theme.fontSizeSmall};
padding: ${(props) => props.theme.spacing(1) + ' ' + props.theme.spacing(2)};
font-size: ${({ theme }) => theme.font.size.sm};
padding: ${({ theme }) => theme.spacing(1) + ' ' + theme.spacing(2)};
`;
const StyledIcon = styled.div`
align-items: center;
display: flex;
margin-right: ${(props) => props.theme.spacing(1)};
margin-right: ${({ theme }) => theme.spacing(1)};
`;
const StyledDelete = styled.div`
align-items: center;
cursor: pointer;
display: flex;
font-size: ${(props) => props.theme.fontSizeSmall};
margin-left: ${(props) => props.theme.spacing(2)};
font-size: ${({ theme }) => theme.font.size.sm};
margin-left: ${({ theme }) => theme.spacing(2)};
margin-top: 1px;
user-select: none;
&:hover {
background-color: ${({ theme }) => theme.background.tertiary};
border-radius: ${({ theme }) => theme.border.radius.sm};
}
`;
const StyledLabelKey = styled.div`
@ -58,7 +62,7 @@ function SortOrFilterChip({
{labelKey && <StyledLabelKey>{labelKey}:&nbsp;</StyledLabelKey>}
{labelValue}
<StyledDelete onClick={onRemove} data-testid={'remove-icon-' + id}>
<IconX size={theme.iconSizeMedium} />
<IconX size={theme.icon.size.sm} stroke={theme.icon.stroke.sm} />
</StyledDelete>
</StyledChip>
);

10
front/src/modules/ui/components/table/table-header/TableHeader.tsx
View File

@ -31,22 +31,22 @@ const StyledContainer = styled.div`
const StyledTableHeader = styled.div`
align-items: center;
color: ${(props) => props.theme.text60};
color: ${({ theme }) => theme.font.color.secondary};
display: flex;
flex-direction: row;
font-weight: 500;
height: 40px;
justify-content: space-between;
padding-left: ${(props) => props.theme.spacing(3)};
padding-right: ${(props) => props.theme.spacing(2)};
padding-left: ${({ theme }) => theme.spacing(3)};
padding-right: ${({ theme }) => theme.spacing(2)};
`;
const StyledIcon = styled.div`
display: flex;
margin-right: ${(props) => props.theme.spacing(2)};
margin-right: ${({ theme }) => theme.spacing(2)};
& > svg {
font-size: ${(props) => props.theme.iconSizeSmall};
font-size: ${({ theme }) => theme.icon.size.sm};
}
`;