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

Design fixes (#555)

Browse Source 
* Change placeholder color and design fixes for show page / sidebar

* Replace hardcoded border radiuses

* Improve border display for middle of button group

* Editor styling

* Editor font size

* Comment Bar positioning and remove scrollbar for 1px

* Add Comments section title

* Nit: match css style

---------

Co-authored-by: Emilien <emilien.chauvet.enpc@gmail.com>
This commit is contained in:
Félix Malfait
2023-07-10 20:24:20 +02:00
committed by GitHub
parent 3079747c83
commit 25eeada92c
37 changed files with 136 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
front/src/modules/ui/components/action-bar/ActionBar.tsx
View File

@ -18,7 +18,7 @@ const StyledContainer = styled.div<StyledContainerProps>`
align-items: center;
background: ${({ theme }) => theme.background.secondary};
border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: 8px;
border-radius: ${({ theme }) => theme.border.radius.md};
bottom: ${(props) => (props.position.x ? 'auto' : '38px')};
box-shadow: ${({ theme }) => theme.boxShadow.strong};
display: flex;

15
front/src/modules/ui/components/buttons/Button.tsx
View File

@ -45,11 +45,11 @@ const StyledButton = styled.button<
return 'transparent';
}
}};
border: ${({ theme, variant }) => {
border-color: ${({ theme, variant }) => {
switch (variant) {
case 'primary':
case 'secondary':
return `1px solid ${theme.background.transparent.medium}`;
return `${theme.background.transparent.medium}`;
case 'tertiary':
default:
return 'none';
@ -67,6 +67,17 @@ const StyledButton = styled.button<
return '4px';
}
}};
border-style: solid;
border-width: ${({ theme, variant, position }) => {
switch (variant) {
case 'primary':
case 'secondary':
return position === 'middle' ? `1px 0 1px 0` : `1px`;
case 'tertiary':
default:
return '0';
}
}};
box-shadow: ${({ theme, variant }) => {
switch (variant) {
case 'primary':

2
front/src/modules/ui/components/buttons/ButtonGroup.tsx
View File

@ -4,7 +4,7 @@ import styled from '@emotion/styled';
import { ButtonPosition, ButtonProps } from './Button';
const StyledButtonGroupContainer = styled.div`
border-radius: 8px;
border-radius: ${({ theme }) => theme.border.radius.md};
display: flex;
`;

2
front/src/modules/ui/components/buttons/DropdownButton.tsx
View File

@ -19,7 +19,7 @@ const StyledButton = styled.button<ButtonProps>`
align-items: center;
background: ${({ theme }) => theme.background.tertiary};
border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: 4px;
border-radius: ${({ theme }) => theme.border.radius.sm};
color: ${({ theme }) => theme.font.color.secondary};
display: flex;
font-size: ${({ theme }) => theme.font.size.md};

2
front/src/modules/ui/components/buttons/MainButton.tsx
View File

@ -32,7 +32,7 @@ const StyledButton = styled.button<Pick<Props, 'fullWidth' | 'variant'>>`
}
}};
border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: 8px;
border-radius: ${({ theme }) => theme.border.radius.md};
box-shadow: ${({ theme }) => theme.boxShadow.light};
color: ${({ theme, variant, disabled }) => {
if (disabled) {

2
front/src/modules/ui/components/editable-cell/HoverableMenuItem.tsx
View File

@ -3,7 +3,7 @@ import styled from '@emotion/styled';
export const HoverableMenuItem = styled.div`
align-items: center;
background: ${({ theme }) => theme.background.primary};
border-radius: 4px;
border-radius: ${({ theme }) => theme.border.radius.sm};
box-sizing: border-box;
cursor: pointer;
display: flex;

2
front/src/modules/ui/components/editable-cell/types/EditableCellRelationCreateButton.tsx
View File

@ -4,7 +4,7 @@ export const EditableCellRelationCreateButton = styled.button`
align-items: center;
background: none;
border: none;
border-radius: 4px;
border-radius: ${({ theme }) => theme.border.radius.sm};
cursor: pointer;
display: flex;
font-family: 'Inter';

6
front/src/modules/ui/components/editor/BlockEditor.tsx
View File

@ -9,11 +9,11 @@ interface BlockEditorProps {
const StyledEditor = styled.div`
min-height: 200px;
width: 100%;
& .editor-create-mode,
.editor-edit-mode {
& .editor {
background: ${({ theme }) => theme.background.primary};
font-size: 13px;
}
& .editor-create-mode [class^='_inlineContent']:before {
& .editor [class^='_inlineContent']:before {
color: ${({ theme }) => theme.font.color.tertiary};
font-style: normal !important;
}

2
front/src/modules/ui/components/form/Checkbox.tsx
View File

@ -25,7 +25,7 @@ const StyledContainer = styled.div`
input[type='checkbox']::before {
border: 1px solid ${({ theme }) => theme.font.color.tertiary};
border-radius: 2px;
border-radius: ${({ theme }) => theme.border.radius.xs};
content: '';
display: block;
height: 12px;

6
front/src/modules/ui/components/form/DatePicker.tsx
View File

@ -56,7 +56,7 @@ const StyledContainer = styled.div`
& .react-datepicker__month-dropdown-container,
& .react-datepicker__year-dropdown-container {
text-align: left;
border-radius: 4px;
border-radius: ${({ theme }) => theme.border.radius.sm};
margin-left: ${({ theme }) => theme.spacing(1)};
margin-right: 0;
padding: ${({ theme }) => theme.spacing(2)};
@ -121,7 +121,7 @@ const StyledContainer = styled.div`
padding: ${({ theme }) => theme.spacing(2)}
calc(${({ theme }) => theme.spacing(2)} - 2px);
width: calc(100% - ${({ theme }) => theme.spacing(4)});
border-radius: 2px;
border-radius: ${({ theme }) => theme.border.radius.xs};
color: ${({ theme }) => theme.font.color.secondary};
cursor: pointer;
margin: 2px;
@ -169,7 +169,7 @@ const StyledContainer = styled.div`
& .react-datepicker__navigation--previous,
& .react-datepicker__navigation--next {
height: 34px;
border-radius: 4px;
border-radius: ${({ theme }) => theme.border.radius.sm};
padding-top: 6px;
&:hover {
background: ${({ theme }) => theme.background.transparent.light};

2
front/src/modules/ui/components/inputs/TextInput.tsx
View File

@ -26,7 +26,7 @@ const StyledLabel = styled.span`
const StyledInput = styled.input<{ fullWidth: boolean }>`
background-color: ${({ theme }) => theme.background.tertiary};
border: none;
border-radius: 4px;
border-radius: ${({ theme }) => theme.border.radius.sm};
color: ${({ theme }) => theme.font.color.primary};
font-family: ${({ theme }) => theme.font.family};

2
front/src/modules/ui/components/modal/Modal.tsx
View File

@ -4,7 +4,7 @@ import { motion } from 'framer-motion';
const ModalDiv = styled(motion.div)`
background: ${({ theme }) => theme.background.primary};
border-radius: 8px;
border-radius: ${({ theme }) => theme.border.radius.md};
z-index: 10000; // should be higher than Backdrop's z-index
`;

2
front/src/modules/ui/components/property-box/PropertyBox.tsx
View File

@ -4,7 +4,7 @@ const StyledPropertyBoxContainer = styled.div`
align-self: stretch;
background: ${({ theme }) => theme.background.secondary};
border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: 4px;
border-radius: ${({ theme }) => theme.border.radius.sm};
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(2)};

2
front/src/modules/ui/components/property-box/PropertyBoxItem.tsx
View File

@ -2,8 +2,10 @@ import { ReactNode } from 'react';
import styled from '@emotion/styled';
const StyledPropertyBoxItem = styled.div`
align-items: center;
display: flex;
gap: ${({ theme }) => theme.spacing(2)};
height: 32px;
`;
const StyledIconContainer = styled.div`

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

@ -35,7 +35,7 @@ type OwnProps<TData extends { id: string }, SortField> = {
const StyledTable = styled.table`
border-collapse: collapse;
border-radius: 4px;
border-radius: ${({ theme }) => theme.border.radius.sm};
border-spacing: 0;
margin-left: ${({ theme }) => theme.table.horizontalCellMargin};
margin-right: ${({ theme }) => theme.table.horizontalCellMargin};

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

@ -13,7 +13,7 @@ type StyledButtonProps = {
};
const StyledButton = styled.div<StyledButtonProps>`
border-radius: 4px;
border-radius: ${({ theme }) => theme.border.radius.sm};
color: ${(props) =>
props.type === 'warning'
? props.theme.color.red

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

@ -32,7 +32,7 @@ type StyledDropdownButtonProps = {
const StyledDropdownButton = styled.div<StyledDropdownButtonProps>`
background: ${({ theme }) => theme.background.primary};
border-radius: 4px;
border-radius: ${({ theme }) => theme.border.radius.sm};
color: ${(props) => (props.isActive ? props.theme.color.blue : 'none')};
cursor: pointer;
display: flex;
@ -52,7 +52,7 @@ const StyledDropdownButton = styled.div<StyledDropdownButtonProps>`
const StyledDropdown = styled.ul`
--outer-border-radius: calc(var(--wraper-border-radius) - 2px);
--wraper-border: 1px;
--wraper-border-radius: 8px;
--wraper-border-radius: ${({ theme }) => theme.border.radius.md};
border: var(--wraper-border) solid ${({ theme }) => theme.border.color.light};
border-radius: var(--wraper-border-radius);
@ -79,7 +79,7 @@ const StyledDropdown = styled.ul`
const StyledDropdownItem = styled.li`
align-items: center;
border-radius: 2px;
border-radius: ${({ theme }) => theme.border.radius.xs};
color: ${({ theme }) => theme.font.color.secondary};
cursor: pointer;
display: flex;
@ -139,7 +139,7 @@ const StyledSearchField = styled.li`
user-select: none;
input {
border-radius: 8px;
border-radius: ${({ theme }) => theme.border.radius.md};
box-sizing: border-box;
font-family: ${({ theme }) => theme.font.family};
height: 36px;

2
front/src/modules/ui/inplace-inputs/components/InplaceInputDateEditMode.tsx
View File

@ -17,7 +17,7 @@ export type StyledCalendarContainerProps = {
const StyledCalendarContainer = styled.div<StyledCalendarContainerProps>`
background: ${({ theme }) => theme.background.secondary};
border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: 8px;
border-radius: ${({ theme }) => theme.border.radius.md};
box-shadow: ${({ theme }) => theme.boxShadow.strong};
left: -10px;
position: absolute;

2
front/src/modules/ui/layout/Panel.tsx
View File

@ -4,7 +4,7 @@ import styled from '@emotion/styled';
const StyledPanel = styled.div`
background: ${({ theme }) => theme.background.primary};
border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: 8px;
border-radius: ${({ theme }) => theme.border.radius.md};
display: flex;
flex-direction: row;
height: 100%;

2
front/src/modules/ui/layout/navbar/NavItem.tsx
View File

@ -25,7 +25,7 @@ const StyledItem = styled.button<StyledItemProps>`
background: ${(props) =>
props.active ? props.theme.background.transparent.light : 'inherit'};
border: none;
border-radius: 4px;
border-radius: ${({ theme }) => theme.border.radius.sm};
color: ${(props) => {
if (props.active) {
return props.theme.font.color.primary;

2
front/src/modules/ui/layout/navbar/NavWorkspaceButton.tsx
View File

@ -33,7 +33,7 @@ type StyledLogoProps = {
const StyledLogo = styled.div<StyledLogoProps>`
background: url(${(props) => props.logo});
background-size: cover;
border-radius: 2px;
border-radius: ${({ theme }) => theme.border.radius.xs};
height: 16px;
width: 16px;
`;

4
front/src/modules/ui/layout/right-drawer/components/RightDrawerBody.tsx
View File

@ -3,7 +3,9 @@ import styled from '@emotion/styled';
export const RightDrawerBody = styled.div`
display: flex;
flex-direction: column;
height: calc(100vh - ${({ theme }) => theme.spacing(10)});
height: calc(
100vh - ${({ theme }) => theme.spacing(14)} - 1px
); // (-1 for border)
overflow: auto;
position: relative;
`;

7
front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBar.tsx
View File

@ -6,13 +6,14 @@ import { RightDrawerTopBarCloseButton } from './RightDrawerTopBarCloseButton';
const StyledRightDrawerTopBar = styled.div`
align-items: center;
background: ${({ theme }) => theme.background.secondary};
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
color: ${({ theme }) => theme.font.color.secondary};
display: flex;
flex-direction: row;
font-size: ${({ theme }) => theme.font.size.md};
height: 56px;
justify-content: space-between;
min-height: 40px;
padding-left: 8px;
padding-right: 8px;
`;
@ -24,7 +25,7 @@ const StyledTopBarTitle = styled.div`
`;
type OwnProps = {
title: string | null | undefined;
title?: string | null | undefined;
onSave?: () => void;
};
@ -36,7 +37,7 @@ export function RightDrawerTopBar({ title, onSave }: OwnProps) {
<StyledRightDrawerTopBar>
<RightDrawerTopBarCloseButton />
<StyledTopBarTitle>{title}</StyledTopBarTitle>
{onSave && <Button title="Save" onClick={handleOnClick} />}
{onSave ? <Button title="Save" onClick={handleOnClick} /> : <div></div>}
</StyledRightDrawerTopBar>
);
}

2
front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarCloseButton.tsx
View File

@ -9,7 +9,7 @@ const StyledButton = styled.button`
align-items: center;
background: none;
border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: 4px;
border-radius: ${({ theme }) => theme.border.radius.sm};
cursor: pointer;
display: flex;
flex-direction: row;

3
front/src/modules/ui/layout/show-page/ShowPageSummaryCard.tsx
View File

@ -20,7 +20,7 @@ const StyledShowPageSummaryCard = styled.div`
align-items: center;
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(3)};
gap: ${({ theme }) => theme.spacing(6)};
justify-content: center;
padding: ${({ theme }) => theme.spacing(6)} ${({ theme }) => theme.spacing(3)}
${({ theme }) => theme.spacing(3)} ${({ theme }) => theme.spacing(3)};
@ -30,6 +30,7 @@ const StyledInfoContainer = styled.div`
align-items: center;
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(1)};
`;
const StyledDate = styled.div`

6
front/src/modules/ui/layout/show-page/containers/ShowPageLeftContainer.tsx
View File

@ -2,8 +2,12 @@ import styled from '@emotion/styled';
export const ShowPageLeftContainer = styled.div`
background: ${({ theme }) => theme.background.secondary};
border-radius: 8px;
border-bottom-left-radius: 8px;
border-right: 1px solid ${({ theme }) => theme.border.color.light};
border-top-left-radius: 8px;
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(3)};
padding: 0px ${({ theme }) => theme.spacing(3)};
width: 320px;
`;

2
front/src/modules/ui/layout/top-bar/TopBar.tsx
View File

@ -31,7 +31,7 @@ const TitleContainer = styled.div`
const AddButtonContainer = styled.div`
align-items: center;
border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: 4px;
border-radius: ${({ theme }) => theme.border.radius.sm};
color: ${({ theme }) => theme.font.color.tertiary};
cursor: pointer;
display: flex;