From f6e4852f4af904a14ba960ba5fa9c985014aadd6 Mon Sep 17 00:00:00 2001 From: Hachi-R Date: Sat, 1 Feb 2025 03:00:14 -0300 Subject: [PATCH] refactor: remove vanilla-extract --- package.json | 4 - src/renderer/src/app.css.ts | 134 ---------- src/renderer/src/components/toast/toast.scss | 11 + src/renderer/src/components/toast/toast.tsx | 5 +- .../achievements/achievements-content.scss | 248 ++++++++++++++++++ .../achievements/achievements-content.tsx | 140 +++------- .../pages/achievements/achievements.css.ts | 197 -------------- .../src/pages/achievements/achievements.tsx | 6 +- .../src/pages/catalogue/catalogue.scss | 58 ++++ .../src/pages/catalogue/catalogue.tsx | 67 +---- .../src/pages/game-details/game-details.tsx | 7 +- .../game-details/modals/repacks-modal.scss | 4 + .../game-details/modals/repacks-modal.tsx | 3 +- .../sidebar/how-long-to-beat-section.tsx | 3 +- src/renderer/src/pages/home/home.tsx | 3 +- src/renderer/src/theme.css.ts | 30 --- 16 files changed, 373 insertions(+), 547 deletions(-) delete mode 100644 src/renderer/src/app.css.ts create mode 100644 src/renderer/src/pages/achievements/achievements-content.scss delete mode 100644 src/renderer/src/pages/achievements/achievements.css.ts delete mode 100644 src/renderer/src/theme.css.ts diff --git a/package.json b/package.json index b69699b1..4d776f96 100644 --- a/package.json +++ b/package.json @@ -42,9 +42,6 @@ "@reduxjs/toolkit": "^2.2.3", "@sentry/react": "^8.47.0", "@sentry/vite-plugin": "^2.22.7", - "@vanilla-extract/css": "^1.14.2", - "@vanilla-extract/dynamic": "^2.1.2", - "@vanilla-extract/recipes": "^0.5.2", "auto-launch": "^5.0.6", "axios": "^1.7.9", "better-sqlite3": "^11.7.0", @@ -101,7 +98,6 @@ "@types/react-dom": "^18.2.18", "@types/sound-play": "^1.1.3", "@types/user-agents": "^1.0.4", - "@vanilla-extract/vite-plugin": "^4.0.7", "@vitejs/plugin-react": "^4.2.1", "electron": "^31.7.6", "electron-builder": "^25.1.8", diff --git a/src/renderer/src/app.css.ts b/src/renderer/src/app.css.ts deleted file mode 100644 index 25c453c8..00000000 --- a/src/renderer/src/app.css.ts +++ /dev/null @@ -1,134 +0,0 @@ -import { - ComplexStyleRule, - createContainer, - globalStyle, - style, -} from "@vanilla-extract/css"; -import { SPACING_UNIT, vars } from "./theme.css"; - -export const appContainer = createContainer(); - -globalStyle("*", { - boxSizing: "border-box", -}); - -globalStyle("::-webkit-scrollbar", { - width: "9px", - backgroundColor: vars.color.darkBackground, -}); - -globalStyle("::-webkit-scrollbar-track", { - backgroundColor: "rgba(255, 255, 255, 0.03)", -}); - -globalStyle("::-webkit-scrollbar-thumb", { - backgroundColor: "rgba(255, 255, 255, 0.08)", - borderRadius: "24px", -}); - -globalStyle("::-webkit-scrollbar-thumb:hover", { - backgroundColor: "rgba(255, 255, 255, 0.16)", -}); - -globalStyle("html, body, #root, main", { - height: "100%", -}); - -globalStyle("body", { - overflow: "hidden", - userSelect: "none", - fontFamily: "Noto Sans, sans-serif", - fontSize: vars.size.body, - color: vars.color.body, - margin: "0", -}); - -globalStyle("button", { - padding: "0", - backgroundColor: "transparent", - border: "none", - fontFamily: "inherit", -}); - -globalStyle("h1, h2, h3, h4, h5, h6, p", { - margin: 0, -}); - -globalStyle("p", { - lineHeight: "20px", -}); - -globalStyle("#root, main", { - display: "flex", -}); - -globalStyle("#root", { - flexDirection: "column", -}); - -globalStyle("main", { - overflow: "hidden", -}); - -globalStyle( - "input::-webkit-outer-spin-button, input::-webkit-inner-spin-button", - { - WebkitAppearance: "none", - margin: "0", - } -); - -globalStyle("label", { - fontSize: vars.size.body, -}); - -globalStyle("input[type=number]", { - MozAppearance: "textfield", -}); - -globalStyle("img", { - WebkitUserDrag: "none", -} as Record); - -globalStyle("progress[value]", { - WebkitAppearance: "none", -}); - -export const container = style({ - width: "100%", - height: "100%", - overflow: "hidden", - display: "flex", - flexDirection: "column", - containerName: appContainer, - containerType: "inline-size", -}); - -export const content = style({ - overflowY: "auto", - alignItems: "center", - display: "flex", - flexDirection: "column", - position: "relative", - height: "100%", - background: `linear-gradient(0deg, ${vars.color.darkBackground} 50%, ${vars.color.background} 100%)`, -}); - -export const titleBar = style({ - display: "flex", - width: "100%", - height: "35px", - minHeight: "35px", - backgroundColor: vars.color.darkBackground, - alignItems: "center", - padding: `0 ${SPACING_UNIT * 2}px`, - WebkitAppRegion: "drag", - zIndex: "4", - borderBottom: `1px solid ${vars.color.border}`, -} as ComplexStyleRule); - -export const cloudText = style({ - background: "linear-gradient(270deg, #16B195 50%, #3E62C0 100%)", - backgroundClip: "text", - color: "transparent", -}); diff --git a/src/renderer/src/components/toast/toast.scss b/src/renderer/src/components/toast/toast.scss index 796475a0..013e3d29 100644 --- a/src/renderer/src/components/toast/toast.scss +++ b/src/renderer/src/components/toast/toast.scss @@ -35,12 +35,23 @@ $toast-height: 80px; align-items: center; } + &__message-container { + display: flex; + gap: globals.$spacing-unit; + } + + &__message { + font-weight: bold; + } + &__progress { width: 100%; height: 5px; + &::-webkit-progress-bar { background-color: globals.$dark-background-color; } + &::-webkit-progress-value { background-color: globals.$muted-color; } diff --git a/src/renderer/src/components/toast/toast.tsx b/src/renderer/src/components/toast/toast.tsx index 3f8acfd9..ad3aaee0 100644 --- a/src/renderer/src/components/toast/toast.tsx +++ b/src/renderer/src/components/toast/toast.tsx @@ -7,7 +7,6 @@ import { } from "@primer/octicons-react"; import "./toast.scss"; -import { SPACING_UNIT } from "@renderer/theme.css"; import cn from "classnames"; export interface ToastProps { @@ -84,7 +83,7 @@ export function Toast({ visible, message, type, onClose }: ToastProps) { })} >
-
+
{type === "success" && ( )} @@ -94,7 +93,7 @@ export function Toast({ visible, message, type, onClose }: ToastProps) { )} {type === "warning" && } - {message} + {message}
-
+
{getProfileImage(user)} -

