Theme clean up

This commit is contained in:
Jackson Harper 2024-06-11 17:10:38 +08:00
parent 64ea02bb2c
commit 5e7bd2fe0e
8 changed files with 46 additions and 23 deletions

View file

@ -40,14 +40,16 @@ const InternalOrExternalLink = (props: InternalOrExternalLinkProps) => {
}}
>
{!isExternal ? (
<Link href={props.link} legacyBehavior>{props.children}</Link>
<Link href={props.link} legacyBehavior>
{props.children}
</Link>
) : (
<a href={props.link} target="_blank" rel="noreferrer">
{props.children}
</a>
)}
</SpanBox>
);
)
}
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',

View file

@ -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<Highlight | undefined>(undefined)
const [focusedHighlight, setFocusedHighlight] = useState<
Highlight | undefined
>(undefined)
const [selectionData, setSelectionData] = useSelection(highlightLocations)
const [labelsTarget, setLabelsTarget] =
useState<Highlight | undefined>(undefined)
const [labelsTarget, setLabelsTarget] = useState<Highlight | undefined>(
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',
})

View file

@ -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,

View file

@ -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',

View file

@ -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',

View file

@ -750,6 +750,7 @@ const NodeItemContents = (props: NodeItemContentsProps): JSX.Element => {
{props.node.isClosed ? (
<Folder
size={20}
weight="fill"
color={theme.colors.thLibraryMenuPrimary.toString()}
/>
) : (

View file

@ -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',
},
}

View file

@ -235,9 +235,6 @@ function HighlightCard(props: HighlightCardProps): JSX.Element {
bg: '$thBackground2',
borderRadius: '8px',
cursor: 'pointer',
'&:hover': {
backgroundColor: '$thBackground3',
},
}}
>
<Box