From ea07692abbec7a2255f5e17b1f7a64a2a277c0c3 Mon Sep 17 00:00:00 2001
From: Antoine Moreaux <moreaux.antoine@gmail.com>
Date: Fri, 14 Feb 2025 10:19:02 +0100
Subject: [PATCH] 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>
---
 .../src/modules/settings/components/SettingsRadioCard.tsx  | 2 +-
 .../components/SettingsSSOIdentitiesProvidersForm.tsx      | 5 +----
 .../src/display/text/components/HorizontalSeparator.tsx    | 7 ++++---
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/twenty-front/src/modules/settings/components/SettingsRadioCard.tsx b/packages/twenty-front/src/modules/settings/components/SettingsRadioCard.tsx
index 0b7aab647ce..ed75acfdb3c 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsRadioCard.tsx
+++ b/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)};
diff --git a/packages/twenty-front/src/modules/settings/security/components/SettingsSSOIdentitiesProvidersForm.tsx b/packages/twenty-front/src/modules/settings/security/components/SettingsSSOIdentitiesProvidersForm.tsx
index c9fa7c68bd1..a54dd760e43 100644
--- a/packages/twenty-front/src/modules/settings/security/components/SettingsSSOIdentitiesProvidersForm.tsx
+++ b/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;
diff --git a/packages/twenty-ui/src/display/text/components/HorizontalSeparator.tsx b/packages/twenty-ui/src/display/text/components/HorizontalSeparator.tsx
index d40ced426ad..7839c79ad7a 100644
--- a/packages/twenty-ui/src/display/text/components/HorizontalSeparator.tsx
+++ b/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>
     ) : (