Settings Option Card component (#8456)

fixes - #8195

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
nitin
2024-11-18 14:52:33 +05:30
committed by GitHub
parent ade1c57ff4
commit 2f5dc26545
56 changed files with 931 additions and 920 deletions

View File

@ -32,7 +32,7 @@ export const SettingsWorkspace = () => (
<Section>
<H2Title
title="Support"
addornment={<ToggleImpersonate />}
adornment={<ToggleImpersonate />}
description="Grant Twenty support temporary access to your workspace so we can troubleshoot problems or recover content on your behalf. You can revoke access at any time."
/>
</Section>

View File

@ -1,5 +1,7 @@
import { H2Title, Section, IconLock, Tag } from 'twenty-ui';
import styled from '@emotion/styled';
import { H2Title, IconLock, Section, Tag } from 'twenty-ui';
import { AdvancedSettingsWrapper } from '@/settings/components/AdvancedSettingsWrapper';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { SettingsReadDocumentationButton } from '@/settings/developers/components/SettingsReadDocumentationButton';
import { SettingsSSOIdentitiesProvidersListCard } from '@/settings/security/components/SettingsSSOIdentitiesProvidersListCard';
@ -8,6 +10,21 @@ import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
const StyledContainer = styled.div`
width: 100%;
`;
const StyledMainContent = styled.div`
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(10)};
min-height: 200px;
`;
const StyledSSOSection = styled(Section)`
flex-shrink: 0;
`;
export const SettingsSecurity = () => {
return (
<SubMenuTopBarContainer
@ -22,28 +39,34 @@ export const SettingsSecurity = () => {
]}
>
<SettingsPageContainer>
<Section>
<H2Title
title="SSO"
description="Configure an SSO connection"
addornment={
<Tag
text={'Enterprise'}
color={'transparent'}
Icon={IconLock}
variant={'border'}
/>
}
/>
<SettingsSSOIdentitiesProvidersListCard />
</Section>
<Section>
<H2Title
title="Other"
description="Customize your workspace security"
/>
<SettingsSecurityOptionsList />
</Section>
<StyledMainContent>
<StyledSSOSection>
<H2Title
title="SSO"
description="Configure an SSO connection"
adornment={
<Tag
text={'Enterprise'}
color={'transparent'}
Icon={IconLock}
variant={'border'}
/>
}
/>
<SettingsSSOIdentitiesProvidersListCard />
</StyledSSOSection>
<Section>
<AdvancedSettingsWrapper>
<StyledContainer>
<H2Title
title="Other"
description="Customize your workspace security"
/>
<SettingsSecurityOptionsList />
</StyledContainer>
</AdvancedSettingsWrapper>
</Section>
</StyledMainContent>
</SettingsPageContainer>
</SubMenuTopBarContainer>
);