Merge pull request #833 from omnivore-app/fix/display-settings-dialog

2022-06-21 19:17:47 -07:00
parent 2edb65090d 1245d32eed
commit a40374b7c7
22 changed files with 350 additions and 256 deletions
--- a/apple/Omnivore.xcworkspace/xcshareddata/swiftpm/Package.resolved
+++ b/apple/Omnivore.xcworkspace/xcshareddata/swiftpm/Package.resolved
@ -5,8 +5,8 @@
      "kind" : "remoteSourceControl",
      "location" : "https://github.com/firebase/abseil-cpp-SwiftPM.git",
      "state" : {
-        "revision" : "fffc3c2729be5747390ad02d5100291a0d9ad26a",
-        "version" : "0.20200225.4"
+        "revision" : "d302de612e3d57c6f4afaf087da18fba8eac72a7",
+        "version" : "0.20220203.1"
      }
    },
    {
@ -32,8 +32,8 @@
      "kind" : "remoteSourceControl",
      "location" : "https://github.com/firebase/boringssl-SwiftPM.git",
      "state" : {
-        "revision" : "734a8247442fde37df4364c21f6a0085b6a36728",
-        "version" : "0.7.2"
+        "revision" : "79db6516894a932d0ddaff3b05b9da1e4f6c4069",
+        "version" : "0.9.0"
      }
    },
    {
@ -50,8 +50,8 @@
      "kind" : "remoteSourceControl",
      "location" : "https://github.com/firebase/firebase-ios-sdk",
      "state" : {
-        "revision" : "08686f04881483d2bc098b2696e674c0ba135e47",
-        "version" : "8.10.0"
+        "revision" : "111d8d6ad1a1afd6c8e9561d26e55ab1e74fcb42",
+        "version" : "8.15.0"
      }
    },
    {
@ -59,8 +59,8 @@
      "kind" : "remoteSourceControl",
      "location" : "https://github.com/google/GoogleAppMeasurement.git",
      "state" : {
-        "revision" : "9b2f6aca5b4685c45f9f5481f19bee8e7982c538",
-        "version" : "8.9.1"
+        "revision" : "ef819db8c58657a6ca367322e73f3b6322afe0a2",
+        "version" : "8.15.0"
      }
    },
    {
@ -68,8 +68,8 @@
      "kind" : "remoteSourceControl",
      "location" : "https://github.com/google/GoogleDataTransport.git",
      "state" : {
-        "revision" : "15ccdfd25ac55b9239b82809531ff26605e7556e",
-        "version" : "9.1.2"
+        "revision" : "b905c49326b72211531ed9d7baa02d724828a8dc",
+        "version" : "9.1.4"
      }
    },
    {
@ -86,17 +86,17 @@
      "kind" : "remoteSourceControl",
      "location" : "https://github.com/google/GoogleUtilities.git",
      "state" : {
-        "revision" : "b3bb0c5551fb3f80ca939829639ab5b093edd14f",
-        "version" : "7.7.0"
+        "revision" : "f4abe56ce62a779e64b525eb133c8fc2a84bbc1f",
+        "version" : "7.7.1"
      }
    },
    {
-      "identity" : "grpc-swiftpm",
+      "identity" : "grpc-ios",
      "kind" : "remoteSourceControl",
-      "location" : "https://github.com/firebase/grpc-SwiftPM.git",
+      "location" : "https://github.com/grpc/grpc-ios.git",
      "state" : {
-        "revision" : "fb405dd2c7901485f7e158b24e3a0a47e4efd8b5",
-        "version" : "1.28.4"
+        "revision" : "2af4f6e9c2b18beae228f50b1198c641be859d2b",
+        "version" : "1.44.2-grpc"
      }
    },
    {
@ -104,8 +104,8 @@
      "kind" : "remoteSourceControl",
      "location" : "https://github.com/google/gtm-session-fetcher.git",
      "state" : {
-        "revision" : "bc6a19702ac76ac4e488b68148710eb815f9bc56",
-        "version" : "1.7.0"
+        "revision" : "4e9bbf2808b8fee444e84a48f5f3c12641987d3e",
+        "version" : "1.7.2"
      }
    },
    {
@ -149,8 +149,8 @@
      "kind" : "remoteSourceControl",
      "location" : "https://github.com/google/promises.git",
      "state" : {
-        "revision" : "611337c330350c9c1823ad6d671e7f936af5ee13",
-        "version" : "2.0.0"
+        "revision" : "46c1e6b5ac09d8f82c991061c659f67e573d425d",
+        "version" : "2.1.0"
      }
    },
    {
@ -194,8 +194,8 @@
      "kind" : "remoteSourceControl",
      "location" : "https://github.com/apple/swift-protobuf.git",
      "state" : {
-        "revision" : "7e2c5f3cbbeea68e004915e3a8961e20bd11d824",
-        "version" : "1.18.0"
+        "revision" : "e1499bc69b9040b29184f7f2996f7bab467c1639",
+        "version" : "1.19.0"
      }
    },
    {
--- a/apple/OmnivoreKit/Sources/Views/FontSizeAdjustmentPopoverView.swift
+++ b/apple/OmnivoreKit/Sources/Views/FontSizeAdjustmentPopoverView.swift
@ -10,11 +10,14 @@ public enum WebFont: String, CaseIterable {
  case roboto = "Roboto"
  case crimsontext = "Crimson Text"
  case sourceserifpro = "Source Serif Pro"
+  case openDyslexic = "OpenDyslexic"

  var displayValue: String {
    switch self {
    case .inter, .merriweather, .lora, .opensans, .roboto, .crimsontext, .sourceserifpro:
      return rawValue
+    case .openDyslexic:
+      return "Open Dyslexic"
    case .system:
      return "System Default"
    }
--- a/apple/OmnivoreKit/Sources/Views/Resources/Fonts/OpenDyslexicAlta-Bold.otf
+++ b/apple/OmnivoreKit/Sources/Views/Resources/Fonts/OpenDyslexicAlta-Bold.otf
--- a/apple/OmnivoreKit/Sources/Views/Resources/Fonts/OpenDyslexicAlta-BoldItalic.otf
+++ b/apple/OmnivoreKit/Sources/Views/Resources/Fonts/OpenDyslexicAlta-BoldItalic.otf
--- a/apple/OmnivoreKit/Sources/Views/Resources/Fonts/OpenDyslexicAlta-Italic.otf
+++ b/apple/OmnivoreKit/Sources/Views/Resources/Fonts/OpenDyslexicAlta-Italic.otf
--- a/apple/OmnivoreKit/Sources/Views/Resources/Fonts/OpenDyslexicAlta-Regular.otf
+++ b/apple/OmnivoreKit/Sources/Views/Resources/Fonts/OpenDyslexicAlta-Regular.otf
--- a/apple/OmnivoreKit/Sources/Views/Resources/bundle.js
+++ b/apple/OmnivoreKit/Sources/Views/Resources/bundle.js
--- a/packages/web/components/elements/ModalPrimitives.tsx
+++ b/packages/web/components/elements/ModalPrimitives.tsx
@ -39,10 +39,6 @@ export const ModalContent = styled(Modal, {
  width: '90vw',
  maxWidth: '600px',
  maxHeight: '85vh',
-  '@media (prefers-reduced-motion: no-preference)': {
-    animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
-    willChange: 'transform',
-  },
  '@smDown': {
    maxWidth: '95%',
    width: '95%',
--- a/packages/web/components/templates/article/ArticleActionsMenu.tsx
+++ b/packages/web/components/templates/article/ArticleActionsMenu.tsx
@ -7,16 +7,15 @@ import { Box, SpanBox } from "../../elements/LayoutPrimitives"
 import { TooltipWrapped } from "../../elements/Tooltip"
 import { styled, theme } from "../../tokens/stitches.config"
 import { SetLabelsControl } from "./SetLabelsControl"
-import { ReaderSettingsControl } from "./ReaderSettingsControl"
+import { DisplaySettingsModal } from "./DisplaySettingsModal"
+import { useReaderSettings } from "../../../lib/hooks/useReaderSettings"
+import { useRef } from "react"

 export type ArticleActionsMenuLayout = 'top' | 'side'

 type ArticleActionsMenuProps = {
  article?: ArticleAttributes
  layout: ArticleActionsMenuLayout
-  lineHeight: number
-  marginWidth: number
-  fontFamily: string
  showReaderDisplaySettings?: boolean
  articleActionHandler: (action: string, arg?: unknown) => void
 }
@ -56,6 +55,9 @@ const ActionDropdown = (props: ActionDropdownProps): JSX.Element => {
 }

 export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element {
+  const readerSettings = useReaderSettings()
+  const displaySettingsButtonRef = useRef<HTMLElement | null>(null)
+
  return (
    <>
    <Box
@ -70,29 +72,19 @@ export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element
    >
      {props.showReaderDisplaySettings && (
        <>
-          <ActionDropdown
-            layout={props.layout}
-            triggerElement={
-              <TooltipWrapped
-                tooltipContent="Adjust Display Settings"
-                tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
-              >
-                <TextAa size={24} color={theme.colors.readerFont.toString()} />
-              </TooltipWrapped>
-            }
+        <Button style='articleActionIcon' onClick={() => readerSettings.setShowEditDisplaySettingsModal(true)}>
+          <TooltipWrapped
+            tooltipContent="Adjust Display Settings"
+            tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
          >
-            <ReaderSettingsControl
-              fontFamily={props.fontFamily}
-              lineHeight={props.lineHeight}
-              marginWidth={props.marginWidth}
-              articleActionHandler={props.articleActionHandler}
-            />
-          </ActionDropdown>
-
-          <MenuSeparator layout={props.layout} />
+            <SpanBox ref={displaySettingsButtonRef}>
+              <TextAa size={24} color={theme.colors.readerFont.toString()}  />
+            </SpanBox>
+          </TooltipWrapped>
+        </Button>
+        <MenuSeparator layout={props.layout} />
        </>
      )}
-
      <SpanBox css={{
        'display': 'flex',
        '@smDown': {
@ -190,6 +182,14 @@ export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element
        <DotsThree size={24} color={theme.colors.readerFont.toString()} />
      </Button> */}
    </Box>
+    {readerSettings.showEditDisplaySettingsModal && (
+      <DisplaySettingsModal
+        centerX={props.layout != 'side'}
+        triggerElementRef={displaySettingsButtonRef}
+        articleActionHandler={props.articleActionHandler}
+        onOpenChange={() => readerSettings.setShowEditDisplaySettingsModal(false)}
+      />
+    )}
    </>
  )
 }
--- a/packages/web/components/templates/article/DisplaySettingsModal.tsx
+++ b/packages/web/components/templates/article/DisplaySettingsModal.tsx
@ -1,61 +1,39 @@
-import { X } from 'phosphor-react'
-import { ArticleAttributes } from '../../../lib/networking/queries/useGetArticleQuery'
-import { UserPreferences } from '../../../lib/networking/queries/useGetUserPreferences'
-import { Button } from '../../elements/Button'
-import { CrossIcon } from '../../elements/images/CrossIcon'
-import { Box, HStack, VStack } from '../../elements/LayoutPrimitives'
+import { VStack } from '../../elements/LayoutPrimitives'
 import {
  ModalRoot,
  ModalOverlay,
  ModalContent,
 } from '../../elements/ModalPrimitives'
-import { StyledText } from '../../elements/StyledText'
-import { theme } from '../../tokens/stitches.config'
 import { ReaderSettingsControl } from './ReaderSettingsControl'

+
 type DisplaySettingsModalProps = {
+  centerX: boolean
  onOpenChange: (open: boolean) => void
-  lineHeight: number
-  marginWidth: number
-  fontFamily: string
+  triggerElementRef?: React.RefObject<HTMLElement>
  articleActionHandler: (action: string, arg?: number | string) => void
 }

 export function DisplaySettingsModal(props: DisplaySettingsModalProps): JSX.Element {
+  const top = props.triggerElementRef?.current?.getBoundingClientRect().bottom ?? 0
+  const left = props.triggerElementRef?.current?.getBoundingClientRect().left ?? 0
+
  return (
    <ModalRoot defaultOpen onOpenChange={props.onOpenChange}>
-      <ModalOverlay />
      <ModalContent
-        css={{ overflow: 'auto' }}
+        css={{
+          width: '245px',
+          top: props.triggerElementRef?.current ? top : '50%',
+          left: props.triggerElementRef?.current ? (left - (props.centerX ? 265 / 2 : 0)) : '50%',
+          transform: props.triggerElementRef?.current ? 'unset' : 'translate(-50%, -50%)',
+        }}
        onPointerDownOutside={(event) => {
          event.preventDefault()
          props.onOpenChange(false)
        }}
      >
        <VStack css={{ width: '100%' }}>
-          <HStack
-              distribution="between"
-              alignment="center"
-              css={{ width: '100%' }}
-            >
-              <StyledText style="modalHeadline" css={{ pl: '16px' }}>Labels</StyledText>
-              <Button
-                css={{ pt: '16px', pr: '16px' }}
-                style="ghost"
-                onClick={() => {
-                  props.onOpenChange(false)
-                }}
-              >
-                <CrossIcon
-                  size={14}
-                  strokeColor={theme.colors.grayText.toString()}
-                />
-              </Button>
-          </HStack>
          <ReaderSettingsControl
-            lineHeight={props.lineHeight}
-            marginWidth={props.marginWidth}
-            fontFamily={props.fontFamily}
            articleActionHandler={props.articleActionHandler}
          />
        </VStack>
--- a/packages/web/components/templates/article/FontFamiliesOptions.tsx
+++ b/packages/web/components/templates/article/FontFamiliesOptions.tsx
@ -1,7 +1,7 @@
 import { HStack, Box } from '../../elements/LayoutPrimitives'
 import { StyledText } from '../../elements/StyledText'
 import { theme } from '../../tokens/stitches.config'
-import { CaretLeft, CheckCircle } from 'phosphor-react'
+import { CaretLeft, Check, CheckCircle } from 'phosphor-react'

 const FONT_FAMILIES = [
  'Inter',
@ -11,6 +11,7 @@ const FONT_FAMILIES = [
  'Open Sans',
  'Roboto',
  'Crimson Text',
+  'OpenDyslexic',
  'Source Serif Pro'
 ]

@ -31,13 +32,13 @@ function FontOption(props: FontOptionProps):JSX.Element {
  return (
    <HStack distribution='between' alignment='start' css={{width: '100%', pt: '14px'}}>
      <StyledText
-        css={{ m: '0px', fontSize: 16, fontWeight: isSelected ? 'bold' : 'regular', fontFamily: props.family, textTransform: 'capitalize', cursor: 'pointer' }}
+        css={{ m: '0px', fontSize: 16, fontFamily: props.family, textTransform: 'capitalize', cursor: 'pointer' }}
        onClick={() => props.onSelect(props.family)}
      >
        {props.family}
      </StyledText>
      {isSelected && (
-        <CheckCircle color={theme.colors.grayTextContrast.toString()} />
+        <Check color={theme.colors.grayTextContrast.toString()} weight='bold' />
      )}
    </HStack>
  )
@ -47,24 +48,19 @@ export function FontFamiliesOptions(props: FontFamiliesListProps): JSX.Element {
  return (
    <>
      <Box css={{borderBottom: `1px solid ${theme.colors.grayLine.toString()}`, width: '100%'}}>
-        <HStack alignment='center' distribution='between' css={{width: '70%', py: 10, px: 15}}>
+        <HStack alignment='center' distribution='between' css={{width: '100%', py: 10, px: 15}}>
          <HStack
            alignment='center'
            distribution='start'
-            css={{cursor: 'pointer'}}
+            css={{ cursor: 'pointer', py: '4px', width: '100%' }}
            onClick={() => props.setShowFontFamilies(false)}
          >
-            <Box css={{position: 'relative', top: 2, right: 5}}>
-              <CaretLeft color={theme.colors.textSubtle.toString()} size={15} />
-            </Box>
-            <StyledText css={{m: 0, pt: 4, fontSize: 12, fontWeight: '600', color: theme.colors.textSubtle.toString()}}>
-              Back
-            </StyledText>
+            <CaretLeft color={theme.colors.textSubtle.toString()} size={15} />
+            <StyledText css={{ textAlign: 'center', m: 0, fontSize: 14, fontWeight: 'bold', width: '100%', wordWrap: 'revert' }}>Choose Font</StyledText>
          </HStack>
-          {/* <StyledText css={{m: 0, fontSize: 16, fontWeight: '600'}}>Select Font</StyledText> */}
        </HStack>
      </Box>
-      <Box css={{px: 15, width: '100%', pb: 15}}>
+      <Box css={{ pl: 15, pb: 15}}>
        {FONT_FAMILIES.map((family) => (
          <FontOption selected={props.selected} family={family} onSelect={props.onSelect} key={`font-${family}`} />
        ))}
--- a/packages/web/components/templates/article/ReaderSettingsControl.tsx
+++ b/packages/web/components/templates/article/ReaderSettingsControl.tsx
@ -3,17 +3,19 @@ import { Button } from '../../elements/Button'
 import { StyledText } from '../../elements/StyledText'
 import { styled, theme } from '../../tokens/stitches.config'
 import { useEffect, useState } from 'react'
-import { AlignCenterHorizontalSimple, ArrowsInLineHorizontal, ArrowsOutLineHorizontal, CaretRight } from 'phosphor-react'
+import {
+  AlignCenterHorizontalSimple,
+  ArrowsInLineHorizontal,
+  ArrowsOutLineHorizontal,
+  CaretRight,
+  Cursor,
+} from 'phosphor-react'
 import { TickedRangeSlider } from '../../elements/TickedRangeSlider'
 import { showSuccessToast } from '../../../lib/toastHelpers'
-import { FontStepperDown } from '../../elements/images/FontStepperDown'
-import { FontStepperUp } from '../../elements/images/FontStepperUp'
 import { FontFamiliesOptions } from './FontFamiliesOptions'
+import { useReaderSettings } from '../../../lib/hooks/useReaderSettings'

 type ReaderSettingsProps = {
-  marginWidth: number
-  lineHeight: number
-  fontFamily: string
  articleActionHandler: (action: string, arg?: number | string) => void
 }

@ -30,155 +32,247 @@ const HorizontalDivider = styled(SpanBox, {
 })

 export function ReaderSettingsControl(props: ReaderSettingsProps): JSX.Element {
-  const [lineHeight, setLineHeight] = useState(props.lineHeight)
-  const [marginWidth, setMarginWidth] = useState(props.marginWidth)
-  const [fontFamily, setFontFamily] = useState(props.fontFamily)
-
  const [showFontOptions, setShowFontOptions] = useState(false)
-
-  useEffect(() => {
-    setLineHeight(props.lineHeight)
-    setMarginWidth(props.marginWidth)
-    setFontFamily(props.fontFamily)
-  }, [props.lineHeight, props.marginWidth, props.fontFamily, setLineHeight, setMarginWidth, setFontFamily])
+  const readerSettings = useReaderSettings()

  return (
-    <VStack>
+    <VStack css={{ width: '100%' }}>
      {showFontOptions ? (
        <FontFamiliesOptions
-          selected={fontFamily}
+          selected={readerSettings.fontFamily}
          setShowFontFamilies={setShowFontOptions}
          onSelect={(font: string) => {
-            setFontFamily(font)
+            readerSettings.setFontFamily(font)
            props.articleActionHandler('setFontFamily', font)
          }}
        />
      ) : (
        <>
-        <HStack 
-          alignment='center'
-          distribution='between'
-          css={{
-            width: '100%',
-            height: '70px',
-            marginTop: '4px',
-            borderBottom: `1px solid ${theme.colors.grayLine.toString()}`,
-          }}
-        >
-          <Button style='plainIcon' css={{ width: '50%' }} onClick={() => props.articleActionHandler('decrementFontSize')}>
-            <FontStepperDown color={theme.colors.readerFont.toString()} />
-          </Button>
-          <VerticalDivider />
-          <Button style='plainIcon' css={{ width: '50%', height: '100%' }} onClick={() => props.articleActionHandler('incrementFontSize')}>
-            <FontStepperUp color={theme.colors.readerFont.toString()} />
-          </Button>
-        </HStack>
-        <HStack
-          distribution="start"
-          alignment='center'
-          css={{
-            m: '0px',
-            px: '12px',
-            py: '12px',
-            width: '100%',
-            height: '100%',
-          }}
-        >
-          <StyledText css={{ m: '0px' }}>Font:</StyledText>
          <HStack
-            alignment='center'
-            css={{cursor: 'pointer', marginLeft: 'auto' }}
+            alignment="center"
+            distribution="between"
+            css={{
+              width: '100%',
+              height: '44px',
+              verticalAlign: 'baseline',
+              borderBottom: `1px solid ${theme.colors.grayLine.toString()}`,
+            }}
+          >
+            <Button
+              style="plainIcon"
+              css={{ width: '50%', fontSize: '32px' }}
+              onClick={() => props.articleActionHandler('decrementFontSize')}
+            >
+              -
+            </Button>
+            <VerticalDivider />
+            <Button
+              style="plainIcon"
+              css={{ width: '50%', height: '100%', fontSize: '32px' }}
+              onClick={() => props.articleActionHandler('incrementFontSize')}
+            >
+              +
+            </Button>
+          </HStack>
+          <HStack
+            distribution="start"
+            alignment="center"
+            css={{
+              m: '0px',
+              px: '12px',
+              py: '12px',
+              width: '100%',
+              height: '44px',
+              verticalAlign: 'baseline',
+              cursor: 'pointer',
+            }}
            onClick={() => setShowFontOptions(true)}
          >
+            <StyledText css={{ m: '0px' }}>Font:</StyledText>
            <StyledText
-              css={{ m: '0px',fontSize: 17, fontWeight: '600', fontFamily: fontFamily, textTransform: 'capitalize' }}
+              css={{
+                m: '0px',
+                marginLeft: 'auto',
+                pr: '4px',
+                fontFamily: readerSettings.fontFamily,
+                textTransform: 'capitalize',
+              }}
            >
-              {fontFamily}
+              {readerSettings.fontFamily}
            </StyledText>
-            <Box css={{  }}>
-              <CaretRight width={16} height={16} color={theme.colors.grayTextContrast.toString()}/>
-            </Box>
+            <CaretRight
+              width={16}
+              height={16}
+              color={theme.colors.grayTextContrast.toString()}
+            />
          </HStack>
-        </HStack>
-        <HorizontalDivider css={{
-          '@smDown': {
-            display: 'none',
-          },
-        }}/>
-        <VStack
-          css={{
-            p: '0px',
-            m: '0px',
-            pb: '14px',
-            width: '100%',
-            height: '100%',
-            '@smDown': {
-              display: 'none',
-            },
-          }}
-        >
-          <StyledText color={theme.colors.readerFontTransparent.toString()} css={{ pl: '8px', m: '0px', pt: '14px' }}>Margin:</StyledText>
-          <HStack distribution='between' css={{ gap: '16px', alignItems: 'center', alignSelf: 'center' }}>
-            <Button style='plainIcon' css={{ pt: '10px', px: '4px' }} onClick={() => {
-              const newMarginWith = Math.max(marginWidth - 45, 200)
-              setMarginWidth(newMarginWith)
-              props.articleActionHandler('setMarginWidth', newMarginWith)
-            }}>
-              <ArrowsOutLineHorizontal size={24} color={theme.colors.readerFont.toString()} />
-            </Button>
-            <TickedRangeSlider min={200} max={560} step={45} value={marginWidth} onChange={(value) => {
-              setMarginWidth(value)
-              props.articleActionHandler('setMarginWidth', value)
-            }} />
-            <Button style='plainIcon' css={{ pt: '10px', px: '4px' }} onClick={() => {
-              const newMarginWith = Math.min(marginWidth + 45, 560)
-              setMarginWidth(newMarginWith)
-              props.articleActionHandler('setMarginWidth', newMarginWith)
-            }}>
-              <ArrowsInLineHorizontal size={24} color={theme.colors.readerFont.toString()} />
-            </Button>
-
-          </HStack>
-        </VStack>
-        <HorizontalDivider />
-
-        <VStack css={{
-          p: '0px',
-          m: '0px',
-          pb: '14px',
-          width: '100%',
-          height: '100%',
-        }}>
-          <StyledText color={theme.colors.readerFontTransparent.toString()} css={{ pl: '12px', m: '0px', pt: '14px' }}>Line Spacing:</StyledText>
-          <HStack distribution='between' css={{ gap: '16px', alignItems: 'center', alignSelf: 'center' }}>
-            <Button style='plainIcon' css={{ pt: '10px', px: '4px' }} onClick={() => {
-              const newLineHeight = Math.max(lineHeight - 25, 100)
-              setLineHeight(newLineHeight)
-              props.articleActionHandler('setLineHeight', newLineHeight)
-            }}>
-              <AlignCenterHorizontalSimple size={25} color={theme.colors.readerFont.toString()} />
-            </Button>
-            <TickedRangeSlider min={100} max={300} step={25} value={lineHeight} onChange={(value) => {
-              setLineHeight(value)
-              props.articleActionHandler('setLineHeight', value)
-            }} />
-            <Button style='plainIcon' css={{ pt: '10px', px: '4px' }} onClick={() => {
-              const newLineHeight = Math.min(lineHeight + 25, 300)
-              setLineHeight(newLineHeight)
-              props.articleActionHandler('setLineHeight', newLineHeight)
-            }}>
-              <AlignCenterHorizontalSimple size={25} color={theme.colors.readerFont.toString()} />
-            </Button>
-          </HStack>
-        </VStack>
+          <HorizontalDivider
+            css={{
+              '@smDown': {
+                display: 'none',
+              },
+            }}
+          />
+          <VStack
+            css={{
+              p: '0px',
+              m: '0px',
+              pb: '14px',
+              width: '100%',
+              height: '100%',
+              '@smDown': {
+                display: 'none',
+              },
+            }}
+          >
+            <StyledText
+              color={theme.colors.readerFontTransparent.toString()}
+              css={{ pl: '12px', m: '0px', pt: '14px' }}
+            >
+              Margin:
+            </StyledText>
+            <HStack
+              distribution="between"
+              css={{ gap: '16px', alignItems: 'center', alignSelf: 'center' }}
+            >
+              <Button
+                style="plainIcon"
+                css={{ pt: '10px', pl: '12px' }}
+                onClick={() => {
+                  const newMarginWith = Math.max(
+                    readerSettings.marginWidth - 45,
+                    200
+                  )
+                  readerSettings.setMarginWidth(newMarginWith)
+                  props.articleActionHandler('setMarginWidth', newMarginWith)
+                }}
+              >
+                <ArrowsOutLineHorizontal
+                  size={24}
+                  color={theme.colors.readerFont.toString()}
+                />
+              </Button>
+              <TickedRangeSlider
+                min={200}
+                max={560}
+                step={45}
+                value={readerSettings.marginWidth}
+                onChange={(value) => {
+                  readerSettings.setMarginWidth(value)
+                  props.articleActionHandler('setMarginWidth', value)
+                }}
+              />
+              <Button
+                style="plainIcon"
+                css={{ pt: '10px', pr: '12px' }}
+                onClick={() => {
+                  const newMarginWith = Math.min(
+                    readerSettings.marginWidth + 45,
+                    560
+                  )
+                  readerSettings.setMarginWidth(newMarginWith)
+                  props.articleActionHandler('setMarginWidth', newMarginWith)
+                }}
+              >
+                <ArrowsInLineHorizontal
+                  size={24}
+                  color={theme.colors.readerFont.toString()}
+                />
+              </Button>
+            </HStack>
+          </VStack>
          <HorizontalDivider />

-          <Button style='plainIcon' css={{ justifyContent: 'center', textDecoration: 'underline', display: 'flex', gap: '4px', width: '100%', fontSize: '12px', p: '8px', pb: '14px', pt: '16px', height: '42px', alignItems: 'center' }}
+          <VStack
+            css={{
+              p: '0px',
+              m: '0px',
+              pb: '14px',
+              width: '100%',
+              height: '100%',
+            }}
+          >
+            <StyledText
+              color={theme.colors.readerFontTransparent.toString()}
+              css={{ pl: '12px', m: '0px', pt: '14px' }}
+            >
+              Line Spacing:
+            </StyledText>
+            <HStack
+              distribution="between"
+              css={{ gap: '16px', alignItems: 'center', alignSelf: 'center' }}
+            >
+              <Button
+                style="plainIcon"
+                css={{ pt: '10px', pl: '12px' }}
+                onClick={() => {
+                  const newLineHeight = Math.max(
+                    readerSettings.lineHeight - 25,
+                    100
+                  )
+                  readerSettings.setLineHeight(newLineHeight)
+                  props.articleActionHandler('setLineHeight', newLineHeight)
+                }}
+              >
+                <AlignCenterHorizontalSimple
+                  size={25}
+                  color={theme.colors.readerFont.toString()}
+                />
+              </Button>
+              <TickedRangeSlider
+                min={100}
+                max={300}
+                step={25}
+                value={readerSettings.lineHeight}
+                onChange={(value) => {
+                  readerSettings.setLineHeight(value)
+                  props.articleActionHandler('setLineHeight', value)
+                }}
+              />
+              <Button
+                style="plainIcon"
+                css={{ pt: '10px', pr: '12px' }}
+                onClick={() => {
+                  const newLineHeight = Math.min(
+                    readerSettings.lineHeight + 25,
+                    300
+                  )
+                  readerSettings.setLineHeight(newLineHeight)
+                  props.articleActionHandler('setLineHeight', newLineHeight)
+                }}
+              >
+                <AlignCenterHorizontalSimple
+                  size={25}
+                  color={theme.colors.readerFont.toString()}
+                />
+              </Button>
+            </HStack>
+          </VStack>
+          <HorizontalDivider />
+
+          <Button
+            style="plainIcon"
+            css={{
+              justifyContent: 'center',
+              textDecoration: 'underline',
+              display: 'flex',
+              gap: '4px',
+              width: '100%',
+              fontSize: '12px',
+              p: '12px',
+              pb: '14px',
+              pt: '16px',
+              height: '42px',
+              alignItems: 'center',
+            }}
            onClick={() => {
-              setMarginWidth(290)
-              setLineHeight(150)
+              readerSettings.setFontFamily('Inter')
+              readerSettings.setMarginWidth(290)
+              readerSettings.setLineHeight(150)
              props.articleActionHandler('resetReaderSettings')
-              showSuccessToast('Display settings reset', { position: 'bottom-right' })
+              showSuccessToast('Display settings reset', {
+                position: 'bottom-right',
+              })
            }}
          >
            Reset to default
--- a/packages/web/lib/keyboardShortcuts/navigationShortcuts.ts
+++ b/packages/web/lib/keyboardShortcuts/navigationShortcuts.ts
@ -223,6 +223,7 @@ type ArticleKeyboardAction =
  | 'decrementFontSize'
  | 'incrementMarginWidth'
  | 'decrementMarginWidth'
+  | 'editDisplaySettings'
  | 'setLabels'

 export function articleKeyboardCommands(
@ -266,6 +267,12 @@ export function articleKeyboardCommands(
      shortcutKeyDescription: '[',
      callback: () => actionHandler('decrementMarginWidth'),
    },
+    {
+      shortcutKeys: ['d'],
+      actionDescription: 'Edit Display Settings',
+      shortcutKeyDescription: 'd',
+      callback: () => actionHandler('editDisplaySettings'),
+    },
    {
      shortcutKeys: ['l'],
      actionDescription: 'Edit labels',
--- a/packages/web/pages/[username]/[slug]/index.tsx
+++ b/packages/web/pages/[username]/[slug]/index.tsx
@ -150,9 +150,6 @@ export default function Home(): JSX.Element {
        <ArticleActionsMenu
          article={article}
          layout='top'
-          fontFamily={readerSettings.fontFamily}
-          lineHeight={readerSettings.lineHeight}
-          marginWidth={readerSettings.marginWidth}
          showReaderDisplaySettings={article?.contentReader != 'PDF'}
          articleActionHandler={actionHandler}
        />
@ -188,9 +185,6 @@ export default function Home(): JSX.Element {
          <ArticleActionsMenu
            article={article}
            layout='side'
-            fontFamily={readerSettings.fontFamily}
-            lineHeight={readerSettings.lineHeight}
-            marginWidth={readerSettings.marginWidth}
            showReaderDisplaySettings={true}
            articleActionHandler={actionHandler}
          />
@ -255,12 +249,9 @@ export default function Home(): JSX.Element {
          onOpenChange={() => readerSettings.setShowSetLabelsModal(false)}
        />
      )}
-
      {readerSettings.showEditDisplaySettingsModal && (
        <DisplaySettingsModal
-          lineHeight={readerSettings.lineHeight}
-          marginWidth={readerSettings.marginWidth}
-          fontFamily={readerSettings.fontFamily}
+          centerX={true}
          articleActionHandler={actionHandler}
          onOpenChange={() => readerSettings.setShowEditDisplaySettingsModal(false)}
        />
--- a/packages/web/pages/[username]/links/[id].tsx
+++ b/packages/web/pages/[username]/links/[id].tsx
@ -33,9 +33,6 @@ export default function ArticleSavingRequestPage(): JSX.Element {
        <ArticleActionsMenu
          article={undefined}
          layout='top'
-          fontFamily={readerSettings.fontFamily}
-          lineHeight={readerSettings.lineHeight}
-          marginWidth={readerSettings.marginWidth}
          showReaderDisplaySettings={true}
          articleActionHandler={readerSettings.actionHandler}
        />
@ -62,9 +59,6 @@ export default function ArticleSavingRequestPage(): JSX.Element {
        <ArticleActionsMenu
          article={undefined}
          layout='side'
-          fontFamily={readerSettings.fontFamily}
-          lineHeight={readerSettings.lineHeight}
-          marginWidth={readerSettings.marginWidth}
          showReaderDisplaySettings={true}
          articleActionHandler={readerSettings.actionHandler}
        />
--- a/packages/web/pages/_document.tsx
+++ b/packages/web/pages/_document.tsx
@ -3,7 +3,6 @@
 import { useEffect } from 'react'
 import NextDocument, { Html, Head, Main, NextScript } from 'next/document'
 import { getCssText, globalStyles } from '../components/tokens/stitches.config'
-import { useRouter } from 'next/router'

 export default class Document extends NextDocument {
  render() {
@ -53,6 +52,27 @@ export default class Document extends NextDocument {
          <link rel="manifest" href="/manifest.webmanifest" />
          <script async src="/static/scripts/intercom.js" />
          <script async src="/static/scripts/inject-sw.js" />
+
+          {/* prefetch (not preload) fonts that will be used by the reader */}
+          <link rel="prefetch" href='/static/fonts/Lora/Lora-Regular.ttf' />
+          <link rel="prefetch" href='/static/fonts/Lora/Lora-Bold.ttf' />
+          <link rel="prefetch" href='/static/fonts/Lora/Lora-Italic.ttf' />
+          <link rel="prefetch" href='/static/fonts/Merriweather/Merriweather-Regular.ttf' />
+          <link rel="prefetch" href='/static/fonts/Merriweather/Merriweather-Bold.ttf' />
+          <link rel="prefetch" href='/static/fonts/Merriweather/Merriweather-Italic.ttf' />
+          <link rel="prefetch" href='/static/fonts/Open_Sans/OpenSans-Regular.ttf' />
+          <link rel="prefetch" href='/static/fonts/Open_Sans/OpenSans-Bold.ttf' />
+          <link rel="prefetch" href='/static/fonts/Open_Sans/OpenSans-Italic.ttf' />
+          <link rel="prefetch" href='/static/fonts/Roboto/Roboto-Regular.ttf' />
+          <link rel="prefetch" href='/static/fonts/Roboto/Roboto-Bold.ttf' />
+          <link rel="prefetch" href='/static/fonts/Roboto/Roboto-Italic.ttf' />
+          <link rel="prefetch" href='/static/fonts/Crimson_Text/CrimsonText-Regular.ttf' />
+          <link rel="prefetch" href='/static/fonts/Crimson_Text/CrimsonText-Bold.ttf' />
+          <link rel="prefetch" href='/static/fonts/Crimson_Text/CrimsonText-Italic.ttf' />
+          <link rel="prefetch" href='/static/fonts/Source_Serif_Pro/SourceSerifPro-Regular.ttf' />
+          <link rel="prefetch" href='/static/fonts/Source_Serif_Pro/SourceSerifPro-Bold.ttf' />
+          <link rel="prefetch" href='/static/fonts/Source_Serif_Pro/SourceSerifPro-Italic.ttf' />
+          <link rel="prefetch" href='/static/fonts/SFMono/SFMonoRegular.otf' />
        </Head>
        <body>
          <Main />
--- a/packages/web/pages/article/sr/[id].tsx
+++ b/packages/web/pages/article/sr/[id].tsx
@ -33,9 +33,6 @@ export default function ArticleSavingRequestPage(): JSX.Element {
        <ArticleActionsMenu
          article={undefined}
          layout='top'
-          fontFamily={readerSettings.fontFamily}
-          lineHeight={readerSettings.lineHeight}
-          marginWidth={readerSettings.marginWidth}
          showReaderDisplaySettings={true}
          articleActionHandler={readerSettings.actionHandler}
        />
@ -62,9 +59,6 @@ export default function ArticleSavingRequestPage(): JSX.Element {
        <ArticleActionsMenu
          article={undefined}
          layout='side'
-          fontFamily={readerSettings.fontFamily}
-          lineHeight={readerSettings.lineHeight}
-          marginWidth={readerSettings.marginWidth}
          showReaderDisplaySettings={true}
          articleActionHandler={readerSettings.actionHandler}
        />
--- a/packages/web/public/static/fonts/OpenDyslexic/OpenDyslexicAlta-Bold.otf
+++ b/packages/web/public/static/fonts/OpenDyslexic/OpenDyslexicAlta-Bold.otf
--- a/packages/web/public/static/fonts/OpenDyslexic/OpenDyslexicAlta-Italic.otf
+++ b/packages/web/public/static/fonts/OpenDyslexic/OpenDyslexicAlta-Italic.otf
--- a/packages/web/public/static/fonts/OpenDyslexic/OpenDyslexicAlta-Regular.otf
+++ b/packages/web/public/static/fonts/OpenDyslexic/OpenDyslexicAlta-Regular.otf
--- a/packages/web/stories/ReaderSettingsControl.stories.tsx
+++ b/packages/web/stories/ReaderSettingsControl.stories.tsx
@ -15,8 +15,8 @@ export default {

 export const ReaderSettingsStory: ComponentStory<typeof ReaderSettingsControl> = (args: any) => {
  return (
-    <div style={{ width: '265px', border: '2px solid black' }}>
-      <ReaderSettingsControl fontFamily='Inter' marginWidth={300} lineHeight={200} articleActionHandler={(action) => {
+    <div style={{ width: '245px', border: '2px solid black' }}>
+      <ReaderSettingsControl articleActionHandler={(action) => {
        console.log('articleActionHandler')
      }} />
    </div>
--- a/packages/web/styles/globals.css
+++ b/packages/web/styles/globals.css
@ -186,6 +186,27 @@ div#appleid-signin {
  src: url('/static/fonts/Crimson_Text/CrimsonText-Italic.ttf');
 }

+@font-face {
+  font-family: 'OpenDyslexic';
+  font-weight: 400;
+  font-style: normal;
+  src: url('/static/fonts/OpenDyslexic/OpenDyslexicAlta-Regular.otf');
+}
+
+@font-face {
+  font-family: 'OpenDyslexic';
+  font-weight: 700;
+  font-style: normal;
+  src: url('/static/fonts/OpenDyslexic/OpenDyslexicAlta-Bold.otf');
+}
+
+@font-face {
+  font-family: 'OpenDyslexic';
+  font-weight: 400;
+  font-style: italic;
+  src: url('/static/fonts/OpenDyslexic/OpenDyslexicAlta-Italic.otf');
+}
+
@font-face {
  font-family: 'Source Serif Pro';
  font-weight: 400;