From 737fffefbd2118a2d60d941a2039c5cd07112831 Mon Sep 17 00:00:00 2001
From: Indrakant D <60315832+its-id@users.noreply.github.com>
Date: Mon, 20 May 2024 20:29:01 +0530
Subject: [PATCH] Fix: danger font color values & acc. to design specs (#5344)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fixes: #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>
---
 .../src/modules/ui/input/button/components/Button.tsx         | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/twenty-front/src/modules/ui/input/button/components/Button.tsx b/packages/twenty-front/src/modules/ui/input/button/components/Button.tsx
index 304eaf0bc..33932d69b 100644
--- a/packages/twenty-front/src/modules/ui/input/button/components/Button.tsx
+++ b/packages/twenty-front/src/modules/ui/input/button/components/Button.tsx
@@ -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