scottk/twenty
1
0
Fork 0
mirror of https://github.com/lingble/twenty.git synced 2025-11-01 13:17:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Modal Background & box shadow fixes (#8506)

Browse Source 
# 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)
This commit is contained in:
Thomas des Francs
2024-11-15 12:44:58 +01:00
committed by GitHub
parent 4f99b8eea1
commit 30bcdda323
3 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx
View File

@@ -15,9 +15,14 @@ const StyledModalDiv = styled(motion.div)<{
size?: ModalSize; size?: ModalSize;
padding?: ModalPadding; padding?: ModalPadding;
isMobile: boolean; isMobile: boolean;
modalVariant: ModalVariants;
}>` }>`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-shadow: ${({ theme, modalVariant }) =>
modalVariant === 'primary'
? theme.boxShadow.superHeavy
: theme.boxShadow.strong};
background: ${({ theme }) => theme.background.primary}; background: ${({ theme }) => theme.background.primary};
color: ${({ theme }) => theme.font.color.primary}; color: ${({ theme }) => theme.font.color.primary};
border-radius: ${({ theme, isMobile }) => { border-radius: ${({ theme, isMobile }) => {
@@ -231,6 +236,7 @@ export const Modal = ({
animate="visible" animate="visible"
exit="exit" exit="exit"
layout layout
modalVariant={modalVariant}
variants={modalAnimation} variants={modalAnimation}
className={className} className={className}
isMobile={isMobile} isMobile={isMobile}

6
packages/twenty-ui/src/theme/constants/BackgroundDark.ts
View File

@@ -23,9 +23,9 @@ export const BACKGROUND_DARK = {
lighter: RGBA(GRAY_SCALE.gray0, 0.03), lighter: RGBA(GRAY_SCALE.gray0, 0.03),
danger: RGBA(COLOR.red, 0.08), danger: RGBA(COLOR.red, 0.08),
}, },
overlayPrimary: RGBA(GRAY_SCALE.gray90, 0.8), overlayPrimary: RGBA(GRAY_SCALE.gray80, 0.8),
overlaySecondary: RGBA(GRAY_SCALE.gray90, 0.4), overlaySecondary: RGBA(GRAY_SCALE.gray80, 0.4),
overlayTertiary: RGBA(GRAY_SCALE.gray90, 0.4), overlayTertiary: RGBA(GRAY_SCALE.gray80, 0.4),
radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`, 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%)`, radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
primaryInverted: GRAY_SCALE.gray20, primaryInverted: GRAY_SCALE.gray20,

6
packages/twenty-ui/src/theme/constants/BackgroundLight.ts
View File

@@ -23,9 +23,9 @@ export const BACKGROUND_LIGHT = {
lighter: RGBA(GRAY_SCALE.gray100, 0.02), lighter: RGBA(GRAY_SCALE.gray100, 0.02),
danger: RGBA(COLOR.red, 0.08), danger: RGBA(COLOR.red, 0.08),
}, },
overlayPrimary: RGBA(GRAY_SCALE.gray90, 0.8), overlayPrimary: RGBA(GRAY_SCALE.gray80, 0.8),
overlaySecondary: RGBA(GRAY_SCALE.gray90, 0.4), overlaySecondary: RGBA(GRAY_SCALE.gray80, 0.4),
overlayTertiary: RGBA(GRAY_SCALE.gray90, 0.08), overlayTertiary: RGBA(GRAY_SCALE.gray80, 0.08),
radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`, 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%)`, radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
primaryInverted: GRAY_SCALE.gray60, primaryInverted: GRAY_SCALE.gray60,