diff --git a/packages/web/components/elements/icons/MoveToInboxIcon.tsx b/packages/web/components/elements/icons/MoveToInboxIcon.tsx new file mode 100644 index 000000000..d520dd84b --- /dev/null +++ b/packages/web/components/elements/icons/MoveToInboxIcon.tsx @@ -0,0 +1,38 @@ +/* eslint-disable functional/no-class */ +/* eslint-disable functional/no-this-expression */ +import { IconProps } from './IconProps' + +import React from 'react' + +export class MoveToInboxIcon extends React.Component { + render() { + const size = (this.props.size || 26).toString() + const color = (this.props.color || '#2A2A2A').toString() + return ( + + + + + + + ) + } +} diff --git a/packages/web/components/nav-containers/HighlightsContainer.tsx b/packages/web/components/nav-containers/HighlightsContainer.tsx index ef1358249..52403ff1d 100644 --- a/packages/web/components/nav-containers/HighlightsContainer.tsx +++ b/packages/web/components/nav-containers/HighlightsContainer.tsx @@ -128,9 +128,8 @@ function HighlightCard(props: HighlightCardProps): JSX.Element { const [isOpen, setIsOpen] = useState(false) const [showConfirmDeleteHighlightId, setShowConfirmDeleteHighlightId] = useState(undefined) - const [labelsTarget, setLabelsTarget] = useState( - undefined - ) + const [labelsTarget, setLabelsTarget] = + useState(undefined) const viewInReader = useCallback( (highlightId: string) => { @@ -187,9 +186,21 @@ function HighlightCard(props: HighlightCardProps): JSX.Element { fontFamily: '$inter', padding: '20px', marginBottom: '20px', - bg: '$thBackground2', + bg: '$readerBg', borderRadius: '8px', cursor: 'pointer', + border: '1px solid $thLeftMenuBackground', + '&:focus': { + outline: 'none', + '> div': { + outline: 'none', + bg: '$thBackgroundActive', + }, + }, + '&:hover': { + bg: '$thBackgroundActive', + boxShadow: '$cardBoxShadow', + }, }} > {homeData.sections?.map((homeSection, idx) => { if (homeSection.items.length < 1) { - console.log('empty home section: ', homeSection) return } switch (homeSection.layout) { @@ -224,7 +223,6 @@ const TopPicksHomeSection = (props: HomeSectionProps): JSX.Element => { items?: HomeItem[] } ) => { - console.log('handling action: ', action) switch (action.type) { case 'RESET': return action.items ?? [] diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx index 8bba60f0b..f8b1fe399 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx @@ -65,6 +65,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element { pl: '0px', padding: '0px', width: '100%', + maxWidth: '400px', height: '100%', minHeight: '270px', borderRadius: '5px', diff --git a/packages/web/components/patterns/LibraryCards/LibraryHoverActions.tsx b/packages/web/components/patterns/LibraryCards/LibraryHoverActions.tsx index d0229c019..28ad8382b 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryHoverActions.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryHoverActions.tsx @@ -13,6 +13,9 @@ import { TrashIcon } from '../../elements/icons/TrashIcon' import { LabelIcon } from '../../elements/icons/LabelIcon' import { UnarchiveIcon } from '../../elements/icons/UnarchiveIcon' import { BrowserIcon } from '../../elements/icons/BrowserIcon' +import { LibraryIcon } from '../../elements/icons/LibraryIcon' +import useLibraryItemActions from '../../../lib/hooks/useLibraryItemActions' +import { MoveToInboxIcon } from '../../elements/icons/MoveToInboxIcon' type LibraryHoverActionsProps = { viewer: UserBasicData @@ -25,6 +28,7 @@ type LibraryHoverActionsProps = { export const LibraryHoverActions = (props: LibraryHoverActionsProps) => { const [menuOpen, setMenuOpen] = useState(false) + const { moveItem } = useLibraryItemActions() return ( { color={theme.colors.thNotebookSubtle.toString()} /> - + + ) : ( + + )}