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/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,