From 8cd426fab878541892c3d8a11e1168072079c8c5 Mon Sep 17 00:00:00 2001 From: Emilien Chauvet Date: Wed, 19 Jul 2023 22:40:52 -0700 Subject: [PATCH] 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 --- .../companies/components/CompanyBoardCard.tsx | 31 ++++++++++----- .../people/components/PeopleCompanyCell.tsx | 1 + .../components/DropdownMenuSelectableItem.tsx | 2 +- .../variants/components/DateEditableField.tsx | 4 +- .../modules/ui/input/components/Checkbox.tsx | 38 +++++++++++++------ .../editable-cell/components/EditableCell.tsx | 3 ++ .../components/EditableCellEditMode.tsx | 9 ++++- front/src/modules/ui/themes/border.ts | 4 +- 8 files changed, 64 insertions(+), 28 deletions(-) diff --git a/front/src/modules/companies/components/CompanyBoardCard.tsx b/front/src/modules/companies/components/CompanyBoardCard.tsx index 03f24b2a1f9f..6feaac2204a0 100644 --- a/front/src/modules/companies/components/CompanyBoardCard.tsx +++ b/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() { setSelected(!selected)} - onMouseEnter={() => setIsHovered(true)} - onMouseLeave={() => setIsHovered(false)} > -
- {(isHovered || selected) && ( + setSelected(!selected)} + variant={CheckboxVariant.Secondary} /> - )} + } - value={pipelineProgress.closeDate || new Date().toISOString()} + value={pipelineProgress.closeDate} onSubmit={(value) => handleCardUpdate({ ...pipelineProgress, diff --git a/front/src/modules/people/components/PeopleCompanyCell.tsx b/front/src/modules/people/components/PeopleCompanyCell.tsx index 534ab4b63178..6ab3c08501be 100644 --- a/front/src/modules/people/components/PeopleCompanyCell.tsx +++ b/front/src/modules/people/components/PeopleCompanyCell.tsx @@ -25,6 +25,7 @@ export function PeopleCompanyCell({ people }: OwnProps) { return ( ` display: flex; justify-content: space-between; - max-width: 150px; + width: calc(100% - ${({ theme }) => theme.spacing(2)}); `; const StyledLeftContainer = styled.div` diff --git a/front/src/modules/ui/editable-field/variants/components/DateEditableField.tsx b/front/src/modules/ui/editable-field/variants/components/DateEditableField.tsx index 3b09767455dd..24ca0636d8f0 100644 --- a/front/src/modules/ui/editable-field/variants/components/DateEditableField.tsx +++ b/front/src/modules/ui/editable-field/variants/components/DateEditableField.tsx @@ -49,7 +49,7 @@ export function DateEditableField({ icon, value, onSubmit }: OwnProps) { iconLabel={icon} editModeContent={ { handleChange(newValue); }} @@ -58,7 +58,7 @@ export function DateEditableField({ icon, value, onSubmit }: OwnProps) { displayModeContent={ } - isDisplayModeContentEmpty={!(internalValue !== '')} + isDisplayModeContentEmpty={!internalValue} /> ); diff --git a/front/src/modules/ui/input/components/Checkbox.tsx b/front/src/modules/ui/input/components/Checkbox.tsx index 4184250df0e6..91d10e91a066 100644 --- a/front/src/modules/ui/input/components/Checkbox.tsx +++ b/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)} />