OE-685: Makes adjustments per VQA feedback

src/ui/Header.tsx

@@ -70,7 +70,7 @@ export default function Header(
   return (
     <HeaderWrapper bg={mainBgColor}>
       {headerLeft ?? <DefaultHeaderLeft />}
-      <HStack ml="auto" spacing={1}>
+      <HStack ml="auto" spacing={0}>
         <TableOfContent
           containerRef={containerRef}
           navigator={navigator}
@@ -81,16 +81,18 @@ export default function Header(
           aria-expanded={isFullscreen}
           aria-label="Toggle full screen"
           border="none"
+          bgColor={mainBgColor}
+          gap={[0, 0, 2]}
           onClick={toggleFullScreen}
-          leftIcon={
-            <Icon
-              as={isFullscreen ? ToggleFullScreenExit : ToggleFullScreen}
-              fill={iconFill}
-              w={6}
-              h={6}
-            />
-          }
+          _active={{ bgColor: mainBgColor }}
+          _focus={{ bgColor: mainBgColor, ring: '2px', ringInset: 'inset' }}
         >
+          <Icon
+            as={isFullscreen ? ToggleFullScreenExit : ToggleFullScreen}
+            fill={iconFill}
+            w={6}
+            h={6}
+          />
           <Text variant="headerNav">
             {isFullscreen ? 'Full screen exit' : 'Full screen'}
           </Text>
@@ -116,7 +118,7 @@ export const HeaderWrapper = React.forwardRef<
       zIndex="sticky"
       alignContent="space-between"
       alignItems="center"
-      px={8}
+      px={[0, 0, 8]}
       borderBottom="1px solid"
       borderColor="gray.100"
       {...rest}

src/ui/HtmlSettings.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ButtonGroup, Heading, Stack, Text } from '@chakra-ui/react';
+import { Box, ButtonGroup, Heading, Text } from '@chakra-ui/react';
 import { HtmlNavigator, ReaderSettings, ReaderState } from '../types';
 import Button from './Button';
 import {
@@ -78,11 +78,17 @@ export default function HtmlSettings(
           fontWeight="regular"
         />
       </ToggleGroup>
-      <Stack bgColor={checkedButtonBgColor} px={7} py={5}>
+      <Box
+        bgColor={checkedButtonBgColor}
+        display="flex"
+        flexDirection="column"
+        px={[3, 3, 7]}
+        py={[4, 4, 5]}
+      >
         <Heading
           as="h3"
           color={buttonTextColor}
-          pb="10px"
+          pb={[1.5, 1.5, 2.5]}
           fontSize={2}
           fontWeight="light"
         >
@@ -93,10 +99,11 @@ export default function HtmlSettings(
           fontFamily={FONT_DETAILS[fontFamily].token}
           fontSize={-1}
           fontWeight={FONT_DETAILS[fontFamily].fontWeight}
+          margin={0}
         >
           {FONT_DETAILS[fontFamily].body}
         </Text>
-      </Stack>
+      </Box>
       <ToggleGroup
         value={colorMode}
         label="reading theme options"

src/ui/SettingsButton.tsx

@@ -51,6 +51,7 @@ export default function SettingsCard(
       >
         <PopoverTrigger>
           <Button
+            aria-label="Settings"
             onClick={open}
             /**
              * preventDefault fixes a Chakra bug where in Safari,
@@ -64,18 +65,20 @@ export default function SettingsCard(
               e.preventDefault()
             }
             border="none"
-            aria-label="Settings"
-            leftIcon={<Icon as={ReaderSettings} w={6} h={6} fill={iconFill} />}
+            gap={[0, 0, 2]}
           >
+            <Icon as={ReaderSettings} fill={iconFill} w={6} h={6} />
             <Text variant="headerNav">Settings</Text>
           </Button>
         </PopoverTrigger>
         <PopoverContent
           overflow="hidden"
           bgColor={contentBgColor}
-          borderRadius="0 0 4px 4px"
-          boxShadow="0 4px 4px -2px #424242"
-          width="inherit"
+          borderColor="ui.gray.disabled"
+          borderRadius="0 0 2px 2px"
+          filter="drop-shadow(0 1px 2px #00000040)"
+          width={['90vw', '90vw', 'inherit']}
+          marginRight={[4, 4, 4, 0]}
           maxWidth="100vw"
         >
           <PopoverBody p={0}>

src/ui/ToggleButton.tsx

@@ -63,7 +63,7 @@ function ToggleButton(
 }
 
 export const FontToggleButton: typeof ToggleButton = (props) => {
-  return <ToggleButton fontSize={[-1, -1, 0]} py={6} {...props} />;
+  return <ToggleButton fontSize={[-2, -2, -1, -1, 0]} py={6} {...props} />;
 };
 
 export const ColorModeToggleButton: typeof ToggleButton = ({
@@ -77,6 +77,7 @@ export const ColorModeToggleButton: typeof ToggleButton = ({
           bgColor,
           p: {
             textDecoration: 'underline',
+            textUnderlinePosition: 'under',
           },
         },
       }}

src/ui/theme/components/button.ts

@@ -45,7 +45,12 @@ const variantSolid = (getColor: GetColor) => (
   );
   const color = getColor('gray.800', 'ui.white', 'gray.800');
 
-  const _focus = { bgColor: bgColorActive, color };
+  const _focus = {
+    bgColor: bgColorActive,
+    color,
+    ring: '2px',
+    ringInset: 'inset',
+  };
   const _hover = {
     bgColor: bgColorActive,
     color,
@@ -58,7 +63,7 @@ const variantSolid = (getColor: GetColor) => (
   return {
     border: 'none',
     borderColor: 'gray.100',
-    height: '48px',
+    height: '45px',
     transition: 'none',
     fontSize: 0,
     letterSpacing: 1,
@@ -96,6 +101,9 @@ const variantSettings = (getColor: GetColor) => (
     width: [8, 16, 36],
     fontSize: [0, 0, 2],
     whiteSpace: ['normal', 'normal', 'nowrap'],
+    p: {
+      textAlign: 'center',
+    },
     _active: {
       bgColor,
     },
@@ -105,6 +113,7 @@ const variantSettings = (getColor: GetColor) => (
       borderBottomColor: checkedBgColor,
       p: {
         textDecoration: 'underline',
+        textUnderlinePosition: 'under',
       },
     },
     _hover: {