feat: return modal's close button

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
       </div>
       <Modal
         className={clsx('str-chat__gallery-modal', modalClassName)}
+        CloseButtonOnOverlay={CloseButtonOnModalOverlay}
         onClose={closeModal}
         open={modalOpen}
       >

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;
     }
   }
 

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);
           }
         }
       }

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'>) => (
+  <Button
+    {...props}
+    className={clsx(
+      'str-chat__modal__overlay__close-button',
+      'str-chat__button--circular',
+      'str-chat__button--ghost',
+      className,
+    )}
+  >
+    {children ?? <IconCross />}
+  </Button>
+);

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<HTMLButtonElement | HTMLDivElement>) => {
     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}
           </div>
         </FocusScope>
+        {CloseButtonOnOverlay && (
+          <CloseButtonOnOverlay onClick={handleClick} ref={closeButtonRef} />
+        )}
       </div>
     </DialogPortalEntry>
   );

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<ComponentProps<'button'>>;
   /** 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<HTMLButtonElement | HTMLDivElement>) => {
     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}
         </div>
       </FocusScope>
+      {CloseButtonOnOverlay && (
+        <CloseButtonOnOverlay onClick={handleClick} ref={closeButtonRef} />
+      )}
     </div>
   );
 };

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;
+    }
   }
-}
+}

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);
         }
       }
     }