allow theming + fix dark mode (#34)

paranext · Sep 11, 2024 · e763406 · e763406
2 parents 5348738 + 5d11815
commit e763406
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 54 deletions.
diff --git a/src/paratext-bible-text-collection/src/web-views/components/verse-display.component.tsx b/src/paratext-bible-text-collection/src/web-views/components/verse-display.component.tsx
@@ -1,17 +1,24 @@
+import { UseWebViewStateHook } from '@papi/core';
 import { useProjectData } from '@papi/frontend/react';
 import { VerseRef } from '@sillsdev/scripture';
-import { UseWebViewStateHook } from '@papi/core';
 
-import { Tooltip, IconButton, Menu, MenuItem, Divider } from '@mui/material';
 import {
   HighlightOff,
   RestartAlt,
+  VerticalAlignBottom,
+  VerticalAlignTop,
   ZoomIn,
   ZoomOut,
-  VerticalAlignTop,
-  VerticalAlignBottom,
 } from '@mui/icons-material';
-import { useState, MouseEvent } from 'react';
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from 'platform-bible-react';
+import { MouseEvent } from 'react';
 import { ProjectInfo } from '../../util';
 
 const defaultFontSize: number = 16;
@@ -48,17 +55,7 @@ function VerseDisplay({
     projectId,
   ).VersePlainText(verseRef, '');
   const [fontSize, setFontSize] = useWebViewState<number>(`fontSize_${projectId}`, defaultFontSize);
-  const [anchorEl, setAnchorEl] = useState<undefined | HTMLElement>(undefined);
 
-  const handleOpenMenu = (event: MouseEvent<HTMLElement>) => {
-    event.stopPropagation();
-    setAnchorEl(event.currentTarget);
-  };
-  const isOpen = !!anchorEl;
-  const handleCloseMenu = (event: MouseEvent<HTMLElement>) => {
-    event.stopPropagation();
-    setAnchorEl(undefined);
-  };
   const handleCloseProject = (event: MouseEvent<HTMLElement>) => {
     event.stopPropagation();
     onCloseProject(projectId);
@@ -86,65 +83,60 @@ function VerseDisplay({
     >
       <div className="row">
         <div className="title">{projectInfo?.name || '...'}</div>
-        <div>
-          <Tooltip title="More Actions">
-            <IconButton onClick={handleOpenMenu} size="small" sx={{ ml: 2 }}>
-              ...
-            </IconButton>
-          </Tooltip>
-          <Menu
-            className="context-menu"
-            anchorEl={anchorEl}
-            open={isOpen}
-            onClose={handleCloseMenu}
-            transformOrigin={{ horizontal: 'right', vertical: 'top' }}
-            anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
-          >
-            <MenuItem onClick={handleCloseProject}>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost">&#x22ee;</Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem onClick={handleCloseProject}>
               <HighlightOff /> Close Text
-            </MenuItem>
-            <Divider />
-            <MenuItem
+            </DropdownMenuItem>
+
+            <DropdownMenuSeparator />
+
+            <DropdownMenuItem
               onClick={(event) => {
                 handleZoom(event, fontSize + 1);
               }}
             >
               <ZoomIn /> Zoom in
-            </MenuItem>
-            <MenuItem
+            </DropdownMenuItem>
+            <DropdownMenuItem
               onClick={(event) => {
                 handleZoom(event, fontSize - 1);
               }}
             >
               <ZoomOut /> Zoom out
-            </MenuItem>
-            <MenuItem
+            </DropdownMenuItem>
+            <DropdownMenuItem
               onClick={(event) => {
                 handleZoom(event, defaultFontSize);
               }}
               disabled={fontSize === defaultFontSize}
             >
               <RestartAlt /> Zoom Reset
-            </MenuItem>
-            <Divider />
-            <MenuItem
+            </DropdownMenuItem>
+
+            <DropdownMenuSeparator />
+
+            <DropdownMenuItem
               onClick={(event) => {
                 handleProjectUpDown(event, true);
               }}
               disabled={isFirstProject}
             >
               <VerticalAlignTop /> Move Up
-            </MenuItem>
-            <MenuItem
+            </DropdownMenuItem>
+            <DropdownMenuItem
               onClick={(event) => {
                 handleProjectUpDown(event, false);
               }}
               disabled={isLastProject}
             >
               <VerticalAlignBottom /> Move Down
-            </MenuItem>
-          </Menu>
-        </div>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
       </div>
       <p className="text" style={{ fontSize }}>
         {versePlainText}

diff --git a/src/paratext-bible-text-collection/src/web-views/editor-styles/_editor-overrides.scss b/src/paratext-bible-text-collection/src/web-views/editor-styles/_editor-overrides.scss
@@ -17,9 +17,32 @@
   padding: 0;
 }
 
+// CAUTION: Keep in sync with https://github.com/paranext/paranext-core/blob/main/extensions/src/platform-scripture-editor/src/_editor-overrides.scss
 body {
-  background-color: white;
-  color: black;
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+}
+
+// text selection
+:focus ::selection {
+  color: hsl(var(--primary-foreground));
+  background-color: hsl(var(--primary));
+}
+
+::selection {
+  color: hsl(var(--secondary-foreground));
+  background-color: hsl(var(--secondary));
+}
+
+// inside the editor
+
+.editor-inner {
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
+}
+
+.formatted-font .verse {
+  background-color: hsl(var(--secondary));
 }
 
 // #endregion

diff --git a/src/paratext-bible-text-collection/src/web-views/paratext-text-collection.web-view.scss b/src/paratext-bible-text-collection/src/web-views/paratext-text-collection.web-view.scss
@@ -49,7 +49,7 @@ body {
   line-height: 1.75;
   letter-spacing: 0.02857em;
   text-transform: uppercase;
-  color: #336e0b;
+  color: hsl(var(--primary));
 }
 
 .verse-view {
@@ -63,7 +63,8 @@ body {
     cursor: pointer;
 
     &.selected {
-      background-color: #eee;
+      background-color: hsl(var(--muted));
+      color: hsl(var(--muted-foreground));
     }
 
     .title {

diff --git a/src/paratext-bible-text-collection/src/web-views/paratext-text-collection.web-view.tsx b/src/paratext-bible-text-collection/src/web-views/paratext-text-collection.web-view.tsx
@@ -1,7 +1,7 @@
 import papi from '@papi/frontend';
 import { useDialogCallback } from '@papi/frontend/react';
 import { Fragment, useCallback, useEffect, useMemo } from 'react';
-import { IconButton, ScriptureReference, usePromise } from 'platform-bible-react';
+import { Button, ScriptureReference, usePromise } from 'platform-bible-react';
 import { deepEqual } from 'platform-bible-utils';
 import { VerseRef } from '@sillsdev/scripture';
 import { WebViewProps } from '@papi/core';
@@ -146,14 +146,15 @@ globalThis.webViewComponent = function TextCollectionWebView({
             </Fragment>
           );
         })}
-      <IconButton
-        label="Select projects"
-        size="medium"
+      <Button
+        title="Select projects"
+        size="icon"
+        variant="ghost"
         className="select-projects-button"
         onClick={() => selectProjects()}
       >
         +
-      </IconButton>
+      </Button>
     </div>
   );
 

diff --git a/src/paratext-bible-word-list/src/word-list.web-view.tsx b/src/paratext-bible-word-list/src/word-list.web-view.tsx
@@ -133,6 +133,7 @@ globalThis.webViewComponent = function WordListWebView({
           value={wordFilter}
           onChange={(event) => onChangeWordFilter(event)}
           isFullWidth
+          className="pr-text-foreground"
         />
         <Switch
           isChecked={showWordCloud}