Update 'Settings Permissions' Layout (#10997)

Fixes https://github.com/twentyhq/core-team-issues/issues/566

## Before
<img width="712" alt="Screenshot 2025-03-18 at 17 17 38"
src="https://github.com/user-attachments/assets/5c2dd8c6-e0cc-4610-b858-071d50de692c"
/>
<img width="775" alt="Screenshot 2025-03-18 at 17 17 30"
src="https://github.com/user-attachments/assets/52bdde22-f26d-4698-8138-5f2af28ddd50"
/>


## After
<img width="949" alt="Screenshot 2025-03-18 at 16 58 31"
src="https://github.com/user-attachments/assets/71b77032-0f5d-452b-b088-7af7e306d0a6"
/>
<img width="946" alt="Screenshot 2025-03-18 at 16 58 38"
src="https://github.com/user-attachments/assets/dc2ddf95-1622-419a-a35b-3037da7bdd4d"
/>
This commit is contained in:
Weiko
2025-03-18 17:48:35 +01:00
committed by GitHub
parent 6acb70d6a9
commit c3a9c85265
6 changed files with 53 additions and 56 deletions

View File

@ -104,7 +104,7 @@ const StyledInput = styled.input<InputProps>`
disabled && isChecked
? theme.adaptiveColors.blue3
: indeterminate || isChecked
? theme.color.blue
? theme.adaptiveColors.blue3
: 'transparent'};
border-color: ${({
theme,
@ -114,12 +114,10 @@ const StyledInput = styled.input<InputProps>`
disabled,
}) => {
switch (true) {
case isChecked:
case indeterminate || isChecked:
return disabled ? theme.adaptiveColors.blue3 : theme.color.blue;
case disabled:
return theme.border.color.strong;
case indeterminate || isChecked:
return theme.color.blue;
case variant === CheckboxVariant.Primary:
return theme.border.color.inverted;
case variant === CheckboxVariant.Tertiary: