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

Use check images instead of input

Browse source
This commit is contained in:
Jackson Harper 2023-11-08 14:45:24 +08:00
parent 5d49a3a212
commit fa31aae19e
1 changed files with 11 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
packages/web/pages/settings/pinned-searches.tsx
View file

@ -18,7 +18,7 @@ import { applyStoredTheme } from '../../lib/themeUpdater'
import { useGetLabelsQuery } from '../../lib/networking/queries/useGetLabelsQuery'
import { useGetSavedSearchQuery } from '../../lib/networking/queries/useGetSavedSearchQuery'
import { Label } from '../../lib/networking/fragments/labelFragment'
import { Circle } from 'phosphor-react'
import { CheckSquare, Circle, Square } from 'phosphor-react'
import { SavedSearch } from '../../lib/networking/fragments/savedSearchFragment'
import { usePersistedState } from '../../lib/hooks/usePersistedState'
@ -248,7 +248,7 @@ function LabelButton(props: LabelButtonProps): JSX.Element {
const labelId = `checkbox-label-${props.label.id}`
return (
<CheckboxButton
key={labelId}
itemKey={labelId}
title={props.label.name}
isSelected={props.isSelected}
item={{
@ -259,12 +259,6 @@ function LabelButton(props: LabelButtonProps): JSX.Element {
}}
listAction={props.listAction}
>
<input
type="checkbox"
checked={props.isSelected}
// eslint-disable-next-line @typescript-eslint/no-empty-function
onChange={(event) => {}}
/>
<SpanBox css={{}}>{props.label.name}</SpanBox>
<Circle size={9} color={props.label.color} weight="fill" />
</CheckboxButton>
@ -281,10 +275,11 @@ type SearchButtonProps = {
}
function SearchButton(props: SearchButtonProps): JSX.Element {
console.log(' ', props.search.name, props.isSelected)
const searchId = `checkbox-search-${props.search.id}`
return (
<CheckboxButton
key={searchId}
itemKey={searchId}
title={props.search.filter}
isSelected={props.isSelected}
item={{
@ -295,19 +290,13 @@ function SearchButton(props: SearchButtonProps): JSX.Element {
}}
listAction={props.listAction}
>
<input
type="checkbox"
checked={props.isSelected}
// eslint-disable-next-line @typescript-eslint/no-empty-function
onChange={(e) => {}}
/>
<SpanBox css={{}}>{props.search.name}</SpanBox>
</CheckboxButton>
)
}
type CheckboxButtonProps = {
key: string
itemKey: string
title: string
isSelected: boolean
item: PinnedSearch
@ -338,7 +327,7 @@ function CheckboxButton(props: CheckboxButtonProps): JSX.Element {
)
return (
<HStack
key={props.key}
key={props.itemKey}
title={props.title}
css={{
px: '10px',
@ -369,6 +358,11 @@ function CheckboxButton(props: CheckboxButtonProps): JSX.Element {
event.preventDefault()
}}
>
{props.isSelected ? (
<CheckSquare size={20} weight="duotone" />
) : (
<Square size={20} weight="duotone" />
)}
{props.children}
</HStack>
)