From 5e7bd2fe0e674100b4cb79178d279d902f723524 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Tue, 11 Jun 2024 17:10:38 +0800 Subject: [PATCH] Theme clean up --- .../web/components/elements/SuggestionBox.tsx | 8 ++++-- .../templates/article/HighlightsLayer.tsx | 28 +++++++++++-------- .../templates/homeFeed/LibraryHeader.tsx | 1 - .../templates/library/LibraryHeader.tsx | 2 -- .../components/templates/navMenu/Footer.tsx | 2 +- .../templates/navMenu/NavigationMenu.tsx | 1 + .../web/components/tokens/stitches.config.ts | 24 +++++++++++++++- packages/web/pages/highlights/index.tsx | 3 -- 8 files changed, 46 insertions(+), 23 deletions(-) diff --git a/packages/web/components/elements/SuggestionBox.tsx b/packages/web/components/elements/SuggestionBox.tsx index 5118708af..5ffaeb822 100644 --- a/packages/web/components/elements/SuggestionBox.tsx +++ b/packages/web/components/elements/SuggestionBox.tsx @@ -40,14 +40,16 @@ const InternalOrExternalLink = (props: InternalOrExternalLinkProps) => { }} > {!isExternal ? ( - {props.children} + + {props.children} + ) : ( {props.children} )} - ); + ) } export const SuggestionBox = (props: SuggestionBoxProps) => { @@ -59,7 +61,7 @@ export const SuggestionBox = (props: SuggestionBoxProps) => { flexDirection: props.size == 'large' ? 'column' : 'row', width: 'fit-content', borderRadius: '5px', - background: props.background ?? '$thBackground3', + background: props.background ?? 'unset', fontSize: '15px', fontFamily: '$inter', fontWeight: '500', diff --git a/packages/web/components/templates/article/HighlightsLayer.tsx b/packages/web/components/templates/article/HighlightsLayer.tsx index a117e0ede..24e96ec9e 100644 --- a/packages/web/components/templates/article/HighlightsLayer.tsx +++ b/packages/web/components/templates/article/HighlightsLayer.tsx @@ -80,13 +80,15 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element { const focusedHighlightMousePos = useRef({ pageX: 0, pageY: 0 }) const [currentHighlightIdx, setCurrentHighlightIdx] = useState(0) - const [focusedHighlight, setFocusedHighlight] = - useState(undefined) + const [focusedHighlight, setFocusedHighlight] = useState< + Highlight | undefined + >(undefined) const [selectionData, setSelectionData] = useSelection(highlightLocations) - const [labelsTarget, setLabelsTarget] = - useState(undefined) + const [labelsTarget, setLabelsTarget] = useState( + undefined + ) const [ confirmDeleteHighlightWithNoteId, @@ -363,13 +365,15 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element { // highlight, so the app can display a native menu const rect = (target as Element).getBoundingClientRect() - window?.webkit?.messageHandlers.viewerAction?.postMessage({ - actionID: 'showMenu', - rectX: rect.x, - rectY: rect.y, - rectWidth: rect.width, - rectHeight: rect.height, - }) + if (window?.webkit?.messageHandlers) { + window?.webkit?.messageHandlers.viewerAction?.postMessage({ + actionID: 'showMenu', + rectX: rect.x, + rectY: rect.y, + rectWidth: rect.width, + rectHeight: rect.height, + }) + } window?.AndroidWebKitMessenger?.handleIdentifiableMessage( 'existingHighlightTap', @@ -394,7 +398,7 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element { const highlight = highlights.find(($0) => $0.id === id) setFocusedHighlight(highlight) setLabelsTarget(highlight) - } else { + } else if (window?.webkit?.messageHandlers) { window?.webkit?.messageHandlers.viewerAction?.postMessage({ actionID: 'pageTapped', }) diff --git a/packages/web/components/templates/homeFeed/LibraryHeader.tsx b/packages/web/components/templates/homeFeed/LibraryHeader.tsx index b8636a80f..99412b1df 100644 --- a/packages/web/components/templates/homeFeed/LibraryHeader.tsx +++ b/packages/web/components/templates/homeFeed/LibraryHeader.tsx @@ -88,7 +88,6 @@ export function LegacyLibraryHeader(props: LibraryHeaderProps): JSX.Element { right: '0', zIndex: 5, px: '70px', - bg: '$thLibraryBackground', position: 'fixed', left: LIBRARY_LEFT_MENU_WIDTH, height: small ? '60px' : DEFAULT_HEADER_HEIGHT, diff --git a/packages/web/components/templates/library/LibraryHeader.tsx b/packages/web/components/templates/library/LibraryHeader.tsx index ecb4eef59..8995e7ebb 100644 --- a/packages/web/components/templates/library/LibraryHeader.tsx +++ b/packages/web/components/templates/library/LibraryHeader.tsx @@ -86,8 +86,6 @@ export function LibraryHeader(props: LibraryHeaderProps): JSX.Element { css={{ width: '100%', px: '70px', - bg: '$thLibraryBackground', - // position: 'sticky', left: LIBRARY_LEFT_MENU_WIDTH, height: small ? '60px' : DEFAULT_HEADER_HEIGHT, transition: 'height 0.5s', diff --git a/packages/web/components/templates/navMenu/Footer.tsx b/packages/web/components/templates/navMenu/Footer.tsx index fa1e5b611..273514a6c 100644 --- a/packages/web/components/templates/navMenu/Footer.tsx +++ b/packages/web/components/templates/navMenu/Footer.tsx @@ -17,7 +17,7 @@ export const NavMenuFooter = (props: NavMenuFooterProps): JSX.Element => { position: 'fixed', bottom: '0%', alignItems: 'center', - backgroundColor: '$thBackground2', + backgroundColor: '$thNavMenuFooter', width: LIBRARY_LEFT_MENU_WIDTH, overflowY: 'auto', overflowX: 'hidden', diff --git a/packages/web/components/templates/navMenu/NavigationMenu.tsx b/packages/web/components/templates/navMenu/NavigationMenu.tsx index 64d921a39..b9ae4d1b9 100644 --- a/packages/web/components/templates/navMenu/NavigationMenu.tsx +++ b/packages/web/components/templates/navMenu/NavigationMenu.tsx @@ -750,6 +750,7 @@ const NodeItemContents = (props: NodeItemContentsProps): JSX.Element => { {props.node.isClosed ? ( ) : ( diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts index 97edb8660..f69f0fd27 100644 --- a/packages/web/components/tokens/stitches.config.ts +++ b/packages/web/components/tokens/stitches.config.ts @@ -181,6 +181,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } = thBackgroundActive: '#FFEA9F', thBackgroundContrast: '#FFFFFF', thLeftMenuBackground: '#FCFCFC', + thNavMenuFooter: '#DFDFDF', thLibraryBackground: '#FFFFFF', thLibrarySearchbox: '#FCFCFC', thLibraryMenuPrimary: '#3D3D3D', @@ -324,6 +325,7 @@ const darkThemeSpec = { thBackgroundActive: '#3D3D3D', thBackgroundContrast: '#000000', thLeftMenuBackground: '#343434', + thNavMenuFooter: '#515151', thLibraryBackground: '#2A2A2A', thLibrarySearchbox: '#3D3D3D', thLibraryMenuPrimary: '#EBEBEB', @@ -397,11 +399,21 @@ const sepiaThemeSpec = { colorScheme: 'light', }, colors: { - readerBg: '#FBF0D9', + readerBg: '#FDF6E3', readerFont: '#5F4B32', readerMargin: '#F3F3F3', readerFontHighContrast: '#0A0806', readerTableHeader: '#FFFFFF', + + thLeftMenuBackground: '#EEE8D5', + thNavMenuFooter: '#DDD6C1', + + thLibrarySelectionColor: '#DDD6C1', + thBorderColor: '#DDD6C1', + + thBackground: '#FDF6E3', + + thLibraryMultiselectHover: '#EEE8D5', }, } @@ -412,6 +424,16 @@ const apolloThemeSpec = { readerMargin: '#474747', readerFontHighContrast: 'white', readerTableHeader: '#FFFFFF', + + thLeftMenuBackground: '#3D3D3D', + thNavMenuFooter: '#515151', + + thLibrarySelectionColor: '#515151', + thBorderColor: '#6A6968', + + thBackground: '#474747', + thBackground2: '#515151', + thLibraryMultiselectHover: '#EEE8D5', }, } diff --git a/packages/web/pages/highlights/index.tsx b/packages/web/pages/highlights/index.tsx index 2a8adf898..8b6f86e5d 100644 --- a/packages/web/pages/highlights/index.tsx +++ b/packages/web/pages/highlights/index.tsx @@ -235,9 +235,6 @@ function HighlightCard(props: HighlightCardProps): JSX.Element { bg: '$thBackground2', borderRadius: '8px', cursor: 'pointer', - '&:hover': { - backgroundColor: '$thBackground3', - }, }} >