Skip to content

Commit

Permalink
Fix: danger font color values & acc. to design specs (twentyhq#5344)
Browse files Browse the repository at this point in the history
fixes: twentyhq#5325

changes done (commits in order):

1. **Fixed fontLight & fontDark 'danger' color as per design spec**:
changed theme.font.color.danger to match the disabled color theme (for
light and dark) as followed by the BorderDark and BorderLight. Use the
updated colors for Buttons

2. **Replace theme.font.color.danger with theme.color.red (5 changed
files)**: Since `theme.font.color.danger` has now been updated to
contain the disabled button color values, we use the `theme.color.red`
color in all the places using `theme.font.color.danger` as it contains
same value that was used to be of `theme.font.color.danger` before.

3. **fixed hover color of StyledConfirmationButton in
ConfirmationModal**: issue can be seen when going to /settings/workspace
and trying to hover on delete the workspace button in dark mode. fixed
with this commit.

**Important Note**: The files
`/twenty-front/src/modules/ui/theme/constants/FontLight.ts` and
`/twenty-front/src/modules/ui/theme/constants/FontDark.ts` **are of no
use** as theme for the entire 'twenty-front' and
'twenty-chrome-extension' packages use the same files from '@/ui/theme'
(twenty-ui package)

dark mode :
<img width="987" alt="Screenshot 2024-05-09 at 9 14 35 PM"
src="https://github.com/twentyhq/twenty/assets/60315832/75fe3972-0e8a-41f6-90a1-09bfcd013e72">

when disabled:
<img width="1098" alt="Screenshot 2024-05-09 at 9 13 46 PM"
src="https://github.com/twentyhq/twenty/assets/60315832/5caab8b5-47ba-43e5-90cd-a41a1f690ca0">

on hover:
<img width="1052" alt="Screenshot 2024-05-09 at 9 14 05 PM"
src="https://github.com/twentyhq/twenty/assets/60315832/58de3df6-ed77-4aad-84fc-67b01154b493">

<br>

<br>

light mode (when disabled):
<img width="918" alt="Screenshot 2024-05-09 at 9 13 14 PM"
src="https://github.com/twentyhq/twenty/assets/60315832/18228783-d6c7-44a6-9fce-00053bb35ef2">

on hover:
<img width="983" alt="Screenshot 2024-05-09 at 9 14 18 PM"
src="https://github.com/twentyhq/twenty/assets/60315832/6df99f12-5767-4136-80c9-5d8883ac8e00">

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
  • Loading branch information
its-id and FelixMalfait committed May 20, 2024
1 parent 4d479ee commit 737fffe
Showing 1 changed file with 3 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,9 @@ const StyledButton = styled('button', {
box-shadow: ${!disabled && focus
? `0 0 0 3px ${theme.color.red10}`
: 'none'};
color: ${!disabled ? theme.font.color.danger : theme.color.red20};
color: ${!disabled
? theme.font.color.danger
: theme.border.color.danger};
&:hover {
background: ${!disabled
? theme.background.danger
Expand Down

0 comments on commit 737fffe

Please sign in to comment.