Add minor UI updates (#772)

* Add minor UI updates

* Fix lint

* Fix company board card fields

* Fix company board card fields

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/companies/components/CompanyBoardCard.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useCallback, useState } from 'react';
+import { ReactNode, useCallback } from 'react';
 import { getOperationName } from '@apollo/client/utilities';
 import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
@@ -15,7 +15,7 @@ import { DateEditableField } from '@/ui/editable-field/variants/components/DateE
 import { NumberEditableField } from '@/ui/editable-field/variants/components/NumberEditableField';
 import { IconCurrencyDollar, IconProgressCheck } from '@/ui/icon';
 import { IconCalendarEvent } from '@/ui/icon';
-import { Checkbox } from '@/ui/input/components/Checkbox';
+import { Checkbox, CheckboxVariant } from '@/ui/input/components/Checkbox';
 import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
 import { useUpdateOnePipelineProgressMutation } from '~/generated/graphql';
 import { getLogoUrlFromDomainName } from '~/utils';
@@ -41,6 +41,14 @@ const StyledBoardCard = styled.div<{ selected: boolean }>`
         selected ? theme.accent.primary : theme.border.color.medium};
   }
   cursor: pointer;
+
+  .checkbox-container {
+    opacity: 0;
+  }
+
+  &:hover .checkbox-container {
+    opacity: 1;
+  }
 `;
 
 const StyledBoardCardWrapper = styled.div`
@@ -52,7 +60,7 @@ const StyledBoardCardHeader = styled.div`
   align-items: center;
   display: flex;
   flex-direction: row;
-  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
   height: 24px;
   padding-bottom: ${({ theme }) => theme.spacing(1)};
   padding-left: ${({ theme }) => theme.spacing(2)};
@@ -84,12 +92,17 @@ const StyledBoardCardBody = styled.div`
   }
 `;
 
