From 6a47cc0da9514535e8f62155dc2eba4b40d868d5 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Thu, 13 Jun 2024 13:17:34 +0800 Subject: [PATCH 01/12] Use a float for the thumbnail to improve text layout --- .../web/components/nav-containers/home.tsx | 58 +++++++++---------- 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/packages/web/components/nav-containers/home.tsx b/packages/web/components/nav-containers/home.tsx index af667d5f7..90e99cce0 100644 --- a/packages/web/components/nav-containers/home.tsx +++ b/packages/web/components/nav-containers/home.tsx @@ -380,6 +380,7 @@ const Title = (props: HomeItemViewProps): JSX.Element => { distribution="start" alignment="center" css={{ + mb: '5px', fontSize: '18px', lineHeight: '24px', fontWeight: '600', @@ -513,7 +514,7 @@ const TopicPickHomeItemView = (props: HomeItemViewProps): JSX.Element => { css={{ width: '100%', p: '0px', - pt: '35px', + pt: '20px', cursor: 'pointer', borderRadius: '5px', '@mdDown': { @@ -537,38 +538,37 @@ const TopicPickHomeItemView = (props: HomeItemViewProps): JSX.Element => { }} alignment="start" > - - - - - - - - </VStack> - <SpanBox css={{ ml: 'auto' }}> - {props.homeItem.thumbnail && ( - <CoverImage - css={{ - mt: '6px', - width: '120px', - height: '70px', - borderRadius: '4px', - }} - src={props.homeItem.thumbnail} - ></CoverImage> - )} - </SpanBox> - </HStack> - <SpanBox css={{ px: '20px' }}> + <Box css={{ width: '100%', gap: '10px', px: '20px' }}> + <HStack + distribution="start" + alignment="center" + css={{ gap: '5px', lineHeight: '1', mb: '10px' }} + > + <SourceInfo homeItem={props.homeItem} /> + <TimeAgo homeItem={props.homeItem} /> + </HStack> + + {props.homeItem.thumbnail && ( + <CoverImage + css={{ + width: '120px', + height: '70px', + borderRadius: '4px', + marginLeft: '10px', + float: 'right', + }} + src={props.homeItem.thumbnail} + ></CoverImage> + )} + <Title homeItem={props.homeItem} /> <PreviewContent previewContent={props.homeItem.previewContent} maxLines="6" /> - </SpanBox> + + <SpanBox css={{ ml: 'auto' }}></SpanBox> + </Box> + <SpanBox css={{ px: '20px' }}></SpanBox> <HStack css={{ gap: '10px', my: '15px', px: '20px' }}> <Button style="homeAction"> <AddToLibraryActionIcon From ee4178a3b582c3d6d2cf85ae1069e4816aa33e32 Mon Sep 17 00:00:00 2001 From: Jackson Harper <jacksonh@gmail.com> Date: Thu, 13 Jun 2024 13:39:34 +0800 Subject: [PATCH 02/12] Better height consistency for the just added section --- packages/web/components/nav-containers/home.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/web/components/nav-containers/home.tsx b/packages/web/components/nav-containers/home.tsx index 90e99cce0..38cc00ae8 100644 --- a/packages/web/components/nav-containers/home.tsx +++ b/packages/web/components/nav-containers/home.tsx @@ -120,6 +120,7 @@ const JustAddedHomeSection = (props: HomeSectionProps): JSX.Element => { distribution="start" css={{ width: '100%', + height: '100%', gap: '20px', }} > @@ -172,8 +173,9 @@ const JustAddedHomeSection = (props: HomeSectionProps): JSX.Element => { <HStack css={{ width: '100%', + height: '100%', lineHeight: '1', - overflow: 'scroll', + overflowX: 'scroll', gap: '25px', scrollbarWidth: 'none', '::-webkit-scrollbar': { @@ -415,6 +417,7 @@ const TitleSmall = (props: HomeItemViewProps): JSX.Element => { css={{ fontSize: '14px', lineHeight: '21px', + minHeight: '42px', // always have two lines of space fontWeight: '500', fontFamily: '$inter', color: '$homeTextTitle', From 7e559091bd81faf25e7fe08b398019b82464ce01 Mon Sep 17 00:00:00 2001 From: Jackson Harper <jacksonh@gmail.com> Date: Thu, 13 Jun 2024 14:48:55 +0800 Subject: [PATCH 03/12] size and colour tweaks --- .../web/components/nav-containers/home.tsx | 24 +++++++++++++------ .../templates/navMenu/NavigationMenu.tsx | 4 ++-- 2 files changed, 19 insertions(+), 9 deletions(-) diff --git a/packages/web/components/nav-containers/home.tsx b/packages/web/components/nav-containers/home.tsx index 38cc00ae8..41e353b87 100644 --- a/packages/web/components/nav-containers/home.tsx +++ b/packages/web/components/nav-containers/home.tsx @@ -47,6 +47,7 @@ export function HomeContainer(): JSX.Element { bg: '$readerBg', pt: '45px', minHeight: '100vh', + minWidth: '320px', }} > <Toaster /> @@ -368,6 +369,7 @@ const TimeAgo = (props: HomeItemViewProps): JSX.Element => { fontWeight: 'medium', fontFamily: '$inter', color: '$homeTextSubtle', + flexShrink: '0', }} > {timeAgo(props.homeItem.date)} @@ -382,7 +384,7 @@ const Title = (props: HomeItemViewProps): JSX.Element => { distribution="start" alignment="center" css={{ - mb: '5px', + mb: '6px', fontSize: '18px', lineHeight: '24px', fontWeight: '600', @@ -499,7 +501,7 @@ const JustAddedItemView = (props: HomeItemViewProps): JSX.Element => { css={{ width: '100%', gap: '5px', lineHeight: '1' }} > <SourceInfo homeItem={props.homeItem} subtle={true} /> - <SpanBox css={{ ml: 'auto' }}> + <SpanBox css={{ ml: 'auto', flexShrink: '0' }}> <TimeAgo homeItem={props.homeItem} /> </SpanBox> </HStack> @@ -548,7 +550,9 @@ const TopicPickHomeItemView = (props: HomeItemViewProps): JSX.Element => { css={{ gap: '5px', lineHeight: '1', mb: '10px' }} > <SourceInfo homeItem={props.homeItem} /> - <TimeAgo homeItem={props.homeItem} /> + <SpanBox css={{ '@mdDown': { ml: 'auto' } }}> + <TimeAgo homeItem={props.homeItem} /> + </SpanBox> </HStack> {props.homeItem.thumbnail && ( @@ -568,8 +572,6 @@ const TopicPickHomeItemView = (props: HomeItemViewProps): JSX.Element => { previewContent={props.homeItem.previewContent} maxLines="6" /> - - <SpanBox css={{ ml: 'auto' }}></SpanBox> </Box> <SpanBox css={{ px: '20px' }}></SpanBox> <HStack css={{ gap: '10px', my: '15px', px: '20px' }}> @@ -611,6 +613,7 @@ const QuickLinkHomeItemView = (props: HomeItemViewProps): JSX.Element => { gap: '5px', borderRadius: '5px', '&:hover': { + bg: '#007AFF10', cursor: 'pointer', }, '&:hover .title-text': { @@ -633,7 +636,7 @@ const QuickLinkHomeItemView = (props: HomeItemViewProps): JSX.Element => { > <SourceInfo homeItem={props.homeItem} subtle={true} /> - <SpanBox css={{ ml: 'auto' }}> + <SpanBox css={{ ml: 'auto', flexShrink: '0' }}> <TimeAgo homeItem={props.homeItem} /> </SpanBox> </HStack> @@ -668,7 +671,14 @@ const SourceInfo = (props: HomeItemViewProps & SourceInfoProps) => ( <HStack distribution="start" alignment="center" - css={{ gap: '8px', cursor: 'pointer' }} + css={{ + gap: '8px', + cursor: 'pointer', + flex: '1', + overflow: 'hidden', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + }} > {props.homeItem.source.icon && ( <SiteIconSmall diff --git a/packages/web/components/templates/navMenu/NavigationMenu.tsx b/packages/web/components/templates/navMenu/NavigationMenu.tsx index d67626f30..8ab884a71 100644 --- a/packages/web/components/templates/navMenu/NavigationMenu.tsx +++ b/packages/web/components/templates/navMenu/NavigationMenu.tsx @@ -178,7 +178,7 @@ const LibraryNav = (props: NavigationMenuProps): JSX.Element => { width: '100%', borderBottom: '1px solid $thBorderColor', px: '0px', - pb: '25px', + pb: '15px', }} alignment="start" distribution="start" @@ -331,7 +331,7 @@ const Shortcuts = (props: NavigationMenuProps): JSX.Element => { fontFamily: '$display', fontSize: '14px', lineHeight: '125%', - color: '$thLibraryMenuPrimary', + color: '$homeTextSubtle', mb: '10px', px: '15px', }} From 48d7019af90a0a6ca3119cd12225a78375d34106 Mon Sep 17 00:00:00 2001 From: Jackson Harper <jacksonh@gmail.com> Date: Thu, 13 Jun 2024 15:15:16 +0800 Subject: [PATCH 04/12] Start to simplify new library layout --- .../web/components/patterns/LibraryCards/LibraryGridCard.tsx | 2 +- .../web/components/templates/library/LibraryContainer.tsx | 3 ++- packages/web/components/tokens/stitches.config.ts | 4 ++-- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx index fb2fd6502..1f551fdd4 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx @@ -67,12 +67,12 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element { width: '100%', height: '100%', minHeight: '270px', - background: 'white', borderRadius: '5px', borderWidth: '1px', borderStyle: 'none', overflow: 'hidden', cursor: 'pointer', + border: '1px solid black', '@media (max-width: 930px)': { width: 'calc(100% - 30px)', }, diff --git a/packages/web/components/templates/library/LibraryContainer.tsx b/packages/web/components/templates/library/LibraryContainer.tsx index 94d226a87..7f1eff037 100644 --- a/packages/web/components/templates/library/LibraryContainer.tsx +++ b/packages/web/components/templates/library/LibraryContainer.tsx @@ -1182,6 +1182,7 @@ function LibraryItems(props: LibraryItemsProps): JSX.Element { width: '100%', gridAutoRows: 'auto', borderRadius: '6px', + border: props.layout == 'LIST_LAYOUT' ? 'unset' : '1px solid black', gridGap: props.layout == 'LIST_LAYOUT' ? '10px' : '20px', marginTop: '10px', marginBottom: '0px', @@ -1215,7 +1216,7 @@ function LibraryItems(props: LibraryItemsProps): JSX.Element { outline: 'none', }, '&> div': { - bg: '$thLeftMenuBackground', + // bg: '$thLeftMenuBackground', // bg: '$thLibraryBackground', }, '&:focus': { diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts index 1dee7a738..0ef397081 100644 --- a/packages/web/components/tokens/stitches.config.ts +++ b/packages/web/components/tokens/stitches.config.ts @@ -105,7 +105,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } = borderStyles: {}, shadows: { // cardBoxShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.05);', - cardBoxShadow: '0px 4px 4px rgba(0, 0, 0, 0.20);', + cardBoxShadow: '0px 4px 4px rgba(0, 0, 0, 0.10);', }, zIndices: {}, transitions: {}, @@ -273,7 +273,7 @@ const darkThemeSpec = { colorScheme: 'dark', }, shadows: { - cardBoxShadow: '0px 4px 8px rgba(0, 0, 0, 0.50);', + cardBoxShadow: '0px 4px 8px rgba(0, 0, 0, 0.20);', }, colors: { grayBase: '#252525', From fa82a09c2e71dc584a5cff656b0d8d0b4303bcab Mon Sep 17 00:00:00 2001 From: Jackson Harper <jacksonh@gmail.com> Date: Thu, 13 Jun 2024 15:25:29 +0800 Subject: [PATCH 05/12] Padding an shadows for library grid --- .../web/components/patterns/LibraryCards/LibraryGridCard.tsx | 2 +- .../web/components/templates/library/LibraryContainer.tsx | 5 ++--- packages/web/components/templates/library/LibraryHeader.tsx | 4 +++- packages/web/components/tokens/stitches.config.ts | 4 ++-- 4 files changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx index 1f551fdd4..5c99cbed3 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx @@ -72,7 +72,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element { borderStyle: 'none', overflow: 'hidden', cursor: 'pointer', - border: '1px solid black', + border: props.legacyLayout ? 'unset' : '1px solid black', '@media (max-width: 930px)': { width: 'calc(100% - 30px)', }, diff --git a/packages/web/components/templates/library/LibraryContainer.tsx b/packages/web/components/templates/library/LibraryContainer.tsx index 7f1eff037..189579786 100644 --- a/packages/web/components/templates/library/LibraryContainer.tsx +++ b/packages/web/components/templates/library/LibraryContainer.tsx @@ -1182,7 +1182,6 @@ function LibraryItems(props: LibraryItemsProps): JSX.Element { width: '100%', gridAutoRows: 'auto', borderRadius: '6px', - border: props.layout == 'LIST_LAYOUT' ? 'unset' : '1px solid black', gridGap: props.layout == 'LIST_LAYOUT' ? '10px' : '20px', marginTop: '10px', marginBottom: '0px', @@ -1190,7 +1189,7 @@ function LibraryItems(props: LibraryItemsProps): JSX.Element { paddingBottom: '0px', overflow: 'visible', px: '70px', - '@lgDown': { + '@xlgDown': { px: '10px', }, '@mdDown': { @@ -1200,7 +1199,7 @@ function LibraryItems(props: LibraryItemsProps): JSX.Element { gridTemplateColumns: props.layout == 'LIST_LAYOUT' ? 'none' - : `repeat( auto-fit, minmax(300px, 1fr) )`, + : `repeat( auto-fit, minmax(280px, 1fr) )`, }} > {props.items.map((linkedItem) => ( diff --git a/packages/web/components/templates/library/LibraryHeader.tsx b/packages/web/components/templates/library/LibraryHeader.tsx index b982c45de..416c50107 100644 --- a/packages/web/components/templates/library/LibraryHeader.tsx +++ b/packages/web/components/templates/library/LibraryHeader.tsx @@ -88,7 +88,9 @@ export function LibraryHeader(props: LibraryHeaderProps): JSX.Element { px: '70px', left: LIBRARY_LEFT_MENU_WIDTH, transition: 'height 0.5s', - '@lgDown': { px: '20px' }, + '@xlgDown': { + px: '10px', + }, '@mdDown': { px: '10px', left: '0px', diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts index 0ef397081..9a513cd0b 100644 --- a/packages/web/components/tokens/stitches.config.ts +++ b/packages/web/components/tokens/stitches.config.ts @@ -105,7 +105,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } = borderStyles: {}, shadows: { // cardBoxShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.05);', - cardBoxShadow: '0px 4px 4px rgba(0, 0, 0, 0.10);', + cardBoxShadow: '0px 4px 4px rgba(0, 0, 0, 0.20);', }, zIndices: {}, transitions: {}, @@ -273,7 +273,7 @@ const darkThemeSpec = { colorScheme: 'dark', }, shadows: { - cardBoxShadow: '0px 4px 8px rgba(0, 0, 0, 0.20);', + cardBoxShadow: '0px 4px 8px rgba(0, 0, 0, 0.35);', }, colors: { grayBase: '#252525', From 7e05f81ec05b354938299ab7c62f9cd1a0fc991a Mon Sep 17 00:00:00 2001 From: Jackson Harper <jacksonh@gmail.com> Date: Thu, 13 Jun 2024 15:29:08 +0800 Subject: [PATCH 06/12] Fix pinned searches in new library container --- .../web/components/templates/library/LibraryContainer.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/web/components/templates/library/LibraryContainer.tsx b/packages/web/components/templates/library/LibraryContainer.tsx index 189579786..c67624cec 100644 --- a/packages/web/components/templates/library/LibraryContainer.tsx +++ b/packages/web/components/templates/library/LibraryContainer.tsx @@ -1040,7 +1040,12 @@ export function LibraryItemsLayout( '@lgDown': { display: 'none', }, + mt: '10px', mb: '10px', + px: '70px', + '@xlgDown': { + px: '10px', + }, }} > <PinnedButtons From 40edeb3d16bee6a2934eb36af0f958d6e3d77b05 Mon Sep 17 00:00:00 2001 From: Jackson Harper <jacksonh@gmail.com> Date: Thu, 13 Jun 2024 15:29:19 +0800 Subject: [PATCH 07/12] Add rules to settings list --- packages/web/components/templates/navMenu/SettingsMenu.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/web/components/templates/navMenu/SettingsMenu.tsx b/packages/web/components/templates/navMenu/SettingsMenu.tsx index e60c5008b..0a2ccd6b2 100644 --- a/packages/web/components/templates/navMenu/SettingsMenu.tsx +++ b/packages/web/components/templates/navMenu/SettingsMenu.tsx @@ -22,6 +22,7 @@ export const SETTINGS_SECTION_1 = [ ] export const SETTINGS_SECTION_2 = [ + { name: 'Rules', destination: '/settings/rules' }, { name: 'Integrations', destination: '/settings/integrations' }, { name: 'Install', destination: '/settings/installation' }, ] From 2ead280152c0f2b932cb97157cf1ecb05f0bb6a6 Mon Sep 17 00:00:00 2001 From: Jackson Harper <jacksonh@gmail.com> Date: Thu, 13 Jun 2024 15:50:24 +0800 Subject: [PATCH 08/12] Make the side menu an overlay on smaller screens --- .../components/templates/navMenu/Footer.tsx | 3 --- .../templates/navMenu/NavigationMenu.tsx | 25 +++---------------- 2 files changed, 3 insertions(+), 25 deletions(-) diff --git a/packages/web/components/templates/navMenu/Footer.tsx b/packages/web/components/templates/navMenu/Footer.tsx index 4a1c4f754..50ebf3a7c 100644 --- a/packages/web/components/templates/navMenu/Footer.tsx +++ b/packages/web/components/templates/navMenu/Footer.tsx @@ -24,9 +24,6 @@ export const NavMenuFooter = (props: NavMenuFooterProps): JSX.Element => { '&::-webkit-scrollbar': { display: 'none', }, - '@mdDown': { - width: '100%', - }, }} > <PrimaryDropdown /> diff --git a/packages/web/components/templates/navMenu/NavigationMenu.tsx b/packages/web/components/templates/navMenu/NavigationMenu.tsx index 8ab884a71..303d50c85 100644 --- a/packages/web/components/templates/navMenu/NavigationMenu.tsx +++ b/packages/web/components/templates/navMenu/NavigationMenu.tsx @@ -85,10 +85,11 @@ export function NavigationMenu(props: NavigationMenuProps): JSX.Element { display: 'none', }, '@mdDown': { - width: '100%', transition: 'top 100ms, visibility 100ms', top: props.showMenu ? '0' : '100%', visibility: props.showMenu ? 'visible' : 'hidden', + boxShadow: + 'rgb(48, 54, 61) 0px 0px 0px 1px, rgba(1, 4, 9, 0.4) 0px 6px 12px -3px, rgba(1, 4, 9, 0.4) 0px 6px 18px 0px', }, zIndex: 2, }} @@ -102,12 +103,11 @@ export function NavigationMenu(props: NavigationMenuProps): JSX.Element { lineHeight: '1', '@mdDown': { pb: '0px', - pt: '5px', px: '15px', }, }} > - <SpanBox css={{ mr: 'auto', '@mdDown': { display: 'none' } }}> + <SpanBox css={{ mr: 'auto' }}> <Button style="plainIcon" onClick={(event) => { @@ -121,25 +121,6 @@ export function NavigationMenu(props: NavigationMenuProps): JSX.Element { /> </Button> </SpanBox> - - <Button - style="plainIcon" - css={{ - display: 'none', - '@mdDown': { - display: 'flex', - ml: 'auto', - pt: '10px', - pb: '0px', - }, - }} - onClick={(event) => { - props.setShowMenu(false) - event.preventDefault() - }} - > - <X size={30} /> - </Button> </Box> <LibraryNav {...props} /> <Shortcuts {...props} /> From 900d4b696bd6ba0a4398487d41f228d38e31ed04 Mon Sep 17 00:00:00 2001 From: Jackson Harper <jacksonh@gmail.com> Date: Thu, 13 Jun 2024 16:11:16 +0800 Subject: [PATCH 09/12] Reduce flicker when loading settings from local storage --- .../web/components/templates/NavigationLayout.tsx | 14 ++++++++++++-- packages/web/lib/hooks/usePersistedState.tsx | 6 ++++-- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/packages/web/components/templates/NavigationLayout.tsx b/packages/web/components/templates/NavigationLayout.tsx index a1bb2f4ad..c3a8b09d0 100644 --- a/packages/web/components/templates/NavigationLayout.tsx +++ b/packages/web/components/templates/NavigationLayout.tsx @@ -44,7 +44,7 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element { const [showKeyboardCommandsModal, setShowKeyboardCommandsModal] = useState(false) - const [showNavMenu, setShowNavMenu] = usePersistedState<boolean>({ + const [showNavMenu, setShowNavMenu, isLoading] = usePersistedState<boolean>({ key: 'nav-show-menu', isSessionStorage: false, initialValue: true, @@ -111,6 +111,16 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element { } }, [showLogout]) + if (isLoading) { + return ( + <HStack + css={{ width: '100vw', height: '100vh' }} + distribution="start" + alignment="start" + ></HStack> + ) + } + return ( <HStack css={{ width: '100vw', height: '100vh' }} @@ -133,7 +143,7 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element { }} /> </SpanBox> - {showNavMenu && ( + {!isLoading && showNavMenu && ( <NavigationMenu section={props.section} // eslint-disable-next-line @typescript-eslint/no-empty-function diff --git a/packages/web/lib/hooks/usePersistedState.tsx b/packages/web/lib/hooks/usePersistedState.tsx index 59f506dac..0aa5b6097 100644 --- a/packages/web/lib/hooks/usePersistedState.tsx +++ b/packages/web/lib/hooks/usePersistedState.tsx @@ -8,9 +8,10 @@ export function usePersistedState<T>({ key: string initialValue: T isSessionStorage?: boolean -}): [T, (x: T | ((prev: T) => T)) => void] { +}): [T, (x: T | ((prev: T) => T)) => void, boolean] { // State to store our value // Pass initial state function to useState so logic is only executed once + const [isLoading, setIsLoading] = useState(true) const [storedValue, setStoredValue] = useState(initialValue) useEffect(() => { @@ -27,6 +28,7 @@ export function usePersistedState<T>({ if (item) { setStoredValue(JSON.parse(item)) } + setIsLoading(false) } catch (error) { // If error also return initialValue console.log(error) @@ -56,5 +58,5 @@ export function usePersistedState<T>({ } } - return [storedValue, setValue] + return [storedValue, setValue, isLoading] } From a8d1a8f6b3c2014254918bc7532cfd0becb3d402 Mon Sep 17 00:00:00 2001 From: Jackson Harper <jacksonh@gmail.com> Date: Thu, 13 Jun 2024 16:11:42 +0800 Subject: [PATCH 10/12] Better return from PDF to library --- .../templates/article/PdfArticleContainer.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/web/components/templates/article/PdfArticleContainer.tsx b/packages/web/components/templates/article/PdfArticleContainer.tsx index d35046312..dfbbcabf5 100644 --- a/packages/web/components/templates/article/PdfArticleContainer.tsx +++ b/packages/web/components/templates/article/PdfArticleContainer.tsx @@ -35,8 +35,9 @@ export default function PdfArticleContainer( const containerRef = useRef<HTMLDivElement | null>(null) const [notebookKey, setNotebookKey] = useState<string>(uuidv4()) const [noteTarget, setNoteTarget] = useState<Highlight | undefined>(undefined) - const [noteTargetPageIndex, setNoteTargetPageIndex] = - useState<number | undefined>(undefined) + const [noteTargetPageIndex, setNoteTargetPageIndex] = useState< + number | undefined + >(undefined) const highlightsRef = useRef<Highlight[]>([]) const annotationOmnivoreId = (annotation: Annotation): string | undefined => { @@ -448,6 +449,11 @@ export default function PdfArticleContainer( document.dispatchEvent(new Event('openOriginalArticle')) break case 'u': + const navReturn = window.sessionStorage.getItem('nav-return') + if (navReturn) { + window.location.assign(navReturn) + return + } const query = window.sessionStorage.getItem('q') if (query) { window.location.assign(`/home?${query}`) From 980fcf4f4a89178f0278f1a8a616e5a1d7494090 Mon Sep 17 00:00:00 2001 From: Jackson Harper <jacksonh@gmail.com> Date: Thu, 13 Jun 2024 16:12:00 +0800 Subject: [PATCH 11/12] Remove unused --- packages/web/components/templates/reader/ReaderHeader.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/web/components/templates/reader/ReaderHeader.tsx b/packages/web/components/templates/reader/ReaderHeader.tsx index 99a00d533..05a00f601 100644 --- a/packages/web/components/templates/reader/ReaderHeader.tsx +++ b/packages/web/components/templates/reader/ReaderHeader.tsx @@ -1,12 +1,10 @@ import { HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives' import { Button } from '../../elements/Button' -import { PrimaryDropdown } from '../PrimaryDropdown' import { LogoBox } from '../../elements/LogoBox' import { ReactNode, useEffect, useState } from 'react' import { DEFAULT_HEADER_HEIGHT } from '../homeFeed/HeaderSpacer' import { theme } from '../../tokens/stitches.config' import { ReaderSettingsIcon } from '../../elements/icons/ReaderSettingsIcon' -import { CircleUtilityMenuIcon } from '../../elements/icons/CircleUtilityMenuIcon' function useScrollDirection() { const [scrollDirection, setScrollDirection] = useState('up') From 570045594fde9ca2f19c7f03abc871252029d169 Mon Sep 17 00:00:00 2001 From: Jackson Harper <jacksonh@gmail.com> Date: Thu, 13 Jun 2024 18:02:21 +0800 Subject: [PATCH 12/12] Color for the search box --- .../web/components/templates/library/LibraryHeader.tsx | 2 +- packages/web/components/tokens/stitches.config.ts | 7 +++++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/web/components/templates/library/LibraryHeader.tsx b/packages/web/components/templates/library/LibraryHeader.tsx index 416c50107..849f6edee 100644 --- a/packages/web/components/templates/library/LibraryHeader.tsx +++ b/packages/web/components/templates/library/LibraryHeader.tsx @@ -274,7 +274,7 @@ export function SearchBox(props: SearchBoxProps): JSX.Element { height: '38px', width: '100%', maxWidth: '521px', - bg: '$thLibrarySearchbox', + bg: '$backgroundMedium', borderRadius: '6px', boxShadow: props.searchBoxFocused ? 'none' diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts index 9a513cd0b..7638b9de4 100644 --- a/packages/web/components/tokens/stitches.config.ts +++ b/packages/web/components/tokens/stitches.config.ts @@ -238,6 +238,8 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } = homeActionHoverBg: '#DFDFDF', homeDivider: '#D9D9D9', + backgroundMedium: '#FFFFFF', + thLibraryAISummaryBorder: '#6A6968', thLibraryAISummaryBackground: '#343434', @@ -392,6 +394,8 @@ const darkThemeSpec = { homeActionHoverBg: '#515151', homeDivider: '#3D3D3D', + backgroundMedium: '#323232', + thLibraryAISummaryBorder: '#6A6968', thLibraryAISummaryBackground: '#343434', @@ -431,6 +435,8 @@ const apolloThemeSpec = { thBackground: '#474747', thBackground2: '#515151', + backgroundMedium: '#525252', + thLibraryMultiselectHover: '#EEE8D5', }, } @@ -456,6 +462,7 @@ const sepiaThemeSpec = { thBackground: '#FDF6E3', homeCardHover: '#EEE8D5', + backgroundMedium: '#EEE8D5', homeDivider: '#DDD6C1', homeActionHoverBg: '#DDD6C1',