admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
Antoine Moreaux
2025-02-14 10:19:02 +01:00
committed by GitHub
parent 8bd2f5c3c4
commit ea07692abb
3 changed files with 6 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,7 +6,7 @@ const StyledRadioCardContent = styled(CardContent)`
display: flex; display: flex;
align-items: center; align-items: center;
padding: ${({ theme }) => theme.spacing(2)}; 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}; border-radius: ${({ theme }) => theme.border.radius.sm};
flex-grow: 1; flex-grow: 1;
gap: ${({ theme }) => theme.spacing(2)}; gap: ${({ theme }) => theme.spacing(2)};

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

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

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

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