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