mirror of
https://github.com/omnivore-app/omnivore.git
synced 2026-03-11 08:54:26 +00:00
Theme clean up
This commit is contained in:
parent
64ea02bb2c
commit
5e7bd2fe0e
8 changed files with 46 additions and 23 deletions
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -750,6 +750,7 @@ const NodeItemContents = (props: NodeItemContentsProps): JSX.Element => {
|
|||
{props.node.isClosed ? (
|
||||
<Folder
|
||||
size={20}
|
||||
weight="fill"
|
||||
color={theme.colors.thLibraryMenuPrimary.toString()}
|
||||
/>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
},
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -235,9 +235,6 @@ function HighlightCard(props: HighlightCardProps): JSX.Element {
|
|||
bg: '$thBackground2',
|
||||
borderRadius: '8px',
|
||||
cursor: 'pointer',
|
||||
'&:hover': {
|
||||
backgroundColor: '$thBackground3',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
|
|
|
|||
Loading…
Reference in a new issue