prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Match latest UX a bit more closely for just read

Browse source
This commit is contained in:
Jackson Harper 2024-06-05 19:11:21 +08:00
parent 05cfd4b272
commit 9961ada6c7
11 changed files with 1406 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
packages/web/components/elements/Button.tsx
View file

@ -428,6 +428,16 @@ export const Button = styled('button', {
opacity: 0.8,
},
},
homeAction: {
display: 'flex',
color: 'transparent',
border: 'none',
bg: 'transparent',
cursor: 'pointer',
p: '5px',
borderRadius: '5px',
'&:hover': { bg: '$readerHoverBg', opacity: '1' },
},
themeSwitch: {
p: '0px',
m: '0px',

51
packages/web/components/elements/Pagination.tsx
View file

@ -1,45 +1,60 @@
import React, { useState } from 'react'
import React, { useCallback, useMemo, useState } from 'react'
import { Button } from './Button'
import { HStack, VStack } from './LayoutPrimitives'
type PaginationProps<T> = {
items: T[]
itemsPerPage: number
loadMoreButtonText?: string
render: (item: T) => React.ReactNode
}
const Pagination = <T,>({
items,
itemsPerPage,
loadMoreButtonText,
render,
}: PaginationProps<T>) => {
const [currentPage, setCurrentPage] = useState(1)
const maxPage = Math.ceil(items.length / itemsPerPage)
function createChangePageHandler(page: number) {
return function handlePageChange() {
setCurrentPage(page)
}
}
const incrementCurrentPage = useCallback(() => {
setCurrentPage(currentPage + 1)
}, [currentPage, setCurrentPage])
const itemsToShow = items.slice(
(currentPage - 1) * itemsPerPage,
currentPage * itemsPerPage
)
const itemsToShow = useMemo(() => {
const count = currentPage * itemsPerPage
return items.slice(0, count)
}, [items, currentPage, itemsPerPage])
return (
<VStack>
<VStack css={{ width: '100%' }}>
{itemsToShow.map(render)}
<HStack>
{Array.from({ length: maxPage }, (_, i) => i + 1).map((pageNum) => (
<HStack
alignment="center"
distribution="center"
css={{ p: '30px', width: '100%' }}
>
{currentPage < maxPage && (
<Button
key={pageNum}
onClick={createChangePageHandler(pageNum)}
disabled={pageNum === currentPage}
onClick={(event) => {
incrementCurrentPage()
event.preventDefault()
}}
style="homeAction"
css={{
fontFamily: '$inter',
fontSize: '15px',
fontWeight: '500',
color: '$thTextSubtle4',
bg: '#3D3D3D',
py: '10px',
px: '25px',
}}
>
{pageNum}
{loadMoreButtonText ?? 'Load More'}
</Button>
))}
)}
</HStack>
</VStack>
)

9
packages/web/components/elements/icons/home/AddToLibraryActionIcon.tsx
View file

@ -11,16 +11,15 @@ export class AddToLibraryActionIcon extends React.Component<IconProps> {
return (
<svg
width="50"
height="32"
viewBox="0 0 50 32"
width="19"
height="19"
viewBox="0 0 19 19"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="50" height="32" rx="4" fill={backgroundColor} />
<g>
<path
d="M30 11.8333V23.5L25 20.1667L20 23.5V11.8333C20 10.9493 20.3512 10.1014 20.9763 9.47631C21.6014 8.85119 22.4493 8.5 23.3333 8.5H26.6667C27.5507 8.5 28.3986 8.85119 29.0237 9.47631C29.6488 10.1014 30 10.9493 30 11.8333Z"
d="M14.25 5.54167V16.625L9.5 13.4583L4.75 16.625V5.54167C4.75 4.70181 5.08363 3.89636 5.6775 3.3025C6.27136 2.70863 7.07681 2.375 7.91667 2.375H11.0833C11.9232 2.375 12.7286 2.70863 13.3225 3.3025C13.9164 3.89636 14.25 4.70181 14.25 5.54167Z"
stroke={strokeColor}
strokeWidth="1.25"
strokeLinecap="round"

14
packages/web/components/elements/icons/home/ArchiveActionIcon.tsx
View file

@ -7,34 +7,32 @@ import React from 'react'
export class ArchiveActionIcon extends React.Component<IconProps> {
render() {
const strokeColor = (this.props.color || '#D9D9D9').toString()
const backgroundColor = (this.props.color || '#3D3D3D').toString()
return (
<svg
width="50"
height="32"
viewBox="0 0 50 32"
width="19"
height="19"
viewBox="0 0 19 19"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="50" height="32" rx="4" fill={backgroundColor} />
<g>
<path
d="M17.5 11.0002C17.5 10.5581 17.6756 10.1342 17.9882 9.82165C18.3007 9.50909 18.7246 9.3335 19.1667 9.3335H30.8333C31.2754 9.3335 31.6993 9.50909 32.0118 9.82165C32.3244 10.1342 32.5 10.5581 32.5 11.0002C32.5 11.4422 32.3244 11.8661 32.0118 12.1787C31.6993 12.4912 31.2754 12.6668 30.8333 12.6668H19.1667C18.7246 12.6668 18.3007 12.4912 17.9882 12.1787C17.6756 11.8661 17.5 11.4422 17.5 11.0002Z"
d="M2.375 4.74984C2.375 4.32991 2.54181 3.92718 2.83875 3.63025C3.13568 3.33332 3.53841 3.1665 3.95833 3.1665H15.0417C15.4616 3.1665 15.8643 3.33332 16.1613 3.63025C16.4582 3.92718 16.625 4.32991 16.625 4.74984C16.625 5.16976 16.4582 5.57249 16.1613 5.86942C15.8643 6.16636 15.4616 6.33317 15.0417 6.33317H3.95833C3.53841 6.33317 3.13568 6.16636 2.83875 5.86942C2.54181 5.57249 2.375 5.16976 2.375 4.74984Z"
stroke={strokeColor}
strokeWidth="1.25"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M19.1666 12.6665V20.9998C19.1666 21.4419 19.3422 21.8658 19.6548 22.1783C19.9673 22.4909 20.3913 22.6665 20.8333 22.6665H29.1666C29.6087 22.6665 30.0326 22.4909 30.3451 22.1783C30.6577 21.8658 30.8333 21.4419 30.8333 20.9998V12.6665"
d="M3.95801 6.3335V14.2502C3.95801 14.6701 4.12482 15.0728 4.42176 15.3697C4.71869 15.6667 5.12141 15.8335 5.54134 15.8335H13.458C13.8779 15.8335 14.2807 15.6667 14.5776 15.3697C14.8745 15.0728 15.0413 14.6701 15.0413 14.2502V6.3335"
stroke={strokeColor}
strokeWidth="1.25"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M23.3334 16H26.6667"
d="M7.91699 9.5H11.0837"
stroke={strokeColor}
strokeWidth="1.25"
strokeLinecap="round"

9
packages/web/components/elements/icons/home/CommentActionIcon.tsx
View file

@ -11,16 +11,15 @@ export class CommentActionIcon extends React.Component<IconProps> {
return (
<svg
width="50"
height="32"
viewBox="0 0 50 32"
width="20"
height="21"
viewBox="0 0 20 21"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="50" height="32" rx="4" fill={backgroundColor} />
<g>
<path
d="M17.5 22.6668L18.5833 19.4168C17.647 18.032 17.3083 16.3922 17.6302 14.8021C17.952 13.212 18.9126 11.7799 20.3331 10.772C21.7537 9.76421 23.5377 9.24923 25.3534 9.32285C27.1691 9.39647 28.8929 10.0537 30.2044 11.1723C31.5159 12.2909 32.3257 13.7948 32.4834 15.4043C32.6411 17.0138 32.1358 18.6195 31.0616 19.9228C29.9873 21.226 28.4172 22.1382 26.6432 22.4896C24.8691 22.8411 23.0118 22.6079 21.4167 21.8335L17.5 22.6668Z"
d="M2.5 17.1668L3.58333 13.9168C2.64704 12.532 2.30833 10.8922 2.63018 9.30207C2.95204 7.71197 3.91255 6.27987 5.33314 5.27204C6.75373 4.26421 8.53772 3.74923 10.3534 3.82285C12.1691 3.89647 13.8929 4.55368 15.2044 5.67228C16.5159 6.79089 17.3257 8.29477 17.4834 9.9043C17.6411 11.5138 17.1358 13.1195 16.0616 14.4228C14.9873 15.726 13.4172 16.6382 11.6432 16.9896C9.86911 17.3411 8.01184 17.1079 6.41667 16.3335L2.5 17.1668Z"
stroke={strokeColor}
strokeWidth="1.25"
strokeLinecap="round"

18
packages/web/components/elements/icons/home/RemoveActionIcon.tsx
View file

@ -7,48 +7,46 @@ import React from 'react'
export class RemoveActionIcon extends React.Component<IconProps> {
render() {
const strokeColor = (this.props.color || '#D9D9D9').toString()
const backgroundColor = (this.props.color || '#3D3D3D').toString()
return (
<svg
width="50"
height="32"
viewBox="0 0 50 32"
width="19"
height="19"
viewBox="0 0 19 19"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="50" height="32" rx="4" fill={backgroundColor} />
<g>
<path
d="M18.3334 11.8335H31.6667"
d="M3.16699 5.5415H15.8337"
stroke={strokeColor}
strokeWidth="1.25"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M23.3334 15.1665V20.1665"
d="M7.91699 8.7085V13.4585"
stroke={strokeColor}
strokeWidth="1.25"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M26.6666 15.1665V20.1665"
d="M11.083 8.7085V13.4585"
stroke={strokeColor}
strokeWidth="1.25"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M19.1666 11.8335L20 21.8335C20 22.2755 20.1756 22.6994 20.4881 23.012C20.8007 23.3246 21.2246 23.5002 21.6666 23.5002H28.3333C28.7753 23.5002 29.1992 23.3246 29.5118 23.012C29.8244 22.6994 30 22.2755 30 21.8335L30.8333 11.8335"
d="M3.95801 5.5415L4.74967 15.0415C4.74967 15.4614 4.91649 15.8642 5.21342 16.1611C5.51035 16.458 5.91308 16.6248 6.33301 16.6248H12.6663C13.0863 16.6248 13.489 16.458 13.7859 16.1611C14.0829 15.8642 14.2497 15.4614 14.2497 15.0415L15.0413 5.5415"
stroke={strokeColor}
strokeWidth="1.25"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M22.5 11.8333V9.33333C22.5 9.11232 22.5878 8.90036 22.7441 8.74408C22.9004 8.5878 23.1123 8.5 23.3333 8.5H26.6667C26.8877 8.5 27.0996 8.5878 27.2559 8.74408C27.4122 8.90036 27.5 9.11232 27.5 9.33333V11.8333"
d="M7.125 5.54167V3.16667C7.125 2.9567 7.20841 2.75534 7.35687 2.60687C7.50534 2.45841 7.7067 2.375 7.91667 2.375H11.0833C11.2933 2.375 11.4947 2.45841 11.6431 2.60687C11.7916 2.75534 11.875 2.9567 11.875 3.16667V5.54167"
stroke={strokeColor}
strokeWidth="1.25"
strokeLinecap="round"

10
packages/web/components/elements/icons/home/ShareActionIcon.tsx
View file

@ -7,20 +7,18 @@ import React from 'react'
export class ShareActionIcon extends React.Component<IconProps> {
render() {
const strokeColor = (this.props.color || '#D9D9D9').toString()
const backgroundColor = (this.props.color || '#3D3D3D').toString()
return (
<svg
width="49"
height="32"
viewBox="0 0 49 32"
width="19"
height="19"
viewBox="0 0 19 19"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect y="0.5" width="49" height="31" rx="4" fill={backgroundColor} />
<g>
<path
d="M25.2917 9.6665V12.8332C20.0865 13.647 18.1509 18.207 17.375 22.3332C17.3457 22.4963 21.6374 17.6133 25.2917 17.5832V20.7498L31.625 15.2082L25.2917 9.6665Z"
d="M10.2918 3.1665V6.33317C5.08661 7.147 3.15098 11.707 2.37515 15.8332C2.34586 15.9963 6.63748 11.1133 10.2918 11.0832V14.2498L16.6251 8.70817L10.2918 3.1665Z"
stroke={strokeColor}
strokeWidth="1.25"
strokeLinecap="round"

21
packages/web/components/templates/navMenu/LibraryMenu.tsx
View file

@ -2,7 +2,7 @@ import { ReactNode, useEffect, useMemo, useRef, useState } from 'react'
import { StyledText } from '../../elements/StyledText'
import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
import { Button } from '../../elements/Button'
import { Circle, DotsThree, MagnifyingGlass, X } from 'phosphor-react'
import { Circle, DotsThree, List, MagnifyingGlass, X } from 'phosphor-react'
import {
Subscription,
SubscriptionType,
@ -122,9 +122,9 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
<Box
css={{
width: '100%',
px: '25px',
px: '15px',
pb: '17px',
pt: '4.5px',
pt: '15px',
lineHeight: '1',
'@mdDown': {
pb: '0px',
@ -133,8 +133,19 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
},
}}
>
<SpanBox css={{ '@mdDown': { display: 'none' } }}>
<LogoBox />
<SpanBox css={{ mr: 'auto', '@mdDown': { display: 'none' } }}>
<Button
style="plainIcon"
onClick={(event) => {
props.setShowFilterMenu(false)
event.preventDefault()
}}
>
<List
size="25"
color={theme.colors.readerTextSubtle.toString()}
/>
</Button>
</SpanBox>
<Button

1074
packages/web/components/templates/navMenu/NavigationMenu.tsx Normal file
View file

File diff suppressed because it is too large Load diff

3
packages/web/components/tokens/stitches.config.ts
View file

@ -157,6 +157,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
readerTableHeader: '#FFFFFF',
readerMargin: 'white',
readerTextSubtle: '#898989',
readerHoverBg: '#1E1E1E',
// Avatar Fallback color
avatarBg: '#FFEA9F',
@ -296,6 +297,8 @@ const darkThemeSpec = {
readerFontHighContrast: 'white',
readerTableHeader: '#FFFFFF',
readerMargin: '#2A2A2A',
readerHoverBg: '#1E1E1E',
readerTextSubtle: '#EDEDED',
avatarBg: '#7B5C3E',
avatarFont: '#D9D9D9',

268
packages/web/pages/justread/index.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, useMemo, useState } from 'react'
import { Button } from '../../components/elements/Button'
import { AddToLibraryActionIcon } from '../../components/elements/icons/home/AddToLibraryActionIcon'
import { ArchiveActionIcon } from '../../components/elements/icons/home/ArchiveActionIcon'
@ -25,14 +25,20 @@ import {
useGetSubscriptionsQuery,
} from '../../lib/networking/queries/useGetSubscriptionsQuery'
import {
Box,
HStack,
SpanBox,
VStack,
} from './../../components/elements/LayoutPrimitives'
import { Hamburger, List, ThumbsDown, ThumbsUp } from 'phosphor-react'
import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers'
import { Toaster } from 'react-hot-toast'
import { DEFAULT_HEADER_HEIGHT } from '../../components/templates/homeFeed/HeaderSpacer'
import { NavigationMenu } from '../../components/templates/navMenu/NavigationMenu'
export default function Home(): JSX.Element {
const [showLeftMenu, setShowLeftMenu] = useState(false)
const homeData = useGetHomeItems()
console.log('home sections: ', homeData.sections)
useApplyLocalTheme()
return (
@ -41,11 +47,29 @@ export default function Home(): JSX.Element {
alignment="center"
css={{
width: '100%',
bg: '$readerBg',
// bg: '$readerBg',
bg: '#2A2A2A',
pt: '45px',
minHeight: '100vh',
}}
>
<Toaster />
<Header
toggleMenu={() => {
setShowLeftMenu(!showLeftMenu)
}}
/>
{showLeftMenu && (
<NavigationMenu
setShowAddLinkModal={() => {}}
searchTerm={''}
applySearchQuery={(searchQuery: string) => {}}
showFilterMenu={showLeftMenu}
setShowFilterMenu={(show) => {
setShowLeftMenu(show)
}}
/>
)}
<VStack
distribution="start"
css={{
@ -58,6 +82,9 @@ export default function Home(): JSX.Element {
}}
>
{homeData.sections?.map((homeSection, idx) => {
if (homeSection.items.length < 1) {
return <></>
}
switch (homeSection.layout) {
case 'just_added':
return (
@ -150,6 +177,7 @@ const TopPicksHomeSection = (props: HomeSectionProps): JSX.Element => {
<Pagination
items={props.homeSection.items}
itemsPerPage={4}
loadMoreButtonText="Load more Top Picks"
render={(homeItem) => (
<TopicPickHomeItemView key={homeItem.id} homeItem={homeItem} />
)}
@ -165,14 +193,23 @@ const QuickLinksHomeSection = (props: HomeSectionProps): JSX.Element => {
css={{
width: '100%',
gap: '20px',
bg: '#3D3D3D',
py: '30px',
px: '20px',
borderRadius: '5px',
}}
>
<SpanBox
css={{
fontFamily: '$inter',
fontSize: '16px',
fontSize: '12px',
fontWeight: '600',
color: '$readerText',
textTransform: 'uppercase',
color: '$ctaBlue',
bg: '#007AFF10',
px: '10px',
py: '5px',
borderRadius: '5px',
}}
>
{props.homeSection.title}
@ -279,9 +316,9 @@ const TimeAgo = (props: HomeItemViewProps): JSX.Element => {
alignment="center"
css={{
fontSize: '12px',
fontWeight: 'normal',
fontWeight: 'medium',
fontFamily: '$inter',
color: '$readerContrast',
color: '$readerTextSubtle',
}}
>
{timeAgo(props.homeItem.date)}
@ -299,7 +336,13 @@ const Title = (props: HomeItemViewProps): JSX.Element => {
lineHeight: '20px',
fontWeight: '600',
fontFamily: '$inter',
color: '$readerText',
color: 'white',
overflow: 'hidden',
textOverflow: 'ellipsis',
wordBreak: 'break-word',
display: '-webkit-box',
'-webkit-line-clamp': '3',
'-webkit-box-orient': 'vertical',
}}
>
{props.homeItem.title}
@ -307,6 +350,31 @@ const Title = (props: HomeItemViewProps): JSX.Element => {
)
}
type PreviewContentProps = {
previewContent?: string
maxLines?: string
}
const PreviewContent = (props: PreviewContentProps): JSX.Element => {
return (
<SpanBox
css={{
fontFamily: '$inter',
fontSize: '14px',
lineHeight: '28px',
overflow: 'hidden',
textOverflow: 'ellipsis',
wordBreak: 'break-word',
display: '-webkit-box',
'-webkit-line-clamp': props.maxLines ?? '3',
'-webkit-box-orient': 'vertical',
}}
>
{props.previewContent ?? ''}
</SpanBox>
)
}
const JustAddedItemView = (props: HomeItemViewProps): JSX.Element => {
const router = useRouter()
@ -349,10 +417,12 @@ const TopicPickHomeItemView = (props: HomeItemViewProps): JSX.Element => {
<VStack
css={{
width: '100%',
padding: '20px',
p: '0px',
pt: '35px',
borderRadius: '5px',
'&:hover': {
bg: '$thBackground',
bg: '#3D3D3D',
borderRadius: '0px',
},
}}
@ -363,8 +433,9 @@ const TopicPickHomeItemView = (props: HomeItemViewProps): JSX.Element => {
router.push(props.homeItem.url)
}
}}
alignment="start"
>
<HStack css={{ width: '100%', gap: '5px' }}>
<HStack css={{ width: '100%', gap: '5px', px: '20px' }}>
<VStack css={{ gap: '15px' }}>
<HStack
distribution="start"
@ -390,28 +461,30 @@ const TopicPickHomeItemView = (props: HomeItemViewProps): JSX.Element => {
)}
</SpanBox>
</HStack>
<SpanBox
css={{ fontFamily: '$inter', fontSize: '13px', lineHeight: '23px' }}
>
{props.homeItem.previewContent}
<SpanBox css={{ px: '20px' }}>
<PreviewContent
previewContent={props.homeItem.previewContent}
maxLines="6"
/>
</SpanBox>
<HStack css={{ gap: '6px', mt: '20px' }}>
<Button style="ghost">
<HStack css={{ gap: '10px', my: '15px', px: '20px' }}>
<Button style="homeAction">
<AddToLibraryActionIcon />
</Button>
<Button style="ghost">
<Button style="homeAction">
<CommentActionIcon />
</Button>
<Button style="ghost">
<Button style="homeAction">
<ShareActionIcon />
</Button>
<Button style="ghost">
<Button style="homeAction">
<ArchiveActionIcon />
</Button>
<Button style="ghost">
<Button style="homeAction">
<RemoveActionIcon />
</Button>
</HStack>
<Box css={{ mt: '15px', width: '100%', height: '1px', bg: '#3D3D3D' }} />
</VStack>
)
}
@ -423,11 +496,13 @@ const QuickLinkHomeItemView = (props: HomeItemViewProps): JSX.Element => {
<VStack
css={{
width: '100%',
padding: '10px',
px: '10px',
py: '10px',
gap: '2px',
borderRadius: '5px',
'&:hover': {
bg: '$thBackground',
borderRadius: '0px',
bg: '$readerBg',
cursor: 'pointer',
},
}}
onClick={(event) => {
@ -440,6 +515,10 @@ const QuickLinkHomeItemView = (props: HomeItemViewProps): JSX.Element => {
>
<TimeAgo homeItem={props.homeItem} />
<Title homeItem={props.homeItem} />
<PreviewContent
previewContent={props.homeItem.previewContent}
maxLines="2"
/>
</VStack>
)
}
@ -573,3 +652,144 @@ const SubscriptionSourceHoverContent = (
</VStack>
)
}
// const SiteSourceHoverContent = (
// props: SourceHoverContentProps
// ): JSX.Element => {
// const sendHomeFeedback = useCallback(
// async (feedbackType: SendHomeFeedbackType) => {
// const feedback: SendHomeFeedbackInput = {
// feedbackType,
// }
// feedback.site = props.source.name
// const result = await sendHomeFeedbackMutation(feedback)
// if (result) {
// showSuccessToast('Feedback sent')
// } else {
// showErrorToast('Error sending feedback')
// }
// },
// [props]
// )
// return (
// <VStack
// alignment="start"
// distribution="start"
// css={{
// width: '240px',
// height: '100px',
// bg: '$thBackground2',
// borderRadius: '10px',
// padding: '15px',
// gap: '10px',
// boxShadow: theme.shadows.cardBoxShadow.toString(),
// }}
// >
// <HStack
// distribution="start"
// alignment="center"
// css={{ width: '100%', gap: '10px' }}
// >
// {props.source.icon && (
// <SiteIcon
// src={props.source.icon}
// alt={props.source.name}
// size="large"
// />
// )}
// <SpanBox
// css={{
// fontFamily: '$inter',
// fontWeight: '500',
// fontSize: '14px',
// }}
// >
// {props.source.name}
// </SpanBox>
// </HStack>
// {/* <SpanBox
// css={{
// fontFamily: '$inter',
// fontSize: '13px',
// color: '$thTextSubtle4',
// }}
// >
// {subscription ? <>{subscription.description}</> : <></>}
// </SpanBox> */}
// <FeedbackView sendFeedback={sendHomeFeedback} />
// </VStack>
// )
// }
type FeedbackViewProps = {
sendFeedback: (type: SendHomeFeedbackType) => void
}
const FeedbackView = (props: FeedbackViewProps): JSX.Element => {
return (
<HStack css={{ ml: 'auto', mt: 'auto', gap: '5px' }}>
<Button
style="plainIcon"
onClick={(event) => {
props.sendFeedback('MORE')
event.preventDefault()
event.stopPropagation()
}}
>
<ThumbsUp weight="fill" />
</Button>
<Button
style="plainIcon"
onClick={(event) => {
props.sendFeedback('LESS')
event.preventDefault()
event.stopPropagation()
}}
>
<ThumbsDown weight="fill" />
</Button>
</HStack>
)
}
type HeaderProps = {
toggleMenu: () => void
}
const Header = (props: HeaderProps): JSX.Element => {
const small = false
return (
<VStack
alignment="start"
distribution="start"
css={{
zIndex: 5,
position: 'fixed',
left: '15px',
top: '15px',
height: small ? '60px' : DEFAULT_HEADER_HEIGHT,
transition: 'height 0.5s',
'@lgDown': { px: '20px' },
'@mdDown': {
px: '10px',
left: '0px',
right: '0',
},
}}
>
<VStack alignment="center" distribution="center">
<Button
style="plainIcon"
onClick={(event) => {
props.toggleMenu()
event.preventDefault()
}}
>
<List size="25" color={theme.colors.readerTextSubtle.toString()} />
</Button>
</VStack>
</VStack>
)
}