diff --git a/front/src/modules/comments/components/timeline/Timeline.tsx b/front/src/modules/comments/components/timeline/Timeline.tsx index c47456ef8..06153a2e4 100644 --- a/front/src/modules/comments/components/timeline/Timeline.tsx +++ b/front/src/modules/comments/components/timeline/Timeline.tsx @@ -61,6 +61,7 @@ const StyledEmptyTimelineSubTitle = styled.div` font-size: ${({ theme }) => theme.font.size.xxl}; font-weight: ${({ theme }) => theme.font.weight.semiBold}; line-height: ${({ theme }) => theme.text.lineHeight.md}; + margin-bottom: ${({ theme }) => theme.spacing(2)}; `; const StyledTimelineItemContainer = styled.div` diff --git a/front/src/modules/ui/components/editable-cell/EditableCellDisplayMode.tsx b/front/src/modules/ui/components/editable-cell/EditableCellDisplayMode.tsx index 24adc7a42..0ddfee2b0 100644 --- a/front/src/modules/ui/components/editable-cell/EditableCellDisplayMode.tsx +++ b/front/src/modules/ui/components/editable-cell/EditableCellDisplayMode.tsx @@ -20,7 +20,7 @@ export const EditableCellNormalModeOuterContainer = styled.div` 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};` : ''} `; diff --git a/front/src/modules/ui/components/form/Checkbox.tsx b/front/src/modules/ui/components/form/Checkbox.tsx index 95bf2fd44..6b94d8162 100644 --- a/front/src/modules/ui/components/form/Checkbox.tsx +++ b/front/src/modules/ui/components/form/Checkbox.tsx @@ -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 && } ); }