From d4c414b96b220660ba786c6fe32c2eacb50c9993 Mon Sep 17 00:00:00 2001 From: Hachi-R Date: Tue, 21 Jan 2025 19:04:12 -0300 Subject: [PATCH] Merge branch 'feature/custom-themes' into feat/polychrome --- src/renderer/src/app.scss | 136 +++++++++ src/renderer/src/app.tsx | 12 +- .../src/components/backdrop/backdrop.css.ts | 54 ---- .../src/components/backdrop/backdrop.scss | 50 ++++ .../src/components/backdrop/backdrop.tsx | 9 +- .../checkbox-field/checkbox-field.css.ts | 57 ---- .../checkbox-field/checkbox-field.scss | 53 ++++ .../checkbox-field/checkbox-field.tsx | 12 +- .../confirmation-modal.css.ts | 13 - .../confirmation-modal.scss | 17 ++ .../confirmation-modal/confirmation-modal.tsx | 8 +- .../src/components/game-card/game-card.css.ts | 106 ------- .../src/components/game-card/game-card.scss | 102 +++++++ .../src/components/game-card/game-card.tsx | 27 +- .../components/header/auto-update-header.scss | 32 +++ .../header/auto-update-sub-header.tsx | 23 +- .../src/components/header/header.css.ts | 182 ------------ .../src/components/header/header.scss | 133 +++++++++ src/renderer/src/components/header/header.tsx | 33 ++- src/renderer/src/components/hero/hero.css.ts | 60 ---- src/renderer/src/components/hero/hero.scss | 56 ++++ src/renderer/src/components/hero/hero.tsx | 14 +- src/renderer/src/components/link/link.css.ts | 9 - src/renderer/src/components/link/link.scss | 7 + src/renderer/src/components/link/link.tsx | 10 +- .../src/components/modal/modal.css.ts | 78 ----- src/renderer/src/components/modal/modal.scss | 77 +++++ src/renderer/src/components/modal/modal.tsx | 16 +- .../select-field/select-field.css.ts | 59 ---- .../components/select-field/select-field.scss | 49 ++++ .../components/select-field/select-field.tsx | 16 +- .../components/sidebar/sidebar-profile.css.ts | 79 ----- .../components/sidebar/sidebar-profile.scss | 77 +++++ .../components/sidebar/sidebar-profile.tsx | 16 +- .../src/components/sidebar/sidebar.css.ts | 152 ---------- .../src/components/sidebar/sidebar.scss | 136 +++++++++ .../src/components/sidebar/sidebar.tsx | 49 ++-- .../components/text-field/text-field.css.ts | 89 ------ .../src/components/text-field/text-field.scss | 79 +++++ .../src/components/text-field/text-field.tsx | 38 ++- .../src/components/toast/toast.css.ts | 87 ------ src/renderer/src/components/toast/toast.scss | 87 ++++++ src/renderer/src/components/toast/toast.tsx | 23 +- .../pages/achievements/achievement-list.tsx | 57 ++-- .../achievements/achievement-panel.css.ts | 71 ----- .../pages/achievements/achievement-panel.scss | 97 +++++++ .../pages/achievements/achievement-panel.tsx | 21 +- .../achievements/achievements-skeleton.tsx | 10 +- .../src/pages/achievements/achievements.scss | 262 +++++++++++++++++ .../compared-achievement-list.tsx | 66 +---- .../compared-achievement-panel.tsx | 28 +- .../src/pages/catalogue/filter-item.tsx | 34 +-- .../src/pages/catalogue/filter-section.tsx | 37 +-- src/renderer/src/pages/catalogue/filter.scss | 71 +++++ .../src/pages/catalogue/pagination.scss | 21 ++ .../src/pages/catalogue/pagination.tsx | 40 +-- .../pages/downloads/delete-game-modal.css.ts | 11 - .../pages/downloads/delete-game-modal.scss | 11 + .../src/pages/downloads/delete-game-modal.tsx | 6 +- .../src/pages/downloads/download-group.css.ts | 109 ------- .../src/pages/downloads/download-group.scss | 140 +++++++++ .../src/pages/downloads/download-group.tsx | 59 ++-- .../src/pages/downloads/downloads.css.ts | 37 --- .../src/pages/downloads/downloads.scss | 37 +++ .../src/pages/downloads/downloads.tsx | 10 +- .../cloud-sync-files-modal.css.ts | 27 -- .../cloud-sync-files-modal.scss | 41 +++ .../cloud-sync-files-modal.tsx | 18 +- .../cloud-sync-modal/cloud-sync-modal.css.ts | 65 ----- .../cloud-sync-modal/cloud-sync-modal.scss | 113 ++++++++ .../cloud-sync-modal/cloud-sync-modal.tsx | 84 +++--- .../description-header.css.ts | 19 -- .../description-header.scss | 17 ++ .../description-header/description-header.tsx | 8 +- .../gallery-slider/gallery-slider.css.ts | 131 --------- .../gallery-slider/gallery-slider.scss | 131 +++++++++ .../gallery-slider/gallery-slider.tsx | 41 +-- .../game-details/game-details-content.tsx | 44 ++- .../game-details/game-details-skeleton.tsx | 49 ++-- .../pages/game-details/game-details.css.ts | 234 --------------- .../src/pages/game-details/game-details.scss | 270 ++++++++++++++++++ .../src/pages/game-details/game-details.tsx | 15 +- .../hero/hero-panel-actions.css.ts | 18 -- .../game-details/hero/hero-panel-actions.scss | 18 ++ .../game-details/hero/hero-panel-actions.tsx | 21 +- .../hero/hero-panel-playtime.scss | 15 + .../game-details/hero/hero-panel-playtime.tsx | 13 +- .../pages/game-details/hero/hero-panel.css.ts | 77 ----- .../pages/game-details/hero/hero-panel.scss | 66 +++++ .../pages/game-details/hero/hero-panel.tsx | 48 ++-- .../modals/download-settings-modal.css.ts | 45 --- .../modals/download-settings-modal.scss | 48 ++++ .../modals/download-settings-modal.tsx | 33 +-- .../modals/game-options-modal.css.ts | 24 -- .../modals/game-options-modal.scss | 86 ++++++ .../modals/game-options-modal.tsx | 241 ++++++++-------- .../modals/remove-from-library-modal.css.ts | 11 - .../modals/remove-from-library-modal.scss | 11 + .../modals/remove-from-library-modal.tsx | 4 +- .../game-details/modals/repacks-modal.css.ts | 19 -- .../game-details/modals/repacks-modal.scss | 28 ++ .../game-details/modals/repacks-modal.tsx | 13 +- .../modals/reset-achievements-modal.scss | 11 + .../modals/reset-achievements-modal.tsx | 5 +- .../sidebar-section/sidebar-section.css.ts | 37 --- .../sidebar-section/sidebar-section.scss | 40 +++ .../sidebar-section/sidebar-section.tsx | 17 +- .../sidebar/how-long-to-beat-section.tsx | 16 +- .../pages/game-details/sidebar/sidebar.css.ts | 169 ----------- .../pages/game-details/sidebar/sidebar.scss | 174 +++++++++++ .../pages/game-details/sidebar/sidebar.tsx | 51 ++-- .../src/pages/home/catalogue-home.css.ts | 24 -- src/renderer/src/pages/home/home.css.ts | 77 ----- src/renderer/src/pages/home/home.scss | 103 +++++++ src/renderer/src/pages/home/home.tsx | 37 +-- .../edit-profile-modal.css.ts | 36 --- .../edit-profile-modal.scss | 57 ++++ .../edit-profile-modal/edit-profile-modal.tsx | 26 +- .../profile/profile-content/friends-box.scss | 62 ++++ .../profile/profile-content/friends-box.tsx | 23 +- .../profile-content/locked-profile.css.ts | 24 -- .../profile-content/locked-profile.scss | 24 ++ .../profile-content/locked-profile.tsx | 7 +- .../profile-content/profile-content.css.ts | 238 --------------- .../profile-content/profile-content.scss | 89 ++++++ .../profile-content/profile-content.tsx | 26 +- .../profile-content/recent-games-box.scss | 71 +++++ .../profile-content/recent-games-box.tsx | 21 +- .../user-library-game-card.scss | 134 +++++++++ .../user-library-game-card.tsx | 93 +----- .../profile-content/user-stats-box.scss | 75 +++++ .../profile-content/user-stats-box.tsx | 45 ++- .../profile/profile-hero/profile-hero.css.ts | 90 ------ .../profile/profile-hero/profile-hero.scss | 124 ++++++++ .../profile/profile-hero/profile-hero.tsx | 70 ++--- src/renderer/src/pages/profile/profile.css.ts | 9 - src/renderer/src/pages/profile/profile.scss | 10 + src/renderer/src/pages/profile/profile.tsx | 8 +- .../report-profile/report-profile.css.ts | 12 - .../report-profile/report-profile.scss | 24 ++ .../profile/report-profile/report-profile.tsx | 15 +- .../upload-background-image-button.css.ts | 12 - .../upload-background-image-button.scss | 11 + .../upload-background-image-button.tsx | 8 +- .../settings/add-download-source-modal.scss | 27 ++ .../settings/add-download-source-modal.tsx | 30 +- .../pages/settings/settings-account.css.ts | 39 --- .../src/pages/settings/settings-account.scss | 67 +++++ .../src/pages/settings/settings-account.tsx | 64 +---- .../src/pages/settings/settings-behavior.scss | 13 + .../src/pages/settings/settings-behavior.tsx | 6 +- .../settings/settings-download-sources.css.ts | 58 ---- .../settings/settings-download-sources.scss | 56 ++++ .../settings/settings-download-sources.tsx | 14 +- .../src/pages/settings/settings-general.scss | 12 + .../src/pages/settings/settings-general.tsx | 11 +- .../settings/settings-real-debrid.css.ts | 13 - .../pages/settings/settings-real-debrid.scss | 18 ++ .../pages/settings/settings-real-debrid.tsx | 23 +- .../src/pages/settings/settings.css.ts | 27 -- src/renderer/src/pages/settings/settings.scss | 27 ++ src/renderer/src/pages/settings/settings.tsx | 11 +- .../hydra-cloud/hydra-cloud-modal.scss | 10 + .../hydra-cloud/hydra-cloud-modal.tsx | 9 +- .../user-friend-modal/user-friend-item.scss | 64 +++++ .../user-friend-modal/user-friend-item.tsx | 35 +-- .../user-friend-modal-add-friend.scss | 21 ++ .../user-friend-modal-add-friend.tsx | 24 +- .../user-friend-modal-list.scss | 16 ++ .../user-friend-modal-list.tsx | 48 +--- .../user-friend-modal.css.ts | 79 ----- .../user-friend-modal/user-friend-modal.scss | 34 +++ .../user-friend-modal/user-friend-modal.tsx | 48 +--- src/renderer/src/scss/globals.scss | 5 + 174 files changed, 4791 insertions(+), 4126 deletions(-) create mode 100644 src/renderer/src/app.scss delete mode 100644 src/renderer/src/components/backdrop/backdrop.css.ts create mode 100644 src/renderer/src/components/backdrop/backdrop.scss delete mode 100644 src/renderer/src/components/checkbox-field/checkbox-field.css.ts create mode 100644 src/renderer/src/components/checkbox-field/checkbox-field.scss delete mode 100644 src/renderer/src/components/confirmation-modal/confirmation-modal.css.ts create mode 100644 src/renderer/src/components/confirmation-modal/confirmation-modal.scss delete mode 100644 src/renderer/src/components/game-card/game-card.css.ts create mode 100644 src/renderer/src/components/game-card/game-card.scss create mode 100644 src/renderer/src/components/header/auto-update-header.scss delete mode 100644 src/renderer/src/components/header/header.css.ts create mode 100644 src/renderer/src/components/header/header.scss delete mode 100644 src/renderer/src/components/hero/hero.css.ts create mode 100644 src/renderer/src/components/hero/hero.scss delete mode 100644 src/renderer/src/components/link/link.css.ts create mode 100644 src/renderer/src/components/link/link.scss delete mode 100644 src/renderer/src/components/modal/modal.css.ts create mode 100644 src/renderer/src/components/modal/modal.scss delete mode 100644 src/renderer/src/components/select-field/select-field.css.ts create mode 100644 src/renderer/src/components/select-field/select-field.scss delete mode 100644 src/renderer/src/components/sidebar/sidebar-profile.css.ts create mode 100644 src/renderer/src/components/sidebar/sidebar-profile.scss delete mode 100644 src/renderer/src/components/sidebar/sidebar.css.ts create mode 100644 src/renderer/src/components/sidebar/sidebar.scss delete mode 100644 src/renderer/src/components/text-field/text-field.css.ts create mode 100644 src/renderer/src/components/text-field/text-field.scss delete mode 100644 src/renderer/src/components/toast/toast.css.ts create mode 100644 src/renderer/src/components/toast/toast.scss delete mode 100644 src/renderer/src/pages/achievements/achievement-panel.css.ts create mode 100644 src/renderer/src/pages/achievements/achievement-panel.scss create mode 100644 src/renderer/src/pages/achievements/achievements.scss create mode 100644 src/renderer/src/pages/catalogue/filter.scss create mode 100644 src/renderer/src/pages/catalogue/pagination.scss delete mode 100644 src/renderer/src/pages/downloads/delete-game-modal.css.ts create mode 100644 src/renderer/src/pages/downloads/delete-game-modal.scss delete mode 100644 src/renderer/src/pages/downloads/download-group.css.ts create mode 100644 src/renderer/src/pages/downloads/download-group.scss delete mode 100644 src/renderer/src/pages/downloads/downloads.css.ts create mode 100644 src/renderer/src/pages/downloads/downloads.scss delete mode 100644 src/renderer/src/pages/game-details/cloud-sync-files-modal/cloud-sync-files-modal.css.ts create mode 100644 src/renderer/src/pages/game-details/cloud-sync-files-modal/cloud-sync-files-modal.scss delete mode 100644 src/renderer/src/pages/game-details/cloud-sync-modal/cloud-sync-modal.css.ts create mode 100644 src/renderer/src/pages/game-details/cloud-sync-modal/cloud-sync-modal.scss delete mode 100644 src/renderer/src/pages/game-details/description-header/description-header.css.ts create mode 100644 src/renderer/src/pages/game-details/description-header/description-header.scss delete mode 100644 src/renderer/src/pages/game-details/gallery-slider/gallery-slider.css.ts create mode 100644 src/renderer/src/pages/game-details/gallery-slider/gallery-slider.scss delete mode 100644 src/renderer/src/pages/game-details/game-details.css.ts create mode 100644 src/renderer/src/pages/game-details/game-details.scss delete mode 100644 src/renderer/src/pages/game-details/hero/hero-panel-actions.css.ts create mode 100644 src/renderer/src/pages/game-details/hero/hero-panel-actions.scss create mode 100644 src/renderer/src/pages/game-details/hero/hero-panel-playtime.scss delete mode 100644 src/renderer/src/pages/game-details/hero/hero-panel.css.ts create mode 100644 src/renderer/src/pages/game-details/hero/hero-panel.scss delete mode 100644 src/renderer/src/pages/game-details/modals/download-settings-modal.css.ts create mode 100644 src/renderer/src/pages/game-details/modals/download-settings-modal.scss delete mode 100644 src/renderer/src/pages/game-details/modals/game-options-modal.css.ts create mode 100644 src/renderer/src/pages/game-details/modals/game-options-modal.scss delete mode 100644 src/renderer/src/pages/game-details/modals/remove-from-library-modal.css.ts create mode 100644 src/renderer/src/pages/game-details/modals/remove-from-library-modal.scss delete mode 100644 src/renderer/src/pages/game-details/modals/repacks-modal.css.ts create mode 100644 src/renderer/src/pages/game-details/modals/repacks-modal.scss create mode 100644 src/renderer/src/pages/game-details/modals/reset-achievements-modal.scss delete mode 100644 src/renderer/src/pages/game-details/sidebar-section/sidebar-section.css.ts create mode 100644 src/renderer/src/pages/game-details/sidebar-section/sidebar-section.scss delete mode 100644 src/renderer/src/pages/game-details/sidebar/sidebar.css.ts create mode 100644 src/renderer/src/pages/game-details/sidebar/sidebar.scss delete mode 100644 src/renderer/src/pages/home/catalogue-home.css.ts delete mode 100644 src/renderer/src/pages/home/home.css.ts create mode 100644 src/renderer/src/pages/home/home.scss delete mode 100644 src/renderer/src/pages/profile/edit-profile-modal/edit-profile-modal.css.ts create mode 100644 src/renderer/src/pages/profile/edit-profile-modal/edit-profile-modal.scss create mode 100644 src/renderer/src/pages/profile/profile-content/friends-box.scss delete mode 100644 src/renderer/src/pages/profile/profile-content/locked-profile.css.ts create mode 100644 src/renderer/src/pages/profile/profile-content/locked-profile.scss delete mode 100644 src/renderer/src/pages/profile/profile-content/profile-content.css.ts create mode 100644 src/renderer/src/pages/profile/profile-content/profile-content.scss create mode 100644 src/renderer/src/pages/profile/profile-content/recent-games-box.scss create mode 100644 src/renderer/src/pages/profile/profile-content/user-library-game-card.scss create mode 100644 src/renderer/src/pages/profile/profile-content/user-stats-box.scss delete mode 100644 src/renderer/src/pages/profile/profile-hero/profile-hero.css.ts create mode 100644 src/renderer/src/pages/profile/profile-hero/profile-hero.scss delete mode 100644 src/renderer/src/pages/profile/profile.css.ts create mode 100644 src/renderer/src/pages/profile/profile.scss delete mode 100644 src/renderer/src/pages/profile/report-profile/report-profile.css.ts create mode 100644 src/renderer/src/pages/profile/report-profile/report-profile.scss delete mode 100644 src/renderer/src/pages/profile/upload-background-image-button/upload-background-image-button.css.ts create mode 100644 src/renderer/src/pages/profile/upload-background-image-button/upload-background-image-button.scss create mode 100644 src/renderer/src/pages/settings/add-download-source-modal.scss delete mode 100644 src/renderer/src/pages/settings/settings-account.css.ts create mode 100644 src/renderer/src/pages/settings/settings-account.scss create mode 100644 src/renderer/src/pages/settings/settings-behavior.scss delete mode 100644 src/renderer/src/pages/settings/settings-download-sources.css.ts create mode 100644 src/renderer/src/pages/settings/settings-download-sources.scss create mode 100644 src/renderer/src/pages/settings/settings-general.scss delete mode 100644 src/renderer/src/pages/settings/settings-real-debrid.css.ts create mode 100644 src/renderer/src/pages/settings/settings-real-debrid.scss delete mode 100644 src/renderer/src/pages/settings/settings.css.ts create mode 100644 src/renderer/src/pages/settings/settings.scss create mode 100644 src/renderer/src/pages/shared-modals/hydra-cloud/hydra-cloud-modal.scss create mode 100644 src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-item.scss create mode 100644 src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-add-friend.scss create mode 100644 src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-list.scss delete mode 100644 src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.css.ts create mode 100644 src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.scss diff --git a/src/renderer/src/app.scss b/src/renderer/src/app.scss new file mode 100644 index 00000000..18d46dd4 --- /dev/null +++ b/src/renderer/src/app.scss @@ -0,0 +1,136 @@ +@use "./scss/globals.scss"; + +* { + box-sizing: border-box; +} + +::-webkit-scrollbar { + width: 9px; + background-color: globals.$dark-background-color; +} + +::-webkit-scrollbar-track { + background-color: rgba(255, 255, 255, 0.03); +} + +::-webkit-scrollbar-thumb { + background-color: rgba(255, 255, 255, 0.08); + border-radius: 24px; +} + +::-webkit-scrollbar-thumb:hover { + background-color: rgba(255, 255, 255, 0.16); +} + +html, +body, +#root, +main { + height: 100%; +} + +body { + overflow: hidden; + user-select: none; + font-family: + Noto Sans, + sans-serif; + font-size: globals.$body-font-size; + color: globals.$body-color; + margin: 0; +} + +button { + padding: 0; + background-color: transparent; + border: none; + font-family: inherit; +} + +h1, +h2, +h3, +h4, +h5, +h6, +p { + margin: 0; +} + +p { + line-height: 20px; +} + +#root, +main { + display: flex; +} + +#root { + flex-direction: column; +} + +main { + overflow: hidden; +} + +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +label { + font-size: globals.$body-font-size; +} + +img { + -webkit-user-drag: none; +} + +progress[value] { + -webkit-appearance: none; +} + +.container { + width: 100%; + height: 100%; + overflow: hidden; + display: flex; + flex-direction: column; + container-name: globals.$app-container; + container-type: inline-size; + + &__content { + overflow-y: auto; + align-items: center; + display: flex; + flex-direction: column; + position: relative; + height: 100%; + background: linear-gradient( + 0deg, + globals.$dark-background-color 50%, + globals.$background-color 100% + ); + } +} + +.title-bar { + display: flex; + width: 100%; + height: 35px; + min-height: 35px; + background-color: globals.$dark-background-color; + align-items: center; + padding: 0 calc(globals.$spacing-unit * 2); + -webkit-app-region: drag; + z-index: 4; + border-bottom: 1px solid globals.$border-color; + + &__cloud-text { + background: linear-gradient(270deg, #16b195 50%, #3e62c0 100%); + background-clip: text; + color: transparent; + } +} diff --git a/src/renderer/src/app.tsx b/src/renderer/src/app.tsx index b03fb540..f7adac49 100644 --- a/src/renderer/src/app.tsx +++ b/src/renderer/src/app.tsx @@ -12,8 +12,6 @@ import { useUserDetails, } from "@renderer/hooks"; -import * as styles from "./app.css"; - import { Outlet, useLocation, useNavigate } from "react-router-dom"; import { setUserPreferences, @@ -30,6 +28,8 @@ import { downloadSourcesTable } from "./dexie"; import { useSubscription } from "./hooks/use-subscription"; import { HydraCloudModal } from "./pages/shared-modals/hydra-cloud/hydra-cloud-modal"; +import "./app.scss"; + export interface AppProps { children: React.ReactNode; } @@ -240,11 +240,11 @@ export function App() { return ( <> {window.electron.platform === "win32" && ( -
+

