Benature/omnivore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #4060 from omnivore-app/feat/web-home-tweaks002

Browse Source
This commit is contained in:
Jackson Harper
2024-06-13 22:23:15 +08:00
committed by GitHub
parent 937c00c87c ecb7b6de3a
commit dcab8ff7df
14 changed files with 163 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/web/components/elements/LabelChip.tsx
View File

@ -26,7 +26,7 @@ export function LabelChip(props: LabelChipProps): JSX.Element {
color: '$thLabelChipForeground',
borderColor: props.isSelected
? '$thLabelChipSelectedBorder'
: '$thLabelChipUnselectedBorder',
: '$thLabelChipBackground',
backgroundColor: '$thLabelChipBackground',
}}
>

6
packages/web/components/elements/icons/ArchiveSectionIcon.tsx
View File

@ -11,18 +11,18 @@ export class ArchiveSectionIcon extends React.Component<IconProps> {
return (
<svg
width="23"
height="23"
height="24"
viewBox="0 0 23 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path
d="M19.1667 3.18359H3.83341C2.77487 3.18359 1.91675 4.04171 1.91675 5.10026C1.91675 6.15881 2.77487 7.01693 3.83341 7.01693H19.1667C20.2253 7.01693 21.0834 6.15881 21.0834 5.10026C21.0834 4.04171 20.2253 3.18359 19.1667 3.18359Z"
d="M18.5 4.30859H3.83333C2.82081 4.30859 2 5.1294 2 6.14193C2 7.15445 2.82081 7.97526 3.83333 7.97526H18.5C19.5125 7.97526 20.3333 7.15445 20.3333 6.14193C20.3333 5.1294 19.5125 4.30859 18.5 4.30859Z"
fill={color}
/>
<path
d="M18.2083 8.93359C18.6999 8.93359 19.1053 9.3773 19.1599 9.94943L19.1666 10.0836V16.9836C19.1666 18.8207 17.9696 20.3224 16.4603 20.4278L16.2916 20.4336H6.70825C5.17684 20.4336 3.92525 18.9971 3.83804 17.1868L3.83325 16.9836V10.0836C3.83325 9.44822 4.26259 8.93359 4.79159 8.93359H18.2083ZM13.4166 10.8503H9.58325L9.47113 10.857C9.2382 10.8847 9.02353 10.9968 8.86777 11.1722C8.71201 11.3476 8.62599 11.574 8.62599 11.8086C8.62599 12.0432 8.71201 12.2696 8.86777 12.445C9.02353 12.6203 9.2382 12.7325 9.47113 12.7602L9.58325 12.7669H13.4166L13.5287 12.7602C13.7616 12.7325 13.9763 12.6203 14.1321 12.445C14.2878 12.2696 14.3739 12.0432 14.3739 11.8086C14.3739 11.574 14.2878 11.3476 14.1321 11.1722C13.9763 10.9968 13.7616 10.8847 13.5287 10.857L13.4166 10.8503Z"
d="M17.75 9.80859C18.2202 9.80859 18.608 10.233 18.6602 10.7803L18.6667 10.9086V17.5086C18.6667 19.2658 17.5217 20.7023 16.078 20.8031L15.9167 20.8086H6.75C5.28517 20.8086 4.088 19.4345 4.00458 17.7029L4 17.5086V10.9086C4 10.3008 4.41067 9.80859 4.91667 9.80859H17.75ZM13.1667 11.6419H9.5L9.39275 11.6483C9.16995 11.6748 8.96461 11.7821 8.81563 11.9499C8.66664 12.1177 8.58435 12.3342 8.58435 12.5586C8.58435 12.783 8.66664 12.9995 8.81563 13.1673C8.96461 13.3351 9.16995 13.4423 9.39275 13.4688L9.5 13.4753H13.1667L13.2739 13.4688C13.4967 13.4423 13.7021 13.3351 13.851 13.1673C14 12.9995 14.0823 12.783 14.0823 12.5586C14.0823 12.3342 14 12.1177 13.851 11.9499C13.7021 11.7821 13.4967 11.6748 13.2739 11.6483L13.1667 11.6419Z"
fill={color}
/>
</g>

13
packages/web/components/elements/icons/FollowingIcon.tsx
View File

@ -6,33 +6,32 @@ import React from 'react'
export class FollowingIcon extends React.Component<IconProps> {
render() {
const size = (this.props.size || 26).toString()
const color = (this.props.color || '#2A2A2A').toString()
return (
<svg
width={size}
height={size}
viewBox="0 0 25 25"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path
d="M12.5 4.5L4.5 8.5L12.5 12.5L20.5 8.5L12.5 4.5Z"
d="M11.5361 4.14185L3.86945 7.97518L11.5361 11.8085L19.2028 7.97518L11.5361 4.14185Z"
fill={color}
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M4.5 12.5L12.5 16.5L20.5 12.5"
d="M3.86945 11.8086L11.5361 15.6419L19.2028 11.8086"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M4.5 16.5L12.5 20.5L20.5 16.5"
d="M3.86945 15.6418L11.5361 19.4752L19.2028 15.6418"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"

21
packages/web/components/elements/icons/HighlightsIcon.tsx
View File

@ -6,7 +6,6 @@ import React from 'react'
export class HighlightsIcon extends React.Component<IconProps> {
render() {
const size = (this.props.size || 26).toString()
const color = (this.props.color || '#2A2A2A').toString()
return (
@ -17,32 +16,32 @@ export class HighlightsIcon extends React.Component<IconProps> {
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<g clip-path="url(#clip0_11629_6956)">
<path
d="M3.74023 18.8567H7.57357L17.6361 8.79423C18.1444 8.2859 18.43 7.59646 18.43 6.87757C18.43 6.15868 18.1444 5.46923 17.6361 4.9609C17.1277 4.45257 16.4383 4.16699 15.7194 4.16699C15.0005 4.16699 14.3111 4.45257 13.8027 4.9609L3.74023 15.0234V18.8567Z"
fill="#FFD234"
stroke="#FFD234"
d="M2.91113 18.5169H6.74447L16.807 8.45439C17.3153 7.94606 17.6009 7.25661 17.6009 6.53772C17.6009 5.81883 17.3153 5.12939 16.807 4.62106C16.2986 4.11273 15.6092 3.82715 14.8903 3.82715C14.1714 3.82715 13.482 4.11273 12.9736 4.62106L2.91113 14.6836V18.5169Z"
fill={color}
stroke={color}
strokeWidth="1.25"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M12.8447 5.91931L16.6781 9.75265"
stroke="#FFD234"
d="M12.0153 5.57935L15.8487 9.41268"
stroke={color}
strokeWidth="1.25"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M5.17773 13.5859L9.01107 17.4193"
stroke="#FFD234"
d="M4.34863 13.2461L8.18197 17.0794"
stroke={color}
strokeWidth="1.25"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M20.9899 15.0234V18.8568H13.3232L17.1566 15.0234H20.9899Z"
stroke="#FFD234"
d="M20.1611 14.6836V18.5169H12.4944L16.3278 14.6836H20.1611Z"
stroke={color}
strokeWidth="1.25"
strokeLinecap="round"
strokeLinejoin="round"

9
packages/web/components/elements/icons/HomeIcon.tsx
View File

@ -7,20 +7,19 @@ import React from 'react'
export class HomeIcon extends React.Component<IconProps> {
render() {
const size = (this.props.size || 26).toString()
const color = (this.props.color || '#2A2A2A').toString()
return (
<svg
width="26"
height="26"
viewBox="0 0 26 26"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path
d="M19.9329 11.8028L12.7458 5.53907C12.3924 5.23127 11.8662 5.23187 11.514 5.54027L4.35753 11.8043C3.70713 12.3737 4.11003 13.445 4.97433 13.445C5.49123 13.445 5.91033 13.8641 5.91033 14.3813V19.8503C5.91033 20.3675 6.32973 20.7863 6.84663 20.7863H10.1271V15.9932C10.1271 15.7007 10.3638 15.464 10.656 15.464H13.6359C13.9281 15.464 14.1651 15.7007 14.1651 15.9932V20.7866H17.2806C17.7978 20.7866 18.2169 20.3678 18.2169 19.8506V14.3816C18.2169 13.8644 18.636 13.4453 19.1529 13.4453H19.3179C20.1831 13.4447 20.5854 12.3713 19.9329 11.8028Z"
d="M19.6026 10.7825L12.0964 4.24071C11.7273 3.91924 11.1778 3.91987 10.8099 4.24196L3.33566 10.7841C2.65639 11.3788 3.07717 12.4976 3.97985 12.4976C4.5197 12.4976 4.95741 12.9354 4.95741 13.4755V19.1873C4.95741 19.7275 5.39543 20.1649 5.93528 20.1649H9.36144V15.159C9.36144 14.8535 9.60865 14.6063 9.91383 14.6063H13.026C13.3312 14.6063 13.5787 14.8535 13.5787 15.159V20.1652H16.8326C17.3727 20.1652 17.8104 19.7278 17.8104 19.1877V13.4758C17.8104 12.9357 18.2482 12.498 18.788 12.498H18.9603C19.8639 12.4973 20.2841 11.3763 19.6026 10.7825Z"
fill={color}
/>
</g>

11
packages/web/components/elements/icons/LibraryIcon.tsx
View File

@ -6,24 +6,23 @@ import React from 'react'
export class LibraryIcon extends React.Component<IconProps> {
render() {
const size = (this.props.size || 26).toString()
const color = (this.props.color || '#2A2A2A').toString()
return (
<svg
width={size}
height={size}
viewBox="0 0 25 25"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path
d="M13.5 6.5H7.5C6.70435 6.5 5.94129 6.81607 5.37868 7.37868C4.81607 7.94129 4.5 8.70435 4.5 9.5V21.5L4.506 21.614C4.52514 21.7802 4.58565 21.9389 4.68199 22.0756C4.77833 22.2123 4.90743 22.3227 5.05746 22.3966C5.20749 22.4705 5.37366 22.5056 5.54077 22.4987C5.70788 22.4918 5.87059 22.4431 6.014 22.357L10.5 19.666L14.986 22.357C15.1377 22.4479 15.3108 22.4969 15.4876 22.4991C15.6645 22.5013 15.8387 22.4566 15.9926 22.3695C16.1465 22.2823 16.2746 22.156 16.3637 22.0032C16.4528 21.8505 16.4999 21.6768 16.5 21.5V9.5C16.5 8.70435 16.1839 7.94129 15.6213 7.37868C15.0587 6.81607 14.2956 6.5 13.5 6.5Z"
d="M12.4944 6.05859H6.74445C5.98195 6.05859 5.25068 6.36149 4.71151 6.90066C4.17235 7.43983 3.86945 8.1711 3.86945 8.93359V20.4336L3.8752 20.5428C3.89354 20.7021 3.95153 20.8542 4.04386 20.9852C4.13618 21.1162 4.2599 21.222 4.40368 21.2928C4.54746 21.3637 4.70671 21.3973 4.86685 21.3907C5.027 21.3841 5.18293 21.3374 5.32036 21.2549L9.61945 18.676L13.9185 21.2549C14.0639 21.342 14.2298 21.389 14.3992 21.3911C14.5687 21.3932 14.7357 21.3503 14.8832 21.2668C15.0307 21.1833 15.1534 21.0622 15.2388 20.9159C15.3242 20.7695 15.3693 20.6031 15.3694 20.4336V8.93359C15.3694 8.1711 15.0665 7.43983 14.5274 6.90066C13.9882 6.36149 13.2569 6.05859 12.4944 6.05859Z"
fill={color}
/>
<path
d="M17.5 2.5C18.2652 2.49996 19.0015 2.79233 19.5582 3.31728C20.115 3.84224 20.4501 4.56011 20.495 5.324L20.5 5.5V17.5C20.5 17.6673 20.4581 17.8319 20.3781 17.9788C20.298 18.1256 20.1824 18.2501 20.0419 18.3407C19.9013 18.4314 19.7402 18.4853 19.5734 18.4976C19.4066 18.5098 19.2393 18.4801 19.087 18.411L18.986 18.357L17.986 17.757C17.8004 17.6456 17.656 17.4769 17.5744 17.2764C17.4929 17.0759 17.4786 16.8543 17.5337 16.645C17.5888 16.4357 17.7104 16.2499 17.8801 16.1156C18.0499 15.9812 18.2586 15.9056 18.475 15.9L18.5 15.901V5.5C18.5 5.25507 18.41 5.01866 18.2473 4.83563C18.0845 4.65259 17.8602 4.53566 17.617 4.507L17.5 4.5H11.499C11.3432 4.49965 11.1894 4.53572 11.05 4.60535C10.9106 4.67497 10.7893 4.77621 10.696 4.901L10.566 5.098C10.4124 5.29946 10.1881 5.43512 9.9383 5.47756C9.68854 5.52001 9.43199 5.46608 9.22046 5.32667C9.00893 5.18726 8.8582 4.97276 8.79871 4.7265C8.73923 4.48025 8.77542 4.2206 8.89999 4C9.14644 3.57292 9.49437 3.21316 9.91298 2.95258C10.3316 2.69199 10.808 2.53861 11.3 2.506L11.5 2.5H17.5Z"
d="M16.3278 2.22534C17.0611 2.2253 17.7667 2.50549 18.3003 3.00857C18.8338 3.51166 19.155 4.19961 19.198 4.93168L19.2028 5.10034V16.6003C19.2028 16.7606 19.1627 16.9184 19.086 17.0592C19.0093 17.1999 18.8985 17.3192 18.7638 17.406C18.629 17.4929 18.4747 17.5446 18.3148 17.5563C18.1549 17.5681 17.9947 17.5396 17.8487 17.4734L17.7519 17.4216L16.7935 16.8466C16.6157 16.7398 16.4773 16.5782 16.3991 16.3861C16.321 16.1939 16.3073 15.9816 16.3601 15.781C16.4129 15.5804 16.5294 15.4023 16.6921 15.2736C16.8548 15.1448 17.0548 15.0724 17.2622 15.067L17.2861 15.068V5.10034C17.2861 4.86561 17.1999 4.63906 17.0439 4.46365C16.888 4.28824 16.673 4.17618 16.4399 4.14872L16.3278 4.14201H10.5768C10.4275 4.14167 10.2801 4.17624 10.1465 4.24297C10.0129 4.30969 9.89675 4.40671 9.8073 4.5263L9.68271 4.71509C9.53552 4.90816 9.32053 5.03816 9.08118 5.07884C8.84183 5.11951 8.59596 5.06783 8.39325 4.93423C8.19053 4.80063 8.04608 4.59507 7.98908 4.35907C7.93207 4.12308 7.96676 3.87425 8.08613 3.66284C8.32231 3.25355 8.65574 2.90879 9.05691 2.65906C9.45808 2.40934 9.91462 2.26234 10.3861 2.23109L10.5778 2.22534H16.3278Z"
fill={color}
/>
</g>

2
packages/web/components/elements/icons/NavMoreButtonDown.tsx
View File

@ -20,7 +20,7 @@ export class NavMoreButtonDownIcon extends React.Component<IconProps> {
<path
d="M6.25 9.43359L12 15.1836L17.75 9.43359"
stroke={color}
strokeWidth="1.75"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>

2
packages/web/components/elements/icons/NavMoreButtonUp.tsx
View File

@ -19,7 +19,7 @@ export class NavMoreButtonUpIcon extends React.Component<IconProps> {
<path
d="M17.75 15.1836L12 9.43359L6.25 15.1836"
stroke={color}
strokeWidth="1.75"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>

10
packages/web/components/elements/icons/TrashSectionIcon.tsx
View File

@ -10,19 +10,19 @@ export class TrashSectionIcon extends React.Component<IconProps> {
return (
<svg
width="24"
height="25"
viewBox="0 0 24 25"
width="23"
height="24"
viewBox="0 0 23 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path
d="M20.0001 6.30859C20.255 6.30888 20.5001 6.40647 20.6855 6.58144C20.8708 6.75641 20.9823 6.99555 20.9973 7.24999C21.0122 7.50443 20.9294 7.75497 20.7658 7.95043C20.6023 8.14588 20.3702 8.27149 20.1171 8.30159L20.0001 8.30859H19.9191L19.0001 19.3086C19.0002 20.0738 18.7078 20.8101 18.1828 21.3669C17.6579 21.9236 16.94 22.2587 16.1761 22.3036L16.0001 22.3086H8.00011C6.40211 22.3086 5.09611 21.0596 5.00811 19.5586L5.00311 19.3916L4.08011 8.30859H4.00011C3.74523 8.30831 3.50008 8.21071 3.31474 8.03575C3.12941 7.86078 3.01788 7.62164 3.00294 7.3672C2.988 7.11276 3.07079 6.86221 3.23438 6.66676C3.39797 6.47131 3.63002 6.3457 3.88311 6.31559L4.00011 6.30859H20.0001Z"
d="M18.5823 7C18.816 7.00026 19.0407 7.08972 19.2106 7.25011C19.3805 7.4105 19.4827 7.62971 19.4964 7.86295C19.5101 8.09618 19.4342 8.32585 19.2842 8.50501C19.1343 8.68418 18.9216 8.79932 18.6896 8.82692L18.5823 8.83333H18.5081L17.6656 18.9167C17.6657 19.6181 17.3977 20.2931 16.9165 20.8034C16.4353 21.3138 15.7772 21.6209 15.077 21.6621L14.9156 21.6667H7.58232C6.11748 21.6667 4.92032 20.5217 4.83965 19.1458L4.83507 18.9927L3.98898 8.83333H3.91565C3.68201 8.83307 3.45729 8.74361 3.2874 8.58322C3.11751 8.42283 3.01527 8.20363 3.00158 7.97039C2.98788 7.73715 3.06377 7.50749 3.21373 7.32832C3.36368 7.14915 3.5764 7.03401 3.8084 7.00642L3.91565 7H18.5823Z"
fill={color}
/>
<path
d="M14 2.30859C14.5304 2.30859 15.0391 2.51931 15.4142 2.89438C15.7893 3.26945 16 3.77816 16 4.30859C15.9997 4.56347 15.9021 4.80863 15.7272 4.99396C15.5522 5.1793 15.313 5.29083 15.0586 5.30577C14.8042 5.3207 14.5536 5.23792 14.3582 5.07433C14.1627 4.91074 14.0371 4.67869 14.007 4.42559L14 4.30859H10L9.993 4.42559C9.9629 4.67869 9.83729 4.91074 9.64183 5.07433C9.44638 5.23792 9.19584 5.3207 8.94139 5.30577C8.68695 5.29083 8.44782 5.1793 8.27285 4.99396C8.09788 4.80863 8.00028 4.56347 8 4.30859C7.99984 3.80402 8.19041 3.31803 8.5335 2.94805C8.87659 2.57806 9.34685 2.35144 9.85 2.31359L10 2.30859H14Z"
d="M13.0823 3.30859C13.5685 3.30859 14.0348 3.50175 14.3786 3.84556C14.7225 4.18938 14.9156 4.6557 14.9156 5.14193C14.9153 5.37557 14.8259 5.60029 14.6655 5.77018C14.5051 5.94007 14.2859 6.04231 14.0527 6.056C13.8194 6.06969 13.5898 5.99381 13.4106 5.84385C13.2314 5.69389 13.1163 5.48118 13.0887 5.24918L13.0823 5.14193H9.41561L9.40919 5.24918C9.3816 5.48118 9.26645 5.69389 9.08729 5.84385C8.90812 5.99381 8.67846 6.06969 8.44522 6.056C8.21198 6.04231 7.99277 5.94007 7.83239 5.77018C7.672 5.60029 7.58253 5.37557 7.58228 5.14193C7.58213 4.6794 7.75681 4.23391 8.07131 3.89476C8.38581 3.55561 8.81688 3.34787 9.27811 3.31318L9.41561 3.30859H13.0823Z"
fill={color}
/>
</g>

119
packages/web/components/nav-containers/home.tsx
View File

@ -1,7 +1,7 @@
import * as HoverCard from '@radix-ui/react-hover-card'
import { styled } from '@stitches/react'
import { useRouter } from 'next/router'
import { useMemo, useState } from 'react'
import { useCallback, useEffect, useMemo, useReducer, useState } from 'react'
import { Button } from '../elements/Button'
import { AddToLibraryActionIcon } from '../elements/icons/home/AddToLibraryActionIcon'
import { ArchiveActionIcon } from '../elements/icons/home/ArchiveActionIcon'
@ -198,6 +198,41 @@ const JustAddedHomeSection = (props: HomeSectionProps): JSX.Element => {
}
const TopPicksHomeSection = (props: HomeSectionProps): JSX.Element => {
const listReducer = (
state: HomeItem[],
action: {
type: string
itemId?: string
items?: HomeItem[]
}
) => {
console.log('handling action: ', action)
switch (action.type) {
case 'RESET':
return action.items ?? []
case 'REMOVE_ITEM':
return state.filter((item) => item.id !== action.itemId)
default:
throw new Error()
}
}
const [items, dispatchList] = useReducer(listReducer, [])
function handleDelete(item: HomeItem) {
dispatchList({
type: 'REMOVE_ITEM',
itemId: item.id,
})
}
useEffect(() => {
dispatchList({
type: 'RESET',
items: props.homeSection.items,
})
}, [props])
return (
<VStack
distribution="start"
@ -224,11 +259,15 @@ const TopPicksHomeSection = (props: HomeSectionProps): JSX.Element => {
</SpanBox>
<Pagination
items={props.homeSection.items}
items={items}
itemsPerPage={4}
loadMoreButtonText="Load more Top Picks"
render={(homeItem) => (
<TopicPickHomeItemView key={homeItem.id} homeItem={homeItem} />
<TopicPickHomeItemView
key={homeItem.id}
homeItem={homeItem}
dispatchList={dispatchList}
/>
)}
/>
</VStack>
@ -511,9 +550,14 @@ const JustAddedItemView = (props: HomeItemViewProps): JSX.Element => {
)
}
const TopicPickHomeItemView = (props: HomeItemViewProps): JSX.Element => {
const router = useRouter()
type TopPickItemViewProps = {
dispatchList: (args: { type: string; itemId?: string }) => void
}
const TopicPickHomeItemView = (
props: HomeItemViewProps & TopPickItemViewProps
): JSX.Element => {
const router = useRouter()
return (
<VStack
css={{
@ -575,23 +619,46 @@ const TopicPickHomeItemView = (props: HomeItemViewProps): JSX.Element => {
</Box>
<SpanBox css={{ px: '20px' }}></SpanBox>
<HStack css={{ gap: '10px', my: '15px', px: '20px' }}>
<Button style="homeAction">
<AddToLibraryActionIcon
color={theme.colors.homeActionIcons.toString()}
/>
</Button>
<Button style="homeAction">
{props.homeItem.canSave && (
<Button style="homeAction">
<AddToLibraryActionIcon
color={theme.colors.homeActionIcons.toString()}
/>
</Button>
)}
{/* <Button style="homeAction">
<CommentActionIcon color={theme.colors.homeActionIcons.toString()} />
</Button>
<Button style="homeAction">
<ShareActionIcon color={theme.colors.homeActionIcons.toString()} />
</Button>
<Button style="homeAction">
<ArchiveActionIcon color={theme.colors.homeActionIcons.toString()} />
</Button>
<Button style="homeAction">
<RemoveActionIcon color={theme.colors.homeActionIcons.toString()} />
</Button>
</Button> */}
{props.homeItem.canArchive && (
<Button
style="homeAction"
onClick={(event) => {
// archiveItem(props.homeItem)
console.log('archiving')
props.dispatchList({
type: 'REMOVE_ITEM',
itemId: props.homeItem.id,
})
event.preventDefault()
event.stopPropagation()
}}
>
<ArchiveActionIcon
color={theme.colors.homeActionIcons.toString()}
/>
</Button>
)}
{props.homeItem.canDelete && (
<Button style="homeAction">
<RemoveActionIcon color={theme.colors.homeActionIcons.toString()} />
</Button>
)}
{props.homeItem.canShare && (
<Button style="homeAction">
<ShareActionIcon color={theme.colors.homeActionIcons.toString()} />
</Button>
)}
</HStack>
<Box
css={{ mt: '15px', width: '100%', height: '1px', bg: '$homeDivider' }}
@ -673,6 +740,7 @@ const SourceInfo = (props: HomeItemViewProps & SourceInfoProps) => (
alignment="center"
css={{
gap: '8px',
height: '16px',
cursor: 'pointer',
flex: '1',
overflow: 'hidden',
@ -681,10 +749,7 @@ const SourceInfo = (props: HomeItemViewProps & SourceInfoProps) => (
}}
>
{props.homeItem.source.icon && (
<SiteIconSmall
src={props.homeItem.source.icon}
alt={props.homeItem.source.name}
/>
<SiteIconSmall src={props.homeItem.source.icon} />
)}
<HStack
css={{
@ -756,9 +821,7 @@ const SubscriptionSourceHoverContent = (
alignment="center"
css={{ width: '100%', gap: '10px' }}
>
{props.source.icon && (
<SiteIconLarge src={props.source.icon} alt={props.source.name} />
)}
{props.source.icon && <SiteIconLarge src={props.source.icon} />}
<SpanBox
css={{
fontFamily: '$inter',

4
packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
View File

@ -72,7 +72,9 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
borderStyle: 'none',
overflow: 'hidden',
cursor: 'pointer',
border: props.legacyLayout ? 'unset' : '1px solid black',
border: props.legacyLayout
? 'unset'
: '1px solid $thLeftMenuBackground',
'@media (max-width: 930px)': {
width: 'calc(100% - 30px)',
},

24
packages/web/components/templates/NavigationLayout.tsx
View File

@ -19,6 +19,7 @@ import { DEFAULT_HEADER_HEIGHT } from './homeFeed/HeaderSpacer'
import { Button } from '../elements/Button'
import { List } from '@phosphor-icons/react'
import { usePersistedState } from '../../lib/hooks/usePersistedState'
import { LIBRARY_LEFT_MENU_WIDTH } from './navMenu/LibraryLegacyMenu'
export type NavigationSection =
| 'home'
@ -144,13 +145,20 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element {
/>
</SpanBox>
{!isLoading && showNavMenu && (
<NavigationMenu
section={props.section}
// eslint-disable-next-line @typescript-eslint/no-empty-function
setShowAddLinkModal={() => {}}
showMenu={showNavMenu}
setShowMenu={setShowNavMenu}
/>
<>
<NavigationMenu
section={props.section}
// eslint-disable-next-line @typescript-eslint/no-empty-function
setShowAddLinkModal={() => {}}
showMenu={showNavMenu}
setShowMenu={setShowNavMenu}
/>
<SpanBox
css={{
width: LIBRARY_LEFT_MENU_WIDTH,
}}
></SpanBox>
</>
)}
{props.children}
{showLogoutConfirmation ? (
@ -181,7 +189,7 @@ const Header = (props: HeaderProps): JSX.Element => {
alignment="start"
distribution="start"
css={{
zIndex: 5,
zIndex: 2,
position: 'fixed',
left: '15px',
top: '15px',

34
packages/web/components/templates/navMenu/NavigationMenu.tsx
View File

@ -98,13 +98,9 @@ export function NavigationMenu(props: NavigationMenuProps): JSX.Element {
css={{
width: '100%',
px: '15px',
pb: '17px',
pb: '10px',
pt: '15px',
lineHeight: '1',
'@mdDown': {
pb: '0px',
px: '15px',
},
}}
>
<SpanBox css={{ mr: 'auto' }}>
@ -127,18 +123,6 @@ export function NavigationMenu(props: NavigationMenuProps): JSX.Element {
<NavMenuFooter {...props} showFullThemeSection={true} />
<Box css={{ height: '250px ' }} />
</Box>
{/* This spacer pushes library content to the right of
the fixed left side menu. */}
<Box
css={{
minWidth: LIBRARY_LEFT_MENU_WIDTH,
height: '100%',
bg: '$thBackground',
'@mdDown': {
display: 'none',
},
}}
></Box>
</>
)
}
@ -169,28 +153,36 @@ const LibraryNav = (props: NavigationMenuProps): JSX.Element => {
text="Home"
section="home"
isSelected={props.section == 'home'}
icon={<HomeIcon color={theme.colors.thHomeIcon.toString()} />}
icon={<HomeIcon color={theme.colors.thLibraryMenuPrimary.toString()} />}
/>
<NavButton
{...props}
text="Library"
section="library"
isSelected={props.section == 'library'}
icon={<LibraryIcon color={theme.colors.ctaBlue.toString()} />}
icon={
<LibraryIcon color={theme.colors.thLibraryMenuPrimary.toString()} />
}
/>
<NavButton
{...props}
text="Subscriptions"
section="subscriptions"
isSelected={props.section == 'subscriptions'}
icon={<FollowingIcon color="#F59932" />}
icon={
<FollowingIcon color={theme.colors.thLibraryMenuPrimary.toString()} />
}
/>
<NavButton
{...props}
text="Highlights"
section="highlights"
isSelected={props.section == 'highlights'}
icon={<HighlightsIcon color={theme.colors.highlight.toString()} />}
icon={
<HighlightsIcon
color={theme.colors.thLibraryMenuPrimary.toString()}
/>
}
/>
<Button
style="articleActionIcon"

6
packages/web/components/tokens/stitches.config.ts
View File

@ -199,7 +199,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
thHomeIcon: '#2A2A2A',
thLabelChipForeground: '#2A2A2A',
thLabelChipBackground: '#F5F5F5',
thLabelChipBackground: '#EDEDED',
thLabelChipSelectedBorder: 'black',
thLabelChipUnselectedBorder: '#F5F5F5',
thLabelOutlineChipBorder: '#D9D9D9',
@ -354,7 +354,7 @@ const darkThemeSpec = {
thHomeIcon: '#FFFFFF',
thLabelChipForeground: '#EBEBEB',
thLabelChipBackground: '#2A2A2A',
thLabelChipBackground: '#343434',
thLabelChipSelectedBorder: '#FFEA9F',
thLabelChipUnselectedBorder: '#2A2A2A',
thLabelOutlineChipBorder: '#6A696850',
@ -438,6 +438,7 @@ const apolloThemeSpec = {
backgroundMedium: '#525252',
thLibraryMultiselectHover: '#EEE8D5',
thLabelChipBackground: '#6A6968',
},
}
@ -456,6 +457,7 @@ const sepiaThemeSpec = {
thNavMenuFooter: '#DDD6C1',
thLibrarySelectionColor: '#DDD6C1',
thLabelChipBackground: '#EEE8D5',
thBackground4: '#DDD6C166', // used on hover of menu items
thBorderColor: '#DDD6C1',