diff --git a/apps/cyberstorm-remix/app/Error.module.css b/apps/cyberstorm-remix/app/Error.module.css index d5bd2945a..2d9f0249c 100644 --- a/apps/cyberstorm-remix/app/Error.module.css +++ b/apps/cyberstorm-remix/app/Error.module.css @@ -10,7 +10,7 @@ } .description { - color: var(--color-text--accent); + color: var(--color-text-accent); font-weight: var(--font-weight-semibold); line-height: 1; } diff --git a/apps/cyberstorm-remix/app/c/Community.css b/apps/cyberstorm-remix/app/c/Community.css new file mode 100644 index 000000000..98bf5af21 --- /dev/null +++ b/apps/cyberstorm-remix/app/c/Community.css @@ -0,0 +1,28 @@ +@layer project-layout { + .project-community__metaitem { + display: flex; + gap: var(--gap-xs); + align-items: center; + color: var(--Meta-item-text-color--default, #c6c3ff); + font-weight: var(--font-weight-bold); + font-size: var(--font-size-body-md); + line-height: var(--line-height-lg); + + & > svg { + inline-size: var(--space-16); + } + } + + .project-community__metalink { + display: flex; + gap: var(--gap-xs); + align-items: center; + font-weight: var(--font-weight-bold); + font-size: var(--font-size-body-md); + line-height: var(--line-height-lg); + + & > svg { + inline-size: var(--space-16); + } + } +} diff --git a/apps/cyberstorm-remix/app/c/community.tsx b/apps/cyberstorm-remix/app/c/community.tsx index b642fab01..7c4e8f051 100644 --- a/apps/cyberstorm-remix/app/c/community.tsx +++ b/apps/cyberstorm-remix/app/c/community.tsx @@ -1,14 +1,13 @@ import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node"; import { useLoaderData } from "@remix-run/react"; import { - BreadCrumbs, - Button, - CollapsibleText, - CyberstormLink, - ImageWithFallback, - MetaItem, - Title, + Heading, + Image, + NewBreadCrumbs, + NewIcon, + NewLink, } from "@thunderstore/cyberstorm"; +import "./Community.css"; import styles from "./CommunityCard.module.css"; import { formatInteger } from "@thunderstore/cyberstorm/src/utils/utils"; import { getDapper } from "cyberstorm/dapper/sessionUtils"; @@ -21,6 +20,8 @@ import { } from "@fortawesome/free-solid-svg-icons"; import { faDiscord } from "@fortawesome/free-brands-svg-icons"; import { ApiError } from "@thunderstore/thunderstore-api"; +import { CollapsibleText } from "~/commonComponents/CollapsibleText/CollapsibleText"; +import { PackageOrderOptions } from "~/commonComponents/PackageSearch/PackageOrder"; export const meta: MetaFunction = ({ data }) => { return [ @@ -34,7 +35,8 @@ export async function loader({ request, params }: LoaderFunctionArgs) { try { const dapper = await getDapper(); const searchParams = new URL(request.url).searchParams; - const order = searchParams.get("order"); + const ordering = + searchParams.get("ordering") ?? PackageOrderOptions.Updated; const page = searchParams.get("page"); const search = searchParams.get("search"); const includedCategories = searchParams.get("includedCategories"); @@ -42,12 +44,6 @@ export async function loader({ request, params }: LoaderFunctionArgs) { const section = searchParams.get("section"); const nsfw = searchParams.get("nsfw"); const deprecated = searchParams.get("deprecated"); - const created_recent = searchParams.get("created_recent"); - const updated_recent = searchParams.get("updated_recent"); - const created_after = searchParams.get("created_after"); - const created_before = searchParams.get("created_before"); - const updated_after = searchParams.get("updated_after"); - const updated_before = searchParams.get("updated_before"); return { community: await dapper.getCommunity(params.communityId), filters: await dapper.getCommunityFilters(params.communityId), @@ -56,20 +52,14 @@ export async function loader({ request, params }: LoaderFunctionArgs) { kind: "community", communityId: params.communityId, }, - order ?? "", + ordering ?? "", page === null ? undefined : Number(page), search ?? "", includedCategories?.split(",") ?? undefined, excludedCategories?.split(",") ?? undefined, section ?? "", nsfw === "true" ? true : false, - deprecated === "true" ? true : false, - created_recent ?? "", - updated_recent ?? "", - created_after ?? "", - created_before ?? "", - updated_after ?? "", - updated_before ?? "" + deprecated === "true" ? true : false ), }; } catch (error) { @@ -89,7 +79,8 @@ export async function clientLoader({ request, params }: LoaderFunctionArgs) { try { const dapper = await getDapper(true); const searchParams = new URL(request.url).searchParams; - const order = searchParams.get("order"); + const ordering = + searchParams.get("ordering") ?? PackageOrderOptions.Updated; const page = searchParams.get("page"); const search = searchParams.get("search"); const includedCategories = searchParams.get("includedCategories"); @@ -97,12 +88,6 @@ export async function clientLoader({ request, params }: LoaderFunctionArgs) { const section = searchParams.get("section"); const nsfw = searchParams.get("nsfw"); const deprecated = searchParams.get("deprecated"); - const created_recent = searchParams.get("created_recent"); - const updated_recent = searchParams.get("updated_recent"); - const created_after = searchParams.get("created_after"); - const created_before = searchParams.get("created_before"); - const updated_after = searchParams.get("updated_after"); - const updated_before = searchParams.get("updated_before"); return { community: await dapper.getCommunity(params.communityId), filters: await dapper.getCommunityFilters(params.communityId), @@ -111,20 +96,14 @@ export async function clientLoader({ request, params }: LoaderFunctionArgs) { kind: "community", communityId: params.communityId, }, - order ?? "", + ordering ?? "", page === null ? undefined : Number(page), search ?? "", includedCategories?.split(",") ?? undefined, excludedCategories?.split(",") ?? undefined, section ?? "", nsfw === "true" ? true : false, - deprecated === "true" ? true : false, - created_recent ?? "", - updated_recent ?? "", - created_after ?? "", - created_before ?? "", - updated_after ?? "", - updated_before ?? "" + deprecated === "true" ? true : false ), }; } catch (error) { @@ -154,59 +133,70 @@ export default function Community() { }} /> ) : null} - - Communities - + + + Communities + + {community.name} - - + +
- +
- + <Heading csLevel="1" csSize="2" csVariant="primary" mode="display"> + {community.name} + </Heading> {community.description ? ( <CollapsibleText text={community.description} maxLength={85} /> ) : null} <div className={styles.meta}> {[ - <MetaItem + <div + className="project-community__metaitem" key="meta-packages" - label={`${formatInteger( - community.total_package_count - )} packages`} - icon={<FontAwesomeIcon icon={faBoxOpen} />} - colorScheme="accent" - size="bold_large" - />, - <MetaItem + > + <NewIcon csMode="inline" noWrapper> + <FontAwesomeIcon icon={faBoxOpen} /> + </NewIcon> + {formatInteger(community.total_package_count)} packages + </div>, + <div + className="project-community__metaitem" key="meta-downloads" - label={`${formatInteger( - community.total_download_count - )} downloads`} - icon={<FontAwesomeIcon icon={faDownload} />} - colorScheme="accent" - size="bold_large" - />, + > + <NewIcon csMode="inline" noWrapper> + <FontAwesomeIcon icon={faDownload} /> + </NewIcon> + {formatInteger(community.total_download_count)} downloads + </div>, community.discord_url ? ( - <a key="meta-link" href="{community.discord_url}"> - <Button.Root colorScheme="transparentPrimary"> - <Button.ButtonIcon> - <FontAwesomeIcon icon={faDiscord} /> - </Button.ButtonIcon> - <Button.ButtonLabel> - Join our community - </Button.ButtonLabel> - <Button.ButtonIcon> - <FontAwesomeIcon icon={faArrowUpRightFromSquare} /> - </Button.ButtonIcon> - </Button.Root> - </a> + <NewLink + primitiveType="link" + href={community.discord_url} + key="meta-link" + csVariant="cyber" + rootClasses="project-community__metalink" + > + <NewIcon csMode="inline" noWrapper> + <FontAwesomeIcon icon={faDiscord} /> + </NewIcon> + Join our community + <NewIcon csMode="inline" noWrapper> + <FontAwesomeIcon icon={faArrowUpRightFromSquare} /> + </NewIcon> + </NewLink> ) : null, ]} </div> diff --git a/packages/cyberstorm/src/components/CollapsibleText/CollapsibleText.module.css b/apps/cyberstorm-remix/app/commonComponents/CollapsibleText/CollapsibleText.module.css similarity index 52% rename from packages/cyberstorm/src/components/CollapsibleText/CollapsibleText.module.css rename to apps/cyberstorm-remix/app/commonComponents/CollapsibleText/CollapsibleText.module.css index e80689bc5..012bafce6 100644 --- a/packages/cyberstorm/src/components/CollapsibleText/CollapsibleText.module.css +++ b/apps/cyberstorm-remix/app/commonComponents/CollapsibleText/CollapsibleText.module.css @@ -4,11 +4,15 @@ .text { overflow: hidden; - color: var(--color-text--secondary); - font-size: var(--font-size-body-xxxxl); - line-height: var(--line-height--l); - white-space: pre-wrap; + color: var(--color-text-tertiary); + font-weight: var(--font-weight-regular); + font-size: var(--font-size-body-lg); + line-height: var(--line-height-md); + white-space: nowrap; text-overflow: ellipsis; + text-shadow: 0 1px 1px #0d0d21; + + /* white-space: pre-wrap; */ } .opened { @@ -23,9 +27,9 @@ } .show { - color: var(--color-text--accent); + color: var(--color-text-accent); font-weight: var(--font-weight-bold); - font-size: 0.875rem; + font-size: var(--font-size-body-md); line-height: normal; background-color: transparent; } diff --git a/packages/cyberstorm/src/components/CollapsibleText/CollapsibleText.tsx b/apps/cyberstorm-remix/app/commonComponents/CollapsibleText/CollapsibleText.tsx similarity index 90% rename from packages/cyberstorm/src/components/CollapsibleText/CollapsibleText.tsx rename to apps/cyberstorm-remix/app/commonComponents/CollapsibleText/CollapsibleText.tsx index ac70c2834..e9c1186ca 100644 --- a/packages/cyberstorm/src/components/CollapsibleText/CollapsibleText.tsx +++ b/apps/cyberstorm-remix/app/commonComponents/CollapsibleText/CollapsibleText.tsx @@ -1,5 +1,5 @@ "use client"; -import { classnames } from "../../utils/utils"; +import { classnames } from "@thunderstore/cyberstorm/src/utils/utils"; import styles from "./CollapsibleText.module.css"; import { ReactElement, useState } from "react"; @@ -9,9 +9,6 @@ export interface CollapsibleTextProps { meta?: ReactElement[]; } -/** - * Cyberstorm CollapsibleText - */ export function CollapsibleText(props: CollapsibleTextProps) { const { text = "", maxLength = 80 } = props; diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/CategoryTagCloud/CategoryTagCloud.tsx b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/CategoryTagCloud/CategoryTagCloud.tsx index b7899581a..1e6923f5f 100644 --- a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/CategoryTagCloud/CategoryTagCloud.tsx +++ b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/CategoryTagCloud/CategoryTagCloud.tsx @@ -4,7 +4,7 @@ import { Dispatch, SetStateAction } from "react"; import styles from "./CategoryTagCloud.module.css"; import { CategorySelection, CATEGORY_STATES } from "../types"; -import { Button } from "@thunderstore/cyberstorm"; +import { NewButton, NewIcon } from "@thunderstore/cyberstorm"; const OFF = CATEGORY_STATES[0]; @@ -35,26 +35,30 @@ export const CategoryTagCloud = (props: Props) => { return ( <div className={styles.root}> {visible.map((c) => ( - <Button.Root + <NewButton key={c.slug} onClick={() => clearCategory(c.id)} - colorScheme={c.selection === "exclude" ? "danger" : "default"} - paddingSize="small" - style={{ gap: "0.5rem" }} + csVariant={c.selection === "exclude" ? "danger" : "primary"} + csSize="xsmall" + csModifiers={c.selection === "exclude" ? ["dimmed"] : undefined} > - <Button.ButtonLabel>{c.name}</Button.ButtonLabel> - <Button.ButtonIcon> + {c.name} + <NewIcon csMode="inline" noWrapper> <FontAwesomeIcon icon={faXmark} className={styles.icon} /> - </Button.ButtonIcon> - </Button.Root> + </NewIcon> + </NewButton> ))} - <Button.Root + <NewButton onClick={clearAll} - colorScheme="transparentTertiary" - paddingSize="small" + csVariant="secondary" + csSize="xsmall" + csModifiers={["ghost"]} > - <Button.ButtonLabel>Clear all</Button.ButtonLabel> - </Button.Root> + Clear all + <NewIcon csMode="inline" noWrapper> + <FontAwesomeIcon icon={faXmark} className={styles.icon} /> + </NewIcon> + </NewButton> </div> ); }; diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CategoryMenu.tsx b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CategoryMenu.tsx index 4b24faf4d..1b40baceb 100644 --- a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CategoryMenu.tsx +++ b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CategoryMenu.tsx @@ -5,7 +5,7 @@ import { Dispatch, SetStateAction } from "react"; import styles from "./FilterMenu.module.css"; import { CategorySelection, CATEGORY_STATES as STATES } from "../types"; -import { Icon } from "@thunderstore/cyberstorm"; +import { NewIcon } from "@thunderstore/cyberstorm"; import { classnames } from "@thunderstore/cyberstorm/src/utils/utils"; interface Props { @@ -40,12 +40,12 @@ export const CategoryMenu = (props: Props) => { className={styles.checkbox} > <Checkbox.Indicator> - <Icon> + <NewIcon csMode="inline" noWrapper> <FontAwesomeIcon icon={c.selection === "include" ? faCheck : faXmark} className={styles.icon} /> - </Icon> + </NewIcon> </Checkbox.Indicator> </Checkbox.Root> {c.name} diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CollapsibleMenu.module.css b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CollapsibleMenu.module.css index 592807e87..a54ab7508 100644 --- a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CollapsibleMenu.module.css +++ b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CollapsibleMenu.module.css @@ -26,7 +26,7 @@ align-items: center; padding: var(--space-8) var(--space-12); border-radius: var(--radius-md); - color: var(--color-text--secondary); + color: var(--color-text-secondary); font-weight: var(--font-weight-bold); cursor: pointer; transition: var(--animation-duration-xs); diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CollapsibleMenu.tsx b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CollapsibleMenu.tsx index 76e30be37..18763a2f7 100644 --- a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CollapsibleMenu.tsx +++ b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CollapsibleMenu.tsx @@ -2,7 +2,7 @@ import { PropsWithChildren } from "react"; import { faCaretDown } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import styles from "./CollapsibleMenu.module.css"; -import { Icon } from "@thunderstore/cyberstorm"; +import { NewIcon } from "@thunderstore/cyberstorm"; interface Props extends PropsWithChildren { headerTitle: string; @@ -19,9 +19,9 @@ export const CollapsibleMenu = (props: Props) => { <details className={styles.root} open={defaultOpen}> <summary className={styles.header}> {headerTitle} - <Icon inline> + <NewIcon csMode="inline" noWrapper> <FontAwesomeIcon icon={faCaretDown} /> - </Icon> + </NewIcon> </summary> {children} </details> diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/FilterMenu.module.css b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/FilterMenu.module.css index 3d7ed801e..95a283c54 100644 --- a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/FilterMenu.module.css +++ b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/FilterMenu.module.css @@ -20,7 +20,7 @@ align-items: center; padding: var(--space-8) var(--space-12); border-radius: var(--radius-md); - color: var(--color-text--secondary); + color: var(--color-text-secondary); font-weight: var(--font-weight-bold); cursor: pointer; transition: var(--animation-duration-xs); diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/OthersMenu.tsx b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/OthersMenu.tsx index a05a294e8..f8315ea22 100644 --- a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/OthersMenu.tsx +++ b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/OthersMenu.tsx @@ -4,7 +4,7 @@ import * as Checkbox from "@radix-ui/react-checkbox"; import { Dispatch, SetStateAction } from "react"; import styles from "./FilterMenu.module.css"; -import { Icon } from "@thunderstore/cyberstorm"; +import { NewIcon } from "@thunderstore/cyberstorm"; import { classnames } from "@thunderstore/cyberstorm/src/utils/utils"; interface Props { @@ -39,9 +39,9 @@ export const OthersMenu = (props: Props) => { className={styles.checkbox} > <Checkbox.Indicator> - <Icon> + <NewIcon csMode="inline" noWrapper> <FontAwesomeIcon icon={faCheck} className={styles.icon} /> - </Icon> + </NewIcon> </Checkbox.Indicator> </Checkbox.Root> {label} diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageList.module.css b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageList.module.css index 94373bfee..387895d48 100644 --- a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageList.module.css +++ b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageList.module.css @@ -12,7 +12,7 @@ } .packageCount { - color: var(--color-text--tertiary); + color: var(--color-text-tertiary); font-size: var(--font-size-body-lg); } @@ -24,7 +24,7 @@ } .sortByText { - color: var(--color-text--tertiary); + color: var(--color-text-tertiary); font-weight: var(--font-weight-bold); font-size: var(--font-size-body-lg); white-space: nowrap; diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageOrder.tsx b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageOrder.tsx index b5bf952e4..236ee413d 100644 --- a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageOrder.tsx +++ b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageOrder.tsx @@ -5,17 +5,16 @@ import { } from "@fortawesome/free-solid-svg-icons"; import { faHandSparkles } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { Dispatch, SetStateAction } from "react"; -import { Select } from "@thunderstore/cyberstorm"; +import { NewSelect } from "@thunderstore/cyberstorm"; interface Props { - order: PackageOrderOptions; - setOrder: Dispatch<SetStateAction<PackageOrderOptions>>; + order: PackageOrderOptionsType; + setOrder: (val: PackageOrderOptionsType) => void; } export const PackageOrder = (props: Props) => ( - <Select + <NewSelect options={selectOptions} value={props.order} onChange={props.setOrder} @@ -29,6 +28,7 @@ export enum PackageOrderOptions { Rated = "top-rated", Updated = "last-updated", } +export type PackageOrderOptionsType = `${PackageOrderOptions}`; const selectOptions = [ { diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageRecent.tsx b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageRecent.tsx deleted file mode 100644 index 8b9817e78..000000000 --- a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageRecent.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import { Dispatch, SetStateAction } from "react"; - -import { Select } from "@thunderstore/cyberstorm"; - -interface Props { - value: PackageRecentOptions; - setValue: Dispatch<SetStateAction<PackageRecentOptions>>; - id: string; -} - -export const PackageRecent = (props: Props) => ( - <Select - options={selectOptions} - value={props.value} - onChange={props.setValue} - id={props.id} - /> -); - -export enum PackageRecentOptions { - OneDay = "1", - TwoDays = "2", - SevenDays = "7", - ThirtyDays = "30", - ThreeHundredSixtyFiveDays = "365", - AllTime = "0", -} - -const selectOptions = [ - { - value: PackageRecentOptions.OneDay, - label: "1 Day", - }, - { - value: PackageRecentOptions.TwoDays, - label: "2 Days", - }, - { - value: PackageRecentOptions.SevenDays, - label: "7 Days", - }, - { - value: PackageRecentOptions.ThirtyDays, - label: "30 Days", - }, - { - value: PackageRecentOptions.ThreeHundredSixtyFiveDays, - label: "365 Days", - }, - { - value: PackageRecentOptions.AllTime, - label: "All time", - }, -]; - -PackageRecent.displayName = "PackageRecent"; diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.module.css b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.module.css index 2621f75ed..d33b9c355 100644 --- a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.module.css +++ b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.module.css @@ -40,7 +40,7 @@ } .dateFilterHeader { - color: var(--color-text--tertiary); + color: var(--color-text-tertiary); font-weight: var(--font-weight-bold); font-size: var(--font-size-body-lg); white-space: nowrap; @@ -67,7 +67,7 @@ border: var(--border-width--2) solid var(--border-color); border-radius: var(--radius-md); - color: var(--color-text--tertiary); + color: var(--color-text-tertiary); font-weight: var(--font-weight-medium); font-size: var(--font-size-body-xxxxl); @@ -91,7 +91,7 @@ } .dateFilterInput::placeholder { - color: var(--color-text--tertiary); + color: var(--color-text-tertiary); } .searchWrapper { @@ -103,6 +103,7 @@ .searchRowItemWrapper { display: flex; flex-direction: column; + gap: var(--gap-xs); } .searchInputWrapper { @@ -110,9 +111,9 @@ } .searchText { - color: var(--color-text--tertiary); + color: var(--color-text-tertiary); font-weight: var(--font-weight-bold); - font-size: var(--font-size-body-lg); + font-size: var(--font-size-body-md); white-space: nowrap; } diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.tsx b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.tsx index e1f6a1ddf..a29cb996d 100644 --- a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.tsx +++ b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.tsx @@ -17,17 +17,25 @@ import styles from "./PackageSearch.module.css"; import packageListStyles from "./PackageList.module.css"; import { CategorySelection } from "./types"; import { - Button, + NewButton, + NewIcon, + NewTextInput, PackageCard, Pagination, - TextInput, } from "@thunderstore/cyberstorm"; -import { useNavigation, useSearchParams } from "@remix-run/react"; +import { + useNavigation, + useNavigationType, + useSearchParams, +} from "@remix-run/react"; import { StalenessIndicator } from "@thunderstore/cyberstorm/src/components/StalenessIndicator/StalenessIndicator"; import { PackageCount } from "./PackageCount"; -import { PackageOrder, PackageOrderOptions } from "./PackageOrder"; +import { + PackageOrder, + PackageOrderOptions, + PackageOrderOptionsType, +} from "./PackageOrder"; import { CollapsibleMenu } from "./FilterMenus/CollapsibleMenu"; -import { PackageRecent, PackageRecentOptions } from "./PackageRecent"; import { classnames } from "@thunderstore/cyberstorm/src/utils/utils"; const PER_PAGE = 20; @@ -45,13 +53,74 @@ export function PackageSearch(props: Props) { const { listings, packageCategories: allCategories, sections } = props; const allSections = sections.sort((a, b) => a.priority - b.priority); - const [searchParams, setSearchParams] = useSearchParams(); + // const [searchParams, setSearchParams] = useSearchParams(); const navigation = useNavigation(); + // REMIX START + + const navigationType = useNavigationType(); + + const [searchParams, setSearchParams] = useSearchParams(); + // TODO: Disabled until we can figure out how a proper way to display skeletons + // const navigation = useNavigation(); + + // Order start + const changeOrder = (v: PackageOrderOptionsType) => { + if (v === PackageOrderOptions.Updated) { + searchParams.delete("order"); + } else { + searchParams.set("order", v); + } + setSearchParams(searchParams); + }; + // Order end + + // Search start const [searchValue, setSearchValue] = useState( searchParams.getAll("search").join(" ") ); + useEffect(() => { + if (navigationType === "POP") { + setSearchValue(searchParams.getAll("search").join(" ")); + } + }, [searchParams]); + + const [debouncedSearchValue] = useDebounce(searchValue, 300, { + maxWait: 300, + }); + + useEffect(() => { + if (debouncedSearchValue === "") { + searchParams.delete("search"); + setSearchParams(searchParams, { replace: true }); + } else { + searchParams.set("search", debouncedSearchValue); + setSearchParams(searchParams, { replace: true }); + } + }, [debouncedSearchValue]); + // Search end + + // Section start + // Section end + + // Deprecated start + // Deprecated end + + // NSFW start + // NSFW end + + // Page(number) start + // Page(number) end + + // IncludedCategories start + // IncludedCategories end + + // ExcludedCategories start + // ExcludedCategories end + + // REMIX END + const [categories, setCategories] = useState<CategorySelection[]>( allCategories .sort((a, b) => a.slug.localeCompare(b.slug)) @@ -61,17 +130,6 @@ export function PackageSearch(props: Props) { const [deprecated, setDeprecated] = useState(false); const [nsfw, setNsfw] = useState(false); const [page, setPage] = useState(1); - const [order, setOrder] = useState(PackageOrderOptions.Updated); - const [recentUpload, setRecentUpload] = useState( - PackageRecentOptions.AllTime - ); - const [recentUpdate, setRecentUpdate] = useState( - PackageRecentOptions.AllTime - ); - const [createdAfter, setCreatedAfter] = useState(""); - const [createdBefore, setCreatedBefore] = useState(""); - const [updatedAfter, setUpdatedAfter] = useState(""); - const [updatedBefore, setUpdatedBefore] = useState(""); const deferredCategories = useDeferredValue(categories); const deferredDeprecated = useDeferredValue(deprecated); @@ -79,9 +137,6 @@ export function PackageSearch(props: Props) { const deferredSection = useDeferredValue(section); const deferredPage = useDeferredValue(page); - const deferredOrder = useDeferredValue(order); - const deferredRecentUpload = useDeferredValue(recentUpload); - const deferredRecentUpdate = useDeferredValue(recentUpdate); const deferredIncludedCategories = deferredCategories .filter((c) => c.selection === "include") @@ -90,22 +145,7 @@ export function PackageSearch(props: Props) { .filter((c) => c.selection === "exclude") .map((c) => c.id); - const [debouncedSearchValue] = useDebounce(searchValue, 300, { - maxWait: 300, - }); - - const deferredCreatedAfter = useDeferredValue(createdAfter); - const deferredCreatedBefore = useDeferredValue(createdBefore); - const deferredUpdatedAfter = useDeferredValue(updatedAfter); - const deferredUpdatedBefore = useDeferredValue(updatedBefore); - useEffect(() => { - if (debouncedSearchValue === "") { - searchParams.delete("search"); - } else { - searchParams.set("search", debouncedSearchValue); - } - if (deferredDeprecated === false) { searchParams.delete("deprecated"); } else { @@ -118,7 +158,7 @@ export function PackageSearch(props: Props) { searchParams.set("nsfw", "true"); } - if (deferredSection === allSections[0]?.uuid) { + if (deferredSection === "" || deferredSection === allSections[0]?.uuid) { searchParams.delete("section"); } else { searchParams.set("section", deferredSection); @@ -148,63 +188,13 @@ export function PackageSearch(props: Props) { searchParams.set("page", String(deferredPage)); } - if (deferredOrder === PackageOrderOptions.Updated) { - searchParams.delete("order"); - } else { - searchParams.set("order", deferredOrder); - } - - if (deferredRecentUpload === PackageRecentOptions.AllTime) { - searchParams.delete("created_recent"); - } else { - searchParams.set("created_recent", deferredRecentUpload); - } - - if (deferredRecentUpdate === PackageRecentOptions.AllTime) { - searchParams.delete("updated_recent"); - } else { - searchParams.set("updated_recent", deferredRecentUpdate); - } - - if (deferredCreatedAfter === "") { - searchParams.delete("created_after"); - } else { - searchParams.set("created_after", deferredCreatedAfter); - } - - if (deferredCreatedBefore === "") { - searchParams.delete("created_before"); - } else { - searchParams.set("created_before", deferredCreatedBefore); - } - - if (deferredUpdatedAfter === "") { - searchParams.delete("updated_after"); - } else { - searchParams.set("updated_after", deferredUpdatedAfter); - } - - if (deferredUpdatedBefore === "") { - searchParams.delete("updated_before"); - } else { - searchParams.set("updated_before", deferredUpdatedBefore); - } - setSearchParams(searchParams); }, [ - debouncedSearchValue, deferredDeprecated, deferredNsfw, deferredSection, deferredCategories, deferredPage, - deferredOrder, - deferredCreatedAfter, - deferredCreatedBefore, - deferredUpdatedAfter, - deferredUpdatedBefore, - deferredRecentUpload, - deferredRecentUpdate, ]); const [isFiltersVisible, setIsFiltersVisible] = useState(true); @@ -213,22 +203,18 @@ export function PackageSearch(props: Props) { <div className={styles.root}> <div className={styles.searchWrapper}> <div className={styles.searchRowItemWrapper}> - <label className={styles.searchText} htmlFor="packageOrder"> - Sort by + <label className={styles.searchText} htmlFor="filtersMenuToggle"> + Filters </label> - <Button.Root - iconAlignment="side" - colorScheme="primary" - paddingSize="largeBorderCompensated" + <NewButton onClick={() => setIsFiltersVisible(!isFiltersVisible)} + id="filtersMenuToggle" > - <Button.ButtonIcon> + <NewIcon csMode="inline" noWrapper> <FontAwesomeIcon icon={isFiltersVisible ? faXmark : faSliders} /> - </Button.ButtonIcon> - <Button.ButtonLabel> - {isFiltersVisible ? "Close" : "Open"} - </Button.ButtonLabel> - </Button.Root> + </NewIcon> + {isFiltersVisible ? "Close" : "Open"} + </NewButton> </div> <div className={classnames( @@ -239,7 +225,7 @@ export function PackageSearch(props: Props) { <label className={styles.searchText} htmlFor="searchInput"> Search </label> - <TextInput + <NewTextInput placeholder="Filter Mods..." value={searchValue} onChange={(e) => setSearchValue(e.target.value)} @@ -251,26 +237,12 @@ export function PackageSearch(props: Props) { <label className={styles.searchText} htmlFor="packageOrder"> Sort by </label> - <PackageOrder order={order} setOrder={setOrder} /> - </div> - <div className={styles.searchRowItemWrapper}> - <label className={styles.searchText} htmlFor="packageRecentUpload"> - Upload time - </label> - <PackageRecent - id={"packageRecentUpload"} - value={recentUpload} - setValue={setRecentUpload} - /> - </div> - <div className={styles.searchRowItemWrapper}> - <label className={styles.searchText} htmlFor="packageRecentUpdate"> - Update time - </label> - <PackageRecent - id={"packageRecentUpdate"} - value={recentUpdate} - setValue={setRecentUpdate} + <PackageOrder + order={ + (searchParams.get("order") as PackageOrderOptions) ?? + PackageOrderOptions.Updated + } + setOrder={changeOrder} /> </div> </div> @@ -283,69 +255,6 @@ export function PackageSearch(props: Props) { )} id="desktopSidebar" > - <CollapsibleMenu headerTitle="Date filters" defaultOpen={false}> - <div className={styles.dateFilterInputs}> - <div className={styles.dateFilterInputsSet}> - <label - className={styles.dateFilterHeader} - htmlFor="updatedAfter" - > - Updated after - </label> - <input - type="date" - className={styles.dateFilterInput} - onChange={(e) => setUpdatedAfter(e.target.value)} - id="updatedAfter" - /> - </div> - <div className={styles.dateFilterInputsSet}> - <label - className={styles.dateFilterHeader} - htmlFor="updatedBefore" - > - Updated before - </label> - <input - type="date" - className={styles.dateFilterInput} - onChange={(e) => setUpdatedBefore(e.target.value)} - id="updatedBefore" - /> - </div> - </div> - <div className={styles.dateFilterInputs}> - <div className={styles.dateFilterInputsSet}> - <label - className={styles.dateFilterHeader} - htmlFor="createdAfter" - > - Created after - </label> - <input - type="date" - className={styles.dateFilterInput} - onChange={(e) => setCreatedAfter(e.target.value)} - id="createdAfter" - /> - </div> - <div className={styles.dateFilterInputsSet}> - <label - className={styles.dateFilterHeader} - htmlFor="createdBefore" - > - Created before - </label> - <input - type="date" - className={styles.dateFilterInput} - onChange={(e) => setCreatedBefore(e.target.value)} - id="createdBefore" - /> - </div> - </div> - </CollapsibleMenu> - {allSections.length > 0 ? ( <CollapsibleMenu headerTitle="Sections" defaultOpen> <SectionMenu diff --git a/apps/cyberstorm-remix/app/communities/Communities.module.css b/apps/cyberstorm-remix/app/communities/Communities.module.css deleted file mode 100644 index 072d6230c..000000000 --- a/apps/cyberstorm-remix/app/communities/Communities.module.css +++ /dev/null @@ -1,5 +0,0 @@ -@media (width <= 40rem) { - .breadcrumbs { - display: none; - } -} diff --git a/apps/cyberstorm-remix/app/communities/communities.tsx b/apps/cyberstorm-remix/app/communities/communities.tsx index c83609db3..032eaa230 100644 --- a/apps/cyberstorm-remix/app/communities/communities.tsx +++ b/apps/cyberstorm-remix/app/communities/communities.tsx @@ -9,7 +9,6 @@ import { NewTextInput, NewSelect, } from "@thunderstore/cyberstorm"; -import styles from "./Communities.module.css"; import searchAndOrderStyles from "./SearchAndOrder.module.css"; import communitiesListStyles from "./CommunityList.module.css"; import { useState, useEffect } from "react"; @@ -126,7 +125,7 @@ export default function CommunitiesPage() { return ( <> - <NewBreadCrumbs rootClasses={styles.breadcrumbs}> + <NewBreadCrumbs rootClasses="project-root__breadcrumbs"> Communities </NewBreadCrumbs> <header className="project-root__page-header"> diff --git a/apps/cyberstorm-remix/app/p/Tabs.module.css b/apps/cyberstorm-remix/app/p/Tabs.module.css index f042799a6..4da2f8775 100644 --- a/apps/cyberstorm-remix/app/p/Tabs.module.css +++ b/apps/cyberstorm-remix/app/p/Tabs.module.css @@ -46,7 +46,7 @@ } .button:not(.active, :disabled):hover > .icon { - color: var(--color-text--tertiary); + color: var(--color-text-tertiary); } .label { diff --git a/apps/cyberstorm-remix/app/p/components/Dependencies/Dependencies.module.css b/apps/cyberstorm-remix/app/p/components/Dependencies/Dependencies.module.css index 5a78ba448..319e72923 100644 --- a/apps/cyberstorm-remix/app/p/components/Dependencies/Dependencies.module.css +++ b/apps/cyberstorm-remix/app/p/components/Dependencies/Dependencies.module.css @@ -7,7 +7,7 @@ .countDescription { padding: 0 var(--space-8); - color: var(--color-text--tertiary); + color: var(--color-text-tertiary); font-size: var(--font-size-body-lg); } @@ -37,7 +37,7 @@ .itemDescription { overflow: hidden; - color: var(--color-text--tertiary); + color: var(--color-text-tertiary); font-size: var(--font-size-body-lg); line-height: var(--line-height--m); white-space: nowrap; diff --git a/apps/cyberstorm-remix/app/p/components/Dependencies/DependencyDialog/DependencyDialog.module.css b/apps/cyberstorm-remix/app/p/components/Dependencies/DependencyDialog/DependencyDialog.module.css index fcb5d5279..d0538bfeb 100644 --- a/apps/cyberstorm-remix/app/p/components/Dependencies/DependencyDialog/DependencyDialog.module.css +++ b/apps/cyberstorm-remix/app/p/components/Dependencies/DependencyDialog/DependencyDialog.module.css @@ -14,7 +14,7 @@ } .description { - color: var(--color-text--tertiary); + color: var(--color-text-tertiary); font-weight: var(--font-weight-medium); font-size: var(--font-size-body-lg); line-height: var(--line-height--m); @@ -34,7 +34,7 @@ .preferredVersion { padding-top: var(--space-6); - color: var(--color-text--accent); + color: var(--color-text-accent); font-weight: var(--font-weight-medium); font-size: var(--font-size-body-md); line-height: var(--line-height--s); diff --git a/apps/cyberstorm-remix/app/p/components/TeamMembers/TeamMembers.module.css b/apps/cyberstorm-remix/app/p/components/TeamMembers/TeamMembers.module.css index 2371ae6dd..d3ab015df 100644 --- a/apps/cyberstorm-remix/app/p/components/TeamMembers/TeamMembers.module.css +++ b/apps/cyberstorm-remix/app/p/components/TeamMembers/TeamMembers.module.css @@ -20,7 +20,7 @@ } .itemDescription { - color: var(--color-text--tertiary); + color: var(--color-text-tertiary); font-weight: var(--font-weight-medium); font-size: var(--font-size-body-lg); line-height: var(--line-height--m); diff --git a/apps/cyberstorm-remix/app/p/dependants/Dependants.tsx b/apps/cyberstorm-remix/app/p/dependants/Dependants.tsx index 5a0a75b6e..e7d41fda5 100644 --- a/apps/cyberstorm-remix/app/p/dependants/Dependants.tsx +++ b/apps/cyberstorm-remix/app/p/dependants/Dependants.tsx @@ -26,12 +26,6 @@ export async function loader({ request, params }: LoaderFunctionArgs) { const section = searchParams.get("section"); const nsfw = searchParams.get("nsfw"); const deprecated = searchParams.get("deprecated"); - const created_recent = searchParams.get("created_recent"); - const updated_recent = searchParams.get("updated_recent"); - const created_after = searchParams.get("created_after"); - const created_before = searchParams.get("created_before"); - const updated_after = searchParams.get("updated_after"); - const updated_before = searchParams.get("updated_before"); return { community: await dapper.getCommunity(params.communityId), filters: await dapper.getCommunityFilters(params.communityId), @@ -54,13 +48,7 @@ export async function loader({ request, params }: LoaderFunctionArgs) { excludedCategories?.split(",") ?? undefined, section ?? "", nsfw === "true" ? true : false, - deprecated === "true" ? true : false, - created_recent ?? "", - updated_recent ?? "", - created_after ?? "", - created_before ?? "", - updated_after ?? "", - updated_before ?? "" + deprecated === "true" ? true : false ), }; } catch (error) { @@ -88,12 +76,6 @@ export async function clientLoader({ request, params }: LoaderFunctionArgs) { const section = searchParams.get("section"); const nsfw = searchParams.get("nsfw"); const deprecated = searchParams.get("deprecated"); - const created_recent = searchParams.get("created_recent"); - const updated_recent = searchParams.get("updated_recent"); - const created_after = searchParams.get("created_after"); - const created_before = searchParams.get("created_before"); - const updated_after = searchParams.get("updated_after"); - const updated_before = searchParams.get("updated_before"); return { community: await dapper.getCommunity(params.communityId), filters: await dapper.getCommunityFilters(params.communityId), @@ -116,13 +98,7 @@ export async function clientLoader({ request, params }: LoaderFunctionArgs) { excludedCategories?.split(",") ?? undefined, section ?? "", nsfw === "true" ? true : false, - deprecated === "true" ? true : false, - created_recent ?? "", - updated_recent ?? "", - created_after ?? "", - created_before ?? "", - updated_after ?? "", - updated_before ?? "" + deprecated === "true" ? true : false ), }; } catch (error) { diff --git a/apps/cyberstorm-remix/app/settings/teams/team/Tabs.module.css b/apps/cyberstorm-remix/app/settings/teams/team/Tabs.module.css index f042799a6..4da2f8775 100644 --- a/apps/cyberstorm-remix/app/settings/teams/team/Tabs.module.css +++ b/apps/cyberstorm-remix/app/settings/teams/team/Tabs.module.css @@ -46,7 +46,7 @@ } .button:not(.active, :disabled):hover > .icon { - color: var(--color-text--tertiary); + color: var(--color-text-tertiary); } .label { diff --git a/apps/cyberstorm-remix/app/settings/teams/team/tabs/Members/TeamMembers.module.css b/apps/cyberstorm-remix/app/settings/teams/team/tabs/Members/TeamMembers.module.css index 160960bb7..3cd1135d5 100644 --- a/apps/cyberstorm-remix/app/settings/teams/team/tabs/Members/TeamMembers.module.css +++ b/apps/cyberstorm-remix/app/settings/teams/team/tabs/Members/TeamMembers.module.css @@ -41,7 +41,7 @@ } .description { - color: var(--color-text--secondary); + color: var(--color-text-secondary); font-weight: var(--font-weight-medium); font-size: var(--font-size-body-xxxxl); line-height: var(--line-height--l); diff --git a/apps/cyberstorm-remix/app/settings/teams/team/tabs/ServiceAccounts/TeamServiceAccounts.module.css b/apps/cyberstorm-remix/app/settings/teams/team/tabs/ServiceAccounts/TeamServiceAccounts.module.css index f183fb271..9bd4f4be1 100644 --- a/apps/cyberstorm-remix/app/settings/teams/team/tabs/ServiceAccounts/TeamServiceAccounts.module.css +++ b/apps/cyberstorm-remix/app/settings/teams/team/tabs/ServiceAccounts/TeamServiceAccounts.module.css @@ -16,7 +16,7 @@ } .description { - color: var(--color-text--secondary); + color: var(--color-text-secondary); font-weight: var(--font-weight-medium); font-size: var(--font-size-body-xxxxl); line-height: var(--line-height--l); diff --git a/apps/cyberstorm-remix/app/settings/user/Connections/Connections.module.css b/apps/cyberstorm-remix/app/settings/user/Connections/Connections.module.css index e919e8d0b..cb394239d 100644 --- a/apps/cyberstorm-remix/app/settings/user/Connections/Connections.module.css +++ b/apps/cyberstorm-remix/app/settings/user/Connections/Connections.module.css @@ -78,7 +78,7 @@ } .connectedAsDescription { - color: var(--color-text--tertiary); + color: var(--color-text-tertiary); font-weight: var(--font-weight-medium); font-size: var(--font-size-body-lg); line-height: 1; diff --git a/apps/cyberstorm-remix/app/settings/user/Tabs.module.css b/apps/cyberstorm-remix/app/settings/user/Tabs.module.css index f042799a6..4da2f8775 100644 --- a/apps/cyberstorm-remix/app/settings/user/Tabs.module.css +++ b/apps/cyberstorm-remix/app/settings/user/Tabs.module.css @@ -46,7 +46,7 @@ } .button:not(.active, :disabled):hover > .icon { - color: var(--color-text--tertiary); + color: var(--color-text-tertiary); } .label { diff --git a/apps/cyberstorm-remix/app/styles/error.css b/apps/cyberstorm-remix/app/styles/error.css index ae6e07eca..eff04c3af 100644 --- a/apps/cyberstorm-remix/app/styles/error.css +++ b/apps/cyberstorm-remix/app/styles/error.css @@ -11,7 +11,7 @@ } .project-error__description { - color: var(--color-text--accent); + color: var(--color-text-accent); font-weight: var(--font-weight-semibold); line-height: 1; } diff --git a/apps/cyberstorm-remix/app/styles/layout.css b/apps/cyberstorm-remix/app/styles/layout.css index 8fec63624..311a71077 100644 --- a/apps/cyberstorm-remix/app/styles/layout.css +++ b/apps/cyberstorm-remix/app/styles/layout.css @@ -97,4 +97,10 @@ display: none; } } + + @media (width <= 40rem) { + .project-root__breadcrumbs { + display: none; + } + } } diff --git a/packages/cyberstorm-forms/src/forms/AddServiceAccountForm.module.css b/packages/cyberstorm-forms/src/forms/AddServiceAccountForm.module.css index bc623cb5b..e52f5739f 100644 --- a/packages/cyberstorm-forms/src/forms/AddServiceAccountForm.module.css +++ b/packages/cyberstorm-forms/src/forms/AddServiceAccountForm.module.css @@ -12,7 +12,7 @@ } .dialogText { - color: var(--color-text--secondary); + color: var(--color-text-secondary); font-weight: var(--font-weight-medium); font-size: var(--font-size-body-xxxxl); line-height: var(--line-height--l); diff --git a/packages/cyberstorm-forms/src/forms/AddTeamMemberForm.module.css b/packages/cyberstorm-forms/src/forms/AddTeamMemberForm.module.css index cfc816cce..b91d89188 100644 --- a/packages/cyberstorm-forms/src/forms/AddTeamMemberForm.module.css +++ b/packages/cyberstorm-forms/src/forms/AddTeamMemberForm.module.css @@ -12,7 +12,7 @@ } .dialogText { - color: var(--color-text--secondary); + color: var(--color-text-secondary); font-weight: var(--font-weight-medium); font-size: var(--font-size-body-xxxxl); line-height: var(--line-height--l); diff --git a/packages/cyberstorm-forms/src/forms/CreateTeamForm.module.css b/packages/cyberstorm-forms/src/forms/CreateTeamForm.module.css index 8c1f64a7c..5cde564a9 100644 --- a/packages/cyberstorm-forms/src/forms/CreateTeamForm.module.css +++ b/packages/cyberstorm-forms/src/forms/CreateTeamForm.module.css @@ -12,7 +12,7 @@ } .dialogText { - color: var(--color-text--secondary); + color: var(--color-text-secondary); font-weight: var(--font-weight-medium); font-size: var(--font-size-body-xxxxl); line-height: var(--line-height--l); diff --git a/packages/cyberstorm-forms/src/forms/DisbandTeamForm.module.css b/packages/cyberstorm-forms/src/forms/DisbandTeamForm.module.css index a584c78a9..bf8d548e7 100644 --- a/packages/cyberstorm-forms/src/forms/DisbandTeamForm.module.css +++ b/packages/cyberstorm-forms/src/forms/DisbandTeamForm.module.css @@ -12,7 +12,7 @@ } .dialogText { - color: var(--color-text--secondary); + color: var(--color-text-secondary); font-weight: var(--font-weight-medium); font-size: var(--font-size-body-xxxxl); line-height: var(--line-height--l); diff --git a/packages/cyberstorm-forms/src/forms/LeaveTeamForm.module.css b/packages/cyberstorm-forms/src/forms/LeaveTeamForm.module.css index 5005218c3..ac0831cd9 100644 --- a/packages/cyberstorm-forms/src/forms/LeaveTeamForm.module.css +++ b/packages/cyberstorm-forms/src/forms/LeaveTeamForm.module.css @@ -12,7 +12,7 @@ } .dialogText { - color: var(--color-text--secondary); + color: var(--color-text-secondary); font-weight: var(--font-weight-medium); font-size: var(--font-size-body-xxxxl); line-height: var(--line-height--l); diff --git a/packages/cyberstorm-forms/src/forms/RemoveServiceAccountForm.module.css b/packages/cyberstorm-forms/src/forms/RemoveServiceAccountForm.module.css index 6f4f81b5c..e0d1c672a 100644 --- a/packages/cyberstorm-forms/src/forms/RemoveServiceAccountForm.module.css +++ b/packages/cyberstorm-forms/src/forms/RemoveServiceAccountForm.module.css @@ -12,7 +12,7 @@ } .dialogText { - color: var(--color-text--secondary); + color: var(--color-text-secondary); font-weight: var(--font-weight-medium); font-size: var(--font-size-body-xxxxl); line-height: var(--line-height--l); diff --git a/packages/cyberstorm-forms/src/forms/RemoveTeamMemberForm.module.css b/packages/cyberstorm-forms/src/forms/RemoveTeamMemberForm.module.css index a584c78a9..bf8d548e7 100644 --- a/packages/cyberstorm-forms/src/forms/RemoveTeamMemberForm.module.css +++ b/packages/cyberstorm-forms/src/forms/RemoveTeamMemberForm.module.css @@ -12,7 +12,7 @@ } .dialogText { - color: var(--color-text--secondary); + color: var(--color-text-secondary); font-weight: var(--font-weight-medium); font-size: var(--font-size-body-xxxxl); line-height: var(--line-height--l); diff --git a/packages/cyberstorm-forms/src/forms/UserConnectionsForm.module.css b/packages/cyberstorm-forms/src/forms/UserConnectionsForm.module.css index ffeddf005..a8e855a59 100644 --- a/packages/cyberstorm-forms/src/forms/UserConnectionsForm.module.css +++ b/packages/cyberstorm-forms/src/forms/UserConnectionsForm.module.css @@ -78,7 +78,7 @@ } .connectedAsDescription { - color: var(--color-text--tertiary); + color: var(--color-text-tertiary); font-weight: var(--font-weight-medium); font-size: var(--font-size-body-lg); line-height: 1; diff --git a/packages/cyberstorm/src/components/Button/Button.module.css b/packages/cyberstorm/src/components/Button/Button.module.css index 1be521d45..70d01952d 100644 --- a/packages/cyberstorm/src/components/Button/Button.module.css +++ b/packages/cyberstorm/src/components/Button/Button.module.css @@ -220,7 +220,7 @@ .button__transparentDanger { --bg-color: transparent; - --text-color: var(--color-text--accent); + --text-color: var(--color-text-accent); } .button__transparentDanger:hover { @@ -230,7 +230,7 @@ .button__transparentTertiary { --bg-color: transparent; - --text-color: var(--color-text--tertiary); + --text-color: var(--color-text-tertiary); } .button__transparentTertiary:hover { @@ -248,12 +248,12 @@ } .button__transparentAccent { - --text-color: var(--color-text--accent); + --text-color: var(--color-text-accent); --bg-color: transparent; } .button__transparentAccent:hover { - --text-color: var(--color-text--accent); + --text-color: var(--color-text-accent); --bg-color: var(--old--color-surface-7); } diff --git a/packages/cyberstorm/src/components/CopyButton/CopyButton.module.css b/packages/cyberstorm/src/components/CopyButton/CopyButton.module.css index b9bdef679..4535e42bc 100644 --- a/packages/cyberstorm/src/components/CopyButton/CopyButton.module.css +++ b/packages/cyberstorm/src/components/CopyButton/CopyButton.module.css @@ -1,6 +1,6 @@ .copy { all: unset; - color: var(--color-text--tertiary); + color: var(--color-text-tertiary); } .root:hover .copy { diff --git a/packages/cyberstorm/src/components/MenuItem/MenuItem.module.css b/packages/cyberstorm/src/components/MenuItem/MenuItem.module.css index 250b29c54..737b4db51 100644 --- a/packages/cyberstorm/src/components/MenuItem/MenuItem.module.css +++ b/packages/cyberstorm/src/components/MenuItem/MenuItem.module.css @@ -10,7 +10,7 @@ cursor: pointer; --text-color: var(--color-text--default); - --icon-color: var(--color-text--accent); + --icon-color: var(--color-text-accent); } .root:hover { diff --git a/packages/cyberstorm/src/components/MetaInfoItem/MetaInfoItem.module.css b/packages/cyberstorm/src/components/MetaInfoItem/MetaInfoItem.module.css index 5c89ae9b7..8f934275d 100644 --- a/packages/cyberstorm/src/components/MetaInfoItem/MetaInfoItem.module.css +++ b/packages/cyberstorm/src/components/MetaInfoItem/MetaInfoItem.module.css @@ -14,5 +14,5 @@ .label { flex-shrink: 0; - color: var(--color-text--accent); + color: var(--color-text-accent); } diff --git a/packages/cyberstorm/src/components/MetaItem/MetaItem.module.css b/packages/cyberstorm/src/components/MetaItem/MetaItem.module.css index c6e7eb69d..38d4f868b 100644 --- a/packages/cyberstorm/src/components/MetaItem/MetaItem.module.css +++ b/packages/cyberstorm/src/components/MetaItem/MetaItem.module.css @@ -34,11 +34,11 @@ } .metaItem__accent { - --text-color: var(--color-text--accent); + --text-color: var(--color-text-accent); } .metaItem__tertiary { - --text-color: var(--color-text--tertiary); + --text-color: var(--color-text-tertiary); } .metaItem__medium { diff --git a/packages/cyberstorm/src/components/MultiSelectSearch/MultiSelectSearch.module.css b/packages/cyberstorm/src/components/MultiSelectSearch/MultiSelectSearch.module.css index f84e19c9d..0c2e57e4e 100644 --- a/packages/cyberstorm/src/components/MultiSelectSearch/MultiSelectSearch.module.css +++ b/packages/cyberstorm/src/components/MultiSelectSearch/MultiSelectSearch.module.css @@ -6,7 +6,7 @@ justify-content: flex-end; width: auto; min-height: 6rem; - color: var(--color-text--tertiary); + color: var(--color-text-tertiary); } .selected { @@ -21,7 +21,7 @@ flex-direction: column; width: auto; height: 2.75rem; - color: var(--color-text--tertiary); + color: var(--color-text-tertiary); } .inputContainer { @@ -60,7 +60,7 @@ } .input::placeholder { - color: var(--color-text--tertiary); + color: var(--color-text-tertiary); } .inputContainer[data-color="red"] { diff --git a/packages/cyberstorm/src/components/NewTabs/Tabs.module.css b/packages/cyberstorm/src/components/NewTabs/Tabs.module.css index f042799a6..4da2f8775 100644 --- a/packages/cyberstorm/src/components/NewTabs/Tabs.module.css +++ b/packages/cyberstorm/src/components/NewTabs/Tabs.module.css @@ -46,7 +46,7 @@ } .button:not(.active, :disabled):hover > .icon { - color: var(--color-text--tertiary); + color: var(--color-text-tertiary); } .label { diff --git a/packages/cyberstorm/src/components/PackageCard/PackageCard.module.css b/packages/cyberstorm/src/components/PackageCard/PackageCard.module.css index d1723b7b8..be6979501 100644 --- a/packages/cyberstorm/src/components/PackageCard/PackageCard.module.css +++ b/packages/cyberstorm/src/components/PackageCard/PackageCard.module.css @@ -87,14 +87,14 @@ .author_prefix { padding-right: var(--space-4); - color: var(--color-text--tertiary); + color: var(--color-text-tertiary); } /* Styles for PackageCard's description */ .description { display: -webkit-box; overflow: hidden; - color: var(--color-text--secondary); + color: var(--color-text-secondary); font: var(--font-body); font-weight: var(--font-weight-medium); font-size: var(--font-size-body-lg); @@ -106,7 +106,7 @@ /* Styles for PackageCard's "Last updated" info */ .lastUpdated { - color: var(--color-text--tertiary); + color: var(--color-text-tertiary); font: var(--font-body); font-weight: var(--font-weight-medium); font-size: var(--font-size-body-md); diff --git a/packages/cyberstorm/src/components/Pagination/Pagination.module.css b/packages/cyberstorm/src/components/Pagination/Pagination.module.css index ece8075e1..a8be6f373 100644 --- a/packages/cyberstorm/src/components/Pagination/Pagination.module.css +++ b/packages/cyberstorm/src/components/Pagination/Pagination.module.css @@ -20,7 +20,7 @@ padding: var(--space-8) var(--space-8); border-radius: var(--radius-md); - color: var(--color-text--secondary); + color: var(--color-text-secondary); font-weight: var(--font-weight-medium); line-height: var(--line-height--18); diff --git a/packages/cyberstorm/src/components/Pagination/PaginationButton.module.css b/packages/cyberstorm/src/components/Pagination/PaginationButton.module.css index 6f9c33ad2..3954f0b95 100644 --- a/packages/cyberstorm/src/components/Pagination/PaginationButton.module.css +++ b/packages/cyberstorm/src/components/Pagination/PaginationButton.module.css @@ -10,7 +10,7 @@ padding: var(--space-8) var(--space-8); border-radius: var(--radius-md); - color: var(--color-text--tertiary); + color: var(--color-text-tertiary); background-color: var(--bg-color); --bg-color: var(--color-surface-4); diff --git a/packages/cyberstorm/src/components/SelectSearch/SelectSearch.module.css b/packages/cyberstorm/src/components/SelectSearch/SelectSearch.module.css index f84e19c9d..0c2e57e4e 100644 --- a/packages/cyberstorm/src/components/SelectSearch/SelectSearch.module.css +++ b/packages/cyberstorm/src/components/SelectSearch/SelectSearch.module.css @@ -6,7 +6,7 @@ justify-content: flex-end; width: auto; min-height: 6rem; - color: var(--color-text--tertiary); + color: var(--color-text-tertiary); } .selected { @@ -21,7 +21,7 @@ flex-direction: column; width: auto; height: 2.75rem; - color: var(--color-text--tertiary); + color: var(--color-text-tertiary); } .inputContainer { @@ -60,7 +60,7 @@ } .input::placeholder { - color: var(--color-text--tertiary); + color: var(--color-text-tertiary); } .inputContainer[data-color="red"] { diff --git a/packages/cyberstorm/src/components/SettingItem/SettingItem.module.css b/packages/cyberstorm/src/components/SettingItem/SettingItem.module.css index 2f2e7830c..777eb0243 100644 --- a/packages/cyberstorm/src/components/SettingItem/SettingItem.module.css +++ b/packages/cyberstorm/src/components/SettingItem/SettingItem.module.css @@ -24,7 +24,7 @@ } .leftColumnDescription { - color: var(--color-text--tertiary); + color: var(--color-text-tertiary); font-weight: var(--font-weight-medium); font-size: var(--font-size-body-lg); line-height: var(--line-height--m); diff --git a/packages/cyberstorm/src/components/Table/Table.module.css b/packages/cyberstorm/src/components/Table/Table.module.css index 6569a156a..c38c89560 100644 --- a/packages/cyberstorm/src/components/Table/Table.module.css +++ b/packages/cyberstorm/src/components/Table/Table.module.css @@ -98,7 +98,7 @@ width: fit-content; margin: 0 var(--space-24) var(--space-16) var(--space-24); border-radius: var(--radius-md); - color: var(--color-text--accent); + color: var(--color-text-accent); font-weight: var(--font-weight-bold); font-size: var(--space-14); line-height: normal; @@ -140,7 +140,7 @@ display: flex; align-items: center; padding: var(--space-16) var(--space-24); - color: var(--color-text--secondary); + color: var(--color-text-secondary); font-weight: var(--font-weight-medium); line-height: var(--line-height--l); } @@ -172,7 +172,7 @@ width: fit-content; margin: 0 var(--space-24) var(--space-8) var(--space-24); border-radius: var(--radius-md); - color: var(--color-text--accent); + color: var(--color-text-accent); font-weight: var(--font-weight-bold); font-size: var(--space-14); line-height: var(--line-height-lg); @@ -210,7 +210,7 @@ display: flex; align-items: center; padding: 0.425rem var(--space-24); - color: var(--color-text--secondary); + color: var(--color-text-secondary); font-weight: var(--font-weight-medium); line-height: var(--line-height--l); } diff --git a/packages/cyberstorm/src/components/Tabs/TabsButton.module.css b/packages/cyberstorm/src/components/Tabs/TabsButton.module.css index 73634082e..76dcb1cdd 100644 --- a/packages/cyberstorm/src/components/Tabs/TabsButton.module.css +++ b/packages/cyberstorm/src/components/Tabs/TabsButton.module.css @@ -32,7 +32,7 @@ } .button__default:hover > .icon { - color: var(--color-text--tertiary); + color: var(--color-text-tertiary); } .button__default:hover { diff --git a/packages/cyberstorm/src/components/Tag/Tag.module.css b/packages/cyberstorm/src/components/Tag/Tag.module.css index c929e50af..d434d8bd2 100644 --- a/packages/cyberstorm/src/components/Tag/Tag.module.css +++ b/packages/cyberstorm/src/components/Tag/Tag.module.css @@ -20,7 +20,7 @@ --text-color: var(--color-text--default); --bg-color: var(--color-surface-5); --border-color: var(--color-surface-9); - --icon-color: var(--color-text--tertiary); + --icon-color: var(--color-text-tertiary); } .label { @@ -60,7 +60,7 @@ .tag__borderless_removable { --border-color: transparent; - --text-color: var(--color-text--secondary); + --text-color: var(--color-text-secondary); text-transform: uppercase; } @@ -107,7 +107,7 @@ .tag__simple { --bg-color: var(--color-surface-4); --border-color: transparent; - --text-color: var(--color-text--tertiary); + --text-color: var(--color-text-tertiary); } .tag__success { diff --git a/packages/cyberstorm/src/components/TextAreaInput/TextAreaInput.module.css b/packages/cyberstorm/src/components/TextAreaInput/TextAreaInput.module.css index 78381bc65..9ce26bfd8 100644 --- a/packages/cyberstorm/src/components/TextAreaInput/TextAreaInput.module.css +++ b/packages/cyberstorm/src/components/TextAreaInput/TextAreaInput.module.css @@ -31,5 +31,5 @@ } .root::placeholder { - color: var(--color-text--tertiary); + color: var(--color-text-tertiary); } diff --git a/packages/cyberstorm/src/components/TextInput/TextInput.module.css b/packages/cyberstorm/src/components/TextInput/TextInput.module.css index 045f65051..4dd5af019 100644 --- a/packages/cyberstorm/src/components/TextInput/TextInput.module.css +++ b/packages/cyberstorm/src/components/TextInput/TextInput.module.css @@ -3,7 +3,7 @@ display: flex; align-items: center; width: auto; - color: var(--color-text--tertiary); + color: var(--color-text-tertiary); } .root > input { @@ -42,7 +42,7 @@ } .input::placeholder { - color: var(--color-text--tertiary); + color: var(--color-text-tertiary); } .input[data-color="red"] { @@ -72,7 +72,7 @@ .leftIcon { position: absolute; margin: var(--space-10) var(--space-16); - color: var(--color-text--tertiary); + color: var(--color-text-tertiary); line-height: normal; pointer-events: none; } @@ -80,7 +80,7 @@ .rightIcon { position: absolute; padding: var(--space-14) var(--space-16); - color: var(--color-text--tertiary); + color: var(--color-text-tertiary); } .clearValueButton { diff --git a/packages/cyberstorm/src/components/WrapperCard/WrapperCard.module.css b/packages/cyberstorm/src/components/WrapperCard/WrapperCard.module.css index 7ce7f5073..1a8b706fa 100644 --- a/packages/cyberstorm/src/components/WrapperCard/WrapperCard.module.css +++ b/packages/cyberstorm/src/components/WrapperCard/WrapperCard.module.css @@ -28,5 +28,5 @@ } .icon { - color: var(--color-text--tertiary); + color: var(--color-text-tertiary); } diff --git a/packages/cyberstorm/src/index.ts b/packages/cyberstorm/src/index.ts index cf661385f..de017ce4d 100644 --- a/packages/cyberstorm/src/index.ts +++ b/packages/cyberstorm/src/index.ts @@ -72,7 +72,6 @@ export { CommunityCardSkeleton } from "./components/CommunityCard/CommunityCardS export { range } from "./utils/utils"; export { SettingItem } from "./components/SettingItem/SettingItem"; export { ImageWithFallback } from "./components/ImageWithFallback/ImageWithFallback"; -export { CollapsibleText } from "./components/CollapsibleText/CollapsibleText"; export { SkeletonBox } from "./components/SkeletonBox/SkeletonBox"; export { isNode, isRecord, isStringArray } from "./utils/type_guards"; diff --git a/packages/cyberstorm/src/newComponents/Button/Button.css b/packages/cyberstorm/src/newComponents/Button/Button.css index 9d592929e..49a2742ed 100644 --- a/packages/cyberstorm/src/newComponents/Button/Button.css +++ b/packages/cyberstorm/src/newComponents/Button/Button.css @@ -18,6 +18,7 @@ font-weight: var(--button-font-weight); font-size: var(--button-font-size); line-height: var(--button-line-height); + white-space: nowrap; text-align: center; text-decoration: none; diff --git a/packages/cyberstorm/src/newComponents/Link/Link/Link.tsx b/packages/cyberstorm/src/newComponents/Link/Link/Link.tsx index 35584a5ae..1ae872080 100644 --- a/packages/cyberstorm/src/newComponents/Link/Link/Link.tsx +++ b/packages/cyberstorm/src/newComponents/Link/Link/Link.tsx @@ -25,7 +25,11 @@ export const Link = React.forwardRef< <Actionable {...forwardedProps} rootClasses={classnames( - csVariant === "primary" ? "ts-link ts-variant--primary" : "ts-link", + csVariant === "primary" + ? "ts-link ts-variant--primary" + : csVariant === "cyber" + ? "ts-link ts-variant--cyber" + : "ts-link", rootClasses )} ref={forwardedRef} diff --git a/packages/cyberstorm/src/newComponents/TextInput/TextInput.css b/packages/cyberstorm/src/newComponents/TextInput/TextInput.css index 69bca9df1..adeb0141c 100644 --- a/packages/cyberstorm/src/newComponents/TextInput/TextInput.css +++ b/packages/cyberstorm/src/newComponents/TextInput/TextInput.css @@ -40,14 +40,17 @@ .ts-textinput__lefticon { position: var(--ts-textinput__lefticon-position); margin: var(--ts-textinput__lefticon-margin); - color: var(--ts-textinput__lefticon-color); + + --icon-color: var(--ts-textinput__lefticon-color); + pointer-events: none; } .ts-textinput__righticon { position: var(--ts-textinput__righticon-position); padding: var(--ts-textinput__righticon-padding); - color: var(--ts-textinput__righticon-color); + + --icon-color: var(--ts-textinput__righticon-color); } .ts-textinput__clearvaluebutton { diff --git a/packages/dapper-ts/src/methods/packageListings.ts b/packages/dapper-ts/src/methods/packageListings.ts index 397660329..6addbc9e3 100644 --- a/packages/dapper-ts/src/methods/packageListings.ts +++ b/packages/dapper-ts/src/methods/packageListings.ts @@ -41,13 +41,7 @@ export async function getPackageListings( excludedCategories: string[] = [], section = "", nsfw = false, - deprecated = false, - created_recent = "", - updated_recent = "", - created_after = "", - created_before = "", - updated_after = "", - updated_before = "" + deprecated = false ) { const options: PackageListingQueryParams = { ordering, @@ -58,12 +52,6 @@ export async function getPackageListings( section, nsfw, deprecated, - created_recent, - updated_recent, - created_after, - created_before, - updated_after, - updated_before, }; let data; diff --git a/packages/thunderstore-api/src/fetch/communityPackageListings.ts b/packages/thunderstore-api/src/fetch/communityPackageListings.ts index 3d665a77b..145b8464f 100644 --- a/packages/thunderstore-api/src/fetch/communityPackageListings.ts +++ b/packages/thunderstore-api/src/fetch/communityPackageListings.ts @@ -19,12 +19,6 @@ export async function fetchCommunityPackageListings( { key: "section", value: options?.section }, { key: "nsfw", value: options?.nsfw, impotent: false }, { key: "deprecated", value: options?.deprecated, impotent: false }, - { key: "created_recent", value: options?.created_recent }, - { key: "updated_recent", value: options?.updated_recent }, - { key: "created_after", value: options?.created_after }, - { key: "created_before", value: options?.created_before }, - { key: "updated_after", value: options?.updated_after }, - { key: "updated_before", value: options?.updated_before }, ]; const query = serializeQueryString(queryParams); diff --git a/packages/thunderstore-api/src/fetch/namespacePackageListings.ts b/packages/thunderstore-api/src/fetch/namespacePackageListings.ts index d8897c1ab..1e388ca03 100644 --- a/packages/thunderstore-api/src/fetch/namespacePackageListings.ts +++ b/packages/thunderstore-api/src/fetch/namespacePackageListings.ts @@ -20,12 +20,6 @@ export async function fetchNamespacePackageListings( { key: "section", value: options?.section }, { key: "nsfw", value: options?.nsfw, impotent: false }, { key: "deprecated", value: options?.deprecated, impotent: false }, - { key: "created_recent", value: options?.created_recent }, - { key: "updated_recent", value: options?.updated_recent }, - { key: "created_after", value: options?.created_after }, - { key: "created_before", value: options?.created_before }, - { key: "updated_after", value: options?.updated_after }, - { key: "updated_before", value: options?.updated_before }, ]; const query = serializeQueryString(queryParams); diff --git a/packages/thunderstore-api/src/fetch/packageDependantsListings.ts b/packages/thunderstore-api/src/fetch/packageDependantsListings.ts index 7636b8ebb..ccfb2bdfb 100644 --- a/packages/thunderstore-api/src/fetch/packageDependantsListings.ts +++ b/packages/thunderstore-api/src/fetch/packageDependantsListings.ts @@ -24,12 +24,6 @@ export async function fetchPackageDependantsListings( { key: "section", value: options?.section }, { key: "nsfw", value: options?.nsfw, impotent: false }, { key: "deprecated", value: options?.deprecated, impotent: false }, - { key: "created_recent", value: options?.created_recent }, - { key: "updated_recent", value: options?.updated_recent }, - { key: "created_after", value: options?.created_after }, - { key: "created_before", value: options?.created_before }, - { key: "updated_after", value: options?.updated_after }, - { key: "updated_before", value: options?.updated_before }, ]; const query = serializeQueryString(queryParams); diff --git a/packages/thunderstore-api/src/types/index.ts b/packages/thunderstore-api/src/types/index.ts index 68fd98466..aa49a599d 100644 --- a/packages/thunderstore-api/src/types/index.ts +++ b/packages/thunderstore-api/src/types/index.ts @@ -23,16 +23,5 @@ export interface PackageListingQueryParams { nsfw: boolean; /** Should deprecated packages be included (by default they're not) */ deprecated: boolean; - // Amount of days that the package must be created on or after - created_recent: string; - // Amount of days that the package must be updated on or after - updated_recent: string; - // Date that the package must be created ON or AFTER - created_after: string; - // Date that the package must be created ON or BEFORE - created_before: string; - // Date when the package has to been last updated ON or AFTER - updated_after: string; - // Date when the package has to been last updated ON or BEFORE - updated_before: string; + // Disabled until the UX for date filtering is resolved }