refactor(ui/settings): update styles and improve structure (#10201)

Adjusted border color in SettingsRadioCard for better visual hierarchy.
Simplified grid template layout in SSO form for consistency. Enhanced
HorizontalSeparator by wrapping text in Label for improved accessibility
and styling.

Fix
https://github.com/twentyhq/core-team-issues/issues/385#event-16262349051

---------

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

packages/twenty-front/src/modules/settings/components/SettingsRadioCard.tsx

@@ -6,7 +6,7 @@ const StyledRadioCardContent = styled(CardContent)`
   display: flex;
   align-items: center;
   padding: ${({ theme }) => theme.spacing(2)};
-  border: 1px solid ${({ theme }) => theme.border.color.light};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
   border-radius: ${({ theme }) => theme.border.radius.sm};
   flex-grow: 1;
   gap: ${({ theme }) => theme.spacing(2)};

packages/twenty-front/src/modules/settings/security/components/SettingsSSOIdentitiesProvidersForm.tsx

@@ -16,10 +16,7 @@ const StyledInputsContainer = styled.div`
   display: grid;
   gap: ${({ theme }) => theme.spacing(2, 4)};
   grid-template-columns: 1fr 1fr;
-  grid-template-areas:
-    'input-1 input-1'
-    'input-2 input-3'
-    'input-4 input-5';
+  grid-template-areas: 'input-1 input-1';
 
   & :first-of-type {
     grid-area: input-1;

packages/twenty-ui/src/display/text/components/HorizontalSeparator.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 import { JSX } from 'react';
+import { Label } from '@ui/display';
 
 type HorizontalSeparatorProps = {
   visible?: boolean;
@@ -31,9 +32,7 @@ const StyledLine = styled.div<HorizontalSeparatorProps>`
 `;
 
 const StyledText = styled.span`
-  color: ${({ theme }) => theme.font.color.light};
   margin: 0 ${({ theme }) => theme.spacing(2)};
-  white-space: nowrap;
 `;
 
 export const HorizontalSeparator = ({
@@ -46,7 +45,9 @@ export const HorizontalSeparator = ({
     {text ? (
       <StyledSeparatorContainer noMargin={noMargin}>
         <StyledLine visible={visible} />
-        {text && <StyledText>{text}</StyledText>}
+        <Label>
+          <StyledText>{text}</StyledText>
+        </Label>
         <StyledLine visible={visible} />
       </StyledSeparatorContainer>
     ) : (