diff --git a/packages/api/src/resolvers/article/index.ts b/packages/api/src/resolvers/article/index.ts index 388425518..11c6c86a4 100644 --- a/packages/api/src/resolvers/article/index.ts +++ b/packages/api/src/resolvers/article/index.ts @@ -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, diff --git a/packages/api/src/resolvers/function_resolvers.ts b/packages/api/src/resolvers/function_resolvers.ts index 56035f7f9..173a86fa4 100644 --- a/packages/api/src/resolvers/function_resolvers.ts +++ b/packages/api/src/resolvers/function_resolvers.ts @@ -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 diff --git a/packages/web/components/elements/Button.tsx b/packages/web/components/elements/Button.tsx index e9085ad81..4d36a2b2d 100644 --- a/packages/web/components/elements/Button.tsx +++ b/packages/web/components/elements/Button.tsx @@ -262,7 +262,7 @@ export const Button = styled('button', { cursor: 'pointer', padding: '4px', height: '100%', - pt: '6px', + pt: '5px', minWidth: '25px', '&:hover': { diff --git a/packages/web/components/elements/CoverImage.tsx b/packages/web/components/elements/CoverImage.tsx index 679479814..d41f518aa 100644 --- a/packages/web/components/elements/CoverImage.tsx +++ b/packages/web/components/elements/CoverImage.tsx @@ -1,7 +1,6 @@ import { styled } from '../tokens/stitches.config' export const CoverImage = styled('img', { - borderRadius: '$2', objectFit: 'cover', cursor: 'pointer', }) diff --git a/packages/web/components/elements/InfoLink.tsx b/packages/web/components/elements/InfoLink.tsx index 44c0a7bc2..2dfc2d6db 100644 --- a/packages/web/components/elements/InfoLink.tsx +++ b/packages/web/components/elements/InfoLink.tsx @@ -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' }} > - + diff --git a/packages/web/components/elements/icons/ArchiveIcon.tsx b/packages/web/components/elements/icons/ArchiveIcon.tsx new file mode 100644 index 000000000..c03435d82 --- /dev/null +++ b/packages/web/components/elements/icons/ArchiveIcon.tsx @@ -0,0 +1,46 @@ +/* eslint-disable functional/no-class */ +/* eslint-disable functional/no-this-expression */ +import { IconProps } from './IconProps' + +import React from 'react' + +export class ArchiveIcon 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/elements/icons/CircleUtilityMenuIcon.tsx b/packages/web/components/elements/icons/CircleUtilityMenuIcon.tsx new file mode 100644 index 000000000..e521399ae --- /dev/null +++ b/packages/web/components/elements/icons/CircleUtilityMenuIcon.tsx @@ -0,0 +1,35 @@ +/* eslint-disable functional/no-class */ +/* eslint-disable functional/no-this-expression */ +import { IconProps } from './IconProps' + +import React from 'react' + +export class CircleUtilityMenuIcon 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/elements/icons/EditInfoIcon.tsx b/packages/web/components/elements/icons/EditInfoIcon.tsx new file mode 100644 index 000000000..88c4030c8 --- /dev/null +++ b/packages/web/components/elements/icons/EditInfoIcon.tsx @@ -0,0 +1,46 @@ +/* eslint-disable functional/no-class */ +/* eslint-disable functional/no-this-expression */ +import { IconProps } from './IconProps' + +import React from 'react' + +export class EditInfoIcon 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/elements/icons/GridViewIcon.tsx b/packages/web/components/elements/icons/GridViewIcon.tsx new file mode 100644 index 000000000..560c8e5f2 --- /dev/null +++ b/packages/web/components/elements/icons/GridViewIcon.tsx @@ -0,0 +1,53 @@ +/* eslint-disable functional/no-class */ +/* eslint-disable functional/no-this-expression */ +import { IconProps } from './IconProps' + +import React from 'react' + +export class GridViewIcon 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/elements/icons/IconProps.tsx b/packages/web/components/elements/icons/IconProps.tsx new file mode 100644 index 000000000..4172afe28 --- /dev/null +++ b/packages/web/components/elements/icons/IconProps.tsx @@ -0,0 +1,4 @@ +export type IconProps = { + color?: string + size?: number +} diff --git a/packages/web/components/elements/icons/LabelIcon.tsx b/packages/web/components/elements/icons/LabelIcon.tsx new file mode 100644 index 000000000..ce9b74e54 --- /dev/null +++ b/packages/web/components/elements/icons/LabelIcon.tsx @@ -0,0 +1,40 @@ +/* eslint-disable functional/no-class */ +/* eslint-disable functional/no-this-expression */ +import { IconProps } from './IconProps' + +import React from 'react' + +export class LabelIcon 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/elements/icons/ListViewIcon.tsx b/packages/web/components/elements/icons/ListViewIcon.tsx new file mode 100644 index 000000000..e11b3b10a --- /dev/null +++ b/packages/web/components/elements/icons/ListViewIcon.tsx @@ -0,0 +1,67 @@ +/* eslint-disable functional/no-class */ +/* eslint-disable functional/no-this-expression */ +import { IconProps } from './IconProps' + +import React from 'react' + +export class ListViewIcon 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/elements/icons/NotebookIcon.tsx b/packages/web/components/elements/icons/NotebookIcon.tsx new file mode 100644 index 000000000..a6fb741ad --- /dev/null +++ b/packages/web/components/elements/icons/NotebookIcon.tsx @@ -0,0 +1,46 @@ +/* eslint-disable functional/no-class */ +/* eslint-disable functional/no-this-expression */ +import { IconProps } from './IconProps' + +import React from 'react' + +export class NotebookIcon 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/elements/icons/ReaderSettingsIcon.tsx b/packages/web/components/elements/icons/ReaderSettingsIcon.tsx new file mode 100644 index 000000000..042217cdd --- /dev/null +++ b/packages/web/components/elements/icons/ReaderSettingsIcon.tsx @@ -0,0 +1,67 @@ +/* eslint-disable functional/no-class */ +/* eslint-disable functional/no-this-expression */ +import { IconProps } from './IconProps' + +import React from 'react' + +export class ReaderSettingsIcon 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/elements/icons/TrashIcon.tsx b/packages/web/components/elements/icons/TrashIcon.tsx new file mode 100644 index 000000000..0ad38978d --- /dev/null +++ b/packages/web/components/elements/icons/TrashIcon.tsx @@ -0,0 +1,60 @@ +/* eslint-disable functional/no-class */ +/* eslint-disable functional/no-this-expression */ +import { IconProps } from './IconProps' + +import React from 'react' + +export class TrashIcon 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/elements/icons/UnarchiveIcon.tsx b/packages/web/components/elements/icons/UnarchiveIcon.tsx new file mode 100644 index 000000000..94ba7cba5 --- /dev/null +++ b/packages/web/components/elements/icons/UnarchiveIcon.tsx @@ -0,0 +1,53 @@ +/* eslint-disable functional/no-class */ +/* eslint-disable functional/no-this-expression */ +import { IconProps } from './IconProps' + +import React from 'react' + +export class UnarchiveIcon 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/elements/images/TrashIcon.tsx b/packages/web/components/elements/images/TrashIcon.tsx deleted file mode 100644 index 72281dac9..000000000 --- a/packages/web/components/elements/images/TrashIcon.tsx +++ /dev/null @@ -1,24 +0,0 @@ -type TrashIconProps = { - size: number - strokeColor: string -} - -export function TrashIcon(props: TrashIconProps): JSX.Element { - return ( - - - - ) -} diff --git a/packages/web/components/patterns/HighlightBar.tsx b/packages/web/components/patterns/HighlightBar.tsx index ba6fe5983..0888b82cd 100644 --- a/packages/web/components/patterns/HighlightBar.tsx +++ b/packages/web/components/patterns/HighlightBar.tsx @@ -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={ - + } onClick={() => props.handleButtonClick('delete')} /> @@ -143,7 +148,7 @@ function BarContent(props: HighlightBarProps): JSX.Element { text="Labels" title="Set Labels" iconElement={ - + } onClick={() => props.handleButtonClick('setHighlightLabels')} /> diff --git a/packages/web/components/patterns/HighlightHoverActions.tsx b/packages/web/components/patterns/HighlightHoverActions.tsx index 4d3c9ae5e..0599bd4c2 100644 --- a/packages/web/components/patterns/HighlightHoverActions.tsx +++ b/packages/web/components/patterns/HighlightHoverActions.tsx @@ -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() }} > - + ) diff --git a/packages/web/components/patterns/HighlightView.tsx b/packages/web/components/patterns/HighlightView.tsx index 3bd6a497b..361f6c131 100644 --- a/packages/web/components/patterns/HighlightView.tsx +++ b/packages/web/components/patterns/HighlightView.tsx @@ -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 ( diff --git a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx index 09ae38c45..34e28c50d 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx @@ -69,7 +69,7 @@ export const AuthorInfoStyle = { overflow: 'hidden', height: '21px', color: '$thTextSubtle3', - fontSize: '13px', + fontSize: '12px', fontWeight: '400', fontFamily: '$display', } diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx index a269a006b..684ee6d37 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx @@ -73,6 +73,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element { offset({ mainAxis: -25, }), + size(), ], placement: 'top-end', @@ -88,8 +89,8 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element { ref={refs.setReference} {...getReferenceProps()} css={{ - pl: '20px', - padding: '15px', + pl: '0px', + padding: '0px', width: '320px', height: '100%', minHeight: '270px', @@ -97,6 +98,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element { borderRadius: '5px', borderWidth: '1px', borderStyle: 'solid', + overflow: 'hidden', borderColor: '$thBorderColor', cursor: 'pointer', '@media (max-width: 930px)': { @@ -120,7 +122,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element { {!isTouchScreenDevice() && ( { + const idx = (Math.abs(hashCode(props.title)) % Colors.length) - 1 + const color = Colors[idx] + + return ( + + + {props.title.substring(0, 1).toLocaleUpperCase()} + + + ) +} + +type GridImageProps = { + src?: string + title?: string +} + +const GridImage = (props: GridImageProps): JSX.Element => { + const [displayFallback, setDisplayFallback] = useState(props.src == undefined) + + return displayFallback ? ( + + ) : ( + { + setDisplayFallback(true) + }} + /> + ) +} + const LibraryGridCardContent = (props: LinkedItemCardProps): JSX.Element => { const { isChecked, setIsChecked, item } = props const [menuOpen, setMenuOpen] = useState(false) @@ -159,17 +221,11 @@ const LibraryGridCardContent = (props: LinkedItemCardProps): JSX.Element => { }, [setIsChecked, isChecked]) return ( - <> - - + + + {props.inMultiSelect ? ( - + { { /> )} + + + + { > {props.item.title} - {props.item.description} {props.item.author} {props.item.author && originText && ' | '} {originText} - - - { ))} - - {props.item.image && ( - { - ;(e.target as HTMLElement).style.display = 'none' - }} - /> - )} - - + ) } + +const hashCode = (str: string) => { + let hash = 0 + for (let i = 0; i < str.length; i++) { + hash = ((hash << 5) - hash + str.charCodeAt(i)) & 0xffffffff + } + return hash +} + +const Colors = [ + { + name: 'Omolon', + colors: ['#091E3A', '#2F80ED', '#2D9EE0'], + }, + { + name: 'Farhan', + colors: ['#9400D3', '#4B0082'], + }, + { + name: 'Purple', + colors: ['#c84e89', '#F15F79'], + }, + { + name: 'Ibtesam', + colors: ['#00F5A0', '#00D9F5'], + }, + { + name: 'Radioactive Heat', + colors: ['#F7941E', '#72C6EF', '#00A651'], + }, + { + name: 'The Sky And The Sea', + colors: ['#F7941E', '#004E8F'], + }, + { + name: 'From Ice To Fire', + colors: ['#72C6EF', '#004E8F'], + }, + + { + name: 'Blue & Orange', + colors: ['#FD8112', '#0085CA'], + }, + { + name: 'Purple Dream', + colors: ['#bf5ae0', '#a811da'], + }, + { + name: 'Blu', + colors: ['#00416A', '#E4E5E6'], + }, + { + name: 'Summer Breeze', + colors: ['#fbed96', '#abecd6'], + }, + { + name: 'Ver', + colors: ['#FFE000', '#799F0C'], + }, + { + name: 'Ver Black', + colors: ['#F7F8F8', '#ACBB78'], + }, + { + name: 'Combi', + colors: ['#00416A', '#799F0C', '#FFE000'], + }, + { + name: 'Anwar', + colors: ['#334d50', '#cbcaa5'], + }, + { + name: 'Bluelagoo', + colors: ['#0052D4', '#4364F7', '#6FB1FC'], + }, + { + name: 'Lunada', + colors: ['#5433FF', '#20BDFF', '#A5FECB'], + }, + { + name: 'Reaqua', + colors: ['#799F0C', '#ACBB78'], + }, + { + name: 'Mango', + colors: ['#ffe259', '#ffa751'], + }, + { + name: 'Bupe', + colors: ['#00416A', '#E4E5E6'], + }, + { + name: 'Rea', + colors: ['#FFE000', '#799F0C'], + }, + { + name: 'Windy', + colors: ['#acb6e5', '#86fde8'], + }, + { + name: 'Royal Blue', + colors: ['#536976', '#292E49'], + }, + { + name: 'Royal Blue + Petrol', + colors: ['#BBD2C5', '#536976', '#292E49'], + }, + { + name: 'Copper', + colors: ['#B79891', '#94716B'], + }, + { + name: 'Anamnisar', + colors: ['#9796f0', '#fbc7d4'], + }, + { + name: 'Petrol', + colors: ['#BBD2C5', '#536976'], + }, + { + name: 'Sky', + colors: ['#076585', '#fff'], + }, + { + name: 'Sel', + colors: ['#00467F', '#A5CC82'], + }, + { + name: 'Afternoon', + colors: ['#000C40', '#607D8B'], + }, + { + name: 'Skyline', + colors: ['#1488CC', '#2B32B2'], + }, + { + name: 'DIMIGO', + colors: ['#ec008c', '#fc6767'], + }, + { + name: 'Purple Love', + colors: ['#cc2b5e', '#753a88'], + }, + { + name: 'Sexy Blue', + colors: ['#2193b0', '#6dd5ed'], + }, + { + name: 'Blooker20', + colors: ['#e65c00', '#F9D423'], + }, + { + name: 'Sea Blue', + colors: ['#2b5876', '#4e4376'], + }, + { + name: 'Nimvelo', + colors: ['#314755', '#26a0da'], + }, + { + name: 'Hazel', + colors: ['#77A1D3', '#79CBCA', '#E684AE'], + }, + { + name: 'Noon to Dusk', + colors: ['#ff6e7f', '#bfe9ff'], + }, + { + name: 'YouTube', + colors: ['#e52d27', '#b31217'], + }, + { + name: 'Cool Brown', + colors: ['#603813', '#b29f94'], + }, + { + name: 'Harmonic Energy', + colors: ['#16A085', '#F4D03F'], + }, + { + name: 'Playing with Reds', + colors: ['#D31027', '#EA384D'], + }, + { + name: 'Sunny Days', + colors: ['#EDE574', '#E1F5C4'], + }, + { + name: 'Green Beach', + colors: ['#02AAB0', '#00CDAC'], + }, + { + name: 'Intuitive Purple', + colors: ['#DA22FF', '#9733EE'], + }, + { + name: 'Emerald Water', + colors: ['#348F50', '#56B4D3'], + }, + { + name: 'Lemon Twist', + colors: ['#3CA55C', '#B5AC49'], + }, + { + name: 'Monte Carlo', + colors: ['#CC95C0', '#DBD4B4', '#7AA1D2'], + }, + { + name: 'Horizon', + colors: ['#003973', '#E5E5BE'], + }, + { + name: 'Rose Water', + colors: ['#E55D87', '#5FC3E4'], + }, + { + name: 'Frozen', + colors: ['#403B4A', '#E7E9BB'], + }, + { + name: 'Mango Pulp', + colors: ['#F09819', '#EDDE5D'], + }, + { + name: 'Bloody Mary', + colors: ['#FF512F', '#DD2476'], + }, + { + name: 'Aubergine', + colors: ['#AA076B', '#61045F'], + }, + { + name: 'Aqua Marine', + colors: ['#1A2980', '#26D0CE'], + }, + { + name: 'Sunrise', + colors: ['#FF512F', '#F09819'], + }, + { + name: 'Purple Paradise', + colors: ['#1D2B64', '#F8CDDA'], + }, + { + name: 'Stripe', + colors: ['#1FA2FF', '#12D8FA', '#A6FFCB'], + }, + { + name: 'Sea Weed', + colors: ['#4CB8C4', '#3CD3AD'], + }, + { + name: 'Pinky', + colors: ['#DD5E89', '#F7BB97'], + }, + { + name: 'Cherry', + colors: ['#EB3349', '#F45C43'], + }, + { + name: 'Mojito', + colors: ['#1D976C', '#93F9B9'], + }, + { + name: 'Juicy Orange', + colors: ['#FF8008', '#FFC837'], + }, + { + name: 'Mirage', + colors: ['#16222A', '#3A6073'], + }, + { + name: 'Steel Gray', + colors: ['#1F1C2C', '#928DAB'], + }, + { + name: 'Kashmir', + colors: ['#614385', '#516395'], + }, + { + name: 'Electric Violet', + colors: ['#4776E6', '#8E54E9'], + }, + { + name: 'Venice Blue', + colors: ['#085078', '#85D8CE'], + }, + { + name: 'Bora Bora', + colors: ['#2BC0E4', '#EAECC6'], + }, + { + name: 'Moss', + colors: ['#134E5E', '#71B280'], + }, + { + name: 'Shroom Haze', + colors: ['#5C258D', '#4389A2'], + }, + { + name: 'Mystic', + colors: ['#757F9A', '#D7DDE8'], + }, + { + name: 'Midnight City', + colors: ['#232526', '#414345'], + }, + { + name: 'Sea Blizz', + colors: ['#1CD8D2', '#93EDC7'], + }, + { + name: 'Opa', + colors: ['#3D7EAA', '#FFE47A'], + }, + { + name: 'Titanium', + colors: ['#283048', '#859398'], + }, + { + name: 'Mantle', + colors: ['#24C6DC', '#514A9D'], + }, + { + name: 'Dracula', + colors: ['#DC2424', '#4A569D'], + }, + { + name: 'Peach', + colors: ['#ED4264', '#FFEDBC'], + }, + { + name: 'Moonrise', + colors: ['#DAE2F8', '#D6A4A4'], + }, + { + name: 'Clouds', + colors: ['#ECE9E6', '#FFFFFF'], + }, + { + name: 'Stellar', + colors: ['#7474BF', '#348AC7'], + }, + { + name: 'Bourbon', + colors: ['#EC6F66', '#F3A183'], + }, + { + name: 'Calm Darya', + colors: ['#5f2c82', '#49a09d'], + }, + { + name: 'Influenza', + colors: ['#C04848', '#480048'], + }, + { + name: 'Shrimpy', + colors: ['#e43a15', '#e65245'], + }, + { + name: 'Army', + colors: ['#414d0b', '#727a17'], + }, + { + name: 'Miaka', + colors: ['#FC354C', '#0ABFBC'], + }, + { + name: 'Pinot Noir', + colors: ['#4b6cb7', '#182848'], + }, + { + name: 'Day Tripper', + colors: ['#f857a6', '#ff5858'], + }, + { + name: 'Namn', + colors: ['#a73737', '#7a2828'], + }, + { + name: 'Blurry Beach', + colors: ['#d53369', '#cbad6d'], + }, + { + name: 'Vasily', + colors: ['#e9d362', '#333333'], + }, + { + name: 'A Lost Memory', + colors: ['#DE6262', '#FFB88C'], + }, + { + name: 'Petrichor', + colors: ['#666600', '#999966'], + }, + { + name: 'Jonquil', + colors: ['#FFEEEE', '#DDEFBB'], + }, + { + name: 'Sirius Tamed', + colors: ['#EFEFBB', '#D4D3DD'], + }, + { + name: 'Kyoto', + colors: ['#c21500', '#ffc500'], + }, + { + name: 'Misty Meadow', + colors: ['#215f00', '#e4e4d9'], + }, + { + name: 'Aqualicious', + colors: ['#50C9C3', '#96DEDA'], + }, + { + name: 'Moor', + colors: ['#616161', '#9bc5c3'], + }, + { + name: 'Almost', + colors: ['#ddd6f3', '#faaca8'], + }, + { + name: 'Forever Lost', + colors: ['#5D4157', '#A8CABA'], + }, + { + name: 'Winter', + colors: ['#E6DADA', '#274046'], + }, + { + name: 'Nelson', + colors: ['#f2709c', '#ff9472'], + }, + { + name: 'Autumn', + colors: ['#DAD299', '#B0DAB9'], + }, + { + name: 'Candy', + colors: ['#D3959B', '#BFE6BA'], + }, + { + name: 'Reef', + colors: ['#00d2ff', '#3a7bd5'], + }, + { + name: 'The Strain', + colors: ['#870000', '#190A05'], + }, + { + name: 'Dirty Fog', + colors: ['#B993D6', '#8CA6DB'], + }, + { + name: 'Earthly', + colors: ['#649173', '#DBD5A4'], + }, + { + name: 'Virgin', + colors: ['#C9FFBF', '#FFAFBD'], + }, + { + name: 'Ash', + colors: ['#606c88', '#3f4c6b'], + }, + { + name: 'Cherryblossoms', + colors: ['#FBD3E9', '#BB377D'], + }, + { + name: 'Parklife', + colors: ['#ADD100', '#7B920A'], + }, + { + name: 'Dance To Forget', + colors: ['#FF4E50', '#F9D423'], + }, + { + name: 'Starfall', + colors: ['#F0C27B', '#4B1248'], + }, + { + name: 'Red Mist', + colors: ['#000000', '#e74c3c'], + }, + { + name: 'Teal Love', + colors: ['#AAFFA9', '#11FFBD'], + }, + { + name: 'Neon Life', + colors: ['#B3FFAB', '#12FFF7'], + }, + { + name: 'Man of Steel', + colors: ['#780206', '#061161'], + }, + { + name: 'Amethyst', + colors: ['#9D50BB', '#6E48AA'], + }, + { + name: 'Cheer Up Emo Kid', + colors: ['#556270', '#FF6B6B'], + }, + { + name: 'Shore', + colors: ['#70e1f5', '#ffd194'], + }, + { + name: 'Facebook Messenger', + colors: ['#00c6ff', '#0072ff'], + }, + { + name: 'SoundCloud', + colors: ['#fe8c00', '#f83600'], + }, + { + name: 'Behongo', + colors: ['#52c234', '#061700'], + }, + { + name: 'ServQuick', + colors: ['#485563', '#29323c'], + }, + { + name: 'Friday', + colors: ['#83a4d4', '#b6fbff'], + }, + { + name: 'Martini', + colors: ['#FDFC47', '#24FE41'], + }, + { + name: 'Metallic Toad', + colors: ['#abbaab', '#ffffff'], + }, + { + name: 'Between The Clouds', + colors: ['#73C8A9', '#373B44'], + }, + { + name: 'Crazy Orange I', + colors: ['#D38312', '#A83279'], + }, + { + name: 'Hersheys', + colors: ['#1e130c', '#9a8478'], + }, + { + name: 'Talking To Mice Elf', + colors: ['#948E99', '#2E1437'], + }, + { + name: 'Purple Bliss', + colors: ['#360033', '#0b8793'], + }, + { + name: 'Predawn', + colors: ['#FFA17F', '#00223E'], + }, + { + name: 'Endless River', + colors: ['#43cea2', '#185a9d'], + }, + { + name: 'Pastel Orange at the Sun', + colors: ['#ffb347', '#ffcc33'], + }, + { + name: 'Twitch', + colors: ['#6441A5', '#2a0845'], + }, + { + name: 'Atlas', + colors: ['#FEAC5E', '#C779D0', '#4BC0C8'], + }, + { + name: 'Instagram', + colors: ['#833ab4', '#fd1d1d', '#fcb045'], + }, + { + name: 'Flickr', + colors: ['#ff0084', '#33001b'], + }, + { + name: 'Vine', + colors: ['#00bf8f', '#001510'], + }, + { + name: 'Turquoise flow', + colors: ['#136a8a', '#267871'], + }, + { + name: 'Portrait', + colors: ['#8e9eab', '#eef2f3'], + }, + { + name: 'Virgin America', + colors: ['#7b4397', '#dc2430'], + }, + { + name: 'Koko Caramel', + colors: ['#D1913C', '#FFD194'], + }, + { + name: 'Fresh Turboscent', + colors: ['#F1F2B5', '#135058'], + }, + { + name: 'Green to dark', + colors: ['#6A9113', '#141517'], + }, + { + name: 'Ukraine', + colors: ['#004FF9', '#FFF94C'], + }, + { + name: 'Curiosity blue', + colors: ['#525252', '#3d72b4'], + }, + { + name: 'Dark Knight', + colors: ['#BA8B02', '#181818'], + }, + { + name: 'Piglet', + colors: ['#ee9ca7', '#ffdde1'], + }, + { + name: 'Lizard', + colors: ['#304352', '#d7d2cc'], + }, + { + name: 'Sage Persuasion', + colors: ['#CCCCB2', '#757519'], + }, + { + name: 'Between Night and Day', + colors: ['#2c3e50', '#3498db'], + }, + { + name: 'Timber', + colors: ['#fc00ff', '#00dbde'], + }, + { + name: 'Passion', + colors: ['#e53935', '#e35d5b'], + }, + { + name: 'Clear Sky', + colors: ['#005C97', '#363795'], + }, + { + name: 'Master Card', + colors: ['#f46b45', '#eea849'], + }, + { + name: 'Back To Earth', + colors: ['#00C9FF', '#92FE9D'], + }, + { + name: 'Deep Purple', + colors: ['#673AB7', '#512DA8'], + }, + { + name: 'Little Leaf', + colors: ['#76b852', '#8DC26F'], + }, + { + name: 'Netflix', + colors: ['#8E0E00', '#1F1C18'], + }, + { + name: 'Light Orange', + colors: ['#FFB75E', '#ED8F03'], + }, + { + name: 'Green and Blue', + colors: ['#c2e59c', '#64b3f4'], + }, + { + name: 'Poncho', + colors: ['#403A3E', '#BE5869'], + }, + { + name: 'Back to the Future', + colors: ['#C02425', '#F0CB35'], + }, + { + name: 'Blush', + colors: ['#B24592', '#F15F79'], + }, + { + name: 'Inbox', + colors: ['#457fca', '#5691c8'], + }, + { + name: 'Purplin', + colors: ['#6a3093', '#a044ff'], + }, + { + name: 'Pale Wood', + colors: ['#eacda3', '#d6ae7b'], + }, + { + name: 'Haikus', + colors: ['#fd746c', '#ff9068'], + }, + { + name: 'Pizelex', + colors: ['#114357', '#F29492'], + }, + { + name: 'Joomla', + colors: ['#1e3c72', '#2a5298'], + }, + { + name: 'Christmas', + colors: ['#2F7336', '#AA3A38'], + }, + { + name: 'Minnesota Vikings', + colors: ['#5614B0', '#DBD65C'], + }, + { + name: 'Miami Dolphins', + colors: ['#4DA0B0', '#D39D38'], + }, + { + name: 'Forest', + colors: ['#5A3F37', '#2C7744'], + }, + { + name: 'Nighthawk', + colors: ['#2980b9', '#2c3e50'], + }, + { + name: 'Superman', + colors: ['#0099F7', '#F11712'], + }, + { + name: 'Suzy', + colors: ['#834d9b', '#d04ed6'], + }, + { + name: 'Dark Skies', + colors: ['#4B79A1', '#283E51'], + }, + { + name: 'Deep Space', + colors: ['#000000', '#434343'], + }, + { + name: 'Decent', + colors: ['#4CA1AF', '#C4E0E5'], + }, + { + name: 'Colors Of Sky', + colors: ['#E0EAFC', '#CFDEF3'], + }, + { + name: 'Purple White', + colors: ['#BA5370', '#F4E2D8'], + }, + { + name: 'Ali', + colors: ['#ff4b1f', '#1fddff'], + }, + { + name: 'Alihossein', + colors: ['#f7ff00', '#db36a4'], + }, + { + name: 'Shahabi', + colors: ['#a80077', '#66ff00'], + }, + { + name: 'Red Ocean', + colors: ['#1D4350', '#A43931'], + }, + { + name: 'Tranquil', + colors: ['#EECDA3', '#EF629F'], + }, + { + name: 'Transfile', + colors: ['#16BFFD', '#CB3066'], + }, + + { + name: 'Sylvia', + colors: ['#ff4b1f', '#ff9068'], + }, + { + name: 'Sweet Morning', + colors: ['#FF5F6D', '#FFC371'], + }, + { + name: 'Politics', + colors: ['#2196f3', '#f44336'], + }, + { + name: 'Bright Vault', + colors: ['#00d2ff', '#928DAB'], + }, + { + name: 'Solid Vault', + colors: ['#3a7bd5', '#3a6073'], + }, + { + name: 'Sunset', + colors: ['#0B486B', '#F56217'], + }, + { + name: 'Grapefruit Sunset', + colors: ['#e96443', '#904e95'], + }, + { + name: 'Deep Sea Space', + colors: ['#2C3E50', '#4CA1AF'], + }, + { + name: 'Dusk', + colors: ['#2C3E50', '#FD746C'], + }, + { + name: 'Minimal Red', + colors: ['#F00000', '#DC281E'], + }, + { + name: 'Royal', + colors: ['#141E30', '#243B55'], + }, + { + name: 'Mauve', + colors: ['#42275a', '#734b6d'], + }, + { + name: 'Frost', + colors: ['#000428', '#004e92'], + }, + { + name: 'Lush', + colors: ['#56ab2f', '#a8e063'], + }, + { + name: 'Firewatch', + colors: ['#cb2d3e', '#ef473a'], + }, + { + name: 'Sherbert', + colors: ['#f79d00', '#64f38c'], + }, + { + name: 'Blood Red', + colors: ['#f85032', '#e73827'], + }, + { + name: 'Sun on the Horizon', + colors: ['#fceabb', '#f8b500'], + }, + { + name: 'IIIT Delhi', + colors: ['#808080', '#3fada8'], + }, + { + name: 'Jupiter', + colors: ['#ffd89b', '#19547b'], + }, + { + name: '50 Shades of Grey', + colors: ['#bdc3c7', '#2c3e50'], + }, + { + name: 'Dania', + colors: ['#BE93C5', '#7BC6CC'], + }, + { + name: 'Limeade', + colors: ['#A1FFCE', '#FAFFD1'], + }, + { + name: 'Disco', + colors: ['#4ECDC4', '#556270'], + }, + { + name: 'Love Couple', + colors: ['#3a6186', '#89253e'], + }, + { + name: 'Azure Pop', + colors: ['#ef32d9', '#89fffd'], + }, + { + name: 'Nepal', + colors: ['#de6161', '#2657eb'], + }, + { + name: 'Cosmic Fusion', + colors: ['#ff00cc', '#333399'], + }, + { + name: 'Snapchat', + colors: ['#fffc00', '#ffffff'], + }, + { + name: "Ed's Sunset Gradient", + colors: ['#ff7e5f', '#feb47b'], + }, + { + name: 'Brady Brady Fun Fun', + colors: ['#00c3ff', '#ffff1c'], + }, + { + name: 'Black Rosé', + colors: ['#f4c4f3', '#fc67fa'], + }, + { + name: "80's Purple", + colors: ['#41295a', '#2F0743'], + }, + { + name: 'Radar', + colors: ['#A770EF', '#CF8BF3', '#FDB99B'], + }, + { + name: 'Ibiza Sunset', + colors: ['#ee0979', '#ff6a00'], + }, + { + name: 'Dawn', + colors: ['#F3904F', '#3B4371'], + }, + { + name: 'Mild', + colors: ['#67B26F', '#4ca2cd'], + }, + { + name: 'Vice City', + colors: ['#3494E6', '#EC6EAD'], + }, + { + name: 'Jaipur', + colors: ['#DBE6F6', '#C5796D'], + }, + { + name: 'Jodhpur', + colors: ['#9CECFB', '#65C7F7', '#0052D4'], + }, + { + name: 'Cocoaa Ice', + colors: ['#c0c0aa', '#1cefff'], + }, + { + name: 'EasyMed', + colors: ['#DCE35B', '#45B649'], + }, + { + name: 'Rose Colored Lenses', + colors: ['#E8CBC0', '#636FA4'], + }, + { + name: 'What lies Beyond', + colors: ['#F0F2F0', '#000C40'], + }, + { + name: 'Roseanna', + colors: ['#FFAFBD', '#ffc3a0'], + }, + { + name: 'Honey Dew', + colors: ['#43C6AC', '#F8FFAE'], + }, + { + name: 'Under the Lake', + colors: ['#093028', '#237A57'], + }, + { + name: 'The Blue Lagoon', + colors: ['#43C6AC', '#191654'], + }, + { + name: 'Can You Feel The Love Tonight', + colors: ['#4568DC', '#B06AB3'], + }, + { + name: 'Very Blue', + colors: ['#0575E6', '#021B79'], + }, + { + name: 'Love and Liberty', + colors: ['#200122', '#6f0000'], + }, + { + name: 'Orca', + colors: ['#44A08D', '#093637'], + }, + { + name: 'Venice', + colors: ['#6190E8', '#A7BFE8'], + }, + { + name: 'Pacific Dream', + colors: ['#34e89e', '#0f3443'], + }, + { + name: 'Learning and Leading', + colors: ['#F7971E', '#FFD200'], + }, + { + name: 'Celestial', + colors: ['#C33764', '#1D2671'], + }, + { + name: 'Purplepine', + colors: ['#20002c', '#cbb4d4'], + }, + { + name: 'Sha la la', + colors: ['#D66D75', '#E29587'], + }, + { + name: 'Mini', + colors: ['#30E8BF', '#FF8235'], + }, + { + name: 'Maldives', + colors: ['#B2FEFA', '#0ED2F7'], + }, + { + name: 'Cinnamint', + colors: ['#4AC29A', '#BDFFF3'], + }, + { + name: 'Html', + colors: ['#E44D26', '#F16529'], + }, + { + name: 'Coal', + colors: ['#EB5757', '#000000'], + }, + { + name: 'Sunkist', + colors: ['#F2994A', '#F2C94C'], + }, + { + name: 'Blue Skies', + colors: ['#56CCF2', '#2F80ED'], + }, + { + name: 'Chitty Chitty Bang Bang', + colors: ['#007991', '#78ffd6'], + }, + { + name: 'Visions of Grandeur', + colors: ['#000046', '#1CB5E0'], + }, + { + name: 'Crystal Clear', + colors: ['#159957', '#155799'], + }, + { + name: 'Mello', + colors: ['#c0392b', '#8e44ad'], + }, + { + name: 'Compare Now', + colors: ['#EF3B36', '#FFFFFF'], + }, + { + name: 'Meridian', + colors: ['#283c86', '#45a247'], + }, + { + name: 'Relay', + colors: ['#3A1C71', '#D76D77', '#FFAF7B'], + }, + { + name: 'Alive', + colors: ['#CB356B', '#BD3F32'], + }, + { + name: 'Scooter', + colors: ['#36D1DC', '#5B86E5'], + }, + { + name: 'Terminal', + colors: ['#000000', '#0f9b0f'], + }, + { + name: 'Telegram', + colors: ['#1c92d2', '#f2fcfe'], + }, + { + name: 'Crimson Tide', + colors: ['#642B73', '#C6426E'], + }, + { + name: 'Socialive', + colors: ['#06beb6', '#48b1bf'], + }, + { + name: 'Subu', + colors: ['#0cebeb', '#20e3b2', '#29ffc6'], + }, + { + name: 'Broken Hearts', + colors: ['#d9a7c7', '#fffcdc'], + }, + { + name: 'Kimoby Is The New Blue', + colors: ['#396afc', '#2948ff'], + }, + { + name: 'Dull', + colors: ['#C9D6FF', '#E2E2E2'], + }, + { + name: 'Purpink', + colors: ['#7F00FF', '#E100FF'], + }, + { + name: 'Orange Coral', + colors: ['#ff9966', '#ff5e62'], + }, + { + name: 'Summer', + colors: ['#22c1c3', '#fdbb2d'], + }, + { + name: 'King Yna', + colors: ['#1a2a6c', '#b21f1f', '#fdbb2d'], + }, + { + name: 'Velvet Sun', + colors: ['#e1eec3', '#f05053'], + }, + { + name: 'Zinc', + colors: ['#ADA996', '#F2F2F2', '#DBDBDB', '#EAEAEA'], + }, + { + name: 'Hydrogen', + colors: ['#667db6', '#0082c8', '#0082c8', '#667db6'], + }, + { + name: 'Argon', + colors: ['#03001e', '#7303c0', '#ec38bc', '#fdeff9'], + }, + { + name: 'Lithium', + colors: ['#6D6027', '#D3CBB8'], + }, + { + name: 'Digital Water', + colors: ['#74ebd5', '#ACB6E5'], + }, + { + name: 'Orange Fun', + colors: ['#fc4a1a', '#f7b733'], + }, + { + name: 'Rainbow Blue', + colors: ['#00F260', '#0575E6'], + }, + { + name: 'Pink Flavour', + colors: ['#800080', '#ffc0cb'], + }, + { + name: 'Sulphur', + colors: ['#CAC531', '#F3F9A7'], + }, + { + name: 'Selenium', + colors: ['#3C3B3F', '#605C3C'], + }, + { + name: 'Delicate', + colors: ['#D3CCE3', '#E9E4F0'], + }, + { + name: 'Ohhappiness', + colors: ['#00b09b', '#96c93d'], + }, + { + name: 'Lawrencium', + colors: ['#0f0c29', '#302b63', '#24243e'], + }, + { + name: 'Relaxing red', + colors: ['#fffbd5', '#b20a2c'], + }, + { + name: 'Taran Tado', + colors: ['#23074d', '#cc5333'], + }, + { + name: 'Bighead', + colors: ['#c94b4b', '#4b134f'], + }, + { + name: 'Sublime Vivid', + colors: ['#FC466B', '#3F5EFB'], + }, + { + name: 'Sublime Light', + colors: ['#FC5C7D', '#6A82FB'], + }, + { + name: 'Pun Yeta', + colors: ['#108dc7', '#ef8e38'], + }, + { + name: 'Quepal', + colors: ['#11998e', '#38ef7d'], + }, + { + name: 'Sand to Blue', + colors: ['#3E5151', '#DECBA4'], + }, + { + name: 'Wedding Day Blues', + colors: ['#40E0D0', '#FF8C00', '#FF0080'], + }, + { + name: 'Shifter', + colors: ['#bc4e9c', '#f80759'], + }, + { + name: 'Red Sunset', + colors: ['#355C7D', '#6C5B7B', '#C06C84'], + }, + { + name: 'Moon Purple', + colors: ['#4e54c8', '#8f94fb'], + }, + { + name: 'Pure Lust', + colors: ['#333333', '#dd1818'], + }, + { + name: 'Slight Ocean View', + colors: ['#a8c0ff', '#3f2b96'], + }, + { + name: 'eXpresso', + colors: ['#ad5389', '#3c1053'], + }, + { + name: 'Shifty', + colors: ['#636363', '#a2ab58'], + }, + { + name: 'Vanusa', + colors: ['#DA4453', '#89216B'], + }, + { + name: 'Evening Night', + colors: ['#005AA7', '#FFFDE4'], + }, + { + name: 'Magic', + colors: ['#59C173', '#a17fe0', '#5D26C1'], + }, + { + name: 'Margo', + colors: ['#FFEFBA', '#FFFFFF'], + }, + { + name: 'Blue Raspberry', + colors: ['#00B4DB', '#0083B0'], + }, + { + name: 'Citrus Peel', + colors: ['#FDC830', '#F37335'], + }, + { + name: 'Sin City Red', + colors: ['#ED213A', '#93291E'], + }, + { + name: 'Rastafari', + colors: ['#1E9600', '#FFF200', '#FF0000'], + }, + { + name: 'Summer Dog', + colors: ['#a8ff78', '#78ffd6'], + }, + { + name: 'Wiretap', + colors: ['#8A2387', '#E94057', '#F27121'], + }, + { + name: 'Burning Orange', + colors: ['#FF416C', '#FF4B2B'], + }, + { + name: 'Ultra Voilet', + colors: ['#654ea3', '#eaafc8'], + }, + { + name: 'By Design', + colors: ['#009FFF', '#ec2F4B'], + }, + { + name: 'Kyoo Tah', + colors: ['#544a7d', '#ffd452'], + }, + { + name: 'Kye Meh', + colors: ['#8360c3', '#2ebf91'], + }, + { + name: 'Kyoo Pal', + colors: ['#dd3e54', '#6be585'], + }, + { + name: 'Metapolis', + colors: ['#659999', '#f4791f'], + }, + { + name: 'Flare', + colors: ['#f12711', '#f5af19'], + }, + { + name: 'Witching Hour', + colors: ['#c31432', '#240b36'], + }, + { + name: 'Azur Lane', + colors: ['#7F7FD5', '#86A8E7', '#91EAE4'], + }, + { + name: 'Neuromancer', + colors: ['#f953c6', '#b91d73'], + }, + { + name: 'Harvey', + colors: ['#1f4037', '#99f2c8'], + }, + { + name: 'Amin', + colors: ['#8E2DE2', '#4A00E0'], + }, + { + name: 'Memariani', + colors: ['#aa4b6b', '#6b6b83', '#3b8d99'], + }, + { + name: 'Yoda', + colors: ['#FF0099', '#493240'], + }, + { + name: 'Cool Sky', + colors: ['#2980B9', '#6DD5FA', '#FFFFFF'], + }, + { + name: 'Dark Ocean', + colors: ['#373B44', '#4286f4'], + }, + { + name: 'Evening Sunshine', + colors: ['#b92b27', '#1565C0'], + }, + { + name: 'JShine', + colors: ['#12c2e9', '#c471ed', '#f64f59'], + }, + { + name: 'Moonlit Asteroid', + colors: ['#0F2027', '#203A43', '#2C5364'], + }, + { + name: 'MegaTron', + colors: ['#C6FFDD', '#FBD786', '#f7797d'], + }, + { + name: 'Cool Blues', + colors: ['#2193b0', '#6dd5ed'], + }, + { + name: 'Piggy Pink', + colors: ['#ee9ca7', '#ffdde1'], + }, + { + name: 'Grade Grey', + colors: ['#bdc3c7', '#2c3e50'], + }, + { + name: 'Telko', + colors: ['#F36222', '#5CB644', '#007FC3'], + }, + { + name: 'Zenta', + colors: ['#2A2D3E', '#FECB6E'], + }, + { + name: 'Electric Peacock', + colors: ['#8a2be2', '#0000cd', '#228b22', '#ccff00'], + }, + { + name: 'Under Blue Green', + colors: ['#051937', '#004d7a', '#008793', '#00bf72', '#a8eb12'], + }, + { + name: 'Lensod', + colors: ['#6025F5', '#FF5555'], + }, + { + name: 'Newspaper', + colors: ['#8a2be2', '#ffa500', '#f8f8ff'], + }, + { + name: 'Dark Blue Gradient', + colors: ['#2774ae', '#002E5D', '#002E5D'], + }, + { + name: 'Dark Blu Two', + colors: ['#004680', '#4484BA'], + }, + { + name: 'Lemon Lime', + colors: ['#7ec6bc', '#ebe717'], + }, + { + name: 'Beleko', + colors: ['#ff1e56', '#f9c942', '#1e90ff'], + }, + { + name: 'Mango Papaya', + colors: ['#de8a41', '#2ada53'], + }, + { + name: 'Unicorn Rainbow', + colors: ['#f7f0ac', '#acf7f0', '#f0acf7'], + }, + { + name: 'Flame', + colors: ['#ff0000', '#fdcf58'], + }, + { + name: 'Blue Red', + colors: ['#36B1C7', '#960B33'], + }, + { + name: 'Twitter', + colors: ['#1DA1F2', '#009ffc'], + }, + { + name: 'Blooze', + colors: ['#6da6be', '#4b859e', '#6da6be'], + }, + { + name: 'Blue Slate', + colors: ['#B5B9FF', '#2B2C49'], + }, + { + name: 'Space Light Green', + colors: ['#9FA0A8', '#5C7852'], + }, + { + name: 'Flower', + colors: ['#DCFFBD', '#CC86D1'], + }, + { + name: 'Elate The Euge', + colors: ['#8BDEDA', '43ADD0', '998EE0', 'E17DC2', 'EF9393'], + }, + { + name: 'Peach Sea', + colors: ['#E6AE8C', '#A8CECF'], + }, + { + name: 'Abbas', + colors: ['#00fff0', '#0083fe'], + }, + { + name: 'Winter Woods', + colors: ['#333333', '#a2ab58', '#A43931'], + }, + { + name: 'Ameena', + colors: ['#0c0c6d', '#de512b', '#98d0c1', '#5bb226', '#023c0d'], + }, + { + name: 'Emerald Sea', + colors: ['#05386b', '#5cdb95'], + }, + { + name: 'Bleem', + colors: ['#4284DB', '#29EAC4'], + }, + { + name: 'Coffee Gold', + colors: ['#554023', '#c99846'], + }, + { + name: 'Compass', + colors: ['#516b8b', '#056b3b'], + }, + { + name: "Andreuzza's", + colors: ['#D70652', '#FF025E'], + }, + { + name: 'Moonwalker', + colors: ['#152331', '#000000'], + }, + { + name: 'Whinehouse', + colors: ['#f7f7f7', '#b9a0a0', '#794747', '#4e2020', '#111111'], + }, + { + name: 'Hyper Blue', + colors: ['#59CDE9', '#0A2A88'], + }, + { + name: 'Racker', + colors: ['#EB0000', '#95008A', '#3300FC'], + }, + { + name: 'After the Rain', + colors: ['#ff75c3', '#ffa647', '#ffe83f', '#9fff5b', '#70e2ff', '#cd93ff'], + }, + { + name: 'Neon Green', + colors: ['#81ff8a', '#64965e'], + }, + { + name: 'Dusty Grass', + colors: ['#d4fc79', '#96e6a1'], + }, + { + name: 'Visual Blue', + colors: ['#003d4d', '#00c996'], + }, +] diff --git a/packages/web/components/patterns/LibraryCards/LibraryHoverActions.tsx b/packages/web/components/patterns/LibraryCards/LibraryHoverActions.tsx index d17c39bca..16cf0d602 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryHoverActions.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryHoverActions.tsx @@ -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 ( { 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);', @@ -53,15 +60,23 @@ export const LibraryHoverActions = (props: LibraryHoverActionsProps) => { }} > - diff --git a/packages/web/components/templates/article/ArticleActionsMenu.tsx b/packages/web/components/templates/article/ArticleActionsMenu.tsx index 71fd01d78..108c4741e 100644 --- a/packages/web/components/templates/article/ArticleActionsMenu.tsx +++ b/packages/web/components/templates/article/ArticleActionsMenu.tsx @@ -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' @@ -61,25 +67,22 @@ export function ArticleActionsMenu( {props.article ? ( <> ) : ( )} {!props.article?.isArchived ? ( ) : ( )} - - {/* - */} ) diff --git a/packages/web/components/templates/article/Notebook.tsx b/packages/web/components/templates/article/Notebook.tsx index 2506bef24..671b342ee 100644 --- a/packages/web/components/templates/article/Notebook.tsx +++ b/packages/web/components/templates/article/Notebook.tsx @@ -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('') const [showConfirmDeleteHighlightId, setShowConfirmDeleteHighlightId] = useState(undefined) - const [labelsTarget, setLabelsTarget] = - useState(undefined) + const [labelsTarget, setLabelsTarget] = useState( + undefined + ) const noteState = useRef({ isCreating: false, note: undefined, @@ -347,7 +348,7 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element { icon={ } /> diff --git a/packages/web/components/templates/article/VerticalArticleActions.tsx b/packages/web/components/templates/article/VerticalArticleActions.tsx index 7025b9b83..3439be176 100644 --- a/packages/web/components/templates/article/VerticalArticleActions.tsx +++ b/packages/web/components/templates/article/VerticalArticleActions.tsx @@ -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' @@ -38,6 +37,7 @@ export function VerticalArticleActionsMenu( }} > {!props.article?.isArchived ? ( ) : ( )} diff --git a/packages/web/components/templates/homeFeed/LibraryHeader.tsx b/packages/web/components/templates/homeFeed/LibraryHeader.tsx index 8bfd84d34..a77d468cf 100644 --- a/packages/web/components/templates/homeFeed/LibraryHeader.tsx +++ b/packages/web/components/templates/homeFeed/LibraryHeader.tsx @@ -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() }} > - Archive @@ -406,11 +405,7 @@ function MultiSelectControlButtonBox( e.preventDefault() }} > - + Add Labels -