diff --git a/lib/components/modal-overlay.css b/lib/components/modal-overlay.css --- a/lib/components/modal-overlay.css +++ b/lib/components/modal-overlay.css @@ -5,7 +5,6 @@ height: 100%; z-index: 4; width: 100%; - background-color: #000000e6; display: flex; flex-direction: column; align-items: center; diff --git a/lib/components/modal-overlay.react.js b/lib/components/modal-overlay.react.js --- a/lib/components/modal-overlay.react.js +++ b/lib/components/modal-overlay.react.js @@ -9,10 +9,16 @@ +onClose: () => void, +children?: React.Node, +disableAutoFocus?: boolean, + +backgroundColor?: string, }; function ModalOverlay(props: ModalOverlayProps): React.Node { - const { children, onClose, disableAutoFocus } = props; + const { + children, + onClose, + disableAutoFocus, + backgroundColor = 'var(--modal-overlay-background-90)', + } = props; const overlayRef = React.useRef(); const firstClickRef = React.useRef(null); @@ -48,6 +54,13 @@ [onClose], ); + const containerStyle = React.useMemo( + () => ({ + backgroundColor: backgroundColor, + }), + [backgroundColor], + ); + return (
{children}
diff --git a/web/chat/edit-message-provider.js b/web/chat/edit-message-provider.js --- a/web/chat/edit-message-provider.js +++ b/web/chat/edit-message-provider.js @@ -142,7 +142,11 @@ return null; } return ( - + {modal} ); diff --git a/web/theme.css b/web/theme.css --- a/web/theme.css +++ b/web/theme.css @@ -221,4 +221,6 @@ --pin-message-modal-border-color: var(--shades-black-80); --pinned-count-banner-color: var(--shades-black-90); --pinned-count-text-color: var(--shades-white-90); + --modal-overlay-background-90: rgba(0, 0, 0, 0.9); + --modal-overlay-background-80: rgba(0, 0, 0, 0.8); }