diff --git a/web/package.json b/web/package.json index c3b3c1842..31ac8da82 100644 --- a/web/package.json +++ b/web/package.json @@ -92,13 +92,12 @@ "dependencies": { "@bigmi/react": "^0.1.0", "@coinbase/wallet-sdk": "^4.3.2", - "@cyntler/react-doc-viewer": "^1.17.0", "@graphql-tools/batch-execute": "^9.0.11", "@graphql-tools/utils": "^10.7.2", "@kleros/kleros-app": "workspace:^", "@kleros/kleros-sdk": "workspace:^", "@kleros/kleros-v2-contracts": "workspace:^", - "@kleros/ui-components-library": "^2.20.0", + "@kleros/ui-components-library": "^3.8.0", "@lifi/wallet-management": "^3.7.1", "@lifi/widget": "^3.18.1", "@mdxeditor/editor": "^3.45.0", diff --git a/web/src/app.tsx b/web/src/app.tsx index 96ca23f85..2e4ab312f 100644 --- a/web/src/app.tsx +++ b/web/src/app.tsx @@ -7,6 +7,9 @@ import { Route } from "react-router-dom"; import "react-loading-skeleton/dist/skeleton.css"; import "react-toastify/dist/ReactToastify.css"; import "ethereum-identity-kit/css"; +import "@kleros/ui-components-library/style.css"; +import "@kleros/ui-components-library/theme.css"; +import "./styles/base-elements.css"; import "./i18n"; import AtlasProvider from "context/AtlasProvider"; diff --git a/web/src/components/CaseStarButton.tsx b/web/src/components/CaseStarButton.tsx index 8befb29e3..25483b491 100644 --- a/web/src/components/CaseStarButton.tsx +++ b/web/src/components/CaseStarButton.tsx @@ -49,8 +49,7 @@ const CaseStarButton: React.FC<{ id: string }> = ({ id }) => { starred={starred} aria-label={text} aria-checked={starred} - onClick={(e) => { - e.stopPropagation(); + onPress={() => { starCase(id); }} /> diff --git a/web/src/components/CasesDisplay/Filters.tsx b/web/src/components/CasesDisplay/Filters.tsx index 3c00f00d9..b20a895e0 100644 --- a/web/src/components/CasesDisplay/Filters.tsx +++ b/web/src/components/CasesDisplay/Filters.tsx @@ -11,6 +11,7 @@ import ListIcon from "svgs/icons/list.svg"; import { useIsList } from "context/IsListProvider"; import useIsDesktop from "hooks/useIsDesktop"; +import type { SelectItem } from "utils/uiComponentsTypes"; import { decodeURIFilter, encodeURIFilter, useRootPath } from "utils/uri"; import { hoverShortTransitionTiming } from "styles/commonStyles"; @@ -59,15 +60,15 @@ const Filters: React.FC = () => { const location = useRootPath(); const [searchParams] = useSearchParams(); - const handleStatusChange = (value: string | number) => { - const parsedValue = JSON.parse(value as string); + const handleStatusChange = (item: SelectItem) => { + const parsedValue = JSON.parse(item.itemValue as string); const encodedFilter = encodeURIFilter({ ...filterObject, ...parsedValue }); navigate(`${location}/1/${order}/${encodedFilter}?${searchParams.toString()}`); }; - const handleOrderChange = (value: string | number) => { + const handleOrderChange = (item: SelectItem) => { const encodedFilter = encodeURIFilter({ ruled, period, ...filterObject }); - navigate(`${location}/1/${value}/${encodedFilter}?${searchParams.toString()}`); + navigate(`${location}/1/${item.itemValue}/${encodedFilter}?${searchParams.toString()}`); }; const { isList, setIsList } = useIsList(); @@ -79,22 +80,42 @@ const Filters: React.FC = () => { smallButton simpleButton items={[ - { value: JSON.stringify({}), text: t("filters.all_cases"), dot: theme.primaryText }, - { value: JSON.stringify({ ruled: false }), text: t("filters.in_progress"), dot: theme.primaryBlue }, - { value: JSON.stringify({ period: "appeal" }), text: t("filters.appeal"), dot: theme.tint }, - { value: JSON.stringify({ ruled: true }), text: t("filters.closed"), dot: theme.primaryPurple }, + { + id: JSON.stringify({}), + itemValue: JSON.stringify({}), + text: t("filters.all_cases"), + dot: theme.primaryText, + }, + { + id: JSON.stringify({ ruled: false }), + itemValue: JSON.stringify({ ruled: false }), + text: t("filters.in_progress"), + dot: theme.primaryBlue, + }, + { + id: JSON.stringify({ period: "appeal" }), + itemValue: JSON.stringify({ period: "appeal" }), + text: t("filters.appeal"), + dot: theme.tint, + }, + { + id: JSON.stringify({ ruled: true }), + itemValue: JSON.stringify({ ruled: true }), + text: t("filters.closed"), + dot: theme.primaryPurple, + }, ]} - defaultValue={JSON.stringify({ ruled, period })} + defaultSelectedKey={JSON.stringify({ ruled, period })} callback={handleStatusChange} /> {isDesktop ? ( diff --git a/web/src/components/CasesDisplay/Search.tsx b/web/src/components/CasesDisplay/Search.tsx index ce6f681d7..cc7a2a274 100644 --- a/web/src/components/CasesDisplay/Search.tsx +++ b/web/src/components/CasesDisplay/Search.tsx @@ -9,6 +9,7 @@ import { useDebounce } from "react-use"; import { Searchbar, DropdownCascader } from "@kleros/ui-components-library"; import { isEmpty, isUndefined } from "utils/index"; +import type { CascaderItem } from "utils/uiComponentsTypes"; import { decodeURIFilter, encodeURIFilter, useRootPath } from "utils/uri"; import { rootCourtToItems, useCourtTree } from "queries/useCourtTree"; @@ -76,10 +77,10 @@ const Search: React.FC = () => { ); const { data: courtTreeData } = useCourtTree(); - const items = useMemo(() => { + const items = useMemo(() => { if (!isUndefined(courtTreeData?.court)) { const courts = [rootCourtToItems(courtTreeData.court, "id")]; - courts.push({ label: t("filters.all_courts"), value: "all" }); + courts.push({ label: t("filters.all_courts"), itemValue: "all", id: "all" }); return courts; } return undefined; @@ -91,9 +92,10 @@ const Search: React.FC = () => { { + callback={(item) => { const { court: _, ...filterWithoutCourt } = decodedFilter; - const newFilter = value === "all" ? filterWithoutCourt : { ...decodedFilter, court: value.toString() }; + const newFilter = + item.itemValue === "all" ? filterWithoutCourt : { ...decodedFilter, court: item.itemValue.toString() }; navigate(`${location}/${page}/${order}/${encodeURIFilter(newFilter)}?${searchParams.toString()}`); }} /> @@ -106,7 +108,7 @@ const Search: React.FC = () => { type="text" placeholder={t("forms.placeholders.search_by_id")} value={search} - onChange={(e) => setSearch(e.target.value)} + onChange={(value) => setSearch(value)} /> diff --git a/web/src/components/ClaimPnkButton.tsx b/web/src/components/ClaimPnkButton.tsx index aedc6949d..6bf946e3a 100644 --- a/web/src/components/ClaimPnkButton.tsx +++ b/web/src/components/ClaimPnkButton.tsx @@ -71,9 +71,9 @@ const ClaimPnkButton: React.FC = () => {