Settings options

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 />;
+};

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;

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,15 +23,14 @@ export const SettingsOptionCardContentCounter = ({
   Icon,
   title,
   description,
-  divider,
   disabled = false,
   value,
   onChange,
   minValue,
   maxValue,
 }: SettingsOptionCardContentCounterProps) => {
   return (
-    <StyledSettingsOptionCardContent divider={divider} disabled={disabled}>
+    <StyledSettingsOptionCardContent disabled={disabled}>
       {Icon && (
         <StyledSettingsOptionCardIcon>
           <SettingsOptionIconCustomizer Icon={Icon} />

packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentSelect.tsx

@@ -12,7 +12,6 @@ type SettingsOptionCardContentSelectProps = {
   Icon?: IconComponent;
   title: React.ReactNode;
   description?: string;
-  divider?: boolean;
   disabled?: boolean;
   selectClassName?: string;
   children?: React.ReactNode;
@@ -26,12 +25,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} />

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 />}
+    </>
   );
 };

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}

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"

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

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>