Various design fixes on side panel (#11165)

- Fix background color
- Fix Menu Item height
- Fix Input design
- Fix show page summary card design

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

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
-        <ScrollWrapper
+        contextProviderName="commandMenu"
-          contextProviderName="commandMenu"
+        componentInstanceId={`scroll-wrapper-command-menu`}
-          componentInstanceId={`scroll-wrapper-command-menu`}
+      >
-        >
+        <StyledInnerList>
-          <StyledInnerList>
+          <SelectableList
-            <SelectableList
+            selectableListId="command-menu-list"
-              selectableListId="command-menu-list"
+            hotkeyScope={AppHotkeyScope.CommandMenuOpen}
-              hotkeyScope={AppHotkeyScope.CommandMenuOpen}
+            selectableItemIdArray={selectableItemIds}
-              selectableItemIdArray={selectableItemIds}
+            onEnter={(itemId) => {
-              onEnter={(itemId) => {
+              if (itemId === RESET_CONTEXT_TO_SELECTION) {
-                if (itemId === RESET_CONTEXT_TO_SELECTION) {
+                resetPreviousCommandMenuContext();
-                  resetPreviousCommandMenuContext();
+                return;
-                  return;
+              }
-                }
 
-                const command = commands.find((item) => item.id === itemId);
+              const command = commands.find((item) => item.id === itemId);
 
-                if (isDefined(command)) {
+              if (isDefined(command)) {
-                  const { to, onCommandClick, shouldCloseCommandMenuOnClick } =
+                const { to, onCommandClick, shouldCloseCommandMenuOnClick } =
-                    command;
+                  command;
 
-                  onItemClick({
+                onItemClick({
-                    shouldCloseCommandMenuOnClick,
+                  shouldCloseCommandMenuOnClick,
-                    onClick: onCommandClick,
+                  onClick: onCommandClick,
-                    to,
+                  to,
-                  });
+                });
-                }
+              }
-              }}
+            }}
-              onSelect={() => {
+            onSelect={() => {
-                setHasUserSelectedCommand(true);
+              setHasUserSelectedCommand(true);
-              }}
+            }}
-            >
+          >
-              {children}
+            {children}
-              {commandGroups.map(({ heading, items }) =>
+            {commandGroups.map(({ heading, items }) =>
-                items?.length ? (
+              items?.length ? (
-                  <CommandGroup heading={heading} key={heading}>
+                <CommandGroup heading={heading} key={heading}>
-                    {items.map((item) => {
+                  {items.map((item) => {
-                      return (
+                    return (
-                        <SelectableItem itemId={item.id} key={item.id}>
+                      <SelectableItem itemId={item.id} key={item.id}>
-                          <CommandMenuItem
+                        <CommandMenuItem
-                            key={item.id}
+                          id={item.id}
-                            id={item.id}
+                          Icon={item.Icon}
-                            Icon={item.Icon}
+                          label={item.label}
-                            label={item.label}
+                          description={item.description}
-                            description={item.description}
+                          to={item.to}
-                            to={item.to}
+                          onClick={item.onCommandClick}
-                            onClick={item.onCommandClick}
+                          hotKeys={item.hotKeys}
-                            hotKeys={item.hotKeys}
+                          shouldCloseCommandMenuOnClick={
-                            shouldCloseCommandMenuOnClick={
+                            item.shouldCloseCommandMenuOnClick
-                              item.shouldCloseCommandMenuOnClick
+                          }
-                            }
+                        />
-                          />
+                      </SelectableItem>
-                        </SelectableItem>
+                    );
-                      );
+                  })}
-                    })}
+                </CommandGroup>
-                  </CommandGroup>
+              ) : null,
-                ) : null,
+            )}
-              )}
+            {noResults && !loading && (
-              {noResults && !loading && (
+              <StyledEmpty>No results found</StyledEmpty>
-                <StyledEmpty>No results found</StyledEmpty>
+            )}
-              )}
+          </SelectableList>
-            </SelectableList>
+        </StyledInnerList>
-          </StyledInnerList>
+      </ScrollWrapper>
-        </ScrollWrapper>
-      </StyledList>
     </>
   );
 };

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 = {

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

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

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<

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%;
 `;
 

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