From 30bcdda3235b6e88c897ee44333d76826190864e Mon Sep 17 00:00:00 2001
From: Thomas des Francs <tdesfrancs@gmail.com>
Date: Fri, 15 Nov 2024 12:44:58 +0100
Subject: [PATCH] Modal Background & box shadow fixes (#8506)

# Before

![CleanShot 2024-11-14 at 19 20
59](https://github.com/user-attachments/assets/9a561416-a08c-4cc4-ac71-b3f4410950d8)

# After

![CleanShot 2024-11-14 at 19 21
34](https://github.com/user-attachments/assets/eaa78d94-a337-4d91-9c36-8ac0dd27d952)
---
 .../src/modules/ui/layout/modal/components/Modal.tsx        | 6 ++++++
 packages/twenty-ui/src/theme/constants/BackgroundDark.ts    | 6 +++---
 packages/twenty-ui/src/theme/constants/BackgroundLight.ts   | 6 +++---
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx b/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx
index cde1a6a9d..fa5585207 100644
--- a/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx
@@ -15,9 +15,14 @@ const StyledModalDiv = styled(motion.div)<{
   size?: ModalSize;
   padding?: ModalPadding;
   isMobile: boolean;
+  modalVariant: ModalVariants;
 }>`
   display: flex;
   flex-direction: column;
+  box-shadow: ${({ theme, modalVariant }) =>
+    modalVariant === 'primary'
+      ? theme.boxShadow.superHeavy
+      : theme.boxShadow.strong};
   background: ${({ theme }) => theme.background.primary};
   color: ${({ theme }) => theme.font.color.primary};
   border-radius: ${({ theme, isMobile }) => {
@@ -231,6 +236,7 @@ export const Modal = ({
         animate="visible"
         exit="exit"
         layout
+        modalVariant={modalVariant}
         variants={modalAnimation}
         className={className}
         isMobile={isMobile}
diff --git a/packages/twenty-ui/src/theme/constants/BackgroundDark.ts b/packages/twenty-ui/src/theme/constants/BackgroundDark.ts
index 446a6d2aa..9ef3faae5 100644
--- a/packages/twenty-ui/src/theme/constants/BackgroundDark.ts
+++ b/packages/twenty-ui/src/theme/constants/BackgroundDark.ts
@@ -23,9 +23,9 @@ export const BACKGROUND_DARK = {
     lighter: RGBA(GRAY_SCALE.gray0, 0.03),
     danger: RGBA(COLOR.red, 0.08),
   },
-  overlayPrimary: RGBA(GRAY_SCALE.gray90, 0.8),
-  overlaySecondary: RGBA(GRAY_SCALE.gray90, 0.4),
-  overlayTertiary: RGBA(GRAY_SCALE.gray90, 0.4),
+  overlayPrimary: RGBA(GRAY_SCALE.gray80, 0.8),
+  overlaySecondary: RGBA(GRAY_SCALE.gray80, 0.4),
+  overlayTertiary: RGBA(GRAY_SCALE.gray80, 0.4),
   radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
   radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
   primaryInverted: GRAY_SCALE.gray20,
diff --git a/packages/twenty-ui/src/theme/constants/BackgroundLight.ts b/packages/twenty-ui/src/theme/constants/BackgroundLight.ts
index dfd68500a..68fbf3496 100644
--- a/packages/twenty-ui/src/theme/constants/BackgroundLight.ts
+++ b/packages/twenty-ui/src/theme/constants/BackgroundLight.ts
@@ -23,9 +23,9 @@ export const BACKGROUND_LIGHT = {
     lighter: RGBA(GRAY_SCALE.gray100, 0.02),
     danger: RGBA(COLOR.red, 0.08),
   },
-  overlayPrimary: RGBA(GRAY_SCALE.gray90, 0.8),
-  overlaySecondary: RGBA(GRAY_SCALE.gray90, 0.4),
-  overlayTertiary: RGBA(GRAY_SCALE.gray90, 0.08),
+  overlayPrimary: RGBA(GRAY_SCALE.gray80, 0.8),
+  overlaySecondary: RGBA(GRAY_SCALE.gray80, 0.4),
+  overlayTertiary: RGBA(GRAY_SCALE.gray80, 0.08),
   radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
   radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
   primaryInverted: GRAY_SCALE.gray60,