1997 new object field step 1 create page (#2054)

* add ObjectNewField page

* add story

* refactored to include step1

* replaced step1 by step-1 and fix onCLick behavior

* refactor stories

* refactoring in progress

* refactor SettingsPageContainer

* refactor SettingsPageContainer

front/src/pages/settings/data-model/SettingsObjectEdit.tsx

@@ -1,21 +1,14 @@
 import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import styled from '@emotion/styled';
 
+import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { activeObjectItems } from '@/settings/data-model/constants/mockObjects';
-import { objectSettingsWidth } from '@/settings/data-model/constants/objectSettings';
 import { SettingsObjectIconSection } from '@/settings/data-model/object-edit/SettingsObjectIconSection';
 import { AppPath } from '@/types/AppPath';
 import { IconSettings } from '@/ui/display/icon';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 
-const StyledContainer = styled.div`
-  height: fit-content;
-  padding: ${({ theme }) => theme.spacing(8)};
-  width: ${objectSettingsWidth};
-`;
-
 export const SettingsObjectEdit = () => {
   const navigate = useNavigate();
   const { pluralObjectName = '' } = useParams();
@@ -29,7 +22,7 @@ export const SettingsObjectEdit = () => {
 
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
-      <StyledContainer>
+      <SettingsPageContainer>
         <Breadcrumb
           links={[
             { children: 'Objects', href: '/settings/objects' },
@@ -46,7 +39,7 @@ export const SettingsObjectEdit = () => {
             iconKey={activeObject.Icon.name}
           />
         )}
-      </StyledContainer>
+      </SettingsPageContainer>
     </SubMenuTopBarContainer>
   );
 };