Design improvements (#645)

* Redesign checkbox components

* Fix spacing issue

* Fix cell hover color in dark mode

* Revert column order change because of commit conflict

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`

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

@@ -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};`
       : ''}
 `;
 

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 && <IconCheck />}
     </StyledContainer>
   );
 }