made the banner respect themekind for shadows (#831)

<!-- Please read
https://github.com/SableClient/Sable/blob/dev/CONTRIBUTING.md before
submitting your pull request -->

### Description

<!-- Please include a summary of the change. Please also include
relevant motivation and context. List any dependencies that are required
for this change. -->
(when dark theme)
<img width="232" height="195" alt="image"
src="https://github.com/user-attachments/assets/755ddc4e-046e-4227-a361-eef0ad4717f0"
/>
<img width="247" height="195" alt="image"
src="https://github.com/user-attachments/assets/faf6abdc-fd86-4f0a-9fd2-537fa083bfcd"
/>

(when light theme)
<img width="250" height="191" alt="image"
src="https://github.com/user-attachments/assets/615d13f8-42eb-43f9-be6e-da5acbfe4e16"
/>
<img width="225" height="195" alt="image"
src="https://github.com/user-attachments/assets/48efd21f-03d1-414c-bd6f-cbd477aaac00"
/>

Fixes #

#### Type of change

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] This change requires a documentation update

### Checklist:

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings

### AI disclosure:

- [ ] Partially AI assisted (clarify which code was AI assisted and
briefly explain what it does).
- [ ] Fully AI generated (explain what all the generated code does in
moderate detail).
<!-- Write any explanation required here, but do not generate the
explanation using AI!! You must prove you understand what the code in
this PR does. -->

Author: nushea

src/app/pages/client/space/Space.tsx

@@ -12,6 +12,10 @@ import {
   Line,
   Menu,
   MenuItem,
+  Modal,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
   PopOut,
   Spinner,
   Text,
@@ -88,6 +92,8 @@ import { nameInitials } from '$utils/common';
 import { useMediaAuthentication } from '$hooks/useMediaAuthentication';
 import { CustomStateEvent } from '$types/matrix/room';
 import type { RoomBannerContent } from '$types/matrix-sdk-events';
+import { ModalWide } from '$styles/Modal.css';
+import { ImageViewer } from '$components/image-viewer';
 import * as css from './styles.css';
 import { ClientSideHoverFreeze } from '$components/ClientSideHoverFreeze';
 
@@ -283,6 +289,11 @@ function SpaceHeader({ hideText, mx }: { hideText?: boolean; mx: MatrixClient })
   const bannerURI = mxcUrlToHttp(mx, bannerMXC ?? '', true);
   const hasBanner = !!(bannerURI && !hideText && showBanners);
 
+  const [bannerViewerOpen, setBannerViewerOpen] = useState(false);
+  useEffect(() => {
+    if (!hasBanner) setBannerViewerOpen(false);
+  }, [hasBanner]);
+
   return (
     <>
       <div className={hasBanner ? css.RoomCoverHeaderContainer : ''}>
@@ -310,7 +321,12 @@ function SpaceHeader({ hideText, mx }: { hideText?: boolean; mx: MatrixClient })
               </Box>
             ) : (
               <Box grow="Yes" gap="300">
-                <Box grow="Yes" alignItems="Center" gap="100">
+                <Box
+                  grow="Yes"
+                  alignItems="Center"
+                  gap="100"
+                  style={hasBanner ? { color: '#fff' } : {}}
+                >
                   <Text size="H4" truncate>
                     {spaceName}
                   </Text>
@@ -320,7 +336,7 @@ function SpaceHeader({ hideText, mx }: { hideText?: boolean; mx: MatrixClient })
                   <IconButton
                     aria-pressed={!!menuAnchor}
                     variant="Background"
-                    style={hasBanner ? { backgroundColor: '#0000' } : {}}
+                    style={hasBanner ? { backgroundColor: '#0000', color: '#fff' } : {}}
                     onClick={handleOpenMenu}
                   >
                     <Icon src={Icons.VerticalDots} size="200" />
@@ -363,21 +379,57 @@ function SpaceHeader({ hideText, mx }: { hideText?: boolean; mx: MatrixClient })
                 src={bannerURI}
                 alt={`${spaceName}'s banner`}
                 draggable="false"
+                role="button"
+                tabIndex={0}
+                aria-label={`View ${spaceName} banner`}
+                onClick={() => setBannerViewerOpen(true)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    setBannerViewerOpen(true);
+                  }
+                }}
+              />
+              <SidebarResizer
+                setCurWidth={setCurHeight}
+                sidebarWidth={roomBannerHeight}
+                setSidebarWidth={setRoomBannerHeight}
+                instep={50}
+                outstep={60}
+                minValue={50}
+                maxValue={500}
+                topSided
               />
             </ClientSideHoverFreeze>
           </div>
-          <SidebarResizer
-            setCurWidth={setCurHeight}
-            sidebarWidth={roomBannerHeight}
-            setSidebarWidth={setRoomBannerHeight}
-            instep={50}
-            outstep={60}
-            minValue={50}
-            maxValue={500}
-            topSided
-          />
         </>
       )}
+      {hasBanner && bannerViewerOpen && (
+        <Overlay open backdrop={<OverlayBackdrop />}>
+          <OverlayCenter>
+            <FocusTrap
+              focusTrapOptions={{
+                initialFocus: false,
+                onDeactivate: () => setBannerViewerOpen(false),
+                clickOutsideDeactivates: true,
+                escapeDeactivates: stopPropagation,
+              }}
+            >
+              <Modal
+                className={ModalWide}
+                size="500"
+                onContextMenu={(evt: React.MouseEvent) => evt.stopPropagation()}
+              >
+                <ImageViewer
+                  src={bannerURI}
+                  alt={`${spaceName} banner`}
+                  requestClose={() => setBannerViewerOpen(false)}
+                />
+              </Modal>
+            </FocusTrap>
+          </OverlayCenter>
+        </Overlay>
+      )}
     </>
   );
 }

src/app/pages/client/space/styles.css.ts

@@ -8,7 +8,7 @@ export const RoomCoverNavContainer = style({
   width: '100%',
   zIndex: '10000',
   top: '0',
-  background: 'linear-gradient(0deg,#0000 0%, rgb(0, 0, 0) 120%)',
+  background: 'linear-gradient(180deg, #000 0%, #0000 100%)',
 });
 export const RoomCoverlessNavContainer = recipe({
   base: {