diff --git a/packages/twenty-front/src/modules/settings/components/Separator.tsx b/packages/twenty-front/src/modules/settings/components/Separator.tsx new file mode 100644 index 000000000000..a7550220765f --- /dev/null +++ b/packages/twenty-front/src/modules/settings/components/Separator.tsx @@ -0,0 +1,13 @@ +import styled from '@emotion/styled'; + +const StyledHr = styled.hr` + border: none; + border-top: 1px solid ${({ theme }) => theme.border.color.light}; + margin: 0px; + margin-left: ${({ theme }) => theme.spacing(4)}; + margin-right: ${({ theme }) => theme.spacing(4)}; +`; + +export const Separator = () => { + return <StyledHr />; +}; diff --git a/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentBase.tsx b/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentBase.tsx index 31c79e956c47..429ce45676a5 100644 --- a/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentBase.tsx +++ b/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentBase.tsx @@ -1,17 +1,15 @@ import styled from '@emotion/styled'; -import { CardContent } from 'twenty-ui'; type StyledCardContentProps = { disabled?: boolean; - divider?: boolean; }; -export const StyledSettingsOptionCardContent = styled( - CardContent, -)<StyledCardContentProps>` +export const StyledSettingsOptionCardContent = styled.div<StyledCardContentProps>` align-items: center; display: flex; gap: ${({ theme }) => theme.spacing(3)}; + background-color: ${({ theme }) => theme.background.secondary}; + padding: ${({ theme }) => theme.spacing(4)}; `; export const StyledSettingsOptionCardIcon = styled.div` align-items: center; diff --git a/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentCounter.tsx b/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentCounter.tsx index 9a6f845f8b9f..77e57f7996fd 100644 --- a/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentCounter.tsx +++ b/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentCounter.tsx @@ -12,7 +12,6 @@ type SettingsOptionCardContentCounterProps = { Icon?: IconComponent; title: React.ReactNode; description?: string; - divider?: boolean; disabled?: boolean; value: number; onChange: (value: number) => void; @@ -24,7 +23,6 @@ export const SettingsOptionCardContentCounter = ({ Icon, title, description, - divider, disabled = false, value, onChange, @@ -32,7 +30,7 @@ export const SettingsOptionCardContentCounter = ({ maxValue, }: SettingsOptionCardContentCounterProps) => { return ( - <StyledSettingsOptionCardContent divider={divider} disabled={disabled}> + <StyledSettingsOptionCardContent disabled={disabled}> {Icon && ( <StyledSettingsOptionCardIcon> <SettingsOptionIconCustomizer Icon={Icon} /> diff --git a/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentSelect.tsx b/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentSelect.tsx index 50f2ed9415c6..8d767e8d612f 100644 --- a/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentSelect.tsx +++ b/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentSelect.tsx @@ -12,9 +12,7 @@ type SettingsOptionCardContentSelectProps = { Icon?: IconComponent; title: React.ReactNode; description?: string; - divider?: boolean; disabled?: boolean; - selectClassName?: string; children?: React.ReactNode; }; @@ -26,12 +24,11 @@ export const SettingsOptionCardContentSelect = ({ Icon, title, description, - divider, disabled = false, children, }: SettingsOptionCardContentSelectProps) => { return ( - <StyledSettingsOptionCardContent divider={divider} disabled={disabled}> + <StyledSettingsOptionCardContent disabled={disabled}> {Icon && ( <StyledSettingsOptionCardIcon> <SettingsOptionIconCustomizer Icon={Icon} /> diff --git a/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentToggle.tsx b/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentToggle.tsx index 868418500219..235bd9b32fa5 100644 --- a/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentToggle.tsx +++ b/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentToggle.tsx @@ -1,3 +1,4 @@ +import { Separator } from '@/settings/components/Separator'; import { StyledSettingsOptionCardContent, StyledSettingsOptionCardDescription, @@ -57,34 +58,34 @@ export const SettingsOptionCardContentToggle = ({ const toggleId = useId(); return ( - <StyledSettingsOptionCardToggleContent - divider={divider} - disabled={disabled} - > - {Icon && ( - <StyledSettingsOptionCardIcon> - <SettingsOptionIconCustomizer Icon={Icon} /> - </StyledSettingsOptionCardIcon> - )} - <div> - <StyledSettingsOptionCardTitle> - <label htmlFor={toggleId}> - {title} - <StyledSettingsOptionCardToggleCover /> - </label> - </StyledSettingsOptionCardTitle> - <StyledSettingsOptionCardDescription> - {description} - </StyledSettingsOptionCardDescription> - </div> - <StyledSettingsOptionCardToggleButton - id={toggleId} - value={checked} - onChange={onChange} - disabled={disabled} - toggleSize="small" - color={advancedMode ? theme.color.yellow : theme.color.blue} - /> - </StyledSettingsOptionCardToggleContent> + <> + <StyledSettingsOptionCardToggleContent disabled={disabled}> + {Icon && ( + <StyledSettingsOptionCardIcon> + <SettingsOptionIconCustomizer Icon={Icon} /> + </StyledSettingsOptionCardIcon> + )} + <div> + <StyledSettingsOptionCardTitle> + <label htmlFor={toggleId}> + {title} + <StyledSettingsOptionCardToggleCover /> + </label> + </StyledSettingsOptionCardTitle> + <StyledSettingsOptionCardDescription> + {description} + </StyledSettingsOptionCardDescription> + </div> + <StyledSettingsOptionCardToggleButton + id={toggleId} + value={checked} + onChange={onChange} + disabled={disabled} + toggleSize="small" + color={advancedMode ? theme.color.yellow : theme.color.blue} + /> + </StyledSettingsOptionCardToggleContent> + {divider && <Separator />} + </> ); }; diff --git a/packages/twenty-front/src/modules/settings/components/SettingsOptions/__stories__/SettingsOptionCardContentCounter.stories.tsx b/packages/twenty-front/src/modules/settings/components/SettingsOptions/__stories__/SettingsOptionCardContentCounter.stories.tsx index 3398e206c35d..30c840ee0896 100644 --- a/packages/twenty-front/src/modules/settings/components/SettingsOptions/__stories__/SettingsOptionCardContentCounter.stories.tsx +++ b/packages/twenty-front/src/modules/settings/components/SettingsOptions/__stories__/SettingsOptionCardContentCounter.stories.tsx @@ -21,7 +21,6 @@ const SettingsOptionCardContentCounterWrapper = ( Icon={args.Icon} title={args.title} description={args.description} - divider={args.divider} disabled={args.disabled} minValue={args.minValue} maxValue={args.maxValue} diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/number/components/SettingsDataModelFieldNumberForm.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/number/components/SettingsDataModelFieldNumberForm.tsx index f73c59bdcb06..43879f93f4dd 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/number/components/SettingsDataModelFieldNumberForm.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/number/components/SettingsDataModelFieldNumberForm.tsx @@ -3,6 +3,7 @@ import { z } from 'zod'; import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem'; import { numberFieldDefaultValueSchema } from '@/object-record/record-field/validation-schemas/numberFieldDefaultValueSchema'; +import { Separator } from '@/settings/components/Separator'; import { SettingsOptionCardContentCounter } from '@/settings/components/SettingsOptions/SettingsOptionCardContentCounter'; import { SettingsOptionCardContentSelect } from '@/settings/components/SettingsOptions/SettingsOptionCardContentSelect'; import { Select } from '@/ui/input/components/Select'; @@ -72,6 +73,7 @@ export const SettingsDataModelFieldNumberForm = ({ ]} /> </SettingsOptionCardContentSelect> + <Separator /> <SettingsOptionCardContentCounter Icon={IconDecimal} title="Number of decimals" diff --git a/packages/twenty-front/src/modules/settings/security/components/SettingsSecurityOptionsList.tsx b/packages/twenty-front/src/modules/settings/security/components/SettingsSecurityOptionsList.tsx index 4e61caad8e22..e2dc2d092a52 100644 --- a/packages/twenty-front/src/modules/settings/security/components/SettingsSecurityOptionsList.tsx +++ b/packages/twenty-front/src/modules/settings/security/components/SettingsSecurityOptionsList.tsx @@ -1,20 +1,20 @@ import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState'; import { SettingsOptionCardContentToggle } from '@/settings/components/SettingsOptions/SettingsOptionCardContentToggle'; +import { SSOIdentitiesProvidersState } from '@/settings/security/states/SSOIdentitiesProvidersState'; import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar'; import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar'; import styled from '@emotion/styled'; import { useRecoilState, useRecoilValue } from 'recoil'; import { - IconLink, Card, IconGoogle, + IconLink, IconMicrosoft, IconPassword, } from 'twenty-ui'; -import { useUpdateWorkspaceMutation } from '~/generated/graphql'; import { AuthProviders } from '~/generated-metadata/graphql'; +import { useUpdateWorkspaceMutation } from '~/generated/graphql'; import { capitalize } from '~/utils/string/capitalize'; -import { SSOIdentitiesProvidersState } from '@/settings/security/states/SSOIdentitiesProvidersState'; const StyledSettingsSecurityOptionsList = styled.div` display: flex; @@ -122,13 +122,14 @@ export const SettingsSecurityOptionsList = () => { <StyledSettingsSecurityOptionsList> {currentWorkspace && ( <> - <Card> + <Card rounded> <SettingsOptionCardContentToggle Icon={IconGoogle} title="Google" description="Allow logins through Google's single sign-on functionality." checked={currentWorkspace.isGoogleAuthEnabled} advancedMode + divider onChange={() => toggleAuthMethod('google')} /> <SettingsOptionCardContentToggle @@ -137,6 +138,7 @@ export const SettingsSecurityOptionsList = () => { description="Allow logins through Microsoft's single sign-on functionality." checked={currentWorkspace.isMicrosoftAuthEnabled} advancedMode + divider onChange={() => toggleAuthMethod('microsoft')} /> <SettingsOptionCardContentToggle diff --git a/packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx b/packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx index f5e1e2bbbf48..214e0e8c2b7c 100644 --- a/packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx +++ b/packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx @@ -162,7 +162,7 @@ export const SettingsWorkspaceMembers = () => { )} <Section> <H2Title - title="Members" + title="Manage Members" description="Manage the members of your space here" /> <Table>