Various design fixes on side panel (#11165)

- Fix background color - Fix Menu Item height - Fix Input design - Fix show page summary card design
2025-03-25 16:21:10 +01:00
parent 45b8a330c6
commit b24046b1bb
8 changed files with 86 additions and 96 deletions
--- 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};
--- 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 = ({
      <CommandMenuDefaultSelectionEffect
        selectableItemIds={selectableItemIds}
      />
-      <StyledList>
-        <ScrollWrapper
-          contextProviderName="commandMenu"
-          componentInstanceId={`scroll-wrapper-command-menu`}
-        >
-          <StyledInnerList>
-            <SelectableList
-              selectableListId="command-menu-list"
-              hotkeyScope={AppHotkeyScope.CommandMenuOpen}
-              selectableItemIdArray={selectableItemIds}
-              onEnter={(itemId) => {
-                if (itemId === RESET_CONTEXT_TO_SELECTION) {
-                  resetPreviousCommandMenuContext();
-                  return;
-                }
+      <ScrollWrapper
+        contextProviderName="commandMenu"
+        componentInstanceId={`scroll-wrapper-command-menu`}
+      >
+        <StyledInnerList>
+          <SelectableList
+            selectableListId="command-menu-list"
+            hotkeyScope={AppHotkeyScope.CommandMenuOpen}
+            selectableItemIdArray={selectableItemIds}
+            onEnter={(itemId) => {
+              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 ? (
-                  <CommandGroup heading={heading} key={heading}>
-                    {items.map((item) => {
-                      return (
-                        <SelectableItem itemId={item.id} key={item.id}>
-                          <CommandMenuItem
-                            key={item.id}
-                            id={item.id}
-                            Icon={item.Icon}
-                            label={item.label}
-                            description={item.description}
-                            to={item.to}
-                            onClick={item.onCommandClick}
-                            hotKeys={item.hotKeys}
-                            shouldCloseCommandMenuOnClick={
-                              item.shouldCloseCommandMenuOnClick
-                            }
-                          />
-                        </SelectableItem>
-                      );
-                    })}
-                  </CommandGroup>
-                ) : null,
-              )}
-              {noResults && !loading && (
-                <StyledEmpty>No results found</StyledEmpty>
-              )}
-            </SelectableList>
-          </StyledInnerList>
-        </ScrollWrapper>
-      </StyledList>
+                onItemClick({
+                  shouldCloseCommandMenuOnClick,
+                  onClick: onCommandClick,
+                  to,
+                });
+              }
+            }}
+            onSelect={() => {
+              setHasUserSelectedCommand(true);
+            }}
+          >
+            {children}
+            {commandGroups.map(({ heading, items }) =>
+              items?.length ? (
+                <CommandGroup heading={heading} key={heading}>
+                  {items.map((item) => {
+                    return (
+                      <SelectableItem itemId={item.id} key={item.id}>
+                        <CommandMenuItem
+                          id={item.id}
+                          Icon={item.Icon}
+                          label={item.label}
+                          description={item.description}
+                          to={item.to}
+                          onClick={item.onCommandClick}
+                          hotKeys={item.hotKeys}
+                          shouldCloseCommandMenuOnClick={
+                            item.shouldCloseCommandMenuOnClick
+                          }
+                        />
+                      </SelectableItem>
+                    );
+                  })}
+                </CommandGroup>
+              ) : null,
+            )}
+            {noResults && !loading && (
+              <StyledEmpty>No results found</StyledEmpty>
+            )}
+          </SelectableList>
+        </StyledInnerList>
+      </ScrollWrapper>
    </>
  );
 };
--- 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 = {
--- 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};
  }
--- 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};
  }
--- 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<StyledAdornmentContainerProps>`
  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<
--- 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%;
 `;

--- 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};
  }