{user.displayName}

+

{user.displayName}

); } return ( -
+
{getProfileImage(user)} -
-

{user.displayName}

-
-
+
+

{user.displayName}

+
+
{user.unlockedAchievementCount} / {user.totalAchievementCount} @@ -164,7 +105,7 @@ function AchievementSummary({ user, isComparison }: AchievementSummaryProps) {
@@ -203,7 +144,7 @@ export function AchievementsContent({ }; const onScroll: React.UIEventHandler = (event) => { - const heroHeight = heroRef.current?.clientHeight ?? styles.HERO_HEIGHT; + const heroHeight = heroRef.current?.clientHeight ?? 150; const scrollY = (event.target as HTMLDivElement).scrollTop; if (scrollY >= heroHeight && !isHeaderStuck) { @@ -219,10 +160,10 @@ export function AchievementsContent({ user: Pick ) => { return ( -
+
{user.profileImageUrl ? ( {user.displayName} @@ -236,10 +177,10 @@ export function AchievementsContent({ if (!objectId || !shop || !gameTitle || !userDetails) return null; return ( -
+
{gameTitle} @@ -247,38 +188,32 @@ export function AchievementsContent({
-
-
+
+
{gameTitle}
-
+
{otherUser && ( -
+
{hasActiveSubscription && ( -
+
{getProfileImage({ ...userDetails })}
)} -
+
{getProfileImage(otherUser)}
diff --git a/src/renderer/src/pages/achievements/achievements.css.ts b/src/renderer/src/pages/achievements/achievements.css.ts deleted file mode 100644 index 242ed6f6..00000000 --- a/src/renderer/src/pages/achievements/achievements.css.ts +++ /dev/null @@ -1,197 +0,0 @@ -import { SPACING_UNIT, vars } from "../../theme.css"; -import { style } from "@vanilla-extract/css"; -import { recipe } from "@vanilla-extract/recipes"; - -export const HERO_HEIGHT = 150; -const LOGO_HEIGHT = 100; -const LOGO_MAX_WIDTH = 200; - -export const wrapper = style({ - display: "flex", - flexDirection: "column", - overflow: "hidden", - width: "100%", - height: "100%", - transition: "all ease 0.3s", -}); - -export const hero = style({ - width: "100%", - height: `${HERO_HEIGHT}px`, - minHeight: `${HERO_HEIGHT}px`, - display: "flex", - flexDirection: "column", - position: "relative", - transition: "all ease 0.2s", -}); - -export const heroContent = style({ - padding: `${SPACING_UNIT * 2}px`, - width: "100%", - display: "flex", - justifyContent: "space-between", - alignItems: "center", -}); - -export const gameLogo = style({ - width: LOGO_MAX_WIDTH, - height: LOGO_HEIGHT, - objectFit: "contain", - transition: "all ease 0.2s", - ":hover": { - transform: "scale(1.05)", - }, -}); - -export const container = style({ - width: "100%", - height: "100%", - display: "flex", - flexDirection: "column", - overflow: "auto", - zIndex: "1", -}); - -export const tableHeader = recipe({ - base: { - width: "100%", - backgroundColor: vars.color.darkBackground, - transition: "all ease 0.2s", - borderBottom: `solid 1px ${vars.color.border}`, - position: "sticky", - top: "0", - zIndex: "1", - }, - variants: { - stuck: { - true: { - boxShadow: "0px 0px 15px 0px rgba(0, 0, 0, 0.8)", - }, - }, - }, -}); - -export const list = style({ - listStyle: "none", - margin: "0", - display: "flex", - flexDirection: "column", - gap: `${SPACING_UNIT * 2}px`, - padding: `${SPACING_UNIT * 2}px`, - width: "100%", - backgroundColor: vars.color.background, -}); - -export const listItem = style({ - transition: "all ease 0.1s", - color: vars.color.muted, - width: "100%", - overflow: "hidden", - borderRadius: "4px", - padding: `${SPACING_UNIT}px ${SPACING_UNIT}px`, - gap: `${SPACING_UNIT * 2}px`, - alignItems: "center", - textAlign: "left", - ":hover": { - backgroundColor: "rgba(255, 255, 255, 0.15)", - textDecoration: "none", - }, -}); - -export const listItemImage = recipe({ - base: { - width: "54px", - height: "54px", - borderRadius: "4px", - objectFit: "cover", - }, - variants: { - unlocked: { - false: { - filter: "grayscale(100%)", - }, - }, - }, -}); - -export const achievementsProgressBar = style({ - width: "100%", - height: "8px", - transition: "all ease 0.2s", - "::-webkit-progress-bar": { - backgroundColor: "rgba(255, 255, 255, 0.15)", - borderRadius: "4px", - }, - "::-webkit-progress-value": { - backgroundColor: vars.color.muted, - borderRadius: "4px", - }, -}); - -export const heroLogoBackdrop = style({ - width: "100%", - height: "100%", - position: "absolute", - display: "flex", - flexDirection: "column", - justifyContent: "flex-end", -}); - -export const heroImageSkeleton = style({ - height: "150px", -}); - -export const heroPanelSkeleton = style({ - width: "100%", - padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 2}px`, - display: "flex", - alignItems: "center", - backgroundColor: vars.color.background, - height: "72px", - borderBottom: `solid 1px ${vars.color.border}`, -}); - -export const listItemSkeleton = style({ - width: "100%", - overflow: "hidden", - borderRadius: "4px", - padding: `${SPACING_UNIT}px ${SPACING_UNIT}px`, - gap: `${SPACING_UNIT * 2}px`, -}); - -export const profileAvatar = style({ - height: "54px", - width: "54px", - borderRadius: "4px", - display: "flex", - justifyContent: "center", - alignItems: "center", - backgroundColor: vars.color.background, - position: "relative", - objectFit: "cover", -}); - -export const profileAvatarSmall = style({ - height: "32px", - width: "32px", - borderRadius: "4px", - display: "flex", - justifyContent: "center", - alignItems: "center", - backgroundColor: vars.color.background, - position: "relative", - objectFit: "cover", -}); - -export const subscriptionRequiredButton = style({ - textDecoration: "none", - display: "flex", - justifyContent: "center", - width: "100%", - gap: `${SPACING_UNIT / 2}px`, - color: vars.color.body, - cursor: "pointer", - ":hover": { - textDecoration: "underline", - }, -}); diff --git a/src/renderer/src/pages/achievements/achievements.tsx b/src/renderer/src/pages/achievements/achievements.tsx index f467cf89..d5a1e1ef 100644 --- a/src/renderer/src/pages/achievements/achievements.tsx +++ b/src/renderer/src/pages/achievements/achievements.tsx @@ -3,7 +3,6 @@ import { useAppDispatch, useUserDetails } from "@renderer/hooks"; import type { ComparedAchievements, GameShop } from "@types"; import { useEffect, useMemo, useState } from "react"; import { useSearchParams } from "react-router-dom"; -import { vars } from "@renderer/theme.css"; import { GameDetailsContextConsumer, GameDetailsContextProvider, @@ -75,10 +74,7 @@ export default function Achievements() { (otherUserId && comparedAchievements === null); return ( - + {showSkeleton ? ( ) : ( diff --git a/src/renderer/src/pages/catalogue/catalogue.scss b/src/renderer/src/pages/catalogue/catalogue.scss index 701652df..37aca9cb 100644 --- a/src/renderer/src/pages/catalogue/catalogue.scss +++ b/src/renderer/src/pages/catalogue/catalogue.scss @@ -19,4 +19,62 @@ border: 1px solid globals.$border-color; align-self: flex-start; } + + &__header { + display: flex; + gap: 8px; + align-items: center; + justify-content: space-between; + } + + &__filters-wrapper { + display: flex; + gap: 8px; + flex-wrap: wrap; + } + + &__filters-list { + display: flex; + gap: 8px; + flex-wrap: wrap; + list-style: none; + margin: 0; + padding: 0; + } + + &__content { + display: flex; + gap: calc(globals.$spacing-unit * 2); + justify-content: space-between; + } + + &__games-container { + display: flex; + flex-direction: column; + width: 100%; + gap: 8px; + } + + &__pagination-container { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 16px; + } + + &__result-count { + font-size: 12px; + } + + &__filters-sections { + display: flex; + flex-direction: column; + gap: 16px; + } + + &__skeleton { + height: 105px; + border-radius: 4px; + border: solid 1px rgba(255, 255, 255, 0.15); + } } diff --git a/src/renderer/src/pages/catalogue/catalogue.tsx b/src/renderer/src/pages/catalogue/catalogue.tsx index 14a9f4d6..d2718a17 100644 --- a/src/renderer/src/pages/catalogue/catalogue.tsx +++ b/src/renderer/src/pages/catalogue/catalogue.tsx @@ -10,7 +10,6 @@ import { useEffect, useMemo, useRef, useState } from "react"; import "./catalogue.scss"; -import { SPACING_UNIT, vars } from "@renderer/theme.css"; import { downloadSourcesTable } from "@renderer/dexie"; import { FilterSection } from "./filter-section"; import { setFilters, setPage } from "@renderer/features"; @@ -230,25 +229,9 @@ export default function Catalogue() { return (
-
-
-
    +
    +
    +
      {groupedFilters.map((filter) => (
    -
    -
    +
    +
    {isLoading ? ( - + {Array.from({ length: PAGE_SIZE }).map((_, i) => ( - + ))} ) : ( results.map((game) => ) )} -
    - +
    + {t("result_count", { resultCount: formatNumber(itemsCount), })} @@ -333,7 +286,7 @@ export default function Catalogue() {
    -
    +
    {filterSections.map((section) => ( - + {isLoading ? : } -
    +
    diff --git a/src/renderer/src/pages/game-details/sidebar/how-long-to-beat-section.tsx b/src/renderer/src/pages/game-details/sidebar/how-long-to-beat-section.tsx index 138826ff..2d8533c8 100644 --- a/src/renderer/src/pages/game-details/sidebar/how-long-to-beat-section.tsx +++ b/src/renderer/src/pages/game-details/sidebar/how-long-to-beat-section.tsx @@ -1,7 +1,6 @@ import Skeleton, { SkeletonTheme } from "react-loading-skeleton"; import { useTranslation } from "react-i18next"; import type { HowLongToBeatCategory } from "@types"; -import { vars } from "@renderer/theme.css"; import { SidebarSection } from "../sidebar-section/sidebar-section"; import "./sidebar.scss"; @@ -29,7 +28,7 @@ export function HowLongToBeatSection({ if (!howLongToBeatData && !isLoading) return null; return ( - +
      {howLongToBeatData diff --git a/src/renderer/src/pages/home/home.tsx b/src/renderer/src/pages/home/home.tsx index c083d2b6..bf1fd527 100644 --- a/src/renderer/src/pages/home/home.tsx +++ b/src/renderer/src/pages/home/home.tsx @@ -11,7 +11,6 @@ import flameIconStatic from "@renderer/assets/icons/flame-static.png"; import flameIconAnimated from "@renderer/assets/icons/flame-animated.gif"; import starsIconAnimated from "@renderer/assets/icons/stars-animated.gif"; -import { vars } from "@renderer/theme.css"; import { buildGameDetailsPath } from "@renderer/helpers"; import { CatalogueCategory } from "@shared"; import "./home.scss"; @@ -94,7 +93,7 @@ export default function Home() { }; return ( - +

      {t("featured")}

      diff --git a/src/renderer/src/theme.css.ts b/src/renderer/src/theme.css.ts deleted file mode 100644 index b9fbaf55..00000000 --- a/src/renderer/src/theme.css.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { createGlobalTheme } from "@vanilla-extract/css"; - -export const SPACING_UNIT = 8; - -export const vars = createGlobalTheme(":root", { - color: { - background: "#1c1c1c", - darkBackground: "#151515", - muted: "#c0c1c7", - body: "#8e919b", - border: "rgba(255, 255, 255, 0.15)", - success: "#1c9749", - danger: "#e11d48", - warning: "#ffc107", - }, - opacity: { - disabled: "0.5", - active: "0.7", - }, - size: { - body: "14px", - small: "12px", - }, - zIndex: { - toast: "5", - bottomPanel: "3", - titleBar: "4", - backdrop: "4", - }, -});