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

Design improvements (#645)

Browse Source 
* Redesign checkbox components

* Fix spacing issue

* Fix cell hover color in dark mode

* Revert column order change because of commit conflict
This commit is contained in:
Félix Malfait
2023-07-13 21:00:12 +02:00
committed by GitHub
parent 15685018df
commit e8bd3b7a14
3 changed files with 19 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
front/src/modules/comments/components/timeline/Timeline.tsx
View File

@ -61,6 +61,7 @@ const StyledEmptyTimelineSubTitle = styled.div`
font-size: ${({ theme }) => theme.font.size.xxl}; font-size: ${({ theme }) => theme.font.size.xxl};
font-weight: ${({ theme }) => theme.font.weight.semiBold}; font-weight: ${({ theme }) => theme.font.weight.semiBold};
line-height: ${({ theme }) => theme.text.lineHeight.md}; line-height: ${({ theme }) => theme.text.lineHeight.md};
margin-bottom: ${({ theme }) => theme.spacing(2)};
`; `;
const StyledTimelineItemContainer = styled.div` const StyledTimelineItemContainer = styled.div`

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

@ -20,7 +20,7 @@ export const EditableCellNormalModeOuterContainer = styled.div<Props>`
props.softFocus props.softFocus
? `background: ${props.theme.background.transparent.secondary}; ? `background: ${props.theme.background.transparent.secondary};
border-radius: ${props.theme.border.radius.md}; border-radius: ${props.theme.border.radius.md};
box-shadow: inset 0 0 0 1px ${props.theme.grayScale.gray30};` box-shadow: inset 0 0 0 1px ${props.theme.font.color.extraLight};`
: ''} : ''}
`; `;

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

@ -1,6 +1,8 @@
import * as React from 'react'; import * as React from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { IconCheck } from '@/ui/icons/index';
type OwnProps = { type OwnProps = {
checked: boolean; checked: boolean;
indeterminate?: boolean; indeterminate?: boolean;
@ -9,8 +11,10 @@ type OwnProps = {
const StyledContainer = styled.div` const StyledContainer = styled.div`
align-items: center; align-items: center;
display: flex; display: flex;
justify-content: center; justify-content: center;
position: relative;
input[type='checkbox'] { input[type='checkbox'] {
accent-color: ${({ theme }) => theme.color.blue}; accent-color: ${({ theme }) => theme.color.blue};
@ -22,6 +26,7 @@ const StyledContainer = styled.div`
} }
input[type='checkbox']::before { input[type='checkbox']::before {
background-color: ${({ theme }) => theme.background.primary};
border: 1px solid ${({ theme }) => theme.font.color.tertiary}; border: 1px solid ${({ theme }) => theme.font.color.tertiary};
border-radius: ${({ theme }) => theme.border.radius.xs}; border-radius: ${({ theme }) => theme.border.radius.xs};
content: ''; content: '';
@ -37,6 +42,17 @@ const StyledContainer = styled.div`
input[type='checkbox']:checked::before { input[type='checkbox']:checked::before {
border: 1px solid ${({ theme }) => theme.color.blue}; border: 1px solid ${({ theme }) => theme.color.blue};
} }
svg {
background: ${({ theme }) => theme.color.blue};
color: white;
height: 12px;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 12px;
}
`; `;
export function Checkbox({ checked, onChange, indeterminate }: OwnProps) { export function Checkbox({ checked, onChange, indeterminate }: OwnProps) {
@ -62,6 +78,7 @@ export function Checkbox({ checked, onChange, indeterminate }: OwnProps) {
checked={checked} checked={checked}
onChange={handleChange} onChange={handleChange}
/> />
{checked && <IconCheck />}
</StyledContainer> </StyledContainer>
); );
} }