diff --git a/packages/web/components/elements/StyledText.tsx b/packages/web/components/elements/StyledText.tsx index c9460941e..22c782ab0 100644 --- a/packages/web/components/elements/StyledText.tsx +++ b/packages/web/components/elements/StyledText.tsx @@ -37,6 +37,19 @@ const textVariants = { my: '6px', color: '$grayText', }, + settingsSection: { + fontWeight: '600', + fontSize: '17px', + fontFamily: '$inter', + color: '$grayText', + }, + settingsItem: { + fontSize: '13px', + fontFamily: '$display', + color: '$grayText', + marginBlockStart: '0px', + marginBlockEnd: '0px', + }, userNote: { fontSize: '16px', paddingTop: '0px', diff --git a/packages/web/components/templates/navMenu/LibraryMenu.tsx b/packages/web/components/templates/navMenu/LibraryMenu.tsx index 48bdcbb33..93d0d76d7 100644 --- a/packages/web/components/templates/navMenu/LibraryMenu.tsx +++ b/packages/web/components/templates/navMenu/LibraryMenu.tsx @@ -2,7 +2,7 @@ import { ReactNode, useEffect, useMemo, useRef } from 'react' import { StyledText } from '../../elements/StyledText' import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives' import { Button } from '../../elements/Button' -import { Circle } from 'phosphor-react' +import { Circle, Gear, GearSix, UserGear } from 'phosphor-react' import { Subscription, SubscriptionType, @@ -24,6 +24,7 @@ import { FollowingIcon } from '../../elements/icons/FollowingIcon' import { HomeIcon } from '../../elements/icons/HomeIcon' import { LibraryIcon } from '../../elements/icons/LibraryIcon' import { HighlightsIcon } from '../../elements/icons/HighlightsIcon' +import { CoverImage } from '../../elements/CoverImage' export const LIBRARY_LEFT_MENU_WIDTH = '275px' @@ -122,9 +123,10 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element { - + + {/* - + */} @@ -149,6 +151,7 @@ const LibraryNav = (props: LibraryFilterMenuProps): JSX.Element => { { ) } +const Shortcuts = (props: LibraryFilterMenuProps): JSX.Element => { + const shortcuts = [ + { + id: '12asdfasdf', + name: 'Omnivore Blog', + icon: 'https://substackcdn.com/image/fetch/w_256,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F052c15c4-ecfd-4d32-87db-13bcac9afad5_512x512.png', + filter: 'subscription:"Money Talk"', + type: 'newsletter', + }, + ] + + return ( + + + + SHORTCUTS + + + + {shortcuts.map((shortcut) => { + return ( + + + {shortcut.name} + {/* + + */} + + ) + })} + + ) +} + function SavedSearches( props: LibraryFilterMenuProps & { savedSearches: SavedSearch[] | undefined } ): JSX.Element { diff --git a/packages/web/lib/networking/queries/useGetSubscriptionsQuery.tsx b/packages/web/lib/networking/queries/useGetSubscriptionsQuery.tsx index 50efdebf8..764b732d9 100644 --- a/packages/web/lib/networking/queries/useGetSubscriptionsQuery.tsx +++ b/packages/web/lib/networking/queries/useGetSubscriptionsQuery.tsx @@ -16,6 +16,7 @@ export type Subscription = { newsletterEmail?: string url?: string + icon?: string description?: string status: SubscriptionStatus @@ -57,6 +58,7 @@ export function useGetSubscriptionsQuery( type newsletterEmail url + icon description status unsubscribeMailTo