sc 2

web/packages/base/components/utils/mui-theme.d.ts

@@ -145,8 +145,9 @@ declare module "@mui/material/styles" {
              * even when the app is in light mode.
              */
             dark: {
-                background: TypeBackground;
-                text: TypeText;
+                background: Omit<TypeBackground, "elevatedPaper">;
+                text: Omit<TypeText, "primary" | "secondary" | "disabled">;
+                divider: string;
             };
         };
         /**

web/packages/base/components/utils/theme.ts

@@ -117,6 +117,16 @@ const getTheme = (appName: AppName): Theme => {
  */
 const getColors = (appName: AppName) => ({
     ..._colors,
+    ...{
+        fixed: {
+            ..._colors.fixed,
+            dark: {
+                background: _colors.dark.background,
+                text: _colors.dark.text,
+                divider: _colors.dark.stroke.faint
+            },
+        },
+    },
     ...{
         accent: appName == "auth" ? _colors.accentAuth : _colors.accentPhotos,
     },
@@ -151,19 +161,6 @@ const _colors = {
             light: "#ff6565",
         },
         switchOn: "#2eca45",
-        dark: {
-            // Duplicated from "dark" below.
-            background: {
-                default: "#000",
-                paper: "#1b1b1b",
-                paper2: "#252525",
-            },
-            text: {
-                base: "#fff",
-                muted: "rgba(255 255 255 / 0.70)",
-                faint: "rgba(255 255 255 / 0.50)",
-            },
-        },
     },
     light: {
         // Keep these solid.

web/packages/gallery/components/viewer/FileViewer.tsx

@@ -43,14 +43,7 @@ import EditIcon from "@mui/icons-material/Edit";
 import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";
 import FullscreenExitOutlinedIcon from "@mui/icons-material/FullscreenExitOutlined";
 import FullscreenOutlinedIcon from "@mui/icons-material/FullscreenOutlined";
-import {
-    Button,
-    Divider,
-    Menu,
-    MenuItem,
-    styled,
-    Typography,
-} from "@mui/material";
+import { Button, Menu, MenuItem, styled, Typography } from "@mui/material";
 import { t } from "i18next";
 import React, {
     useCallback,
@@ -748,7 +741,15 @@ const FileViewer: React.FC<FileViewerProps> = ({
                         <EditIcon />
                     </MoreMenuItem>
                 )}
-                <MoreMenuItem onClick={handleToggleFullscreen}>
+                <MoreMenuItem
+                    onClick={handleToggleFullscreen}
+                    divider
+                    sx={{
+                        borderColor: "fixed.dark.divider",
+                        /* 12px + 2px */
+                        pb: "14px",
+                    }}
+                >
                     <MoreMenuItemTitle>
                         {
                             /*TODO */ isFullscreen
@@ -762,11 +763,8 @@ const FileViewer: React.FC<FileViewerProps> = ({
                         <FullscreenOutlinedIcon />
                     )}
                 </MoreMenuItem>
-                <Divider sx={{}} />
-                <MoreMenuItem onClick={showShortcuts}>
-                    <Typography
-                        sx={{ opacity: 0.7 /* theme.dark.background.paper2 */ }}
-                    >
+                <MoreMenuItem onClick={showShortcuts} sx={{ mt: "2px" }}>
+                    <Typography sx={{ color: "fixed.dark.text.faint" }}>
                         {pt("Shortcuts")}
                     </Typography>
                 </MoreMenuItem>