Add full theme selection to the menu

packages/web/components/templates/PrimaryDropdown.tsx

@@ -16,10 +16,12 @@ import { StyledText } from '../elements/StyledText'
 import { styled, theme, ThemeId } from '../tokens/stitches.config'
 import { LayoutType } from './homeFeed/HomeFeedContainer'
 import { useCurrentTheme } from '../../lib/hooks/useCurrentTheme'
+import { ThemeSelector } from './article/ReaderSettingsControl'
 
 type PrimaryDropdownProps = {
   children?: ReactNode
   showThemeSection: boolean
+  showFullThemeSection: boolean
 
   layout?: LayoutType
   updateLayout?: (layout: LayoutType) => void
@@ -192,7 +194,8 @@ export function PrimaryDropdown(props: PrimaryDropdownProps): JSX.Element {
         </VStack>
       </HStack>
       <DropdownSeparator />
-      {props.showThemeSection && <ThemeSection {...props} />}
+      {props.showThemeSection && <LegacyMenuThemeSection {...props} />}
+      {props.showFullThemeSection && <ThemeSection {...props} />}
       <DropdownOption
         onSelect={() => headerDropdownActionHandler('navigate-to-install')}
         title="Install"
@@ -261,7 +264,21 @@ export const StyledToggleButton = styled('button', {
   },
 })
 
-function ThemeSection(props: PrimaryDropdownProps): JSX.Element {
+const ThemeSection = (props: PrimaryDropdownProps): JSX.Element => {
+  const { currentTheme, setCurrentTheme, currentThemeIsDark } =
+    useCurrentTheme()
+
+  return (
+    <>
+      <VStack css={{ width: '100%' }}>
+        <ThemeSelector />
+      </VStack>
+      <DropdownSeparator />
+    </>
+  )
+}
+
+function LegacyMenuThemeSection(props: PrimaryDropdownProps): JSX.Element {
   const { currentTheme, setCurrentTheme, currentThemeIsDark } =
     useCurrentTheme()
 

packages/web/components/templates/article/ReaderSettingsControl.tsx

@@ -278,7 +278,9 @@ function BasicSettings(props: SettingsProps): JSX.Element {
 
       <HorizontalDivider />
 
-      <ThemeSelector />
+      <SpanBox css={{ px: '10px', width: '100%' }}>
+        <ThemeSelector />
+      </SpanBox>
 
       <HorizontalDivider />
 
@@ -597,14 +599,14 @@ function LayoutControls(props: LayoutControlsProps): JSX.Element {
   )
 }
 
-function ThemeSelector(): JSX.Element {
+export function ThemeSelector(): JSX.Element {
   useDarkModeListener()
   const { currentTheme, setCurrentTheme, resetSystemTheme } = useCurrentTheme()
 
   return (
     <VStack
       css={{
-        px: '20px',
+        px: '10px',
         m: '0px',
         pb: '10px',
         width: '100%',

packages/web/components/templates/navMenu/Footer.tsx

@@ -4,6 +4,7 @@ import { PrimaryDropdown } from '../PrimaryDropdown'
 import { LIBRARY_LEFT_MENU_WIDTH } from './LibraryMenu'
 
 type NavMenuFooterProps = {
+  showFullThemeSection?: boolean
   setShowAddLinkModal?: (show: true) => void
 }
 
@@ -28,7 +29,10 @@ export const NavMenuFooter = (props: NavMenuFooterProps): JSX.Element => {
         },
       }}
     >
-      <PrimaryDropdown showThemeSection={true} />
+      <PrimaryDropdown
+        showThemeSection={!props.showFullThemeSection ?? true}
+        showFullThemeSection={props.showFullThemeSection ?? false}
+      />
       <SpanBox
         css={{
           marginLeft: 'auto',

packages/web/components/templates/navMenu/NavigationMenu.tsx

@@ -169,7 +169,7 @@ export function NavigationMenu(props: LibraryFilterMenuProps): JSX.Element {
         </Box>
         <LibraryNav {...props} />
         <Shortcuts {...props} />
-        <NavMenuFooter {...props} />
+        <NavMenuFooter {...props} showFullThemeSection={true} />
         <Box css={{ height: '250px ' }} />
       </Box>
       {/* This spacer pushes library content to the right of 

packages/web/pages/justread/index.tsx

@@ -30,7 +30,7 @@ import {
   SpanBox,
   VStack,
 } from './../../components/elements/LayoutPrimitives'
-import { Hamburger, List, ThumbsDown, ThumbsUp } from 'phosphor-react'
+import { List, ThumbsDown, ThumbsUp } from 'phosphor-react'
 import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers'
 import { Toaster } from 'react-hot-toast'
 import { DEFAULT_HEADER_HEIGHT } from '../../components/templates/homeFeed/HeaderSpacer'
@@ -47,8 +47,7 @@ export default function Home(): JSX.Element {
       alignment="center"
       css={{
         width: '100%',
-        // bg: '$readerBg',
-        bg: '#2A2A2A',
+        bg: '$readerBg',
         pt: '45px',
         minHeight: '100vh',
       }}
@@ -338,7 +337,7 @@ const Title = (props: HomeItemViewProps): JSX.Element => {
         lineHeight: '20px',
         fontWeight: '600',
         fontFamily: '$inter',
-        color: 'white',
+        color: '$readerText',
         overflow: 'hidden',
         textOverflow: 'ellipsis',
         wordBreak: 'break-word',