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

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

@ -20,7 +20,7 @@ export const EditableCellNormalModeOuterContainer = styled.div<Props>`
props.softFocus
? `background: ${props.theme.background.transparent.secondary};
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 styled from '@emotion/styled';
import { IconCheck } from '@/ui/icons/index';
type OwnProps = {
checked: boolean;
indeterminate?: boolean;
@ -9,8 +11,10 @@ type OwnProps = {
const StyledContainer = styled.div`
align-items: center;
display: flex;
justify-content: center;
position: relative;
input[type='checkbox'] {
accent-color: ${({ theme }) => theme.color.blue};
@ -22,6 +26,7 @@ const StyledContainer = styled.div`
}
input[type='checkbox']::before {
background-color: ${({ theme }) => theme.background.primary};
border: 1px solid ${({ theme }) => theme.font.color.tertiary};
border-radius: ${({ theme }) => theme.border.radius.xs};
content: '';
@ -37,6 +42,17 @@ const StyledContainer = styled.div`
input[type='checkbox']:checked::before {
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) {
@ -62,6 +78,7 @@ export function Checkbox({ checked, onChange, indeterminate }: OwnProps) {
checked={checked}
onChange={handleChange}
/>
{checked && <IconCheck />}
</StyledContainer>
);
}