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 0b7aab647..ed75acfdb 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 c9fa7c68b..a54dd760e 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 d40ced426..7839c79ad 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>
     ) : (