From b24046b1bb552650ed3b0e4edb52822948fc072c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?= <71827178+bosiraphael@users.noreply.github.com> Date: Tue, 25 Mar 2025 16:21:10 +0100 Subject: [PATCH] Various design fixes on side panel (#11165) - Fix background color - Fix Menu Item height - Fix Input design - Fix show page summary card design --- .../components/CommandMenuContainer.tsx | 2 +- .../components/CommandMenuList.tsx | 132 ++++++++---------- .../components/RecordTitleCell.tsx | 9 +- .../RecordTitleCellTextFieldDisplay.tsx | 7 +- .../RecordTitleFullNameFieldDisplay.tsx | 6 +- .../ui/input/components/TextInputV2.tsx | 19 +-- .../components/ShowPageSummaryCard.tsx | 5 +- .../menu-item/components/MenuItemCommand.tsx | 2 + 8 files changed, 86 insertions(+), 96 deletions(-) diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx index d0109c129..b481cc722 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx @@ -36,7 +36,7 @@ import { useIsMobile } from 'twenty-ui'; import { FeatureFlagKey } from '~/generated-metadata/graphql'; const StyledCommandMenu = styled(motion.div)` - background: ${({ theme }) => theme.background.secondary}; + background: ${({ theme }) => theme.background.primary}; border-left: 1px solid ${({ theme }) => theme.border.color.medium}; box-shadow: ${({ theme }) => theme.boxShadow.strong}; font-family: ${({ theme }) => theme.font.family}; diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuList.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuList.tsx index 0968b4248..4c2e2a180 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuList.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuList.tsx @@ -14,8 +14,8 @@ import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope'; import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper'; import styled from '@emotion/styled'; import { useSetRecoilState } from 'recoil'; -import { MOBILE_VIEWPORT } from 'twenty-ui'; import { isDefined } from 'twenty-shared/utils'; +import { MOBILE_VIEWPORT } from 'twenty-ui'; const MOBILE_NAVIGATION_BAR_HEIGHT = 64; @@ -27,13 +27,6 @@ export type CommandMenuListProps = { noResults?: boolean; }; -const StyledList = styled.div` - background: ${({ theme }) => theme.background.secondary}; - overscroll-behavior: contain; - transition: 100ms ease; - transition-property: height; -`; - const StyledInnerList = styled.div` max-height: calc( 100dvh - ${COMMAND_MENU_SEARCH_BAR_HEIGHT}px - @@ -86,72 +79,69 @@ export const CommandMenuList = ({ - - - - { - if (itemId === RESET_CONTEXT_TO_SELECTION) { - resetPreviousCommandMenuContext(); - return; - } + + + { + if (itemId === RESET_CONTEXT_TO_SELECTION) { + resetPreviousCommandMenuContext(); + return; + } - const command = commands.find((item) => item.id === itemId); + const command = commands.find((item) => item.id === itemId); - if (isDefined(command)) { - const { to, onCommandClick, shouldCloseCommandMenuOnClick } = - command; + if (isDefined(command)) { + const { to, onCommandClick, shouldCloseCommandMenuOnClick } = + command; - onItemClick({ - shouldCloseCommandMenuOnClick, - onClick: onCommandClick, - to, - }); - } - }} - onSelect={() => { - setHasUserSelectedCommand(true); - }} - > - {children} - {commandGroups.map(({ heading, items }) => - items?.length ? ( - - {items.map((item) => { - return ( - - - - ); - })} - - ) : null, - )} - {noResults && !loading && ( - No results found - )} - - - - + onItemClick({ + shouldCloseCommandMenuOnClick, + onClick: onCommandClick, + to, + }); + } + }} + onSelect={() => { + setHasUserSelectedCommand(true); + }} + > + {children} + {commandGroups.map(({ heading, items }) => + items?.length ? ( + + {items.map((item) => { + return ( + + + + ); + })} + + ) : null, + )} + {noResults && !loading && ( + No results found + )} + + + ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCell.tsx b/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCell.tsx index cae6b83a8..814bad575 100644 --- a/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCell.tsx +++ b/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCell.tsx @@ -36,8 +36,8 @@ export const RecordTitleCell = ({ ); const handleEnter: FieldInputEvent = (persistField) => { - persistField(); closeInlineCell(); + persistField(); }; const handleEscape = () => { @@ -45,13 +45,13 @@ export const RecordTitleCell = ({ }; const handleTab: FieldInputEvent = (persistField) => { - persistField(); closeInlineCell(); + persistField(); }; const handleShiftTab: FieldInputEvent = (persistField) => { - persistField(); closeInlineCell(); + persistField(); }; const handleClickOutside: FieldInputClickOutsideEvent = ( @@ -59,9 +59,8 @@ export const RecordTitleCell = ({ event, ) => { event.stopImmediatePropagation(); - - persistField(); closeInlineCell(); + persistField(); }; const recordTitleCellContextValue: RecordTitleCellContextProps = { diff --git a/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldDisplay.tsx index 22f0f7960..cb678575b 100644 --- a/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldDisplay.tsx +++ b/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldDisplay.tsx @@ -6,7 +6,6 @@ import { useContext } from 'react'; import { OverflowingTextWithTooltip } from 'twenty-ui'; const StyledDiv = styled.div` - align-items: center; background: inherit; border: none; border-radius: ${({ theme }) => theme.border.radius.sm}; @@ -14,7 +13,11 @@ const StyledDiv = styled.div` cursor: pointer; overflow: hidden; height: 28px; - line-height: 28px; + padding: ${({ theme }) => theme.spacing(0, 1.25)}; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; :hover { background: ${({ theme }) => theme.background.transparent.light}; } diff --git a/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleFullNameFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleFullNameFieldDisplay.tsx index 027b015b9..4e59b92ff 100644 --- a/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleFullNameFieldDisplay.tsx +++ b/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleFullNameFieldDisplay.tsx @@ -15,7 +15,11 @@ const StyledDiv = styled.div` cursor: pointer; overflow: hidden; height: 28px; - line-height: 28px; + padding: ${({ theme }) => theme.spacing(0, 1.25)}; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; :hover { background: ${({ theme }) => theme.background.transparent.light}; } diff --git a/packages/twenty-front/src/modules/ui/input/components/TextInputV2.tsx b/packages/twenty-front/src/modules/ui/input/components/TextInputV2.tsx index 173ba89c2..3f52d8dfb 100644 --- a/packages/twenty-front/src/modules/ui/input/components/TextInputV2.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/TextInputV2.tsx @@ -32,10 +32,12 @@ const StyledInputContainer = styled.div` position: relative; `; -const StyledAdornmentContainer = styled.div<{ +type StyledAdornmentContainerProps = { sizeVariant: TextInputV2Size; position: 'left' | 'right'; -}>` +}; + +const StyledAdornmentContainer = styled.div` align-items: center; background-color: ${({ theme }) => theme.background.transparent.light}; border: 1px solid ${({ theme }) => theme.border.color.medium}; @@ -116,18 +118,10 @@ const StyledInput = styled.input< : sizeVariant === 'md' ? '28px' : '32px'}; - line-height: ${({ sizeVariant }) => - sizeVariant === 'xs' - ? '20px' - : sizeVariant === 'sm' - ? '24px' - : sizeVariant === 'md' - ? '28px' - : '32px'}; outline: none; padding: ${({ theme, sizeVariant, autoGrow }) => autoGrow - ? theme.spacing(1) + ? 0 : sizeVariant === 'xs' ? `${theme.spacing(2)} 0` : theme.spacing(2)}; @@ -400,7 +394,7 @@ const TextInputV2Component = forwardRef< const StyledAutogrowWrapper = styled(AutogrowWrapper)<{ sizeVariant?: TextInputV2Size; }>` - border: 1px solid transparent; + box-sizing: border-box; height: ${({ sizeVariant }) => sizeVariant === 'xs' ? '20px' @@ -410,7 +404,6 @@ const StyledAutogrowWrapper = styled(AutogrowWrapper)<{ ? '28px' : '32px'}; padding: 0 ${({ theme }) => theme.spacing(1.25)}; - box-sizing: border-box; `; const TextInputV2WithAutoGrowWrapper = forwardRef< diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx index f58dab791..2061d78ff 100644 --- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx +++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx @@ -4,13 +4,13 @@ import styled from '@emotion/styled'; import { Trans } from '@lingui/react/macro'; import { ChangeEvent, ReactNode, useRef } from 'react'; import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; +import { isDefined } from 'twenty-shared/utils'; import { AppTooltip, Avatar, AvatarType, IconComponent } from 'twenty-ui'; import { v4 as uuidV4 } from 'uuid'; import { beautifyExactDateTime, beautifyPastDateRelativeToNow, } from '~/utils/date-utils'; -import { isDefined } from 'twenty-shared/utils'; type ShowPageSummaryCardProps = { avatarPlaceholder: string; @@ -52,7 +52,7 @@ const StyledInfoContainer = styled.div<{ isMobile: boolean }>` const StyledDate = styled.div<{ isMobile: boolean }>` color: ${({ theme }) => theme.font.color.tertiary}; cursor: pointer; - padding-left: ${({ theme, isMobile }) => (isMobile ? theme.spacing(2) : 0)}; + padding-left: ${({ theme }) => theme.spacing(1)}; `; const StyledTitle = styled.div<{ isMobile: boolean }>` @@ -61,7 +61,6 @@ const StyledTitle = styled.div<{ isMobile: boolean }>` font-size: ${({ theme }) => theme.font.size.xl}; font-weight: ${({ theme }) => theme.font.weight.semiBold}; justify-content: ${({ isMobile }) => (isMobile ? 'flex-start' : 'center')}; - padding-left: ${({ theme, isMobile }) => (isMobile ? theme.spacing(2) : 0)}; width: 90%; `; diff --git a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommand.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommand.tsx index b6e3f0f5d..b027c7a43 100644 --- a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommand.tsx +++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommand.tsx @@ -47,6 +47,8 @@ const StyledMenuItemCommandContainer = styled.div<{ isSelected?: boolean }>` transition-property: none; user-select: none; width: calc(100% - 2 * var(--horizontal-padding)); + box-sizing: border-box; + height: 40px; &:hover { background: ${({ theme }) => theme.background.transparent.lighter}; }