Update custom object placeholder (#3876)

* #3874 update custom object placeholder

* #3876 removed object-edit folder and file

* #3833 update loading image

* remove image file

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

@@ -45,7 +45,7 @@ const StyledInputContainer = styled.div`
 
 export const SettingsObjectFormSection = ({
   disabled,
-  icon = 'IconPigMoney',
+  icon = 'IconListNumbers',
   singularName = '',
   pluralName = '',
   description = '',
@@ -69,7 +69,7 @@ export const SettingsObjectFormSection = ({
       </StyledInputContainer>
       <TextInput
         label="Singular"
-        placeholder="Investor"
+        placeholder="Listing"
         value={singularName}
         onChange={(value) => {
           if (!value || validateMetadataLabel(value)) {
@@ -81,7 +81,7 @@ export const SettingsObjectFormSection = ({
       />
       <TextInput
         label="Plural"
-        placeholder="Investors"
+        placeholder="Listings"
         value={pluralName}
         onChange={(value) => {
           if (!value || validateMetadataLabel(value)) {

packages/twenty-front/src/modules/settings/data-model/object-edit/SettingsObjectIconSection.tsx

@@ -1,68 +0,0 @@
-import styled from '@emotion/styled';
-
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
-import { H2Title } from '@/ui/display/typography/components/H2Title';
-import { IconPicker } from '@/ui/input/components/IconPicker';
-import { Section } from '@/ui/layout/section/components/Section';
-
-import ArrowRight from '../assets/ArrowRight.svg';
-
-import { SettingsObjectIconWithLabel } from './SettingsObjectIconWithLabel';
-
-const StyledContainer = styled.div`
-  align-items: center;
-  display: flex;
-  gap: ${({ theme }) => theme.spacing(4)};
-`;
-
-const StyledArrowContainer = styled.div`
-  align-items: center;
-  display: flex;
-  height: 32px;
-  justify-content: center;
-`;
-
-type SettingsObjectIconSectionProps = {
-  disabled?: boolean;
-  iconKey?: string;
-  label?: string;
-  onChange?: (icon: { Icon: IconComponent; iconKey: string }) => void;
-};
-
-export const SettingsObjectIconSection = ({
-  disabled,
-  iconKey = 'IconPigMoney',
-  label,
-  onChange,
-}: SettingsObjectIconSectionProps) => {
-  const { getIcon } = useIcons();
-  const Icon = getIcon(iconKey);
-
-  return (
-    <Section>
-      <H2Title
-        title="Icon"
-        description="The icon that will be displayed in the sidebar."
-      />
-      <StyledContainer>
-        <IconPicker
-          disabled={disabled}
-          selectedIconKey={iconKey}
-          onChange={(icon) => {
-            onChange?.({ Icon: icon.Icon, iconKey: icon.iconKey });
-          }}
-        />
-        <StyledArrowContainer>
-          <img src={ArrowRight} alt="Arrow right" width={32} height={16} />
-        </StyledArrowContainer>
-        {Icon && (
-          <SettingsObjectIconWithLabel
-            Icon={Icon}
-            label={label || 'Investors'}
-          />
-        )}
-      </StyledContainer>
-    </Section>
-  );
-};

packages/twenty-front/src/modules/settings/data-model/object-edit/SettingsObjectIconWithLabel.tsx

@@ -1,47 +0,0 @@
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
-
-const StyledContainer = styled.div`
-  align-items: center;
-  display: flex;
-  gap: ${({ theme }) => theme.spacing(3)};
-  padding: ${({ theme }) => theme.spacing(1)};
-`;
-
-const StyledSubContainer = styled.div`
-  align-items: center;
-  display: flex;
-  gap: ${({ theme }) => theme.spacing(1)};
-`;
-const StyledItemLabel = styled.div`
-  color: ${({ theme }) => theme.font.color.secondary};
-  font-size: ${({ theme }) => theme.font.size.sm};
-  font-style: normal;
-  font-weight: ${({ theme }) => theme.font.size.md};
-  line-height: ${({ theme }) => theme.text.lineHeight.md};
-`;
-
-type SettingsObjectIconWithLabelProps = {
-  Icon?: IconComponent;
-  label: string;
-};
-
-export const SettingsObjectIconWithLabel = ({
-  Icon,
-  label,
-}: SettingsObjectIconWithLabelProps) => {
-  const theme = useTheme();
-
-  return (
-    <StyledContainer>
-      <StyledSubContainer>
-        {!!Icon && (
-          <Icon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
-        )}
-        <StyledItemLabel>{label}</StyledItemLabel>
-      </StyledSubContainer>
-    </StyledContainer>
-  );
-};

packages/twenty-front/src/modules/ui/display/icon/index.ts

@@ -77,6 +77,7 @@ export {
   IconLink,
   IconLinkOff,
   IconList,
+  IconListNumbers,
   IconLock,
   IconLogout,
   IconMail,

packages/twenty-front/src/pages/settings/data-model/SettingsNewObject.tsx

@@ -24,7 +24,7 @@ export const SettingsNewObject = () => {
     icon: string;
     labelPlural: string;
     labelSingular: string;
-  }>({ icon: 'IconPigMoney', labelPlural: '', labelSingular: '' });
+  }>({ icon: 'IconListNumbers', labelPlural: '', labelSingular: '' });
 
   const canSave =
     !!customFormValues.labelPlural && !!customFormValues.labelSingular;