Add popular newsletters

packages/web/components/elements/Table.tsx

@@ -178,6 +178,7 @@ export function Table(props: TableProps): JSX.Element {
             borderBottomLeftRadius: index == props.rows.length - 1 ? '5px' : '',
             borderBottomRightRadius:
               index == props.rows.length - 1 ? '5px' : '',
+            padding: '10px 20px 10px 40px',
           }}
         >
           <Box
@@ -214,7 +215,7 @@ export function Table(props: TableProps): JSX.Element {
                 style="ctaWhite"
                 css={{ mr: '$1', background: '$labelButtonsBg' }}
                 onClick={() => {
-                  props.onDelete(row[0])
+                  props.onDelete && props.onDelete(row[0])
                 }}
               >
                 <Trash size={16} color={iconColor} />

packages/web/components/patterns/DropdownMenu.tsx

@@ -1,9 +1,9 @@
 import { ReactNode, useMemo, useState } from 'react'
-import { Box, HStack, VStack } from './../elements/LayoutPrimitives'
+import { HStack, VStack } from './../elements/LayoutPrimitives'
 import {
   Dropdown,
-  DropdownSeparator,
   DropdownOption,
+  DropdownSeparator,
 } from '../elements/DropdownElements'
 import { StyledText } from '../elements/StyledText'
 import { Button } from '../elements/Button'
@@ -18,6 +18,7 @@ export type HeaderDropdownAction =
   | 'navigate-to-emails'
   | 'navigate-to-labels'
   | 'navigate-to-profile'
+  | 'navigate-to-subscriptions'
   | 'increaseFontSize'
   | 'decreaseFontSize'
   | 'logout'
@@ -38,19 +39,27 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
   return (
     <Dropdown triggerElement={props.triggerElement}>
       <VStack css={{ p: '$2' }}>
-        <StyledText style='menuTitle'>Theme</StyledText>
+        <StyledText style="menuTitle">Theme</StyledText>
         <HStack css={{ mt: '6px', mb: '6px', width: '100%', gap: '8px' }}>
-          <Button style='themeSwitch' css={{ background: "#FFFFFF", width: '50%' }} onClick={() => {
-            props.actionHandler('apply-lighter-theme')
-            setCurrentTheme(currentThemeName())
-          }}>
-            { isDark ? '' : '✓' }
+          <Button
+            style="themeSwitch"
+            css={{ background: '#FFFFFF', width: '50%' }}
+            onClick={() => {
+              props.actionHandler('apply-lighter-theme')
+              setCurrentTheme(currentThemeName())
+            }}
+          >
+            {isDark ? '' : '✓'}
           </Button>
-          <Button style='themeSwitch' css={{ background: "#3D3D3D", width: '50%' }} onClick={() => {
-            props.actionHandler('apply-dark-theme')
-            setCurrentTheme(currentThemeName())
-          }}>
-            { isDark ? '✓' : '' }
+          <Button
+            style="themeSwitch"
+            css={{ background: '#3D3D3D', width: '50%' }}
+            onClick={() => {
+              props.actionHandler('apply-dark-theme')
+              setCurrentTheme(currentThemeName())
+            }}
+          >
+            {isDark ? '✓' : ''}
           </Button>
         </HStack>
       </VStack>
@@ -67,6 +76,10 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
         onSelect={() => props.actionHandler('navigate-to-labels')}
         title="Labels"
       />
+      <DropdownOption
+        onSelect={() => props.actionHandler('navigate-to-subscriptions')}
+        title="Subscriptions"
+      />
       <DropdownOption
         onSelect={() => window.Intercom('show')}
         title="Feedback"

packages/web/components/patterns/PrimaryHeader.tsx

@@ -1,9 +1,9 @@
-import { Box, HStack, SpanBox } from '../elements/LayoutPrimitives'
+import { Box, HStack } from '../elements/LayoutPrimitives'
 import { OmnivoreNameLogo } from './../elements/images/OmnivoreNameLogo'
 import { DropdownMenu, HeaderDropdownAction } from './../patterns/DropdownMenu'
-import { updateTheme } from '../../lib/themeUpdater'
+import { darkenTheme, lightenTheme, updateTheme } from '../../lib/themeUpdater'
 import { AvatarDropdown } from './../elements/AvatarDropdown'
-import { theme, ThemeId } from './../tokens/stitches.config'
+import { ThemeId } from './../tokens/stitches.config'
 import { useCallback, useEffect, useState } from 'react'
 import {
   ScrollOffsetChangeset,
@@ -12,7 +12,6 @@ import {
 import { useRouter } from 'next/router'
 import { useKeyboardShortcuts } from '../../lib/keyboardShortcuts/useKeyboardShortcuts'
 import { primaryCommands } from '../../lib/keyboardShortcuts/navigationShortcuts'
-import { darkenTheme, lightenTheme } from '../../lib/themeUpdater'
 import { UserBasicData } from '../../lib/networking/queries/useGetViewerQuery'
 import { setupAnalytics } from '../../lib/analytics'
 import { Button } from '../elements/Button'
@@ -111,6 +110,9 @@ export function PrimaryHeader(props: HeaderProps): JSX.Element {
           router.push(`/${props.user.profile.username}`)
         }
         break
+      case 'navigate-to-subscriptions':
+        router.push('/settings/subscriptions')
+        break
       case 'logout':
         props.setShowLogoutConfirmation(true)
         break
@@ -187,13 +189,17 @@ function NavHeader(props: NavHeaderProps): JSX.Element {
         </HStack>
 
         {props.toolbarControl && (
-          <HStack distribution="end" alignment="center" css={{
-            height: '100%', width: '100%',
-            mr: '16px',
-            display: props.alwaysDisplayToolbar ? 'flex' : 'none',
-            '@lgDown': {
-              display: 'flex',
-            },
+          <HStack
+            distribution="end"
+            alignment="center"
+            css={{
+              height: '100%',
+              width: '100%',
+              mr: '16px',
+              display: props.alwaysDisplayToolbar ? 'flex' : 'none',
+              '@lgDown': {
+                display: 'flex',
+              },
             }}
           >
             {props.toolbarControl}

packages/web/pages/settings/subscriptions.tsx

@@ -59,6 +59,19 @@ export default function SubscriptionsPage(): JSX.Element {
         rows={rows}
         onDelete={setConfirmUnsubscribeName}
       />
+
+      {/* TODO: Dynamically loaded from API response */}
+      <Table
+        heading={'Popular Newsletters'}
+        headers={['Substack', 'Axios', 'Bloomberg']}
+        rows={[
+          [
+            'https://substack.com/',
+            'https://www.axios.com/newsletters',
+            'https://www.bloomberg.com/account/newsletters',
+          ],
+        ]}
+      />
     </PrimaryLayout>
   )
 }