diff --git a/front/src/App.tsx b/front/src/App.tsx index 4648715d2..1eeb307ce 100644 --- a/front/src/App.tsx +++ b/front/src/App.tsx @@ -29,6 +29,7 @@ import { Tasks } from '~/pages/tasks/Tasks'; import { getPageTitleFromPath } from '~/utils/title-utils'; import { ObjectTablePage } from './pages/companies/ObjectsTable'; +import { SettingsObjectNewFieldStep1 } from './pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1'; export const App = () => { const { pathname } = useLocation(); @@ -102,6 +103,10 @@ export const App = () => { path={SettingsPath.NewObject} element={} /> + } + /> } /> diff --git a/front/src/modules/settings/components/SettingsPageContainer.tsx b/front/src/modules/settings/components/SettingsPageContainer.tsx new file mode 100644 index 000000000..354ca930e --- /dev/null +++ b/front/src/modules/settings/components/SettingsPageContainer.tsx @@ -0,0 +1,13 @@ +import styled from '@emotion/styled'; + +import { objectSettingsWidth } from '../data-model/constants/objectSettings'; + +const StyledSettingsPageContainer = styled.div<{ width?: number }>` + display: flex; + flex-direction: column; + gap: ${({ theme }) => theme.spacing(8)}; + padding: ${({ theme }) => theme.spacing(8)}; + width: ${({ width }) => (width ? width + 'px' : objectSettingsWidth)}; +`; + +export { StyledSettingsPageContainer as SettingsPageContainer }; diff --git a/front/src/modules/types/SettingsPath.ts b/front/src/modules/types/SettingsPath.ts index 8bbec9279..0dd23d596 100644 --- a/front/src/modules/types/SettingsPath.ts +++ b/front/src/modules/types/SettingsPath.ts @@ -4,6 +4,7 @@ export enum SettingsPath { Objects = 'objects', ObjectDetail = 'objects/:pluralObjectName', ObjectEdit = 'objects/:pluralObjectName/edit', + ObjectNewFieldStep1 = 'objects/:pluralObjectName/new-field/step-1', NewObject = 'objects/new', WorkspaceMembersPage = 'workspace-members', Workspace = 'workspace', diff --git a/front/src/modules/ui/layout/section/components/Section.tsx b/front/src/modules/ui/layout/section/components/Section.tsx index e5cc66ded..1923f701d 100644 --- a/front/src/modules/ui/layout/section/components/Section.tsx +++ b/front/src/modules/ui/layout/section/components/Section.tsx @@ -25,8 +25,6 @@ const StyledSection = styled.div<{ fontColor: SectionFontColor; }>` color: ${({ theme, fontColor }) => theme.font.color[fontColor]}; - margin-bottom: ${({ theme }) => theme.spacing(4)}; - margin-top: ${({ theme }) => theme.spacing(4)}; text-align: ${({ alignment }) => alignment}; width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')}; `; diff --git a/front/src/pages/auth/__stories__/CreateProfile.stories.tsx b/front/src/pages/auth/__stories__/CreateProfile.stories.tsx index 21e9a05ba..9eb5199e0 100644 --- a/front/src/pages/auth/__stories__/CreateProfile.stories.tsx +++ b/front/src/pages/auth/__stories__/CreateProfile.stories.tsx @@ -19,7 +19,6 @@ const meta: Meta = { decorators: [PageDecorator], args: { routePath: AppPath.CreateProfile }, parameters: { - docs: { story: 'inline', iframeHeight: '500px' }, msw: [ graphql.query( getOperationName(GET_CURRENT_USER) ?? '', diff --git a/front/src/pages/auth/__stories__/CreateWorkspace.stories.tsx b/front/src/pages/auth/__stories__/CreateWorkspace.stories.tsx index 2cce3bfc7..0e9035d7a 100644 --- a/front/src/pages/auth/__stories__/CreateWorkspace.stories.tsx +++ b/front/src/pages/auth/__stories__/CreateWorkspace.stories.tsx @@ -19,7 +19,6 @@ const meta: Meta = { decorators: [PageDecorator], args: { routePath: AppPath.CreateWorkspace }, parameters: { - docs: { story: 'inline', iframeHeight: '500px' }, msw: [ graphql.query( getOperationName(GET_CURRENT_USER) ?? '', diff --git a/front/src/pages/auth/__stories__/SignInUp.stories.tsx b/front/src/pages/auth/__stories__/SignInUp.stories.tsx index f7034f543..7a1320076 100644 --- a/front/src/pages/auth/__stories__/SignInUp.stories.tsx +++ b/front/src/pages/auth/__stories__/SignInUp.stories.tsx @@ -16,7 +16,6 @@ const meta: Meta = { decorators: [PageDecorator], args: { routePath: AppPath.SignIn }, parameters: { - docs: { story: 'inline', iframeHeight: '500px' }, msw: graphqlMocks, cookie: { tokenPair: '{}', diff --git a/front/src/pages/companies/__stories__/Companies.add.stories.tsx b/front/src/pages/companies/__stories__/Companies.add.stories.tsx index a9474cc8b..a1dc69250 100644 --- a/front/src/pages/companies/__stories__/Companies.add.stories.tsx +++ b/front/src/pages/companies/__stories__/Companies.add.stories.tsx @@ -20,7 +20,6 @@ const meta: Meta = { decorators: [PageDecorator], args: { routePath: AppPath.CompaniesPage }, parameters: { - docs: { story: 'inline', iframeHeight: '500px' }, msw: graphqlMocks, }, }; diff --git a/front/src/pages/companies/__stories__/Companies.filterBy.stories.tsx b/front/src/pages/companies/__stories__/Companies.filterBy.stories.tsx index bdad44bb5..7702682c3 100644 --- a/front/src/pages/companies/__stories__/Companies.filterBy.stories.tsx +++ b/front/src/pages/companies/__stories__/Companies.filterBy.stories.tsx @@ -21,7 +21,6 @@ const meta: Meta = { decorators: [PageDecorator], args: { routePath: AppPath.CompaniesPage }, parameters: { - docs: { story: 'inline', iframeHeight: '500px' }, msw: graphqlMocks, }, }; diff --git a/front/src/pages/companies/__stories__/Companies.sortBy.stories.tsx b/front/src/pages/companies/__stories__/Companies.sortBy.stories.tsx index 5b474a9cb..f100a8ddd 100644 --- a/front/src/pages/companies/__stories__/Companies.sortBy.stories.tsx +++ b/front/src/pages/companies/__stories__/Companies.sortBy.stories.tsx @@ -19,7 +19,6 @@ const meta: Meta = { decorators: [PageDecorator], args: { routePath: AppPath.CompaniesPage }, parameters: { - docs: { story: 'inline', iframeHeight: '500px' }, msw: graphqlMocks, }, }; diff --git a/front/src/pages/companies/__stories__/Companies.stories.tsx b/front/src/pages/companies/__stories__/Companies.stories.tsx index 5e8717244..f78aa824d 100644 --- a/front/src/pages/companies/__stories__/Companies.stories.tsx +++ b/front/src/pages/companies/__stories__/Companies.stories.tsx @@ -15,7 +15,6 @@ const meta: Meta = { decorators: [PageDecorator], args: { routePath: AppPath.CompaniesPage }, parameters: { - docs: { story: 'inline', iframeHeight: '500px' }, msw: graphqlMocks, }, }; diff --git a/front/src/pages/companies/__stories__/Company.stories.tsx b/front/src/pages/companies/__stories__/Company.stories.tsx index e607eb4a9..d4287fc91 100644 --- a/front/src/pages/companies/__stories__/Company.stories.tsx +++ b/front/src/pages/companies/__stories__/Company.stories.tsx @@ -29,7 +29,6 @@ const meta: Meta = { routeParams: { ':companyId': mockedCompaniesData[0].id }, }, parameters: { - docs: { story: 'inline', iframeHeight: '500px' }, msw: [ ...graphqlMocks, graphql.query( diff --git a/front/src/pages/not-found/__stories__/NotFound.stories.tsx b/front/src/pages/not-found/__stories__/NotFound.stories.tsx index 6d0000048..8f0751b93 100644 --- a/front/src/pages/not-found/__stories__/NotFound.stories.tsx +++ b/front/src/pages/not-found/__stories__/NotFound.stories.tsx @@ -14,7 +14,6 @@ const meta: Meta = { routePath: 'toto-not-found', }, parameters: { - docs: { story: 'inline', iframeHeight: '500px' }, msw: graphqlMocks, }, }; diff --git a/front/src/pages/opportunities/__stories__/Opportunities.stories.tsx b/front/src/pages/opportunities/__stories__/Opportunities.stories.tsx index 3a4601138..8de68be70 100644 --- a/front/src/pages/opportunities/__stories__/Opportunities.stories.tsx +++ b/front/src/pages/opportunities/__stories__/Opportunities.stories.tsx @@ -16,7 +16,6 @@ const meta: Meta = { decorators: [PageDecorator], args: { routePath: AppPath.OpportunitiesPage }, parameters: { - docs: { story: 'inline', iframeHeight: '500px' }, msw: graphqlMocks, }, }; diff --git a/front/src/pages/people/__stories__/People.add.stories.tsx b/front/src/pages/people/__stories__/People.add.stories.tsx index 6d42b30f8..7c6434e7e 100644 --- a/front/src/pages/people/__stories__/People.add.stories.tsx +++ b/front/src/pages/people/__stories__/People.add.stories.tsx @@ -20,7 +20,6 @@ const meta: Meta = { decorators: [PageDecorator], args: { routePath: AppPath.PeoplePage }, parameters: { - docs: { story: 'inline', iframeHeight: '500px' }, msw: graphqlMocks, }, }; diff --git a/front/src/pages/people/__stories__/People.filterBy.stories.tsx b/front/src/pages/people/__stories__/People.filterBy.stories.tsx index ce81ae33a..78d5fa12b 100644 --- a/front/src/pages/people/__stories__/People.filterBy.stories.tsx +++ b/front/src/pages/people/__stories__/People.filterBy.stories.tsx @@ -21,7 +21,6 @@ const meta: Meta = { decorators: [PageDecorator], args: { routePath: AppPath.PeoplePage }, parameters: { - docs: { story: 'inline', iframeHeight: '500px' }, msw: graphqlMocks, }, }; diff --git a/front/src/pages/people/__stories__/People.inputs.stories.tsx b/front/src/pages/people/__stories__/People.inputs.stories.tsx index d40eb03f3..a74695013 100644 --- a/front/src/pages/people/__stories__/People.inputs.stories.tsx +++ b/front/src/pages/people/__stories__/People.inputs.stories.tsx @@ -28,7 +28,6 @@ const meta: Meta = { decorators: [PageDecorator], args: { routePath: AppPath.PeoplePage }, parameters: { - docs: { story: 'inline', iframeHeight: '500px' }, msw: graphqlMocks, }, }; diff --git a/front/src/pages/people/__stories__/People.sortBy.stories.tsx b/front/src/pages/people/__stories__/People.sortBy.stories.tsx index e97233b0a..03a1b3c4e 100644 --- a/front/src/pages/people/__stories__/People.sortBy.stories.tsx +++ b/front/src/pages/people/__stories__/People.sortBy.stories.tsx @@ -20,7 +20,6 @@ const meta: Meta = { decorators: [PageDecorator], args: { routePath: AppPath.PeoplePage }, parameters: { - docs: { story: 'inline', iframeHeight: '500px' }, msw: graphqlMocks, }, }; diff --git a/front/src/pages/people/__stories__/People.stories.tsx b/front/src/pages/people/__stories__/People.stories.tsx index 22633449c..80f7b6992 100644 --- a/front/src/pages/people/__stories__/People.stories.tsx +++ b/front/src/pages/people/__stories__/People.stories.tsx @@ -15,7 +15,6 @@ const meta: Meta = { decorators: [PageDecorator], args: { routePath: AppPath.PeoplePage }, parameters: { - docs: { story: 'inline', iframeHeight: '500px' }, msw: graphqlMocks, }, }; diff --git a/front/src/pages/people/__stories__/Person.stories.tsx b/front/src/pages/people/__stories__/Person.stories.tsx index 28ca60522..ae23274eb 100644 --- a/front/src/pages/people/__stories__/Person.stories.tsx +++ b/front/src/pages/people/__stories__/Person.stories.tsx @@ -19,7 +19,6 @@ const meta: Meta = { routeParams: { ':personId': mockedPeopleData[0].id }, }, parameters: { - docs: { story: 'inline', iframeHeight: '500px' }, msw: graphqlMocks, }, }; diff --git a/front/src/pages/settings/SettingsExperience.tsx b/front/src/pages/settings/SettingsExperience.tsx index 8ce4c2366..ec8f7ec8a 100644 --- a/front/src/pages/settings/SettingsExperience.tsx +++ b/front/src/pages/settings/SettingsExperience.tsx @@ -1,5 +1,6 @@ import styled from '@emotion/styled'; +import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer'; import { IconSettings } from '@/ui/display/icon'; import { H1Title } from '@/ui/display/typography/components/H1Title'; import { H2Title } from '@/ui/display/typography/components/H2Title'; @@ -8,12 +9,8 @@ import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer' import { Section } from '@/ui/layout/section/components/Section'; import { useColorScheme } from '@/ui/theme/hooks/useColorScheme'; -const StyledContainer = styled.div` - display: flex; - flex-direction: column; - padding: ${({ theme }) => theme.spacing(8)}; - padding-bottom: ${({ theme }) => theme.spacing(10)}; - width: 350px; +const StyledH1Title = styled(H1Title)` + margin-bottom: 0; `; export const SettingsExperience = () => { @@ -21,13 +18,13 @@ export const SettingsExperience = () => { return ( - - + +
- + ); }; diff --git a/front/src/pages/settings/SettingsProfile.tsx b/front/src/pages/settings/SettingsProfile.tsx index a50a33524..9ecb2b14f 100644 --- a/front/src/pages/settings/SettingsProfile.tsx +++ b/front/src/pages/settings/SettingsProfile.tsx @@ -1,5 +1,6 @@ import styled from '@emotion/styled'; +import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer'; import { DeleteAccount } from '@/settings/profile/components/DeleteAccount'; import { EmailField } from '@/settings/profile/components/EmailField'; import { NameFields } from '@/settings/profile/components/NameFields'; @@ -11,50 +12,39 @@ import { H2Title } from '@/ui/display/typography/components/H2Title'; import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer'; import { Section } from '@/ui/layout/section/components/Section'; -const StyledContainer = styled.div` - display: flex; - flex-direction: column; - height: fit-content; - padding: ${({ theme }) => theme.spacing(8)}; - padding-bottom: ${({ theme }) => theme.spacing(10)}; - padding-bottom: 30px; - width: 350px; +const StyledH1Title = styled(H1Title)` + margin-bottom: 0; `; export const SettingsProfile = () => ( - <> - - -
- - -
-
- - -
-
- - -
-
- } - description="Grant Twenty support temporary access to your account so we can troubleshoot problems or recover content on your behalf. You can revoke access at any time." - /> -
-
- -
- - + + +
+ + +
+
+ + +
+
+ + +
+
+ } + description="Grant Twenty support temporary access to your account so we can troubleshoot problems or recover content on your behalf. You can revoke access at any time." + /> +
+
+ +
+ ); diff --git a/front/src/pages/settings/SettingsWorkspace.tsx b/front/src/pages/settings/SettingsWorkspace.tsx index be87f5d9c..48feaadee 100644 --- a/front/src/pages/settings/SettingsWorkspace.tsx +++ b/front/src/pages/settings/SettingsWorkspace.tsx @@ -1,5 +1,6 @@ import styled from '@emotion/styled'; +import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer'; import { DeleteWorkspace } from '@/settings/profile/components/DeleteWorkspace'; import { NameField } from '@/settings/workspace/components/NameField'; import { WorkspaceLogoUploader } from '@/settings/workspace/components/WorkspaceLogoUploader'; @@ -9,31 +10,26 @@ import { H2Title } from '@/ui/display/typography/components/H2Title'; import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer'; import { Section } from '@/ui/layout/section/components/Section'; -const StyledContainer = styled.div` - display: flex; - flex-direction: column; - padding: ${({ theme }) => theme.spacing(8)}; - width: 350px; +const StyledH1Title = styled(H1Title)` + margin-bottom: 0; `; export const SettingsWorkspace = () => ( -
- - -
- - -
-
- - -
+ + +
+ + +
+
+ + +
-
- -
- -
+
+ +
+ ); diff --git a/front/src/pages/settings/SettingsWorkspaceMembers.tsx b/front/src/pages/settings/SettingsWorkspaceMembers.tsx index 5476ee316..20be414cc 100644 --- a/front/src/pages/settings/SettingsWorkspaceMembers.tsx +++ b/front/src/pages/settings/SettingsWorkspaceMembers.tsx @@ -3,6 +3,7 @@ import styled from '@emotion/styled'; import { useRecoilState } from 'recoil'; import { currentUserState } from '@/auth/states/currentUserState'; +import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer'; import { IconSettings, IconTrash } from '@/ui/display/icon'; import { H1Title } from '@/ui/display/typography/components/H1Title'; import { H2Title } from '@/ui/display/typography/components/H2Title'; @@ -17,12 +18,8 @@ import { useRemoveWorkspaceMemberMutation, } from '~/generated/graphql'; -const StyledContainer = styled.div` - display: flex; - flex-direction: column; - height: fit-content; - padding: ${({ theme }) => theme.spacing(8)}; - width: 350px; +const StyledH1Title = styled(H1Title)` + margin-bottom: 0; `; const StyledButtonContainer = styled.div` @@ -84,8 +81,8 @@ export const SettingsWorkspaceMembers = () => { return ( - - + + {workspace?.inviteHash && (
{ /> ))}
- + = { decorators: [PageDecorator], args: { routePath: '/settings/experience' }, parameters: { - docs: { story: 'inline', iframeHeight: '500px' }, msw: graphqlMocks, }, }; diff --git a/front/src/pages/settings/__stories__/SettingsProfile.stories.tsx b/front/src/pages/settings/__stories__/SettingsProfile.stories.tsx index 099c63dd4..466aff125 100644 --- a/front/src/pages/settings/__stories__/SettingsProfile.stories.tsx +++ b/front/src/pages/settings/__stories__/SettingsProfile.stories.tsx @@ -15,7 +15,6 @@ const meta: Meta = { decorators: [PageDecorator], args: { routePath: '/settings/profile' }, parameters: { - docs: { story: 'inline', iframeHeight: '500px' }, msw: graphqlMocks, }, }; diff --git a/front/src/pages/settings/__stories__/SettingsWorkspace.stories.tsx b/front/src/pages/settings/__stories__/SettingsWorkspace.stories.tsx index 343a7d30a..1858e3f04 100644 --- a/front/src/pages/settings/__stories__/SettingsWorkspace.stories.tsx +++ b/front/src/pages/settings/__stories__/SettingsWorkspace.stories.tsx @@ -14,7 +14,6 @@ const meta: Meta = { decorators: [PageDecorator], args: { routePath: '/settings/workspace' }, parameters: { - docs: { story: 'inline', iframeHeight: '500px' }, msw: graphqlMocks, }, }; diff --git a/front/src/pages/settings/__stories__/SettingsWorkspaceMembers.stories.tsx b/front/src/pages/settings/__stories__/SettingsWorkspaceMembers.stories.tsx index c2ca2017b..51e6e87cd 100644 --- a/front/src/pages/settings/__stories__/SettingsWorkspaceMembers.stories.tsx +++ b/front/src/pages/settings/__stories__/SettingsWorkspaceMembers.stories.tsx @@ -16,7 +16,6 @@ const meta: Meta = { decorators: [PageDecorator], args: { routePath: '/settings/workspace-members' }, parameters: { - docs: { story: 'inline', iframeHeight: '500px' }, msw: graphqlMocks, }, }; diff --git a/front/src/pages/settings/data-model/SettingsNewObject.tsx b/front/src/pages/settings/data-model/SettingsNewObject.tsx index 1ff10b417..2bcd4db0f 100644 --- a/front/src/pages/settings/data-model/SettingsNewObject.tsx +++ b/front/src/pages/settings/data-model/SettingsNewObject.tsx @@ -1,6 +1,4 @@ -import styled from '@emotion/styled'; - -import { objectSettingsWidth } from '@/settings/data-model/constants/objectSettings'; +import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer'; import { SettingsNewObjectType } from '@/settings/data-model/new-object/components/SettingsNewObjectType'; import { IconSettings } from '@/ui/display/icon'; import { H2Title } from '@/ui/display/typography/components/H2Title'; @@ -8,20 +6,10 @@ import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer' import { Section } from '@/ui/layout/section/components/Section'; import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb'; -const StyledContainer = styled.div` - align-items: flex-start; - display: flex; - flex-direction: column; - gap: ${({ theme }) => theme.spacing(8)}; - height: fit-content; - padding: ${({ theme }) => theme.spacing(8)}; - width: ${objectSettingsWidth}; -`; - export const SettingsNewObject = () => { return ( - + { /> - + ); }; diff --git a/front/src/pages/settings/data-model/SettingsObjectDetail.tsx b/front/src/pages/settings/data-model/SettingsObjectDetail.tsx index 7f2a077ca..94d48543f 100644 --- a/front/src/pages/settings/data-model/SettingsObjectDetail.tsx +++ b/front/src/pages/settings/data-model/SettingsObjectDetail.tsx @@ -2,12 +2,12 @@ import { useEffect } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; import styled from '@emotion/styled'; +import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer'; import { activeFieldItems, activeObjectItems, disabledFieldItems, } from '@/settings/data-model/constants/mockObjects'; -import { objectSettingsWidth } from '@/settings/data-model/constants/objectSettings'; import { SettingsAboutSection } from '@/settings/data-model/object-details/components/SettingsObjectAboutSection'; import { SettingsObjectFieldItemTableRow, @@ -18,26 +18,16 @@ import { IconPlus, IconSettings } from '@/ui/display/icon'; import { H2Title } from '@/ui/display/typography/components/H2Title'; import { Button } from '@/ui/input/button/components/Button'; import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer'; +import { Section } from '@/ui/layout/section/components/Section'; import { Table } from '@/ui/layout/table/components/Table'; import { TableHeader } from '@/ui/layout/table/components/TableHeader'; import { TableSection } from '@/ui/layout/table/components/TableSection'; import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb'; -const StyledContainer = styled.div` +const StyledDiv = styled.div` display: flex; - flex-direction: column; - height: fit-content; - padding: ${({ theme }) => theme.spacing(8)}; - width: ${objectSettingsWidth}; -`; - -const StyledBreadcrumb = styled(Breadcrumb)` - margin-bottom: ${({ theme }) => theme.spacing(8)}; -`; - -const StyledAddFieldButton = styled(Button)` - align-self: flex-end; - margin-top: ${({ theme }) => theme.spacing(2)}; + justify-content: flex-end; + padding-top: ${({ theme }) => theme.spacing(2)}; `; export const SettingsObjectDetail = () => { @@ -54,8 +44,8 @@ export const SettingsObjectDetail = () => { return ( - - + { type={activeObject.type} /> )} - - - - Name - Field type - Data type - - - - {activeFieldItems.map((fieldItem) => ( - - ))} - - {!!disabledFieldItems.length && ( - - {disabledFieldItems.map((fieldItem) => ( +
+ +
+ + Name + Field type + Data type + + + + {activeFieldItems.map((fieldItem) => ( ))} - )} -
- - + {!!disabledFieldItems.length && ( + + {disabledFieldItems.map((fieldItem) => ( + + ))} + + )} + + +