From 593d58b62295d9969852eff2f6e23198db5e8b0a Mon Sep 17 00:00:00 2001 From: martincupela Date: Mon, 16 Feb 2026 14:59:46 +0100 Subject: [PATCH 1/2] refactor: change CSS variable name --control-play-control-bg-inverse to --control-play-control-bg --- src/components/MessageInput/styling/QuotedMessagePreview.scss | 4 ++-- src/components/VideoPlayer/styling/VideoThumbnail.scss | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/MessageInput/styling/QuotedMessagePreview.scss b/src/components/MessageInput/styling/QuotedMessagePreview.scss index c3cd6eee1..9a516dd6a 100644 --- a/src/components/MessageInput/styling/QuotedMessagePreview.scss +++ b/src/components/MessageInput/styling/QuotedMessagePreview.scss @@ -73,14 +73,14 @@ left: 10px; top: 10px; border-radius: var(--radius-max); - background-color: var(--control-play-control-bg-inverse); + background-color: var(--control-play-control-bg); .str-chat__icon--play-solid { height: 12px; width: 12px; path { - fill: var(--control-play-control-icon-inverse); + fill: var(--control-play-control-icon); } } } diff --git a/src/components/VideoPlayer/styling/VideoThumbnail.scss b/src/components/VideoPlayer/styling/VideoThumbnail.scss index bf21d2e64..3efd17a6e 100644 --- a/src/components/VideoPlayer/styling/VideoThumbnail.scss +++ b/src/components/VideoPlayer/styling/VideoThumbnail.scss @@ -20,7 +20,7 @@ height: $size; width: $size; border-radius: var(--radius-max); - background-color: var(--control-play-control-bg-inverse); + background-color: var(--control-play-control-bg); left: calc(50% - calc($size / 2)); top: calc(50% - calc($size / 2)); @@ -29,7 +29,7 @@ width: calc($size / 2); path { - fill: var(--control-play-control-icon-inverse); + fill: var(--control-play-control-icon); } } } From ec2bb222e2a32f71ca9edcaf7765521bb4a9c7b0 Mon Sep 17 00:00:00 2001 From: martincupela Date: Mon, 16 Feb 2026 15:00:26 +0100 Subject: [PATCH 2/2] fix: return modal-close-button as opt-in and remove modal inner box shaod --- src/components/Attachment/ModalGallery.tsx | 2 + src/components/Gallery/styling/Gallery.scss | 3 +- .../Modal/CloseButtonOnModalOverlay.tsx | 22 +++++ src/components/Modal/GlobalModal.tsx | 9 +- src/components/Modal/Modal.tsx | 21 ++++- src/components/Modal/styling/Modal.scss | 92 +++++++++---------- 6 files changed, 95 insertions(+), 54 deletions(-) create mode 100644 src/components/Modal/CloseButtonOnModalOverlay.tsx diff --git a/src/components/Attachment/ModalGallery.tsx b/src/components/Attachment/ModalGallery.tsx index 00917402d..2d2377366 100644 --- a/src/components/Attachment/ModalGallery.tsx +++ b/src/components/Attachment/ModalGallery.tsx @@ -6,6 +6,7 @@ import { BaseImage, Gallery as DefaultGallery, GalleryUI } from '../Gallery'; import { GlobalModal } from '../Modal'; import { useComponentContext, useTranslationContext } from '../../context'; import { VideoThumbnail } from '../VideoPlayer/VideoThumbnail'; +import { CloseButtonOnModalOverlay } from '../Modal/CloseButtonOnModalOverlay'; const MAX_VISIBLE_THUMBNAILS = 4; @@ -80,6 +81,7 @@ export const ModalGallery = ({ className, items, modalClassName }: ModalGalleryP diff --git a/src/components/Gallery/styling/Gallery.scss b/src/components/Gallery/styling/Gallery.scss index 047b28ed4..2df6d26ef 100644 --- a/src/components/Gallery/styling/Gallery.scss +++ b/src/components/Gallery/styling/Gallery.scss @@ -166,11 +166,12 @@ &.str-chat__modal.str-chat__gallery-modal, &.str-chat__modal.str-chat__image-modal { .str-chat__modal__inner { - background-color: transparent; width: 90%; height: 80%; max-height: 80vh; padding: var(--spacing-md); + background-color: transparent; + box-shadow: none; } } diff --git a/src/components/Modal/CloseButtonOnModalOverlay.tsx b/src/components/Modal/CloseButtonOnModalOverlay.tsx new file mode 100644 index 000000000..f7bc068f4 --- /dev/null +++ b/src/components/Modal/CloseButtonOnModalOverlay.tsx @@ -0,0 +1,22 @@ +import { Button } from '../Button'; +import { IconCross } from '../Icons'; +import type { ComponentProps } from 'react'; +import clsx from 'clsx'; + +export const CloseButtonOnModalOverlay = ({ + children, + className, + ...props +}: ComponentProps<'button'>) => ( + +); diff --git a/src/components/Modal/GlobalModal.tsx b/src/components/Modal/GlobalModal.tsx index fbd8854b4..c626d2dfd 100644 --- a/src/components/Modal/GlobalModal.tsx +++ b/src/components/Modal/GlobalModal.tsx @@ -15,6 +15,7 @@ import type { ModalCloseEvent, ModalCloseSource, ModalProps } from './Modal'; export const GlobalModal = ({ children, className, + CloseButtonOnOverlay, onClose, onCloseAttempt, open, @@ -37,12 +38,11 @@ export const GlobalModal = ({ const handleClick = (event: React.MouseEvent) => { const target = event.target as HTMLButtonElement | HTMLDivElement; - if (!innerRef.current || !closeButtonRef.current) return; if (innerRef.current?.contains(target)) return; - if (closeButtonRef.current.contains(target)) { + if (closeButtonRef.current?.contains(target)) { maybeClose('button', event); - } else if (!innerRef.current.contains(target)) { + } else if (!innerRef.current?.contains(target)) { maybeClose('overlay', event); } }; @@ -83,6 +83,9 @@ export const GlobalModal = ({ {children} + {CloseButtonOnOverlay && ( + + )} ); diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx index 7d1d4c19e..8853893b3 100644 --- a/src/components/Modal/Modal.tsx +++ b/src/components/Modal/Modal.tsx @@ -1,5 +1,12 @@ import clsx from 'clsx'; -import React, { type PropsWithChildren, useCallback, useEffect, useRef } from 'react'; +import React, { + type ComponentProps, + type ComponentType, + type PropsWithChildren, + useCallback, + useEffect, + useRef, +} from 'react'; import { FocusScope } from '@react-aria/focus'; export type ModalCloseEvent = @@ -14,6 +21,8 @@ export type ModalProps = { open: boolean; /** Custom class to be applied to the modal root div */ className?: string; + /** If provided, the close button is rendered on overlay */ + CloseButtonOnOverlay?: ComponentType>; /** Callback handler for closing of modal. */ onClose?: (event: ModalCloseEvent) => void; /** Optional handler to intercept closing logic. Return false to prevent onClose. */ @@ -23,6 +32,7 @@ export type ModalProps = { export const Modal = ({ children, className, + CloseButtonOnOverlay, onClose, onCloseAttempt, open, @@ -42,11 +52,11 @@ export const Modal = ({ const handleClick = (event: React.MouseEvent) => { const target = event.target as HTMLButtonElement | HTMLDivElement; - if (!innerRef.current || !closeButtonRef.current) return; + if (innerRef.current?.contains(target)) return; - if (closeButtonRef.current.contains(target)) { + if (closeButtonRef.current?.contains(target)) { maybeClose('button', event); - } else if (!innerRef.current.contains(target)) { + } else if (!innerRef.current?.contains(target)) { maybeClose('overlay', event); } }; @@ -77,6 +87,9 @@ export const Modal = ({ {children} + {CloseButtonOnOverlay && ( + + )} ); }; diff --git a/src/components/Modal/styling/Modal.scss b/src/components/Modal/styling/Modal.scss index e64ee27e9..bc0965f97 100644 --- a/src/components/Modal/styling/Modal.scss +++ b/src/components/Modal/styling/Modal.scss @@ -1,5 +1,37 @@ @use '../../../styling/utils'; +.str-chat { + /* The border radius used for the borders of the content area of the component of the content area of the component */ + --str-chat__modal-border-radius: var(--radius-xl); + + /* The text/icon color of the content area of the component */ + --str-chat__modal-color: var(--str-chat__text-color); + + /* The background color of the content area of the component */ + --str-chat__modal-background-color: var(--background-elevation-elevation-1); + + /* The overlay color of the component */ + --str-chat__modal-overlay-color: var(--background-core-scrim); + + /* The backdrop filter applied to the component */ + --str-chat__modal-overlay-backdrop-filter: blur(3px); + + /* Top border of the content area of the component */ + --str-chat__modal-border-block-start: none; + + /* Bottom border of the content area of the component */ + --str-chat__modal-border-block-end: none; + + /* Left (right in RTL layout) border of the content area of the component */ + --str-chat__modal-border-inline-start: none; + + /* Right (left in RTL layout) border of the content area of the component */ + --str-chat__modal-border-inline-end: none; + + /* Box shadow applied to the content area of the component */ + --str-chat__modal-box-shadow: var(--str-chat__box-shadow-elevation-1); +} + .str-chat__modal--open { @include utils.flex-col-center; position: fixed; @@ -10,8 +42,11 @@ width: 100%; height: 100%; z-index: 100; + background-color: var(--str-chat__modal-overlay-color); + backdrop-filter: var(--str-chat__modal-overlay-backdrop-filter); .str-chat__modal__inner { + @include utils.component-layer-overrides('modal'); @include utils.flex-col-center; position: relative; padding: var(--str-chat__spacing-8) var(--str-chat__spacing-4); @@ -44,52 +79,17 @@ background-image: var(--str-chat__arrow-left-icon); } } -} - -.str-chat { - /* The border radius used for the borders of the content area of the component of the content area of the component */ - --str-chat__modal-border-radius: var(--radius-xl); - - /* The text/icon color of the content area of the component */ - --str-chat__modal-color: var(--str-chat__text-color); - - /* The background color of the content area of the component */ - --str-chat__modal-background-color: var(--background-elevation-elevation-1); - - /* The overlay color of the component */ - --str-chat__modal-overlay-color: var(--background-core-scrim); - - /* The backdrop filter applied to the component */ - --str-chat__modal-overlay-backdrop-filter: blur(3px); - - /* Top border of the content area of the component */ - --str-chat__modal-border-block-start: none; - - /* Bottom border of the content area of the component */ - --str-chat__modal-border-block-end: none; - - /* Left (right in RTL layout) border of the content area of the component */ - --str-chat__modal-border-inline-start: none; - - /* Right (left in RTL layout) border of the content area of the component */ - --str-chat__modal-border-inline-end: none; - - /* Box shadow applied to the content area of the component */ - --str-chat__modal-box-shadow: var(--str-chat__box-shadow-elevation-1); - // todo: remove these two variables? - /* The background color of the close button */ - --str-chat__modal-close-icon-background: var(--str-chat__text-low-emphasis-color); + .str-chat__modal__overlay__close-button { + position: absolute; + right: 10px; + top: 10px; + padding: var(--spacing-xs); + color: var(--text-on-accent); - /* The icon color of the close button */ - --str-chat__modal-close-icon-color: var(--str-chat__on-disabled-color); -} - -.str-chat__modal { - background-color: var(--str-chat__modal-overlay-color); - backdrop-filter: var(--str-chat__modal-overlay-backdrop-filter); - - .str-chat__modal__inner { - @include utils.component-layer-overrides('modal'); + svg { + height: 12px; + width: 12px; + } } -} +} \ No newline at end of file