Update new/edit object according to figma (#3093)

* made changes according to figma

* remove click custom in test

packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFormSection.tsx

@@ -2,17 +2,20 @@ import styled from '@emotion/styled';
 
 import { validateMetadataLabel } from '@/object-metadata/utils/validateMetadataLabel';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
+import { IconPicker } from '@/ui/input/components/IconPicker';
 import { TextArea } from '@/ui/input/components/TextArea';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { Section } from '@/ui/layout/section/components/Section';
 
 type SettingsObjectFormSectionProps = {
   disabled?: boolean;
+  icon?: string;
   singularName?: string;
   pluralName?: string;
   description?: string;
   onChange?: (
     formValues: Partial<{
+      icon: string;
       labelSingular: string;
       labelPlural: string;
       description: string;
@@ -27,8 +30,22 @@ const StyledInputsContainer = styled.div`
   width: 100%;
 `;
 
+const StyledLabel = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+  font-size: ${({ theme }) => theme.font.size.xs};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  margin-bottom: ${({ theme }) => theme.spacing(1)};
+  text-transform: uppercase;
+`;
+
+const StyledInputContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
 export const SettingsObjectFormSection = ({
   disabled,
+  icon = 'IconPigMoney',
   singularName = '',
   pluralName = '',
   description = '',
@@ -36,10 +53,20 @@ export const SettingsObjectFormSection = ({
 }: SettingsObjectFormSectionProps) => (
   <Section>
     <H2Title
-      title="Name and description"
+      title="About"
       description="Name in both singular (e.g., 'Invoice') and plural (e.g., 'Invoices') forms."
     />
     <StyledInputsContainer>
+      <StyledInputContainer>
+        <StyledLabel>Icon</StyledLabel>
+        <IconPicker
+          disabled={disabled}
+          selectedIconKey={icon}
+          onChange={(icon) => {
+            onChange?.({ icon: icon.iconKey });
+          }}
+        />
+      </StyledInputContainer>
       <TextInput
         label="Singular"
         placeholder="Investor"

packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsNewObjectType.tsx

@@ -1,70 +0,0 @@
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
-
-import { IconBox, IconDatabase, IconFileCheck } from '@/ui/display/icon';
-
-import { SettingsObjectTypeCard } from './SettingsObjectTypeCard';
-
-export type NewObjectType = 'Standard' | 'Custom' | 'Remote';
-
-type SettingsNewObjectTypeProps = {
-  selectedType?: NewObjectType;
-  onTypeSelect?: (type: NewObjectType) => void;
-};
-
-const StyledContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  gap: ${({ theme }) => theme.spacing(2)};
-`;
-
-export const SettingsNewObjectType = ({
-  selectedType,
-  onTypeSelect,
-}: SettingsNewObjectTypeProps) => {
-  const theme = useTheme();
-  return (
-    <StyledContainer>
-      <SettingsObjectTypeCard
-        title={'Standard'}
-        color="blue"
-        selected={selectedType === 'Standard'}
-        prefixIcon={
-          <IconFileCheck
-            size={theme.icon.size.lg}
-            stroke={theme.icon.stroke.sm}
-            color={theme.font.color.tertiary}
-          />
-        }
-        onClick={() => onTypeSelect?.('Standard')}
-      />
-      <SettingsObjectTypeCard
-        title="Custom"
-        color="orange"
-        selected={selectedType === 'Custom'}
-        prefixIcon={
-          <IconBox
-            size={theme.icon.size.lg}
-            stroke={theme.icon.stroke.sm}
-            color={theme.font.color.tertiary}
-          />
-        }
-        onClick={() => onTypeSelect?.('Custom')}
-      />
-      <SettingsObjectTypeCard
-        title="Remote"
-        soon
-        disabled
-        color="green"
-        selected={selectedType === 'Remote'}
-        prefixIcon={
-          <IconDatabase
-            size={theme.icon.size.lg}
-            stroke={theme.icon.stroke.sm}
-            color={theme.font.color.tertiary}
-          />
-        }
-      />
-    </StyledContainer>
-  );
-};

packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsObjectTypeCard.tsx

@@ -1,81 +0,0 @@
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
-
-import { IconCheck } from '@/ui/display/icon';
-import { SoonPill } from '@/ui/display/pill/components/SoonPill';
-import { Tag } from '@/ui/display/tag/components/Tag';
-import { ThemeColor } from '@/ui/theme/constants/colors';
-
-const StyledObjectTypeCard = styled.div<SettingsObjectTypeCardProps>`
-  ${({ theme, disabled, selected }) => `
-    background: ${theme.background.transparent.primary};
-    cursor: ${disabled ? 'not-allowed' : 'pointer'};
-    display: flex;
-    flex-direction: row;
-    font-family: ${theme.font.family};
-    font-weight: 500;
-    border-style: solid;
-    border-width: '1px';
-    padding: ${theme.spacing(3)};
-    border-radius: ${theme.border.radius.sm};
-    gap: ${theme.spacing(2)};
-    border-color: ${
-      selected ? theme.border.color.inverted : theme.border.color.medium
-    };
-    color: ${theme.font.color.primary};
-    align-items: center;
-    width: 140px;
-  `}
-`;
-
-const StyledTag = styled(Tag)`
-  box-sizing: border-box;
-  height: ${({ theme }) => theme.spacing(5)};
-`;
-
-const StyledIconCheck = styled(IconCheck)`
-  margin-left: auto;
-`;
-
-const StyledSoonPill = styled(SoonPill)`
-  margin-left: auto;
-`;
-
-type SettingsObjectTypeCardProps = {
-  prefixIcon?: React.ReactNode;
-  title: string;
-  soon?: boolean;
-  disabled?: boolean;
-  color: ThemeColor;
-  selected: boolean;
-  onClick?: () => void;
-};
-
-export const SettingsObjectTypeCard = ({
-  prefixIcon,
-  title,
-  soon = false,
-  selected,
-  disabled = false,
-  color,
-  onClick,
-}: SettingsObjectTypeCardProps) => {
-  const theme = useTheme();
-  return (
-    <StyledObjectTypeCard
-      title={title}
-      soon={soon}
-      disabled={disabled}
-      color={color}
-      selected={selected}
-      onClick={onClick}
-    >
-      {prefixIcon}
-      <StyledTag color={color} text={title} />
-      {soon && <StyledSoonPill />}
-      {!disabled && selected && <StyledIconCheck size={theme.icon.size.md} />}
-    </StyledObjectTypeCard>
-  );
-};
-
-export {};