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

Update icons

Browse Source
This commit is contained in:
Jackson Harper
2023-08-01 12:31:12 +08:00
parent dde070f078
commit c0dbbc3b86
28 changed files with 724 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apple/OmnivoreKit/Sources/Utils/File.swift Normal file
View File

@ -0,0 +1,8 @@
//
// File.swift
//
//
// Created by Jackson Harper on 7/31/23.
//
import Foundation

8
apple/OmnivoreKit/Sources/Utils/Theme.swift Normal file
View File

@ -0,0 +1,8 @@
//
// File.swift
//
//
// Created by Jackson Harper on 7/31/23.
//
import Foundation

6
packages/api/src/resolvers/article/index.ts
View File

@ -545,7 +545,7 @@ export const getArticlesResolver = authorized<
return {
node: {
...a,
image: a.image && createImageProxyUrl(a.image, 260, 260),
image: a.image && createImageProxyUrl(a.image, 320, 320),
isArchived: !!a.archivedAt,
},
cursor: endCursor,
@ -953,7 +953,7 @@ export const searchResolver = authorized<
return {
node: {
...r,
image: r.image && createImageProxyUrl(r.image, 260, 260),
image: r.image && createImageProxyUrl(r.image, 320, 320),
isArchived: !!r.archivedAt,
contentReader: contentReaderForPage(r.pageType, r.uploadFileId),
originalArticleUrl: r.url,
@ -1051,7 +1051,7 @@ export const updatesSinceResolver = authorized<
return {
node: {
...p,
image: p.image && createImageProxyUrl(p.image, 260, 260),
image: p.image && createImageProxyUrl(p.image, 320, 320),
isArchived: !!p.archivedAt,
contentReader: contentReaderForPage(p.pageType, p.uploadFileId),
} as SearchItem,

2
packages/api/src/resolvers/function_resolvers.ts
View File

@ -502,7 +502,7 @@ export const functionResolvers = {
)
},
image(article: { image?: string }): string | undefined {
return article.image && createImageProxyUrl(article.image, 260, 260)
return article.image && createImageProxyUrl(article.image, 320, 320)
},
wordsCount(article: { wordsCount?: number; content?: string }) {
if (article.wordsCount) return article.wordsCount

3
packages/web/components/elements/InfoLink.tsx
View File

@ -2,6 +2,7 @@ import { Info } from 'phosphor-react'
import { VStack } from '../elements/LayoutPrimitives'
import { theme } from '../tokens/stitches.config'
import { TooltipWrapped } from './Tooltip'
import { EditInfoIcon } from './icons/EditInfoIcon'
type InfoLinkProps = {
href: string
@ -29,7 +30,7 @@ export function InfoLink(props: InfoLinkProps): JSX.Element {
style={TooltipStyle}
arrowStyles={{ fill: '#F9D354' }}
>
<Info size={24} color={theme.colors.grayText.toString()} />
<EditInfoIcon size={24} color={theme.colors.grayText.toString()} />
</TooltipWrapped>
</a>
</VStack>

54
packages/web/components/elements/icons/ArchiveIcon.tsx Normal file
View File

@ -0,0 +1,54 @@
import { IconProps } from './IconProps'
import React from 'react'
export class ArchiveIcon 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 26 26`}
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_4720_16388)">
<path
d="M3.36182 6.63216C3.36182 6.07963 3.58131 5.54972 3.97201 5.15902C4.36271 4.76832 4.89262 4.54883 5.44515 4.54883H20.0285C20.581 4.54883 21.1109 4.76832 21.5016 5.15902C21.8923 5.54972 22.1118 6.07963 22.1118 6.63216C22.1118 7.1847 21.8923 7.7146 21.5016 8.1053C21.1109 8.496 20.581 8.71549 20.0285 8.71549H5.44515C4.89262 8.71549 4.36271 8.496 3.97201 8.1053C3.58131 7.7146 3.36182 7.1847 3.36182 6.63216Z"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M5.44531 8.7168V19.1335C5.44531 19.686 5.66481 20.2159 6.05551 20.6066C6.44621 20.9973 6.97611 21.2168 7.52865 21.2168H17.9453C18.4978 21.2168 19.0277 20.9973 19.4185 20.6066C19.8092 20.2159 20.0286 19.686 20.0286 19.1335V8.7168"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M10.6533 12.8828H14.82"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
<defs>
<clipPath id="clip0_4720_16388">
<rect
width="25"
height="25"
fill={color}
transform="translate(0.236816 0.382812)"
/>
</clipPath>
</defs>
</svg>
)
}
}

38
packages/web/components/elements/icons/CircleUtilityMenuIcon.tsx Normal file
View File

@ -0,0 +1,38 @@
import { IconProps } from './IconProps'
import React from 'react'
export class CircleUtilityMenuIcon 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"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_4765_15551)">
<path
d="M3.125 12.5C3.125 13.7311 3.36749 14.9502 3.83863 16.0877C4.30977 17.2251 5.00032 18.2586 5.87087 19.1291C6.74142 19.9997 7.77492 20.6902 8.91234 21.1614C10.0498 21.6325 11.2689 21.875 12.5 21.875C13.7311 21.875 14.9502 21.6325 16.0877 21.1614C17.2251 20.6902 18.2586 19.9997 19.1291 19.1291C19.9997 18.2586 20.6902 17.2251 21.1614 16.0877C21.6325 14.9502 21.875 13.7311 21.875 12.5C21.875 11.2689 21.6325 10.0498 21.1614 8.91234C20.6902 7.77492 19.9997 6.74142 19.1291 5.87087C18.2586 5.00032 17.2251 4.30977 16.0877 3.83863C14.9502 3.36749 13.7311 3.125 12.5 3.125C11.2689 3.125 10.0498 3.36749 8.91234 3.83863C7.77492 4.30977 6.74142 5.00032 5.87087 5.87087C5.00032 6.74142 4.30977 7.77492 3.83863 8.91234C3.36749 10.0498 3.125 11.2689 3.125 12.5Z"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<circle cx="7.5" cy="12.5" r="1" fill={color} />
<circle cx="12.5" cy="12.5" r="1" fill={color} />
<circle cx="17.5" cy="12.5" r="1" fill={color} />
</g>
<defs>
<clipPath id="clip0_4765_15551">
<rect width="25" height="25" fill={color} />
</clipPath>
</defs>
</svg>
)
}
}

54
packages/web/components/elements/icons/EditInfoIcon.tsx Normal file
View File

@ -0,0 +1,54 @@
import { IconProps } from './IconProps'
import React from 'react'
export class EditInfoIcon 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 26 26"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_4720_16425)">
<path
d="M3.36182 12.8828C3.36182 14.114 3.60431 15.333 4.07545 16.4705C4.54658 17.6079 5.23714 18.6414 6.10769 19.5119C6.97824 20.3825 8.01173 21.073 9.14916 21.5442C10.2866 22.0153 11.5057 22.2578 12.7368 22.2578C13.968 22.2578 15.187 22.0153 16.3245 21.5442C17.4619 21.073 18.4954 20.3825 19.3659 19.5119C20.2365 18.6414 20.927 17.6079 21.3982 16.4705C21.8693 15.333 22.1118 14.114 22.1118 12.8828C22.1118 10.3964 21.1241 8.01184 19.3659 6.25369C17.6078 4.49553 15.2232 3.50781 12.7368 3.50781C10.2504 3.50781 7.86584 4.49553 6.10769 6.25369C4.34954 8.01184 3.36182 10.3964 3.36182 12.8828Z"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M12.7368 9.75781H12.7468"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M11.6953 12.8828H12.737V17.0495H13.7786"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
<defs>
<clipPath id="clip0_4720_16425">
<rect
width="25"
height="25"
fill={color}
transform="translate(0.236816 0.382812)"
/>
</clipPath>
</defs>
</svg>
)
}
}

56
packages/web/components/elements/icons/GridViewIcon.tsx Normal file
View File

@ -0,0 +1,56 @@
import { IconProps } from './IconProps'
import React from 'react'
export class GridViewIcon 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"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_4765_15475)">
<path
d="M4.1665 5.20768C4.1665 4.93142 4.27625 4.66646 4.4716 4.47111C4.66695 4.27576 4.9319 4.16602 5.20817 4.16602H9.37484C9.6511 4.16602 9.91606 4.27576 10.1114 4.47111C10.3068 4.66646 10.4165 4.93142 10.4165 5.20768V9.37435C10.4165 9.65062 10.3068 9.91557 10.1114 10.1109C9.91606 10.3063 9.6511 10.416 9.37484 10.416H5.20817C4.9319 10.416 4.66695 10.3063 4.4716 10.1109C4.27625 9.91557 4.1665 9.65062 4.1665 9.37435V5.20768Z"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M14.5835 5.20768C14.5835 4.93142 14.6932 4.66646 14.8886 4.47111C15.0839 4.27576 15.3489 4.16602 15.6252 4.16602H19.7918C20.0681 4.16602 20.333 4.27576 20.5284 4.47111C20.7237 4.66646 20.8335 4.93142 20.8335 5.20768V9.37435C20.8335 9.65062 20.7237 9.91557 20.5284 10.1109C20.333 10.3063 20.0681 10.416 19.7918 10.416H15.6252C15.3489 10.416 15.0839 10.3063 14.8886 10.1109C14.6932 9.91557 14.5835 9.65062 14.5835 9.37435V5.20768Z"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M4.1665 15.6257C4.1665 15.3494 4.27625 15.0844 4.4716 14.8891C4.66695 14.6937 4.9319 14.584 5.20817 14.584H9.37484C9.6511 14.584 9.91606 14.6937 10.1114 14.8891C10.3068 15.0844 10.4165 15.3494 10.4165 15.6257V19.7923C10.4165 20.0686 10.3068 20.3335 10.1114 20.5289C9.91606 20.7242 9.6511 20.834 9.37484 20.834H5.20817C4.9319 20.834 4.66695 20.7242 4.4716 20.5289C4.27625 20.3335 4.1665 20.0686 4.1665 19.7923V15.6257Z"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M14.5835 15.6257C14.5835 15.3494 14.6932 15.0844 14.8886 14.8891C15.0839 14.6937 15.3489 14.584 15.6252 14.584H19.7918C20.0681 14.584 20.333 14.6937 20.5284 14.8891C20.7237 15.0844 20.8335 15.3494 20.8335 15.6257V19.7923C20.8335 20.0686 20.7237 20.3335 20.5284 20.5289C20.333 20.7242 20.0681 20.834 19.7918 20.834H15.6252C15.3489 20.834 15.0839 20.7242 14.8886 20.5289C14.6932 20.3335 14.5835 20.0686 14.5835 19.7923V15.6257Z"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
<defs>
<clipPath id="clip0_4765_15475">
<rect width="25" height="25" fill="white" />
</clipPath>
</defs>
</svg>
)
}
}

4
packages/web/components/elements/icons/IconProps.tsx Normal file
View File

@ -0,0 +1,4 @@
export type IconProps = {
color?: string
size?: number
}

48
packages/web/components/elements/icons/LabelIcon.tsx Normal file
View File

@ -0,0 +1,48 @@
import { IconProps } from './IconProps'
import React from 'react'
export class LabelIcon 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 26 26"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_4720_16410)">
<path
d="M9.09098 10.2786C9.66628 10.2786 10.1326 9.81228 10.1326 9.23698C10.1326 8.66168 9.66628 8.19531 9.09098 8.19531C8.51569 8.19531 8.04932 8.66168 8.04932 9.23698C8.04932 9.81228 8.51569 10.2786 9.09098 10.2786Z"
fill={color}
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M4.40332 7.67383V11.6936C4.40332 12.253 4.6252 12.7895 5.02103 13.1853L13.4752 21.6395C13.6711 21.8354 13.9036 21.9908 14.1596 22.0968C14.4155 22.2028 14.6898 22.2574 14.9669 22.2574C15.2439 22.2574 15.5182 22.2028 15.7742 22.0968C16.0301 21.9908 16.2627 21.8354 16.4585 21.6395L21.4939 16.604C21.6899 16.4082 21.8453 16.1756 21.9513 15.9197C22.0573 15.6637 22.1119 15.3894 22.1119 15.1124C22.1119 14.8353 22.0573 14.561 21.9513 14.3051C21.8453 14.0491 21.6899 13.8166 21.4939 13.6207L13.0387 5.16654C12.6434 4.77122 12.1072 4.54904 11.5481 4.54883H7.52832C6.69952 4.54883 5.90466 4.87807 5.31861 5.46412C4.73256 6.05017 4.40332 6.84503 4.40332 7.67383Z"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
<defs>
<clipPath id="clip0_4720_16410">
<rect
width="25"
height="25"
fill={color}
transform="translate(0.236816 0.382812)"
/>
</clipPath>
</defs>
</svg>
)
}
}

75
packages/web/components/elements/icons/ListViewIcon.tsx Normal file
View File

@ -0,0 +1,75 @@
import { IconProps } from './IconProps'
import React from 'react'
export class ListViewIcon 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 26 26"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_4720_16462)">
<path
d="M14.2261 5.89258H22.5594"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M14.2261 10.0586H19.4344"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M14.2261 16.3086H22.5594"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M14.2261 20.4746H19.4344"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M3.80957 5.89128C3.80957 5.61501 3.91932 5.35006 4.11467 5.15471C4.31002 4.95936 4.57497 4.84961 4.85124 4.84961H9.0179C9.29417 4.84961 9.55912 4.95936 9.75447 5.15471C9.94982 5.35006 10.0596 5.61501 10.0596 5.89128V10.0579C10.0596 10.3342 9.94982 10.5992 9.75447 10.7945C9.55912 10.9899 9.29417 11.0996 9.0179 11.0996H4.85124C4.57497 11.0996 4.31002 10.9899 4.11467 10.7945C3.91932 10.5992 3.80957 10.3342 3.80957 10.0579V5.89128Z"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M3.80957 16.3092C3.80957 16.033 3.91932 15.768 4.11467 15.5727C4.31002 15.3773 4.57497 15.2676 4.85124 15.2676H9.0179C9.29417 15.2676 9.55912 15.3773 9.75447 15.5727C9.94982 15.768 10.0596 16.033 10.0596 16.3092V20.4759C10.0596 20.7522 9.94982 21.0171 9.75447 21.2125C9.55912 21.4078 9.29417 21.5176 9.0179 21.5176H4.85124C4.57497 21.5176 4.31002 21.4078 4.11467 21.2125C3.91932 21.0171 3.80957 20.7522 3.80957 20.4759V16.3092Z"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
<defs>
<clipPath id="clip0_4720_16462">
<rect
width="25"
height="25"
fill={color}
transform="translate(0.68457 0.683594)"
/>
</clipPath>
</defs>
</svg>
)
}
}

54
packages/web/components/elements/icons/NotebookIcon.tsx Normal file
View File

@ -0,0 +1,54 @@
import { IconProps } from './IconProps'
import React from 'react'
export class NotebookIcon 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 26 26"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_4720_16405)">
<path
d="M9.61198 4.54883V23.2988M6.48698 4.54883H17.9453C18.4978 4.54883 19.0277 4.76832 19.4185 5.15902C19.8092 5.54972 20.0286 6.07963 20.0286 6.63216V19.1322C20.0286 19.6847 19.8092 20.2146 19.4185 20.6053C19.0277 20.996 18.4978 21.2155 17.9453 21.2155H6.48698C6.21071 21.2155 5.94576 21.1057 5.75041 20.9104C5.55506 20.715 5.44531 20.4501 5.44531 20.1738V5.59049C5.44531 5.31423 5.55506 5.04928 5.75041 4.85393C5.94576 4.65858 6.21071 4.54883 6.48698 4.54883Z"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M13.7783 8.7168H15.8617"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M13.7783 12.8828H15.8617"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
<defs>
<clipPath id="clip0_4720_16405">
<rect
width="25"
height="25"
fill={color}
transform="translate(0.236816 0.382812)"
/>
</clipPath>
</defs>
</svg>
)
}
}

75
packages/web/components/elements/icons/ReaderSettingsIcon.tsx Normal file
View File

@ -0,0 +1,75 @@
import { IconProps } from './IconProps'
import React from 'react'
export class ReaderSettingsIcon 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 26 26"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_4720_16436)">
<path
d="M3.36182 7.67513V5.5918H16.9035V7.67513"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M10.6533 5.5918V20.1751"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M12.737 20.1738H8.57031"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M15.8618 13.9245V12.8828H22.1118V13.9245"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M18.9868 12.8828V20.1745"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M17.9453 20.1738H20.0286"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
<defs>
<clipPath id="clip0_4720_16436">
<rect
width="25"
height="25"
fill={color}
transform="translate(0.236816 0.382812)"
/>
</clipPath>
</defs>
</svg>
)
}
}

68
packages/web/components/elements/icons/TrashIcon.tsx Normal file
View File

@ -0,0 +1,68 @@
import { IconProps } from './IconProps'
import React from 'react'
export class TrashIcon 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 26 26"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_4720_16444)">
<path
d="M4.40332 7.67383H21.07"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M10.6533 11.8418V18.0918"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M14.8203 11.8418V18.0918"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M5.44531 7.67383L6.48698 20.1738C6.48698 20.7264 6.70647 21.2563 7.09717 21.647C7.48787 22.0377 8.01778 22.2572 8.57031 22.2572H16.9036C17.4562 22.2572 17.9861 22.0377 18.3768 21.647C18.7675 21.2563 18.987 20.7264 18.987 20.1738L20.0286 7.67383"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M9.61182 7.67448V4.54948C9.61182 4.27321 9.72156 4.00826 9.91691 3.81291C10.1123 3.61756 10.3772 3.50781 10.6535 3.50781H14.8201C15.0964 3.50781 15.3614 3.61756 15.5567 3.81291C15.7521 4.00826 15.8618 4.27321 15.8618 4.54948V7.67448"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
<defs>
<clipPath id="clip0_4720_16444">
<rect
width="25"
height="25"
fill={color}
transform="translate(0.236816 0.382812)"
/>
</clipPath>
</defs>
</svg>
)
}
}

61
packages/web/components/elements/icons/UnarchiveIcon.tsx Normal file
View File

@ -0,0 +1,61 @@
import { IconProps } from './IconProps'
import React from 'react'
export class UnarchiveIcon 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 26 26"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_4720_16399)">
<path
d="M8.56992 4.54883H20.0283C20.5808 4.54883 21.1107 4.76832 21.5014 5.15902C21.8921 5.54972 22.1116 6.07963 22.1116 6.63216C22.1116 7.1847 21.8921 7.7146 21.5014 8.1053C21.1107 8.496 20.5808 8.71549 20.0283 8.71549H12.7366M8.56992 8.71549H5.44493C4.96862 8.71578 4.5066 8.55284 4.13584 8.25383C3.76509 7.95483 3.50798 7.5378 3.40737 7.07225C3.30675 6.60669 3.3687 6.12071 3.5829 5.69529C3.79709 5.26986 4.15059 4.93068 4.58451 4.73424"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M5.44531 8.7168V19.1335C5.44531 19.686 5.66481 20.2159 6.05551 20.6066C6.44621 20.9973 6.97611 21.2168 7.52865 21.2168H17.9453C18.3468 21.2168 18.7397 21.1007 19.0767 20.8827C19.4138 20.6646 19.6807 20.3538 19.8453 19.9876M20.0286 16.0085V8.7168"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M10.6533 12.8828H12.7367"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M3.36182 3.50781L22.1118 22.2578"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
<defs>
<clipPath id="clip0_4720_16399">
<rect
width="25"
height="25"
fill="white"
transform="translate(0.236816 0.382812)"
/>
</clipPath>
</defs>
</svg>
)
}
}

24
packages/web/components/elements/images/TrashIcon.tsx
View File

@ -1,24 +0,0 @@
type TrashIconProps = {
size: number
strokeColor: string
}
export function TrashIcon(props: TrashIconProps): JSX.Element {
return (
<svg
width={props.size}
height={props.size}
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.6663 8.33333L11.4163 14.1667M8.58301 14.1667L8.33301 8.33333M4.99967 5L5.70854 15.633C5.77858 16.6836 6.65119 17.5 7.70411 17.5H12.2952C13.3482 17.5 14.2208 16.6836 14.2908 15.633L14.9997 5M4.99967 5H7.49967M4.99967 5H3.33301M14.9997 5H16.6663M14.9997 5H12.4997M12.4997 5V4.5C12.4997 3.39543 11.6042 2.5 10.4997 2.5H9.49967C8.3951 2.5 7.49967 3.39543 7.49967 4.5V5M12.4997 5H7.49967"
stroke={props.strokeColor}
strokeWidth="1"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
)
}

9
packages/web/components/patterns/HighlightBar.tsx
View File

@ -7,6 +7,8 @@ import { Button } from '../elements/Button'
import { HStack, Box } from '../elements/LayoutPrimitives'
import { PenWithColorIcon } from '../elements/images/PenWithColorIcon'
import { Note, Tag, Trash, Copy } from 'phosphor-react'
import { TrashIcon } from '../elements/icons/TrashIcon'
import { LabelIcon } from '../elements/icons/LabelIcon'
type PageCoordinates = {
pageX: number
@ -134,7 +136,10 @@ function BarContent(props: HighlightBarProps): JSX.Element {
text="Delete"
title="Remove Highlight"
iconElement={
<Trash size={20} color={theme.colors.omnivoreRed.toString()} />
<TrashIcon
size={20}
color={theme.colors.omnivoreRed.toString()}
/>
}
onClick={() => props.handleButtonClick('delete')}
/>
@ -143,7 +148,7 @@ function BarContent(props: HighlightBarProps): JSX.Element {
text="Labels"
title="Set Labels"
iconElement={
<Tag size={20} color={theme.colors.readerFont.toString()} />
<LabelIcon size={20} color={theme.colors.readerFont.toString()} />
}
onClick={() => props.handleButtonClick('setHighlightLabels')}
/>

8
packages/web/components/patterns/HighlightHoverActions.tsx
View File

@ -18,6 +18,8 @@ import {
import { UserBasicData } from '../../lib/networking/queries/useGetViewerQuery'
import { Highlight } from '../../lib/networking/fragments/highlightFragment'
import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers'
import { TrashIcon } from '../elements/icons/TrashIcon'
import { LabelIcon } from '../elements/icons/LabelIcon'
type HighlightHoverActionsProps = {
viewer: UserBasicData
@ -50,7 +52,7 @@ export const HighlightHoverActions = (props: HighlightHoverActionsProps) => {
gap: '5px',
px: '5px',
visibility: props.isHovered || menuOpen ? 'unset' : 'hidden',
visibility: props.isHovered || menuOpen ? 'visible' : 'hidden',
'&:hover': {
boxShadow:
'0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06);',
@ -88,7 +90,7 @@ export const HighlightHoverActions = (props: HighlightHoverActionsProps) => {
event.preventDefault()
}}
>
<Tag size={18} color={theme.colors.thNotebookSubtle.toString()} />
<LabelIcon size={18} color={theme.colors.thNotebookSubtle.toString()} />
</Button>
<Button
style="hoverActionIcon"
@ -106,7 +108,7 @@ export const HighlightHoverActions = (props: HighlightHoverActionsProps) => {
event.preventDefault()
}}
>
<Trash size={18} color={theme.colors.thNotebookSubtle.toString()} />
<TrashIcon size={18} color={theme.colors.thNotebookSubtle.toString()} />
</Button>
</Box>
)

1
packages/web/components/patterns/HighlightView.tsx
View File

@ -73,7 +73,6 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
const hover = useHover(context)
const { getReferenceProps, getFloatingProps } = useInteractions([hover])
const highlightAlpha = isDark ? 1.0 : 0.35
return (

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

@ -160,8 +160,6 @@ const Fallback = (props: FallbackProps): JSX.Element => {
const idx = (Math.abs(hashCode(props.title)) % Colors.length) - 1
const color = Colors[idx]
console.log('idx: ', idx, 'color', color, Colors.length)
return (
<Box
css={{

28
packages/web/components/patterns/LibraryCards/LibraryHoverActions.tsx
View File

@ -14,6 +14,11 @@ import {
} from 'phosphor-react'
import { CardMenu } from '../CardMenu'
import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery'
import { ArchiveIcon } from '../../elements/icons/ArchiveIcon'
import { NotebookIcon } from '../../elements/icons/NotebookIcon'
import { TrashIcon } from '../../elements/icons/TrashIcon'
import { LabelIcon } from '../../elements/icons/LabelIcon'
import { UnarchiveIcon } from '../../elements/icons/UnarchiveIcon'
type LibraryHoverActionsProps = {
viewer: UserBasicData
@ -27,6 +32,8 @@ type LibraryHoverActionsProps = {
export const LibraryHoverActions = (props: LibraryHoverActionsProps) => {
const [menuOpen, setMenuOpen] = useState(false)
console.log(' props.isHovered || menuOpen', props.isHovered, menuOpen)
return (
<Box
css={{
@ -45,7 +52,7 @@ export const LibraryHoverActions = (props: LibraryHoverActionsProps) => {
gap: '5px',
px: '5px',
visibility: props.isHovered || menuOpen ? 'unset' : 'hidden',
visibility: props.isHovered || menuOpen ? 'visible' : 'hidden',
'&:hover': {
boxShadow:
'0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06);',
@ -58,8 +65,14 @@ export const LibraryHoverActions = (props: LibraryHoverActionsProps) => {
props.handleAction('open-notebook')
event.preventDefault()
}}
css={{
visibility: props.isHovered || menuOpen ? 'visible' : 'hidden',
}}
>
<Notebook size={19} color={theme.colors.thNotebookSubtle.toString()} />
<NotebookIcon
size={19}
color={theme.colors.thNotebookSubtle.toString()}
/>
</Button>
<Button
style="hoverActionIcon"
@ -70,9 +83,12 @@ export const LibraryHoverActions = (props: LibraryHoverActionsProps) => {
}}
>
{props.item.isArchived ? (
<Tray size={18} color={theme.colors.thNotebookSubtle.toString()} />
<UnarchiveIcon
size={18}
color={theme.colors.thNotebookSubtle.toString()}
/>
) : (
<ArchiveBox
<ArchiveIcon
size={18}
color={theme.colors.thNotebookSubtle.toString()}
/>
@ -85,7 +101,7 @@ export const LibraryHoverActions = (props: LibraryHoverActionsProps) => {
event.preventDefault()
}}
>
<Trash size={18} color={theme.colors.thNotebookSubtle.toString()} />
<TrashIcon size={18} color={theme.colors.thNotebookSubtle.toString()} />
</Button>
<Button
style="hoverActionIcon"
@ -94,7 +110,7 @@ export const LibraryHoverActions = (props: LibraryHoverActionsProps) => {
event.preventDefault()
}}
>
<Tag size={18} color={theme.colors.thNotebookSubtle.toString()} />
<LabelIcon size={18} color={theme.colors.thNotebookSubtle.toString()} />
</Button>
<CardMenu
item={props.item}

4
packages/web/components/templates/PrimaryDropdown.tsx
View File

@ -16,6 +16,7 @@ import { Box, HStack, VStack } from '../elements/LayoutPrimitives'
import { StyledText } from '../elements/StyledText'
import { styled, theme, ThemeId } from '../tokens/stitches.config'
import { LayoutType } from './homeFeed/HomeFeedContainer'
import { ListViewIcon } from '../elements/icons/ListViewIcon'
type PrimaryDropdownProps = {
children?: ReactNode
@ -316,7 +317,8 @@ function ThemeSection(props: PrimaryDropdownProps): JSX.Element {
props.updateLayout && props.updateLayout('LIST_LAYOUT')
}}
>
<ListLayoutIcon
<ListViewIcon
size={30}
color={theme.colors.thTextContrast2.toString()}
/>
</StyledToggleButton>

34
packages/web/components/templates/article/ArticleActionsMenu.tsx
View File

@ -7,6 +7,12 @@ import { TooltipWrapped } from '../../elements/Tooltip'
import { styled, theme } from '../../tokens/stitches.config'
import { ReaderSettings } from '../../../lib/hooks/useReaderSettings'
import { useRef } from 'react'
import { ArchiveIcon } from '../../elements/icons/ArchiveIcon'
import { NotebookIcon } from '../../elements/icons/NotebookIcon'
import { TrashIcon } from '../../elements/icons/TrashIcon'
import { LabelIcon } from '../../elements/icons/LabelIcon'
import { EditInfoIcon } from '../../elements/icons/EditInfoIcon'
import { UnarchiveIcon } from '../../elements/icons/UnarchiveIcon'
export type ArticleActionsMenuLayout = 'top' | 'side'
@ -69,7 +75,7 @@ export function ArticleActionsMenu(
tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
>
<SpanBox ref={displaySettingsButtonRef}>
<Tag
<LabelIcon
size={24}
color={theme.colors.thHighContrast.toString()}
/>
@ -87,7 +93,10 @@ export function ArticleActionsMenu(
},
}}
>
<Tag size={24} color={theme.colors.thHighContrast.toString()} />
<LabelIcon
size={24}
color={theme.colors.thHighContrast.toString()}
/>
</Button>
)}
</SpanBox>
@ -103,7 +112,7 @@ export function ArticleActionsMenu(
},
}}
>
<Tag size={24} color={theme.colors.thHighContrast.toString()} />
<LabelIcon size={24} color={theme.colors.thHighContrast.toString()} />
</Button>
<Button
@ -118,7 +127,7 @@ export function ArticleActionsMenu(
tooltipContent="View Notebook (t)"
tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
>
<Notebook
<NotebookIcon
size={24}
color={theme.colors.thHighContrast.toString()}
/>
@ -140,7 +149,10 @@ export function ArticleActionsMenu(
tooltipContent="Edit Info (i)"
tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
>
<Info size={24} color={theme.colors.thHighContrast.toString()} />
<EditInfoIcon
size={24}
color={theme.colors.thHighContrast.toString()}
/>
</TooltipWrapped>
</Button>
@ -163,7 +175,10 @@ export function ArticleActionsMenu(
tooltipContent="Remove (#)"
tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
>
<Trash size={24} color={theme.colors.thHighContrast.toString()} />
<TrashIcon
size={24}
color={theme.colors.thHighContrast.toString()}
/>
</TooltipWrapped>
</Button>
@ -180,7 +195,7 @@ export function ArticleActionsMenu(
tooltipContent="Archive (e)"
tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
>
<ArchiveBox
<ArchiveIcon
size={24}
color={theme.colors.thHighContrast.toString()}
/>
@ -195,7 +210,10 @@ export function ArticleActionsMenu(
tooltipContent="Unarchive (u)"
tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
>
<Tray size={24} color={theme.colors.thHighContrast.toString()} />
<UnarchiveIcon
size={24}
color={theme.colors.thHighContrast.toString()}
/>
</TooltipWrapped>
</Button>
)}

9
packages/web/components/templates/article/Notebook.tsx
View File

@ -14,7 +14,7 @@ import { nanoid } from 'nanoid'
import { deleteHighlightMutation } from '../../../lib/networking/mutations/deleteHighlightMutation'
import { HighlightViewItem } from './HighlightViewItem'
import { ConfirmationModal } from '../../patterns/ConfirmationModal'
import { TrashIcon } from '../../elements/images/TrashIcon'
import { TrashIcon } from '../../elements/icons/TrashIcon'
import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery'
import { ReadableItem } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
import { SetHighlightLabelsModalPresenter } from './SetLabelsModalPresenter'
@ -60,8 +60,9 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element {
const [noteText, setNoteText] = useState<string>('')
const [showConfirmDeleteHighlightId, setShowConfirmDeleteHighlightId] =
useState<undefined | string>(undefined)
const [labelsTarget, setLabelsTarget] =
useState<Highlight | undefined>(undefined)
const [labelsTarget, setLabelsTarget] = useState<Highlight | undefined>(
undefined
)
const noteState = useRef<NoteState>({
isCreating: false,
note: undefined,
@ -347,7 +348,7 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element {
icon={
<TrashIcon
size={40}
strokeColor={theme.colors.grayTextContrast.toString()}
color={theme.colors.grayTextContrast.toString()}
/>
}
/>

47
packages/web/components/templates/article/VerticalArticleActions.tsx
View File

@ -1,19 +1,18 @@
import {
ArchiveBox,
DotsThreeOutline,
Info,
TextAa,
Trash,
Tray,
Notebook,
Tag,
} from 'phosphor-react'
import { Tray } from 'phosphor-react'
import { ArticleAttributes } from '../../../lib/networking/queries/useGetArticleQuery'
import { Button } from '../../elements/Button'
import { HStack } from '../../elements/LayoutPrimitives'
import { TooltipWrapped } from '../../elements/Tooltip'
import { theme } from '../../tokens/stitches.config'
import { ReaderDropdownMenu } from '../../patterns/ReaderDropdownMenu'
import { ArchiveIcon } from '../../elements/icons/ArchiveIcon'
import { NotebookIcon } from '../../elements/icons/NotebookIcon'
import { TrashIcon } from '../../elements/icons/TrashIcon'
import { LabelIcon } from '../../elements/icons/LabelIcon'
import { EditInfoIcon } from '../../elements/icons/EditInfoIcon'
import { ReaderSettingsIcon } from '../../elements/icons/ReaderSettingsIcon'
import { CircleUtilityMenuIcon } from '../../elements/icons/CircleUtilityMenuIcon'
import { UnarchiveIcon } from '../../elements/icons/UnarchiveIcon'
export type ArticleActionsMenuLayout = 'top' | 'side'
@ -48,7 +47,7 @@ export function VerticalArticleActionsMenu(
},
}}
>
<Tag size={24} color={theme.colors.thHighContrast.toString()} />
<LabelIcon size={24} color={theme.colors.thHighContrast.toString()} />
</Button>
<Button
@ -66,7 +65,7 @@ export function VerticalArticleActionsMenu(
tooltipContent="Open Notebook (t)"
tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
>
<Notebook
<NotebookIcon
size={24}
color={theme.colors.thHighContrast.toString()}
/>
@ -88,7 +87,10 @@ export function VerticalArticleActionsMenu(
tooltipContent="Edit Info (i)"
tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
>
<Info size={24} color={theme.colors.thHighContrast.toString()} />
<EditInfoIcon
size={24}
color={theme.colors.thHighContrast.toString()}
/>
</TooltipWrapped>
</Button>
@ -109,7 +111,10 @@ export function VerticalArticleActionsMenu(
tooltipContent="Remove (#)"
tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
>
<Trash size={24} color={theme.colors.thHighContrast.toString()} />
<TrashIcon
size={24}
color={theme.colors.thHighContrast.toString()}
/>
</TooltipWrapped>
</Button>
@ -129,7 +134,7 @@ export function VerticalArticleActionsMenu(
tooltipContent="Archive (e)"
tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
>
<ArchiveBox
<ArchiveIcon
size={24}
color={theme.colors.thHighContrast.toString()}
/>
@ -151,7 +156,10 @@ export function VerticalArticleActionsMenu(
tooltipContent="Unarchive (e)"
tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
>
<Tray size={24} color={theme.colors.thHighContrast.toString()} />
<UnarchiveIcon
size={24}
color={theme.colors.thHighContrast.toString()}
/>
</TooltipWrapped>
</Button>
)}
@ -167,13 +175,16 @@ export function VerticalArticleActionsMenu(
tooltipContent="Edit Info (i)"
tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
>
<TextAa size={24} color={theme.colors.thHighContrast.toString()} />
<ReaderSettingsIcon
size={24}
color={theme.colors.thHighContrast.toString()}
/>
</TooltipWrapped>
</Button>
<ReaderDropdownMenu
triggerElement={
<DotsThreeOutline
<CircleUtilityMenuIcon
size={24}
color={theme.colors.thHighContrast.toString()}
/>

41
packages/web/components/templates/homeFeed/LibraryHeader.tsx
View File

@ -6,15 +6,10 @@ import { searchBarCommands } from '../../../lib/keyboardShortcuts/navigationShor
import { useKeyboardShortcuts } from '../../../lib/keyboardShortcuts/useKeyboardShortcuts'
import { Button, IconButton } from '../../elements/Button'
import {
ArchiveBox,
CaretDown,
FunnelSimple,
ListBullets,
MagnifyingGlass,
Prohibit,
SquaresFour,
Tag,
TrashSimple,
X,
} from 'phosphor-react'
import { LayoutType } from './HomeFeedContainer'
@ -28,6 +23,11 @@ import { BulkAction } from '../../../lib/networking/mutations/bulkActionMutation
import { ConfirmationModal } from '../../patterns/ConfirmationModal'
import { AddBulkLabelsModal } from '../article/AddBulkLabelsModal'
import { Label } from '../../../lib/networking/fragments/labelFragment'
import { ArchiveIcon } from '../../elements/icons/ArchiveIcon'
import { TrashIcon } from '../../elements/icons/TrashIcon'
import { LabelIcon } from '../../elements/icons/LabelIcon'
import { ListViewIcon } from '../../elements/icons/ListViewIcon'
import { GridViewIcon } from '../../elements/icons/GridViewIcon'
export type MultiSelectMode = 'off' | 'none' | 'some' | 'visible' | 'search'
@ -392,9 +392,8 @@ function MultiSelectControlButtonBox(
e.preventDefault()
}}
>
<ArchiveBox
width={20}
height={20}
<ArchiveIcon
size={20}
color={theme.colors.thTextContrast2.toString()}
/>
<SpanBox css={{ '@lgDown': { display: 'none' } }}>Archive</SpanBox>
@ -406,11 +405,7 @@ function MultiSelectControlButtonBox(
e.preventDefault()
}}
>
<Tag
width={20}
height={20}
color={theme.colors.thTextContrast2.toString()}
/>
<LabelIcon size={20} color={theme.colors.thTextContrast2.toString()} />
<SpanBox css={{ '@lgDown': { display: 'none' } }}>Add Labels</SpanBox>
</Button>
<Button
@ -420,11 +415,7 @@ function MultiSelectControlButtonBox(
e.preventDefault()
}}
>
<TrashSimple
width={20}
height={20}
color={theme.colors.thTextContrast2.toString()}
/>
<TrashIcon size={20} color={theme.colors.thTextContrast2.toString()} />
<SpanBox css={{ '@lgDown': { display: 'none' } }}>Delete</SpanBox>
</Button>
<Button
@ -487,19 +478,9 @@ function SearchControlButtonBox(
}}
>
{props.layout == 'GRID_LAYOUT' ? (
<ListBullets
width={30}
height={30}
weight="light"
color={'#898989'}
/>
<ListViewIcon size={30} color={'#898989'} />
) : (
<SquaresFour
width={30}
height={30}
weight="light"
color={'#898989'}
/>
<GridViewIcon size={30} color={'#898989'} />
)}
</Button>
<PrimaryDropdown

10
packages/web/components/templates/reader/ReaderHeader.tsx
View File

@ -1,12 +1,13 @@
import { HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
import { Button } from '../../elements/Button'
import { DotsThreeOutline, TextAa } from 'phosphor-react'
import { PrimaryDropdown } from '../PrimaryDropdown'
import { TooltipWrapped } from '../../elements/Tooltip'
import { LogoBox } from '../../elements/LogoBox'
import { ReactNode } from 'react'
import { HEADER_HEIGHT } from '../homeFeed/HeaderSpacer'
import { theme } from '../../tokens/stitches.config'
import { ReaderSettingsIcon } from '../../elements/icons/ReaderSettingsIcon'
import { CircleUtilityMenuIcon } from '../../elements/icons/CircleUtilityMenuIcon'
type ReaderHeaderProps = {
alwaysDisplayToolbar: boolean
@ -110,11 +111,14 @@ function ControlButtonBox(props: ReaderHeaderProps): JSX.Element {
}}
>
<TooltipWrapped tooltipContent="Reader Preferences (d)">
<TextAa size={25} color={theme.colors.thHighContrast.toString()} />
<ReaderSettingsIcon
size={25}
color={theme.colors.thHighContrast.toString()}
/>
</TooltipWrapped>
</Button>
<PrimaryDropdown showThemeSection={false}>
<DotsThreeOutline
<CircleUtilityMenuIcon
size={25}
color={theme.colors.thHighContrast.toString()}
/>