address comment, update epub settings menu and icon sizes

jackiequach · jackiequach · commit 972c1849dde3 · 2026-02-05T17:04:00.000-05:00
diff --git a/src/PdfReader/index.tsx b/src/PdfReader/index.tsx
@@ -267,7 +267,7 @@ export default function usePdfReader(args: PdfReaderArguments): ReaderReturn {
   }, [state.scale]);
 
   const rotateLeft = React.useCallback(async () => {
-    dispatch({ type: 'ROTATE_LEFT' });
+    dispatch({ type: 'ROTATE_COUNTER_CLOCKWISE' });
   }, []);
 
   const goToPage = React.useCallback(async (href: string) => {
diff --git a/src/PdfReader/reducer.ts b/src/PdfReader/reducer.ts
@@ -229,7 +229,7 @@ export function makePdfReducer(
       case 'SET_FIT_MODE':
         return { ...state, fitMode: action.fitMode, scale: 1 };
 
-      case 'ROTATE_LEFT':
+      case 'ROTATE_COUNTER_CLOCKWISE':
         return {
           ...state,
           rotation: ((state.rotation ?? 0) - 90 + 360) % 360,
diff --git a/src/PdfReader/types.ts b/src/PdfReader/types.ts
@@ -64,5 +64,5 @@ export type PdfReaderAction =
       width: number | undefined;
     }
   | { type: 'SET_FIT_MODE'; fitMode: FitMode }
-  | { type: 'ROTATE_LEFT' }
+  | { type: 'ROTATE_COUNTER_CLOCKWISE' }
   | { type: 'BOOK_BOUNDARY_CHANGED'; atStart: boolean; atEnd: boolean };
diff --git a/src/ui/Button.tsx b/src/ui/Button.tsx
@@ -29,7 +29,10 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
           height: '2rem',
           width: '2rem',
         }
-      : {};
+      : {
+          border: '1px solid',
+          borderColor: 'ui.typography.body',
+        };
 
     return <ChakraButton ref={ref} variant="solid" {...iconProps} {...props} />;
   }
diff --git a/src/ui/Header.tsx b/src/ui/Header.tsx
@@ -8,8 +8,7 @@ import HtmlFontSizeControls from './HtmlFontSizeControls';
 import {
   PageDown,
   PageUp,
-  Reset,
-  Search,
+  Rotate,
   ToggleFullScreen,
   ToggleFullScreenExit,
 } from './icons';
@@ -123,15 +122,15 @@ export default function Header(
             <Icon
               as={FitHeightWidth}
               fitMode={fitMode === 'width' ? 'width' : 'height'}
-              w={6}
-              h={6}
+              w={18}
+              h={18}
             />
           </Button>
         </Tooltip>
         {type === 'PDF' && (
           <Tooltip content="Rotate left">
             <Button isIcon onClick={navigator.rotateLeft}>
-              <Icon as={Reset} w={6} h={6} />
+              <Icon as={Rotate} w={18} h={18} />
             </Button>
           </Tooltip>
         )}
@@ -144,7 +143,7 @@ export default function Header(
             isDisabled={currentPage <= 1}
             isIcon
           >
-            <Icon as={PageUp} w={6} h={6} />
+            <Icon as={PageUp} w={18} h={18} />
           </Button>
         </Tooltip>
         <HStack color="ui.white" spacing={2} fontSize="sm" alignItems="center">
@@ -176,16 +175,11 @@ export default function Header(
             isDisabled={currentPage >= totalPages}
             isIcon
           >
-            <Icon as={PageDown} w={6} h={6} />
+            <Icon as={PageDown} w={18} h={18} />
           </Button>
         </Tooltip>
       </HStack>
       <HStack ml="auto" spacing={2}>
-        <Tooltip content="Search inside">
-          <Button isIcon>
-            <Icon as={Search} w={6} h={6} />
-          </Button>
-        </Tooltip>
         <TableOfContent
           containerRef={containerRef}
           navigator={navigator}
@@ -208,8 +202,8 @@ export default function Header(
           >
             <Icon
               as={isFullscreen ? ToggleFullScreenExit : ToggleFullScreen}
-              w={6}
-              h={6}
+              w={18}
+              h={18}
             />
           </Button>
         </Tooltip>
diff --git a/src/ui/HtmlFontSizeControls.tsx b/src/ui/HtmlFontSizeControls.tsx
@@ -28,7 +28,7 @@ export default function HtmlFontSizeControls(
           onClick={increaseFontSize}
           isIcon
         >
-          <Icon as={ZoomIn} w={6} h={6} />
+          <Icon as={ZoomIn} w={18} h={18} />
         </Button>
       </Tooltip>
       <Tooltip content="Decrease font size">
@@ -37,7 +37,7 @@ export default function HtmlFontSizeControls(
           onClick={decreaseFontSize}
           isIcon
         >
-          <Icon as={ZoomOut} w={6} h={6} />
+          <Icon as={ZoomOut} w={18} h={18} />
         </Button>
       </Tooltip>
     </ButtonGroup>
diff --git a/src/ui/HtmlSettings.tsx b/src/ui/HtmlSettings.tsx
@@ -1,9 +1,10 @@
-import { Box, Heading, Text } from '@chakra-ui/react';
+import { Box, ButtonGroup, Heading, Icon, Text } from '@chakra-ui/react';
 import * as React from 'react';
-import { FONT_DETAILS } from '../constants';
-import { HtmlNavigator, ReaderState } from '../types';
+import { DEFAULT_SETTINGS, FONT_DETAILS } from '../constants';
+import { HtmlNavigator, ReaderSettings, ReaderState } from '../types';
+import Button from './Button';
 import useColorModeValue from './hooks/useColorModeValue';
-import { Day, Night, Sepia } from './icons';
+import { Day, Night, Reset, Sepia, ZoomIn, ZoomOut } from './icons';
 import Tabs from './Tabs';
 import { ColorModeToggleButton } from './ToggleButton';
 import ToggleGroup from './ToggleGroup';
@@ -30,7 +31,13 @@ export default function HtmlSettings(
   if (!readerState.settings) return null;
   const { colorMode, fontFamily } = readerState.settings;
 
-  const { setFontFamily, setColorMode } = navigator;
+  const {
+    decreaseFontSize,
+    increaseFontSize,
+    resetSettings,
+    setFontFamily,
+    setColorMode,
+  } = navigator;
 
   return (
     <>
@@ -66,6 +73,7 @@ export default function HtmlSettings(
         display="flex"
         flexDirection="column"
         p={4}
+        gap={4}
       >
         <Heading
           as="h3"
@@ -116,7 +124,86 @@ export default function HtmlSettings(
             textColor="ui.black"
           />
         </ToggleGroup>
+        <ButtonGroup display="flex" spacing={4}>
+          <Button
+            onClick={resetSettings}
+            aria-label="Reset settings"
+            bgColor="ui.white"
+            width="150px"
+          >
+            <Icon
+              as={Reset}
+              w={18}
+              h={18}
+              mr={1.5}
+              sx={{
+                path: { stroke: 'ui.typography.body' },
+              }}
+            />
+            Reset all
+          </Button>
+          <Button
+            onClick={decreaseFontSize}
+            aria-label="Increase text"
+            bgColor="ui.white"
+            width="150px"
+            sx={{
+              _active: {
+                bgColor: checkedButtonBgColor,
+              },
+            }}
+          >
+            <Icon
+              as={ZoomIn}
+              w={18}
+              h={18}
+              mr={1.5}
+              sx={{
+                path: { stroke: 'ui.typography.body' },
+              }}
+            />
+            Increase text
+          </Button>
+          <Button
+            onClick={increaseFontSize}
+            aria-label="decrease text"
+            bgColor="ui.white"
+            width="150px"
+            sx={{
+              _active: {
+                bgColor: checkedButtonBgColor,
+              },
+            }}
+          >
+            <Icon
+              as={ZoomOut}
+              w={18}
+              h={18}
+              mr={1.5}
+              sx={{
+                path: { stroke: 'ui.typography.body' },
+              }}
+            />
+            Decrease text
+          </Button>
+        </ButtonGroup>
       </Box>
     </>
   );
 }
+
+// Returns true if the reader's settings match the default settings
+const areSettingsDefault = (readerSettings: ReaderSettings) => {
+  if (!readerSettings) {
+    return false;
+  }
+
+  let setting: keyof ReaderSettings;
+
+  for (setting in DEFAULT_SETTINGS) {
+    if (readerSettings[setting] !== DEFAULT_SETTINGS[setting]) {
+      return false;
+    }
+  }
+  return true;
+};
diff --git a/src/ui/PdfZoomControls.tsx b/src/ui/PdfZoomControls.tsx
@@ -20,12 +20,12 @@ export default function PdfZoomControls(
     <ButtonGroup display="flex" spacing={2}>
       <Tooltip content="Zoom in">
         <Button aria-label="Zoom in" onClick={zoomIn} isIcon>
-          <Icon as={ZoomIn} w={6} h={6} />
+          <Icon as={ZoomIn} w={18} h={18} />
         </Button>
       </Tooltip>
       <Tooltip content="Zoom out">
         <Button aria-label="Zoom out" onClick={zoomOut} isIcon>
-          <Icon as={ZoomOut} w={6} h={6} />
+          <Icon as={ZoomOut} w={18} h={18} />
         </Button>
       </Tooltip>
     </ButtonGroup>
diff --git a/src/ui/SettingsButton.tsx b/src/ui/SettingsButton.tsx
@@ -1,4 +1,5 @@
 import {
+  Box,
   Icon,
   Popover,
   PopoverBody,
@@ -12,6 +13,7 @@ import Button from './Button';
 import useColorModeValue from './hooks/useColorModeValue';
 import HtmlSettings from './HtmlSettings';
 import { ReaderSettings } from './icons';
+import Tooltip from './Tooltip';
 
 type SettingsCardProps =
   | Pick<PDFActiveReader, 'navigator' | 'state' | 'type'>
@@ -53,29 +55,33 @@ export default function SettingsCard(
         preventOverflow
         strategy="fixed"
       >
-        <PopoverTrigger>
-          <Button
-            aria-label="Settings"
-            onClick={open}
-            /**
-             * preventDefault fixes a Chakra bug where in Safari,
-             * the PopoverTrigger will not close the Popover.
-             * The issue is described in
-             * https://github.com/chakra-ui/chakra-ui/issues/3461
-             * and the workaround can be found in
-             * https://github.com/chakra-ui/chakra-ui/issues/587.
-             * */
-            onMouseDown={(e: React.MouseEvent<HTMLButtonElement>) =>
-              e.preventDefault()
-            }
-            bg={mainBgColor}
-            border="none"
-            gap={[0, 0, 2]}
-            isIcon
-          >
-            <Icon as={ReaderSettings} w={6} h={6} />
-          </Button>
-        </PopoverTrigger>
+        <Tooltip content="Settings">
+          <Box display="inline-block">
+            <PopoverTrigger>
+              <Button
+                aria-label="Settings"
+                onClick={open}
+                /**
+                 * preventDefault fixes a Chakra bug where in Safari,
+                 * the PopoverTrigger will not close the Popover.
+                 * The issue is described in
+                 * https://github.com/chakra-ui/chakra-ui/issues/3461
+                 * and the workaround can be found in
+                 * https://github.com/chakra-ui/chakra-ui/issues/587.
+                 * */
+                onMouseDown={(e: React.MouseEvent<HTMLButtonElement>) =>
+                  e.preventDefault()
+                }
+                bg={mainBgColor}
+                border="none"
+                gap={[0, 0, 2]}
+                isIcon
+              >
+                <Icon as={ReaderSettings} w={18} h={18} />
+              </Button>
+            </PopoverTrigger>
+          </Box>
+        </Tooltip>
         <PopoverContent
           overflow="hidden"
           bgColor={contentBgColor}
diff --git a/src/ui/TableOfContent.tsx b/src/ui/TableOfContent.tsx
@@ -46,7 +46,7 @@ export default function TableOfContent({
               me={0}
               isIcon
             >
-              <Icon as={TableOfContents} w={6} h={6} />
+              <Icon as={TableOfContents} w={18} h={18} />
             </MenuButton>
           </Tooltip>
           <Portal containerRef={containerRef}>
diff --git a/src/ui/ToggleButton.tsx b/src/ui/ToggleButton.tsx
@@ -61,8 +61,8 @@ function ToggleButton(
               as={icon}
               verticalAlign="middle"
               mr={1.5}
-              w={6}
-              h={6}
+              w={18}
+              h={18}
               fill={iconFill && iconFill}
             />
           )}
@@ -82,10 +82,8 @@ export const ColorModeToggleButton: typeof ToggleButton = ({
       sx={{
         _checked: {
           bgColor,
-          p: {
-            textDecoration: 'underline',
-            textUnderlinePosition: 'under',
-          },
+          border: '2px solid',
+          borderColor: 'section.research.secondary',
         },
       }}
       {...rest}
diff --git a/src/ui/ToggleGroup.tsx b/src/ui/ToggleGroup.tsx
@@ -22,7 +22,7 @@ const ToggleGroup: React.FC<ToggleGroupProps> = ({
   const group = getRootProps();
 
   return (
-    <Flex {...group} aria-label={label} flexWrap="nowrap">
+    <Flex {...group} aria-label={label} flexWrap="nowrap" gap={4}>
       {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
       {React.Children.map(children, (element: any) => {
         try {
diff --git a/src/ui/icons/Reset.tsx b/src/ui/icons/Reset.tsx
diff --git a/src/ui/icons/Rotate.tsx b/src/ui/icons/Rotate.tsx
diff --git a/src/ui/icons/index.tsx b/src/ui/icons/index.tsx
diff --git a/src/ui/nypl-base-theme/foundations/colors.ts b/src/ui/nypl-base-theme/foundations/colors.ts

Original file line number	Diff line number	Diff line change
`@@ -64,5 +64,5 @@ export type PdfReaderAction =`
`64`	`64`	`width: number \| undefined;`
`65`	`65`	`}`
`66`	`66`	`\| { type: 'SET_FIT_MODE'; fitMode: FitMode }`
`67`		`- \| { type: 'ROTATE_LEFT' }`
	`67`	`+ \| { type: 'ROTATE_COUNTER_CLOCKWISE' }`
`68`	`68`	`\| { type: 'BOOK_BOUNDARY_CHANGED'; atStart: boolean; atEnd: boolean };`
Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,10 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(`
`29`	`29`	`height: '2rem',`
`30`	`30`	`width: '2rem',`
`31`	`31`	`}`
`32`		`- : {};`
	`32`	`+ : {`
	`33`	`+ border: '1px solid',`
	`34`	`+ borderColor: 'ui.typography.body',`
	`35`	`+ };`
`33`	`36`
`34`	`37`	`return <ChakraButton ref={ref} variant="solid" {...iconProps} {...props} />;`
`35`	`38`	`}`
Original file line number	Diff line number	Diff line change
`@@ -46,7 +46,7 @@ export default function TableOfContent({`
`46`	`46`	`me={0}`
`47`	`47`	`isIcon`
`48`	`48`	`>`
`49`		`- <Icon as={TableOfContents} w={6} h={6} />`
	`49`	`+ <Icon as={TableOfContents} w={18} h={18} />`
`50`	`50`	`</MenuButton>`
`51`	`51`	`</Tooltip>`
`52`	`52`	`<Portal containerRef={containerRef}>`