+const StyledCheckboxContainer = styled.div`
+  display: flex;
+  flex: 1;
+  justify-content: end;
+`;
+
 const StyledFieldContainer = styled.div`
   width: max-content;
 `;
 
 export function CompanyBoardCard() {
-  const [isHovered, setIsHovered] = useState(false);
   const [updatePipelineProgress] = useUpdateOnePipelineProgressMutation();
 
   const [pipelineProgressId] = useRecoilScopedState(
@@ -159,8 +172,6 @@ export function CompanyBoardCard() {
       <StyledBoardCard
         selected={selected}
         onClick={() => setSelected(!selected)}
-        onMouseEnter={() => setIsHovered(true)}
-        onMouseLeave={() => setIsHovered(false)}
       >
         <StyledBoardCardHeader>
           <CompanyChip
@@ -170,19 +181,19 @@ export function CompanyBoardCard() {
             picture={getLogoUrlFromDomainName(company.domainName)}
             variant={ChipVariant.transparent}
           />
-          <div style={{ display: 'flex', flex: 1 }} />
-          {(isHovered || selected) && (
+          <StyledCheckboxContainer className="checkbox-container">
             <Checkbox
               checked={selected}
               onChange={() => setSelected(!selected)}
+              variant={CheckboxVariant.Secondary}
             />
-          )}
+          </StyledCheckboxContainer>
         </StyledBoardCardHeader>
         <StyledBoardCardBody>
           <PreventSelectOnClickContainer>
             <DateEditableField
               icon={<IconCalendarEvent />}
-              value={pipelineProgress.closeDate || new Date().toISOString()}
+              value={pipelineProgress.closeDate}
               onSubmit={(value) =>
                 handleCardUpdate({
                   ...pipelineProgress,

front/src/modules/people/components/PeopleCompanyCell.tsx

@@ -25,6 +25,7 @@ export function PeopleCompanyCell({ people }: OwnProps) {
   return (
     <EditableCell
       transparent
+      maxContentWidth={160}
       editHotkeyScope={{ scope: RelationPickerHotkeyScope.RelationPicker }}
       editModeContent={
         isCreating ? (

front/src/modules/ui/dropdown/components/DropdownMenuSelectableItem.tsx

@@ -24,7 +24,7 @@ const DropdownMenuSelectableItemContainer = styled(DropdownMenuItem)<Props>`
   display: flex;
   justify-content: space-between;
 
-  max-width: 150px;
+  width: calc(100% - ${({ theme }) => theme.spacing(2)});
 `;
 
 const StyledLeftContainer = styled.div`

front/src/modules/ui/editable-field/variants/components/DateEditableField.tsx

@@ -49,7 +49,7 @@ export function DateEditableField({ icon, value, onSubmit }: OwnProps) {
         iconLabel={icon}
         editModeContent={
           <EditableFieldEditModeDate
-            value={internalValue ?? ''}
+            value={internalValue || new Date().toISOString()}
             onChange={(newValue: string) => {
               handleChange(newValue);
             }}
@@ -58,7 +58,7 @@ export function DateEditableField({ icon, value, onSubmit }: OwnProps) {
         displayModeContent={
           <InplaceInputDateDisplayMode value={internalDateValue} />
         }
-        isDisplayModeContentEmpty={!(internalValue !== '')}
+        isDisplayModeContentEmpty={!internalValue}
       />
     </RecoilScope>
   );

front/src/modules/ui/input/components/Checkbox.tsx

@@ -3,10 +3,16 @@ import styled from '@emotion/styled';
 
 import { IconCheck, IconMinus } from '@/ui/icon';
 
+export enum CheckboxVariant {
+  Primary = 'primary',
+  Secondary = 'secondary',
+}
+
 type OwnProps = {
   checked: boolean;
   indeterminate?: boolean;
   onChange?: (value: boolean) => void;
+  variant?: CheckboxVariant;
 };
 
 const StyledInputContainer = styled.div`
@@ -15,7 +21,10 @@ const StyledInputContainer = styled.div`
   position: relative;
 `;
 
-const StyledInput = styled.input<{ indeterminate?: boolean }>`
+const StyledInput = styled.input<{
+  indeterminate?: boolean;
+  variant?: CheckboxVariant;
+}>`
   cursor: pointer;
   margin: 0;
   opacity: 0;
@@ -31,9 +40,17 @@ const StyledInput = styled.input<{ indeterminate?: boolean }>`
   }
 
   & + label:before {
-    background: ${({ theme }) => theme.background.primary};
-    border: 1px solid ${({ theme }) => theme.border.color.strong};
     border-radius: ${({ theme }) => theme.border.radius.sm};
+    background: ${({ theme, indeterminate }) =>
+      indeterminate ? theme.color.blue : 'transparent'};
+    border-style: solid;
+    border-width: 1px;
+    border-color: ${({ theme, indeterminate, variant }) =>
+      indeterminate
+        ? theme.color.blue
+        : variant === CheckboxVariant.Primary
+        ? theme.border.color.inverted
+        : theme.border.color.secondaryInverted};
     content: '';
     cursor: pointer;
     display: inline-block;
@@ -46,13 +63,6 @@ const StyledInput = styled.input<{ indeterminate?: boolean }>`
     border-color: ${({ theme }) => theme.color.blue};
   }
 
-  & + label:before {
-    background: ${({ theme, indeterminate }) =>
-      indeterminate ? theme.color.blue : theme.background.primary};
-    border-color: ${({ theme, indeterminate }) =>
-      indeterminate ? theme.color.blue : theme.border.color.inverted};
-  }
-
   & + label > svg {
     height: 12px;
     left: 1px;
@@ -63,7 +73,12 @@ const StyledInput = styled.input<{ indeterminate?: boolean }>`
   }
 `;
 
-export function Checkbox({ checked, onChange, indeterminate }: OwnProps) {
+export function Checkbox({
+  checked,
+  onChange,
+  indeterminate,
+  variant = CheckboxVariant.Primary,
+}: OwnProps) {
   const [isInternalChecked, setIsInternalChecked] = React.useState(false);
 
   React.useEffect(() => {
@@ -83,6 +98,7 @@ export function Checkbox({ checked, onChange, indeterminate }: OwnProps) {
         data-testid="input-checkbox"
         checked={isInternalChecked}
         indeterminate={indeterminate}
+        variant={variant}
         onChange={(event) => handleChange(event.target.checked)}
       />
       <label htmlFor="checkbox">

front/src/modules/ui/table/editable-cell/components/EditableCell.tsx

@@ -28,6 +28,7 @@ type OwnProps = {
   editModeVerticalPosition?: 'over' | 'below';
   editHotkeyScope?: HotkeyScope;
   transparent?: boolean;
+  maxContentWidth?: number;
   onSubmit?: () => void;
   onCancel?: () => void;
 };
@@ -39,6 +40,7 @@ export function EditableCell({
   nonEditModeContent,
   editHotkeyScope,
   transparent = false,
+  maxContentWidth,
   onSubmit,
   onCancel,
 }: OwnProps) {
@@ -50,6 +52,7 @@ export function EditableCell({
     <CellBaseContainer>
       {isCurrentCellInEditMode ? (
         <EditableCellEditMode
+          maxContentWidth={maxContentWidth}
           transparent={transparent}
           editModeHorizontalAlign={editModeHorizontalAlign}
           editModeVerticalPosition={editModeVerticalPosition}

front/src/modules/ui/table/editable-cell/components/EditableCellEditMode.tsx

@@ -17,20 +17,23 @@ export const EditableCellEditModeContainer = styled.div<OwnProps>`
   margin-left: -1px;
   margin-top: -1px;
 
+  max-width: ${({ maxContentWidth }) =>
+    maxContentWidth ? `${maxContentWidth}px` : 'auto'};
   min-height: 100%;
   min-width: 100%;
-  position: absolute;
 
+  position: absolute;
   right: ${(props) =>
     props.editModeHorizontalAlign === 'right' ? '0' : 'auto'};
   top: ${(props) => (props.editModeVerticalPosition === 'over' ? '0' : '100%')};
-  z-index: 1;
   ${({ transparent }) => (transparent ? '' : overlayBackground)};
+  z-index: 1;
 `;
 
 type OwnProps = {
   children: ReactElement;
   transparent?: boolean;
+  maxContentWidth?: number;
   editModeHorizontalAlign?: 'left' | 'right';
   editModeVerticalPosition?: 'over' | 'below';
   onOutsideClick?: () => void;
@@ -45,6 +48,7 @@ export function EditableCellEditMode({
   onCancel,
   onSubmit,
   transparent = false,
+  maxContentWidth,
 }: OwnProps) {
   const wrapperRef = useRef(null);
 
@@ -52,6 +56,7 @@ export function EditableCellEditMode({
 
   return (
     <EditableCellEditModeContainer
+      maxContentWidth={maxContentWidth}
       transparent={transparent}
       data-testid="editable-cell-edit-mode-container"
       ref={wrapperRef}

front/src/modules/ui/themes/border.ts

@@ -14,7 +14,7 @@ export const borderLight = {
     strong: grayScale.gray25,
     medium: grayScale.gray20,
     light: grayScale.gray15,
-    invertedSecondary: grayScale.gray50,
+    secondaryInverted: grayScale.gray50,
     inverted: grayScale.gray60,
   },
   ...common,
@@ -25,7 +25,7 @@ export const borderDark = {
     strong: grayScale.gray65,
     medium: grayScale.gray70,
     light: grayScale.gray75,
-    invertedSecondary: grayScale.gray40,
+    secondaryInverted: grayScale.gray40,
     inverted: grayScale.gray30,
   },
   ...common,