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