Hydra {hasActiveSubscription && ( - Cloud + Cloud )}

@@ -275,10 +275,10 @@ export function App() {
-
+
-
+
diff --git a/src/renderer/src/components/backdrop/backdrop.css.ts b/src/renderer/src/components/backdrop/backdrop.css.ts deleted file mode 100644 index 1ccfe12f..00000000 --- a/src/renderer/src/components/backdrop/backdrop.css.ts +++ /dev/null @@ -1,54 +0,0 @@ -import { keyframes } from "@vanilla-extract/css"; -import { recipe } from "@vanilla-extract/recipes"; - -import { SPACING_UNIT, vars } from "../../theme.css"; - -export const backdropFadeIn = keyframes({ - "0%": { backdropFilter: "blur(0px)", backgroundColor: "rgba(0, 0, 0, 0.5)" }, - "100%": { - backdropFilter: "blur(2px)", - backgroundColor: "rgba(0, 0, 0, 0.7)", - }, -}); - -export const backdropFadeOut = keyframes({ - "0%": { backdropFilter: "blur(2px)", backgroundColor: "rgba(0, 0, 0, 0.7)" }, - "100%": { - backdropFilter: "blur(0px)", - backgroundColor: "rgba(0, 0, 0, 0)", - }, -}); - -export const backdrop = recipe({ - base: { - animationName: backdropFadeIn, - animationDuration: "0.4s", - backgroundColor: "rgba(0, 0, 0, 0.7)", - position: "absolute", - width: "100%", - height: "100%", - display: "flex", - justifyContent: "center", - alignItems: "center", - zIndex: vars.zIndex.backdrop, - top: "0", - padding: `${SPACING_UNIT * 3}px`, - backdropFilter: "blur(2px)", - transition: "all ease 0.2s", - }, - variants: { - closing: { - true: { - animationName: backdropFadeOut, - backdropFilter: "blur(0px)", - backgroundColor: "rgba(0, 0, 0, 0)", - }, - }, - windows: { - true: { - // SPACING_UNIT * 3 + title bar spacing - paddingTop: `${SPACING_UNIT * 3 + 35}px`, - }, - }, - }, -}); diff --git a/src/renderer/src/components/backdrop/backdrop.scss b/src/renderer/src/components/backdrop/backdrop.scss new file mode 100644 index 00000000..d62ff9a9 --- /dev/null +++ b/src/renderer/src/components/backdrop/backdrop.scss @@ -0,0 +1,50 @@ +@use "../../scss/globals.scss"; + +.backdrop { + animation-name: backdrop-fade-in; + animation-duration: 0.4s; + background-color: rgba(0, 0, 0, 0.7); + position: absolute; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + z-index: globals.$backdrop-z-index; + top: 0; + padding: calc(globals.$spacing-unit * 3); + backdrop-filter: blur(2px); + transition: all ease 0.2s; + + &--closing { + animation-name: backdrop-fade-out; + backdrop-filter: blur(0px); + background-color: rgba(0, 0, 0, 0); + } + + &--windows { + padding-top: calc(#{globals.$spacing-unit * 3} + 35); + } +} + +@keyframes backdrop-fade-in { + 0% { + backdrop-filter: blur(0px); + background-color: rgba(0, 0, 0, 0.5); + } + 100% { + backdrop-filter: blur(2px); + background-color: rgba(0, 0, 0, 0.7); + } +} + +@keyframes backdrop-fade-out { + 0% { + backdrop-filter: blur(2px); + background-color: rgba(0, 0, 0, 0.7); + } + 100% { + backdrop-filter: blur(0px); + background-color: rgba(0, 0, 0, 0); + } +} diff --git a/src/renderer/src/components/backdrop/backdrop.tsx b/src/renderer/src/components/backdrop/backdrop.tsx index f498e664..e62d42ee 100644 --- a/src/renderer/src/components/backdrop/backdrop.tsx +++ b/src/renderer/src/components/backdrop/backdrop.tsx @@ -1,4 +1,5 @@ -import * as styles from "./backdrop.css"; +import "./backdrop.scss"; +import cn from "classnames"; export interface BackdropProps { isClosing?: boolean; @@ -8,9 +9,9 @@ export interface BackdropProps { export function Backdrop({ isClosing = false, children }: BackdropProps) { return (
{children} diff --git a/src/renderer/src/components/checkbox-field/checkbox-field.css.ts b/src/renderer/src/components/checkbox-field/checkbox-field.css.ts deleted file mode 100644 index ce7aead8..00000000 --- a/src/renderer/src/components/checkbox-field/checkbox-field.css.ts +++ /dev/null @@ -1,57 +0,0 @@ -import { style } from "@vanilla-extract/css"; - -import { SPACING_UNIT, vars } from "../../theme.css"; -import { recipe } from "@vanilla-extract/recipes"; - -export const checkboxField = style({ - display: "flex", - flexDirection: "row", - alignItems: "center", - gap: `${SPACING_UNIT}px`, - cursor: "pointer", -}); - -export const checkbox = recipe({ - base: { - width: "20px", - height: "20px", - borderRadius: "4px", - backgroundColor: vars.color.darkBackground, - display: "flex", - justifyContent: "center", - alignItems: "center", - position: "relative", - transition: "all ease 0.2s", - border: `solid 1px ${vars.color.border}`, - minWidth: "20px", - minHeight: "20px", - color: vars.color.darkBackground, - ":hover": { - borderColor: "rgba(255, 255, 255, 0.5)", - }, - }, - variants: { - checked: { - true: { - backgroundColor: vars.color.muted, - }, - }, - }, -}); - -export const checkboxInput = style({ - width: "100%", - height: "100%", - position: "absolute", - margin: "0", - padding: "0", - opacity: "0", - cursor: "pointer", -}); - -export const checkboxLabel = style({ - cursor: "pointer", - textOverflow: "ellipsis", - overflow: "hidden", - whiteSpace: "nowrap", -}); diff --git a/src/renderer/src/components/checkbox-field/checkbox-field.scss b/src/renderer/src/components/checkbox-field/checkbox-field.scss new file mode 100644 index 00000000..fb8b4131 --- /dev/null +++ b/src/renderer/src/components/checkbox-field/checkbox-field.scss @@ -0,0 +1,53 @@ +@use "../../scss/globals.scss"; + +.checkbox-field { + display: flex; + flex-direction: row; + align-items: center; + gap: globals.$spacing-unit; + cursor: pointer; + + &:has(input:disabled) { + cursor: not-allowed; + opacity: globals.$disabled-opacity; + } + + &__checkbox { + width: 20px; + height: 20px; + border-radius: 4px; + background-color: globals.$dark-background-color; + display: flex; + justify-content: center; + align-items: center; + position: relative; + transition: all ease 0.2s; + border: solid 1px globals.$border-color; + + &:hover:not(:has(input:disabled)) { + border-color: rgba(255, 255, 255, 0.5); + } + } + + &__input { + width: 100%; + height: 100%; + position: absolute; + margin: 0; + padding: 0; + opacity: 0; + cursor: pointer; + + &:disabled { + cursor: not-allowed; + } + } + + &__label { + cursor: pointer; + + &:has(+ input:disabled) { + cursor: not-allowed; + } + } +} diff --git a/src/renderer/src/components/checkbox-field/checkbox-field.tsx b/src/renderer/src/components/checkbox-field/checkbox-field.tsx index f40c05c2..61cd9fda 100644 --- a/src/renderer/src/components/checkbox-field/checkbox-field.tsx +++ b/src/renderer/src/components/checkbox-field/checkbox-field.tsx @@ -1,6 +1,6 @@ import { useId } from "react"; -import * as styles from "./checkbox-field.css"; import { CheckIcon } from "@primer/octicons-react"; +import "./checkbox-field.scss"; export interface CheckboxFieldProps extends React.DetailedHTMLProps< @@ -14,17 +14,19 @@ export function CheckboxField({ label, ...props }: CheckboxFieldProps) { const id = useId(); return ( -
-
+
+
{props.checked && }
-
diff --git a/src/renderer/src/components/confirmation-modal/confirmation-modal.css.ts b/src/renderer/src/components/confirmation-modal/confirmation-modal.css.ts deleted file mode 100644 index a9aec403..00000000 --- a/src/renderer/src/components/confirmation-modal/confirmation-modal.css.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { SPACING_UNIT } from "../../theme.css"; -import { style } from "@vanilla-extract/css"; - -export const actions = style({ - display: "flex", - alignSelf: "flex-end", - gap: `${SPACING_UNIT * 2}px`, -}); - -export const descriptionText = style({ - fontSize: "16px", - lineHeight: "24px", -}); diff --git a/src/renderer/src/components/confirmation-modal/confirmation-modal.scss b/src/renderer/src/components/confirmation-modal/confirmation-modal.scss new file mode 100644 index 00000000..428818c4 --- /dev/null +++ b/src/renderer/src/components/confirmation-modal/confirmation-modal.scss @@ -0,0 +1,17 @@ +@use "../../scss/globals.scss"; + +.confirmation-modal { + display: flex; + flex-direction: column; + gap: calc(globals.$spacing-unit * 2); + + &__actions { + display: flex; + align-self: flex-end; + gap: calc(globals.$spacing-unit * 2); + } + &__description { + font-size: 16px; + line-height: 24px; + } +} diff --git a/src/renderer/src/components/confirmation-modal/confirmation-modal.tsx b/src/renderer/src/components/confirmation-modal/confirmation-modal.tsx index 31929c60..eaf3526a 100644 --- a/src/renderer/src/components/confirmation-modal/confirmation-modal.tsx +++ b/src/renderer/src/components/confirmation-modal/confirmation-modal.tsx @@ -1,7 +1,7 @@ import { Button } from "../button/button"; import { Modal, type ModalProps } from "../modal/modal"; -import * as styles from "./confirmation-modal.css"; +import "./confirmation-modal.scss"; export interface ConfirmationModalProps extends Omit { confirmButtonLabel: string; @@ -31,10 +31,10 @@ export function ConfirmationModal({ return ( -
-

{descriptionText}

+
+

{descriptionText}

-
+
diff --git a/src/renderer/src/components/game-card/game-card.css.ts b/src/renderer/src/components/game-card/game-card.css.ts deleted file mode 100644 index c810130d..00000000 --- a/src/renderer/src/components/game-card/game-card.css.ts +++ /dev/null @@ -1,106 +0,0 @@ -import { style } from "@vanilla-extract/css"; - -import { SPACING_UNIT, vars } from "../../theme.css"; - -export const card = style({ - width: "100%", - height: "180px", - boxShadow: "0px 0px 15px 0px #000000", - overflow: "hidden", - borderRadius: "4px", - transition: "all ease 0.2s", - border: `solid 1px ${vars.color.border}`, - cursor: "pointer", - zIndex: "1", - ":active": { - opacity: vars.opacity.active, - }, -}); - -export const backdrop = style({ - background: "linear-gradient(0deg, rgba(0, 0, 0, 0.7) 50%, transparent 100%)", - width: "100%", - height: "100%", - display: "flex", - justifyContent: "flex-end", - flexDirection: "column", - position: "relative", -}); - -export const cover = style({ - width: "100%", - height: "100%", - objectFit: "cover", - objectPosition: "center", - position: "absolute", - zIndex: "-1", - transition: "all ease 0.2s", - selectors: { - [`${card}:hover &`]: { - transform: "scale(1.05)", - }, - }, -}); - -export const content = style({ - color: "#DADBE1", - padding: `${SPACING_UNIT}px ${SPACING_UNIT * 2}px`, - display: "flex", - alignItems: "flex-start", - gap: `${SPACING_UNIT}px`, - flexDirection: "column", - transition: "all ease 0.2s", - transform: "translateY(24px)", - selectors: { - [`${card}:hover &`]: { - transform: "translateY(0px)", - }, - }, -}); - -export const title = style({ - fontSize: "16px", - fontWeight: "bold", - textAlign: "left", -}); - -export const downloadOptions = style({ - display: "flex", - margin: "0", - padding: "0", - gap: `${SPACING_UNIT}px`, - flexWrap: "wrap", - listStyle: "none", -}); - -export const specifics = style({ - display: "flex", - gap: `${SPACING_UNIT * 2}px`, - justifyContent: "center", -}); - -export const specificsItem = style({ - gap: `${SPACING_UNIT}px`, - display: "flex", - color: vars.color.muted, - fontSize: "12px", - alignItems: "flex-end", -}); - -export const titleContainer = style({ - display: "flex", - alignItems: "center", - gap: `${SPACING_UNIT}px`, - color: vars.color.muted, -}); - -export const shopIcon = style({ - width: "20px", - height: "20px", - minWidth: "20px", -}); - -export const noDownloadsLabel = style({ - color: vars.color.body, - fontWeight: "bold", -}); diff --git a/src/renderer/src/components/game-card/game-card.scss b/src/renderer/src/components/game-card/game-card.scss new file mode 100644 index 00000000..ee4a22b1 --- /dev/null +++ b/src/renderer/src/components/game-card/game-card.scss @@ -0,0 +1,102 @@ +@use "../../scss/globals.scss"; + +.game-card { + width: 100%; + height: 180px; + box-shadow: 0px 0px 15px 0px #000000; + overflow: hidden; + border-radius: 4px; + transition: all ease 0.2s; + border: solid 1px globals.$border-color; + cursor: pointer; + z-index: 1; + + &:active { + opacity: globals.$active-opacity; + } + + &__backdrop { + background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 50%, transparent 100%); + width: 100%; + height: 100%; + display: flex; + justify-content: flex-end; + flex-direction: column; + position: relative; + } + + &__cover { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; + position: absolute; + z-index: -1; + transition: all ease 0.2s; + } + + &__content { + color: #dadbe1; + padding: globals.$spacing-unit calc(globals.$spacing-unit * 2); + display: flex; + align-items: flex-start; + gap: globals.$spacing-unit; + flex-direction: column; + transition: all ease 0.2s; + transform: translateY(24px); + } + + &__title { + font-size: 16px; + font-weight: bold; + text-align: left; + } + + &__download-options { + display: flex; + margin: 0; + padding: 0; + gap: globals.$spacing-unit; + flex-wrap: wrap; + list-style: none; + } + + &__specifics { + display: flex; + gap: calc(globals.$spacing-unit * 2); + justify-content: center; + } + + &__specifics-item { + gap: globals.$spacing-unit; + display: flex; + color: globals.$muted-color; + font-size: 12px; + align-items: flex-end; + } + + &__title-container { + display: flex; + align-items: center; + gap: globals.$spacing-unit; + color: globals.$muted-color; + } + + &__shop-icon { + width: 20px; + height: 20px; + min-width: 20px; + } + + &__no-download-label { + color: globals.$body-color; + font-weight: bold; + } + + &:hover &__cover { + transform: scale(1.05); + } + &:hover &__content { + transform: translateY(0px); + } +} diff --git a/src/renderer/src/components/game-card/game-card.tsx b/src/renderer/src/components/game-card/game-card.tsx index d51a322b..12dcda49 100644 --- a/src/renderer/src/components/game-card/game-card.tsx +++ b/src/renderer/src/components/game-card/game-card.tsx @@ -3,7 +3,8 @@ import type { GameStats } from "@types"; import SteamLogo from "@renderer/assets/steam-logo.svg?react"; -import * as styles from "./game-card.css"; +import "./game-card.scss"; + import { useTranslation } from "react-i18next"; import { Badge } from "../badge/badge"; import { useCallback, useState } from "react"; @@ -19,7 +20,7 @@ export interface GameCardProps } const shopIcon = { - steam: , + steam: , }; export function GameCard({ game, ...props }: GameCardProps) { @@ -48,25 +49,25 @@ export function GameCard({ game, ...props }: GameCardProps) { diff --git a/src/renderer/src/components/header/header.css.ts b/src/renderer/src/components/header/header.css.ts deleted file mode 100644 index 12855986..00000000 --- a/src/renderer/src/components/header/header.css.ts +++ /dev/null @@ -1,182 +0,0 @@ -import type { ComplexStyleRule } from "@vanilla-extract/css"; -import { keyframes, style } from "@vanilla-extract/css"; -import { recipe } from "@vanilla-extract/recipes"; - -import { SPACING_UNIT, vars } from "../../theme.css"; - -export const slideIn = keyframes({ - "0%": { transform: "translateX(20px)", opacity: "0" }, - "100%": { - transform: "translateX(0)", - opacity: "1", - }, -}); - -export const slideOut = keyframes({ - "0%": { transform: "translateX(0px)", opacity: "1" }, - "100%": { - transform: "translateX(20px)", - opacity: "0", - }, -}); - -export const header = recipe({ - base: { - display: "flex", - justifyContent: "space-between", - alignItems: "center", - gap: `${SPACING_UNIT * 2}px`, - WebkitAppRegion: "drag", - width: "100%", - padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 3}px`, - color: vars.color.muted, - borderBottom: `solid 1px ${vars.color.border}`, - backgroundColor: vars.color.darkBackground, - } as ComplexStyleRule, - variants: { - draggingDisabled: { - true: { - WebkitAppRegion: "no-drag", - } as ComplexStyleRule, - }, - isWindows: { - true: { - WebkitAppRegion: "no-drag", - } as ComplexStyleRule, - }, - }, -}); - -export const search = recipe({ - base: { - backgroundColor: vars.color.background, - display: "inline-flex", - transition: "all ease 0.2s", - width: "200px", - alignItems: "center", - borderRadius: "8px", - border: `solid 1px ${vars.color.border}`, - height: "40px", - WebkitAppRegion: "no-drag", - } as ComplexStyleRule, - variants: { - focused: { - true: { - width: "250px", - borderColor: "#DADBE1", - }, - false: { - ":hover": { - borderColor: "rgba(255, 255, 255, 0.5)", - }, - }, - }, - }, -}); - -export const searchInput = style({ - backgroundColor: "transparent", - border: "none", - width: "100%", - height: "100%", - outline: "none", - color: "#DADBE1", - cursor: "default", - fontFamily: "inherit", - textOverflow: "ellipsis", - ":focus": { - cursor: "text", - }, -}); - -export const actionButton = style({ - color: "inherit", - cursor: "pointer", - transition: "all ease 0.2s", - padding: `${SPACING_UNIT}px`, - ":hover": { - color: "#DADBE1", - }, -}); - -export const section = style({ - display: "flex", - alignItems: "center", - gap: `${SPACING_UNIT * 2}px`, - height: "100%", - overflow: "hidden", -}); - -export const backButton = recipe({ - base: { - color: vars.color.body, - cursor: "pointer", - WebkitAppRegion: "no-drag", - position: "absolute", - transition: "transform ease 0.2s", - animationDuration: "0.2s", - width: "16px", - height: "16px", - display: "flex", - alignItems: "center", - } as ComplexStyleRule, - variants: { - enabled: { - true: { - animationName: slideIn, - }, - false: { - opacity: "0", - pointerEvents: "none", - animationName: slideOut, - }, - }, - }, -}); - -export const title = recipe({ - base: { - transition: "all ease 0.2s", - overflow: "hidden", - textOverflow: "ellipsis", - width: "100%", - }, - variants: { - hasBackButton: { - true: { - transform: "translateX(28px)", - width: "calc(100% - 28px)", - }, - }, - }, -}); - -export const subheader = style({ - borderBottom: `solid 1px ${vars.color.border}`, - padding: `${SPACING_UNIT / 2}px ${SPACING_UNIT * 3}px`, -}); - -export const newVersionButton = style({ - display: "flex", - alignItems: "center", - justifyContent: "center", - gap: `${SPACING_UNIT}px`, - color: vars.color.body, - fontSize: "12px", - ":hover": { - textDecoration: "underline", - cursor: "pointer", - }, -}); - -export const newVersionLink = style({ - display: "flex", - alignItems: "center", - gap: `${SPACING_UNIT}px`, - color: "#8e919b", - fontSize: "12px", -}); - -export const newVersionIcon = style({ - color: vars.color.success, -}); diff --git a/src/renderer/src/components/header/header.scss b/src/renderer/src/components/header/header.scss new file mode 100644 index 00000000..ef3090e3 --- /dev/null +++ b/src/renderer/src/components/header/header.scss @@ -0,0 +1,133 @@ +@use "../../scss/globals.scss"; + +.header { + display: flex; + justify-content: space-between; + align-items: center; + gap: calc(globals.$spacing-unit * 2); + -webkit-app-region: drag; + width: 100%; + padding: calc(globals.$spacing-unit * 2) calc(globals.$spacing-unit * 3); + color: globals.$muted-color; + border-bottom: solid 1px globals.$border-color; + background-color: globals.$dark-background-color; + + &--dragging-disabled { + -webkit-app-region: no-drag; + } + + &--is-windows { + -webkit-app-region: no-drag; + } + + &__search { + background-color: globals.$background-color; + display: inline-flex; + transition: all ease 0.2s; + width: 200px; + align-items: center; + border-radius: 8px; + border: solid 1px globals.$border-color; + height: 40px; + -webkit-app-region: no-drag; + &:hover { + border-color: rgba(255, 255, 255, 0.5); + } + + &--focused { + width: 250px; + border-color: #dadbe1; + } + } + + &__search-input { + background-color: transparent; + border: none; + width: 100%; + height: 100%; + outline: none; + color: #dadbe1; + cursor: default; + font-family: inherit; + text-overflow: ellipsis; + + &:focus { + cursor: text; + } + } + + &__action-button { + color: inherit; + cursor: pointer; + transition: all ease 0.2s; + padding: globals.$spacing-unit; + + &:hover { + color: #dadbe1; + } + } + + &__section { + display: flex; + align-items: center; + gap: calc(globals.$spacing-unit * 2); + height: 100%; + overflow: hidden; + } + + &__back-button { + color: globals.$body-color; + cursor: pointer; + -webkit-app-region: no-drag; + position: absolute; + transition: transform ease 0.2s; + animation-duration: 0.2s; + width: 16px; + height: 16px; + display: flex; + align-items: center; + opacity: 0; + pointer-events: none; + animation-name: slide-out; + + &--enabled { + animation: slide-in; + opacity: 1; + pointer-events: all; + } + } + + &__title { + transition: all ease 0.2s; + overflow: hidden; + text-overflow: ellipsis; + width: 100%; + + &--has-back-button { + transform: translateX(28px); + width: calc(100% - 28px); + } + } +} + +@keyframes slide-in { + 0% { + transform: translateX(20px); + opacity: 0; + } + 100% { + transform: translateX(0); + opacity: 1; + } +} + +@keyframes slide-out { + 0% { + transform: translateX(0px); + opacity: 1; + } + 100% { + transform: translateX(20px); + opacity: 0; + } +} diff --git a/src/renderer/src/components/header/header.tsx b/src/renderer/src/components/header/header.tsx index 3b5615f0..667dc30e 100644 --- a/src/renderer/src/components/header/header.tsx +++ b/src/renderer/src/components/header/header.tsx @@ -5,9 +5,10 @@ import { ArrowLeftIcon, SearchIcon, XIcon } from "@primer/octicons-react"; import { useAppDispatch, useAppSelector } from "@renderer/hooks"; -import * as styles from "./header.css"; +import "./header.scss"; import { AutoUpdateSubHeader } from "./auto-update-sub-header"; import { setFilters } from "@renderer/features"; +import cn from "classnames"; const pathTitle: Record = { "/": "home", @@ -75,16 +76,16 @@ export function Header() { return ( <>
-
+
-
-
+
+
diff --git a/src/renderer/src/components/hero/hero.css.ts b/src/renderer/src/components/hero/hero.css.ts deleted file mode 100644 index eaf0a101..00000000 --- a/src/renderer/src/components/hero/hero.css.ts +++ /dev/null @@ -1,60 +0,0 @@ -import { style } from "@vanilla-extract/css"; - -import { SPACING_UNIT, vars } from "../../theme.css"; - -export const hero = style({ - width: "100%", - height: "280px", - minHeight: "280px", - maxHeight: "280px", - borderRadius: "4px", - color: "#DADBE1", - overflow: "hidden", - boxShadow: "0px 0px 15px 0px #000000", - cursor: "pointer", - border: `solid 1px ${vars.color.border}`, - zIndex: "1", -}); - -export const heroMedia = style({ - objectFit: "cover", - objectPosition: "center", - position: "absolute", - zIndex: "-1", - width: "100%", - height: "100%", - transition: "all ease 0.2s", - imageRendering: "revert", - selectors: { - [`${hero}:hover &`]: { - transform: "scale(1.02)", - }, - }, -}); - -export const backdrop = style({ - width: "100%", - height: "100%", - background: "linear-gradient(0deg, rgba(0, 0, 0, 0.8) 25%, transparent 100%)", - position: "relative", - display: "flex", - overflow: "hidden", -}); - -export const description = style({ - maxWidth: "700px", - color: vars.color.muted, - textAlign: "left", - lineHeight: "20px", - marginTop: `${SPACING_UNIT * 2}px`, -}); - -export const content = style({ - width: "100%", - height: "100%", - padding: `${SPACING_UNIT * 4}px ${SPACING_UNIT * 3}px`, - gap: `${SPACING_UNIT * 2}px`, - display: "flex", - flexDirection: "column", - justifyContent: "flex-end", -}); diff --git a/src/renderer/src/components/hero/hero.scss b/src/renderer/src/components/hero/hero.scss new file mode 100644 index 00000000..ea14c059 --- /dev/null +++ b/src/renderer/src/components/hero/hero.scss @@ -0,0 +1,56 @@ +@use "../../scss/globals.scss"; + +.hero { + width: 100%; + height: 280px; + min-height: 280px; + max-height: 280px; + border-radius: 4px; + color: #dadbe1; + overflow: hidden; + box-shadow: 0px 0px 15px 0px #000000; + cursor: pointer; + border: solid 1px globals.$border-color; + z-index: 1; + + &__media { + object-fit: cover; + object-position: center; + position: absolute; + z-index: -1; + width: 100%; + height: 100%; + transition: all ease 0.2s; + image-rendering: revert; + } + &:hover &__media { + transform: scale(1.02); + } + + &__backdrop { + width: 100%; + height: 100%; + background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 25%, transparent 100%); + position: relative; + display: flex; + overflow: hidden; + } + + &__description { + max-width: 700px; + color: globals.$muted-color; + text-align: left; + line-height: 20px; + margin-top: calc(globals.$spacing-unit * 2); + } + + &__content { + width: 100%; + height: 100%; + padding: calc(globals.$spacing-unit * 4) calc(globals.$spacing-unit * 3); + gap: calc(globals.$spacing-unit * 2); + display: flex; + flex-direction: column; + justify-content: flex-end; + } +} diff --git a/src/renderer/src/components/hero/hero.tsx b/src/renderer/src/components/hero/hero.tsx index 9bc5514d..b7a75c47 100644 --- a/src/renderer/src/components/hero/hero.tsx +++ b/src/renderer/src/components/hero/hero.tsx @@ -1,9 +1,9 @@ import { useNavigate } from "react-router-dom"; -import * as styles from "./hero.css"; import { useEffect, useState } from "react"; import type { TrendingGame } from "@types"; import { useTranslation } from "react-i18next"; import Skeleton from "react-loading-skeleton"; +import "./hero.scss"; export function Hero() { const [featuredGameDetails, setFeaturedGameDetails] = useState< @@ -29,7 +29,7 @@ export function Hero() { }, [i18n.language]); if (isLoading) { - return ; + return ; } if (featuredGameDetails?.length) { @@ -37,17 +37,17 @@ export function Hero() { diff --git a/src/renderer/src/components/link/link.css.ts b/src/renderer/src/components/link/link.css.ts deleted file mode 100644 index 4f0e4c41..00000000 --- a/src/renderer/src/components/link/link.css.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { style } from "@vanilla-extract/css"; - -export const link = style({ - textDecoration: "none", - color: "#C0C1C7", - ":hover": { - textDecoration: "underline", - }, -}); diff --git a/src/renderer/src/components/link/link.scss b/src/renderer/src/components/link/link.scss new file mode 100644 index 00000000..170f10f6 --- /dev/null +++ b/src/renderer/src/components/link/link.scss @@ -0,0 +1,7 @@ +.link { + text-decoration: none; + color: #c0c1c7; + &:hover { + text-decoration: underline; + } +} diff --git a/src/renderer/src/components/link/link.tsx b/src/renderer/src/components/link/link.tsx index ffd5f89c..1c3bad76 100644 --- a/src/renderer/src/components/link/link.tsx +++ b/src/renderer/src/components/link/link.tsx @@ -1,6 +1,6 @@ import { Link as ReactRouterDomLink, LinkProps } from "react-router-dom"; import cn from "classnames"; -import * as styles from "./link.css"; +import "./link.scss"; export function Link({ children, to, className, ...props }: LinkProps) { const openExternal = (event: React.MouseEvent) => { @@ -12,7 +12,7 @@ export function Link({ children, to, className, ...props }: LinkProps) { return ( @@ -22,11 +22,7 @@ export function Link({ children, to, className, ...props }: LinkProps) { } return ( - + {children} ); diff --git a/src/renderer/src/components/modal/modal.css.ts b/src/renderer/src/components/modal/modal.css.ts deleted file mode 100644 index d9d14fda..00000000 --- a/src/renderer/src/components/modal/modal.css.ts +++ /dev/null @@ -1,78 +0,0 @@ -import { keyframes, style } from "@vanilla-extract/css"; -import { recipe } from "@vanilla-extract/recipes"; - -import { SPACING_UNIT, vars } from "../../theme.css"; - -export const scaleFadeIn = keyframes({ - "0%": { opacity: "0", scale: "0.5" }, - "100%": { - opacity: "1", - scale: "1", - }, -}); - -export const scaleFadeOut = keyframes({ - "0%": { opacity: "1", scale: "1" }, - "100%": { - opacity: "0", - scale: "0.5", - }, -}); - -export const modal = recipe({ - base: { - animation: `${scaleFadeIn} 0.2s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running`, - backgroundColor: vars.color.background, - borderRadius: "4px", - minWidth: "400px", - maxWidth: "600px", - color: vars.color.body, - maxHeight: "100%", - border: `solid 1px ${vars.color.border}`, - overflow: "hidden", - display: "flex", - flexDirection: "column", - }, - variants: { - closing: { - true: { - animationName: scaleFadeOut, - opacity: "0", - }, - }, - large: { - true: { - width: "800px", - maxWidth: "800px", - }, - }, - }, -}); - -export const modalContent = style({ - height: "100%", - overflow: "auto", - padding: `${SPACING_UNIT * 3}px ${SPACING_UNIT * 2}px`, -}); - -export const modalHeader = style({ - display: "flex", - gap: `${SPACING_UNIT}px`, - padding: `${SPACING_UNIT * 2}px`, - borderBottom: `solid 1px ${vars.color.border}`, - justifyContent: "space-between", - alignItems: "center", -}); - -export const closeModalButton = style({ - cursor: "pointer", - transition: "all ease 0.2s", - alignSelf: "flex-start", - ":hover": { - opacity: "0.75", - }, -}); - -export const closeModalButtonIcon = style({ - color: vars.color.body, -}); diff --git a/src/renderer/src/components/modal/modal.scss b/src/renderer/src/components/modal/modal.scss new file mode 100644 index 00000000..dbaee730 --- /dev/null +++ b/src/renderer/src/components/modal/modal.scss @@ -0,0 +1,77 @@ +@use "../../scss/globals.scss"; + +.modal { + animation: scale-fade-in 0.2s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none + running; + background-color: globals.$background-color; + border-radius: 4px; + min-width: 400px; + max-width: 600px; + color: globals.$body-color; + max-height: 100%; + border: solid 1px globals.$border-color; + overflow: hidden; + display: flex; + flex-direction: column; + + &--closing { + animation-name: scale-fade-out; + opacity: 0; + } + + &--large { + width: 800px; + max-width: 800px; + } + + &__content { + height: 100%; + overflow: auto; + padding: calc(globals.$spacing-unit * 3) calc(globals.$spacing-unit * 2); + } + + &__header { + display: flex; + gap: globals.$spacing-unit; + padding: calc(globals.$spacing-unit * 2); + border-bottom: solid 1px globals.$border-color; + justify-content: space-between; + align-items: center; + } + + &__close-button { + cursor: pointer; + transition: all ease 0.2s; + align-self: flex-start; + + &:hover { + opacity: 0.75; + } + } + + &__close-button-icon { + color: globals.$body-color; + } +} + +@keyframes scale-fade-in { + 0% { + opacity: 0; + scale: 0.5; + } + 100% { + opacity: 1; + scale: 1; + } +} + +@keyframes scale-fade-out { + 0% { + opacity: 1; + scale: 1; + } + 100% { + opacity: 0; + scale: 0.5; + } +} diff --git a/src/renderer/src/components/modal/modal.tsx b/src/renderer/src/components/modal/modal.tsx index af09ef38..27a946d8 100644 --- a/src/renderer/src/components/modal/modal.tsx +++ b/src/renderer/src/components/modal/modal.tsx @@ -2,10 +2,11 @@ import { useCallback, useEffect, useRef, useState } from "react"; import { createPortal } from "react-dom"; import { XIcon } from "@primer/octicons-react"; -import * as styles from "./modal.css"; +import "./modal.scss"; import { Backdrop } from "../backdrop/backdrop"; import { useTranslation } from "react-i18next"; +import cn from "classnames"; export interface ModalProps { visible: boolean; @@ -109,14 +110,17 @@ export function Modal({ return createPortal(
-
+

{title}

{description &&

{description}

} @@ -125,13 +129,13 @@ export function Modal({
-
{children}
+
{children}
, document.body diff --git a/src/renderer/src/components/select-field/select-field.css.ts b/src/renderer/src/components/select-field/select-field.css.ts deleted file mode 100644 index 7acd4e98..00000000 --- a/src/renderer/src/components/select-field/select-field.css.ts +++ /dev/null @@ -1,59 +0,0 @@ -import { style } from "@vanilla-extract/css"; -import { recipe } from "@vanilla-extract/recipes"; - -import { SPACING_UNIT, vars } from "../../theme.css"; - -export const select = recipe({ - base: { - display: "inline-flex", - transition: "all ease 0.2s", - width: "fit-content", - alignItems: "center", - borderRadius: "8px", - border: `1px solid ${vars.color.border}`, - height: "40px", - minHeight: "40px", - }, - variants: { - focused: { - true: { - borderColor: "#DADBE1", - }, - false: { - ":hover": { - borderColor: "rgba(255, 255, 255, 0.5)", - }, - }, - }, - theme: { - primary: { - backgroundColor: vars.color.darkBackground, - }, - dark: { - backgroundColor: vars.color.background, - }, - }, - }, -}); - -export const option = style({ - backgroundColor: vars.color.darkBackground, - borderRight: "4px solid", - borderColor: "transparent", - borderRadius: "8px", - width: "fit-content", - height: "100%", - outline: "none", - color: "#DADBE1", - cursor: "default", - fontFamily: "inherit", - fontSize: vars.size.body, - textOverflow: "ellipsis", - padding: `${SPACING_UNIT}px`, -}); - -export const label = style({ - marginBottom: `${SPACING_UNIT}px`, - display: "block", - color: vars.color.body, -}); diff --git a/src/renderer/src/components/select-field/select-field.scss b/src/renderer/src/components/select-field/select-field.scss new file mode 100644 index 00000000..38dfc65b --- /dev/null +++ b/src/renderer/src/components/select-field/select-field.scss @@ -0,0 +1,49 @@ +@use "../../scss/globals.scss"; + +.select-field { + display: inline-flex; + transition: all ease 0.2s; + width: fit-content; + align-items: center; + border-radius: 8px; + border: 1px solid globals.$border-color; + height: 40px; + min-height: 40px; + &:hover { + border-color: rgba(255, 255, 255, 0.5); + } + + &--focused { + border-color: #dadbe1; + } + + &--primary { + background-color: globals.$dark-background-color; + } + + &--dark { + background-color: globals.$background-color; + } + + &__option { + background-color: globals.$dark-background-color; + border-right: 4px solid; + border-color: transparent; + border-radius: 8px; + width: fit-content; + height: 100%; + outline: none; + color: #dadbe1; + cursor: default; + font-family: inherit; + font-size: globals.$body-font-size; + text-overflow: ellipsis; + padding: globals.$spacing-unit; + } + + &__label { + margin-bottom: globals.$spacing-unit; + display: block; + color: globals.$body-color; + } +} diff --git a/src/renderer/src/components/select-field/select-field.tsx b/src/renderer/src/components/select-field/select-field.tsx index fb5038f6..16b266cd 100644 --- a/src/renderer/src/components/select-field/select-field.tsx +++ b/src/renderer/src/components/select-field/select-field.tsx @@ -1,13 +1,13 @@ import { useId, useState } from "react"; -import type { RecipeVariants } from "@vanilla-extract/recipes"; -import * as styles from "./select-field.css"; +import "./select-field.scss"; +import cn from "classnames"; export interface SelectProps extends React.DetailedHTMLProps< React.SelectHTMLAttributes, HTMLSelectElement > { - theme?: NonNullable>["theme"]; + theme?: "primary" | "dark"; label?: string; options?: { key: string; value: string; label: string }[]; } @@ -25,16 +25,20 @@ export function SelectField({ return (
{label && ( -