From 54ff7b6d6052e9ebb8e9b6d5a284846dc5b5488c Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 11 Apr 2022 20:38:54 -0700
Subject: [PATCH] Smaller display settings dropdown on small screens. Better
 shadows

---
 .../templates/article/ArticleActionsMenu.tsx     |  3 ++-
 .../templates/article/ReaderSettingsModal.tsx    |  4 ++--
 packages/web/pages/[username]/[slug]/index.tsx   | 16 +++++++++++++++-
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/web/components/templates/article/ArticleActionsMenu.tsx b/packages/web/components/templates/article/ArticleActionsMenu.tsx
index 3b13c4d5c..a1d3f951b 100644
--- a/packages/web/components/templates/article/ArticleActionsMenu.tsx
+++ b/packages/web/components/templates/article/ArticleActionsMenu.tsx
@@ -41,7 +41,7 @@ type ActionDropdownProps = {
 const ActionDropdown = (props: ActionDropdownProps): JSX.Element => {
   return <Dropdown
     showArrow={true}
-    css={{ m: '0px', p: '0px', overflow: 'hidden', width: '265px', maxWidth: '265px' }}
+    css={{ m: '0px', p: '0px', overflow: 'hidden', width: '265px', maxWidth: '265px', '@smDown': { width: '230px' } }}
     side={props.layout == 'vertical' ? 'right' : 'bottom'}
     sideOffset={props.layout == 'vertical' ? 8 : 0}
     align={props.layout == 'vertical' ? 'start' : 'center'}
@@ -68,6 +68,7 @@ export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element
         m: '0px',
       }}
     >
+
       <ActionDropdown
         layout={props.layout}
         triggerElement={
diff --git a/packages/web/components/templates/article/ReaderSettingsModal.tsx b/packages/web/components/templates/article/ReaderSettingsModal.tsx
index eedc7042a..1f435978d 100644
--- a/packages/web/components/templates/article/ReaderSettingsModal.tsx
+++ b/packages/web/components/templates/article/ReaderSettingsModal.tsx
@@ -29,7 +29,7 @@ export function ReaderSettings(props: ReaderSettingsProps): JSX.Element {
       <HStack 
         alignment='center'
         css={{
-          width: '265px',
+          width: '100%',
           height: '70px',
           borderBottom: `1px solid ${theme.colors.grayLine.toString()}`,
         }}
@@ -56,7 +56,7 @@ export function ReaderSettings(props: ReaderSettingsProps): JSX.Element {
           },
         }}
       >
-        <StyledText color={theme.colors.readerFontTransparent.toString()} css={{ pl: '12px', m: '0px', pt: '14px' }}>Margin:</StyledText>
+        <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)
diff --git a/packages/web/pages/[username]/[slug]/index.tsx b/packages/web/pages/[username]/[slug]/index.tsx
index 5748a0013..c950b11b3 100644
--- a/packages/web/pages/[username]/[slug]/index.tsx
+++ b/packages/web/pages/[username]/[slug]/index.tsx
@@ -29,6 +29,7 @@ import { useSWRConfig } from 'swr'
 import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
 import { EditLabelsControl } from '../../../components/templates/article/EditLabelsControl'
 import { EditLabelsModal } from '../../../components/templates/article/EditLabelsModal'
+import { DisplaySettingsModal } from '../../../components/templates/article/DisplaySettingsModal'
 
 
 const PdfArticleContainerNoSSR = dynamic<PdfArticleContainerProps>(
@@ -49,7 +50,8 @@ export default function Home(): JSX.Element {
   const [marginWidth, setMarginWidth] = useState(preferencesData?.margin ?? 360)
   const [lineHeight, setLineHeight] = useState(preferencesData?.lineHeight ?? 150)
   const [showEditLabelsModal, setShowEditLabelsModal] = useState(false)
-
+  const [showEditDisplaySettingsModal, setShowEditDisplaySettingsModal] = useState(false)
+  
   const { articleData } = useGetArticleQuery({
     username: router.query.username as string,
     slug: router.query.slug as string,
@@ -134,6 +136,10 @@ export default function Home(): JSX.Element {
         }
         break
       }
+      case 'editDisplaySettings': {
+        setShowEditDisplaySettingsModal(true)
+        break
+      }
       case 'editLabels': {
         setShowEditLabelsModal(true)
         break
@@ -245,6 +251,14 @@ export default function Home(): JSX.Element {
             onOpenChange={() => setShowEditLabelsModal(false)}
           />
         )}
+
+        {showEditDisplaySettingsModal && (
+          <DisplaySettingsModal
+            userPreferences={preferencesData}
+            articleActionHandler={actionHandler}
+            onOpenChange={() => setShowEditDisplaySettingsModal(false)}
+          />
+        )}
       </PrimaryLayout>
     )
   }