From c9e99d3852ed6794cc40ebcf4b2eda1ee57d5e20 Mon Sep 17 00:00:00 2001 From: bumyy Date: Thu, 7 Nov 2024 20:23:03 -0300 Subject: [PATCH 01/25] feat: migrated to scss --- src/renderer/src/app.scss | 130 +++++++++++++ src/renderer/src/app.tsx | 2 + .../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 | 41 ---- .../checkbox-field/checkbox-field.scss | 39 ++++ .../checkbox-field/checkbox-field.tsx | 10 +- .../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 | 132 +++++++++++++ src/renderer/src/components/header/header.tsx | 34 ++-- 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 | 126 ------------ .../src/components/sidebar/sidebar.scss | 110 +++++++++++ .../src/components/sidebar/sidebar.tsx | 44 +++-- .../components/text-field/text-field.css.ts | 89 --------- .../src/components/text-field/text-field.scss | 75 ++++++++ .../src/components/text-field/text-field.tsx | 35 ++-- .../src/components/toast/toast.css.ts | 87 --------- src/renderer/src/components/toast/toast.scss | 87 +++++++++ src/renderer/src/components/toast/toast.tsx | 23 ++- .../profile-content/profile-content.css.ts | 11 +- src/renderer/src/scss/globals.scss | 5 + 45 files changed, 1214 insertions(+), 1112 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 diff --git a/src/renderer/src/app.scss b/src/renderer/src/app.scss new file mode 100644 index 00000000..2f383d04 --- /dev/null +++ b/src/renderer/src/app.scss @@ -0,0 +1,130 @@ +@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; +} diff --git a/src/renderer/src/app.tsx b/src/renderer/src/app.tsx index 7c572a56..ce184474 100644 --- a/src/renderer/src/app.tsx +++ b/src/renderer/src/app.tsx @@ -2,6 +2,8 @@ import { useCallback, useContext, useEffect, useRef } from "react"; import { Sidebar, BottomPanel, Header, Toast } from "@renderer/components"; +import "./app.scss"; + import { useAppDispatch, useAppSelector, 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 606b226a..00000000 --- a/src/renderer/src/components/checkbox-field/checkbox-field.css.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { style } from "@vanilla-extract/css"; - -import { SPACING_UNIT, vars } from "../../theme.css"; - -export const checkboxField = style({ - display: "flex", - flexDirection: "row", - alignItems: "center", - gap: `${SPACING_UNIT}px`, - cursor: "pointer", -}); - -export const checkbox = style({ - 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}`, - ":hover": { - borderColor: "rgba(255, 255, 255, 0.5)", - }, -}); - -export const checkboxInput = style({ - width: "100%", - height: "100%", - position: "absolute", - margin: "0", - padding: "0", - opacity: "0", - cursor: "pointer", -}); - -export const checkboxLabel = style({ - cursor: "pointer", -}); 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..06235687 --- /dev/null +++ b/src/renderer/src/components/checkbox-field/checkbox-field.scss @@ -0,0 +1,39 @@ +@use "../../scss/globals.scss"; + +.checkbox-field { + display: flex; + flex-direction: row; + align-items: center; + gap: globals.$spacing-unit; + cursor: pointer; + + &__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 { + border-color: rgba(255, 255, 255, 0.5); + } + } + + &__input { + width: 100%; + height: 100%; + position: absolute; + margin: 0; + padding: 0; + opacity: 0; + cursor: pointer; + } + + &__label { + cursor: pointer; + } +} diff --git a/src/renderer/src/components/checkbox-field/checkbox-field.tsx b/src/renderer/src/components/checkbox-field/checkbox-field.tsx index bb81a910..3e80f0aa 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,17 @@ 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 869cb2d6..62290704 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 { CatalogueEntry, GameRepack, 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, useContext, useEffect, useState } from "react"; @@ -19,7 +20,7 @@ export interface GameCardProps } const shopIcon = { - steam: , + steam: , }; export function GameCard({ game, ...props }: GameCardProps) { @@ -56,25 +57,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..065aed8d --- /dev/null +++ b/src/renderer/src/components/header/header.scss @@ -0,0 +1,132 @@ +@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; + + &--dragging-disabled { + -webkit-app-region: no-drag; + } + + &--is-windows { + -webkit-app-region: no-drag; + } + + &__search { + background-color: globals.$dark-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 e0721df4..83d32caa 100644 --- a/src/renderer/src/components/header/header.tsx +++ b/src/renderer/src/components/header/header.tsx @@ -5,9 +5,11 @@ import { ArrowLeftIcon, SearchIcon, XIcon } from "@primer/octicons-react"; import { useAppDispatch, useAppSelector } from "@renderer/hooks"; -import * as styles from "./header.css"; +import "./header.scss"; + import { clearSearch } from "@renderer/features"; import { AutoUpdateSubHeader } from "./auto-update-sub-header"; +import cn from "classnames"; export interface HeaderProps { onSearch: (query: string) => void; @@ -68,16 +70,16 @@ export function Header({ onSearch, onClear, search }: HeaderProps) { 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 eb2894de..3eceedb3 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; @@ -102,13 +103,16 @@ export function Modal({ return createPortal(
-
+

{title}

{description &&

{description}

} @@ -117,13 +121,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 && ( -
-
- {t("my_library")} +
+ {t("my_library")} - + -
    - {filteredLibrary.map((game) => ( -
  • - -
    • - ))} -
-
+ + {getGameTitle(game)} + + + + ))} + +
+
+ {hasActiveSubscription && ( + + )} +
)} + + + handleChange({ disableNsfwAlert: !form.disableNsfwAlert }) + } + /> ); } diff --git a/src/renderer/src/vite-env.d.ts b/src/renderer/src/vite-env.d.ts index b1f45c78..304dde0f 100644 --- a/src/renderer/src/vite-env.d.ts +++ b/src/renderer/src/vite-env.d.ts @@ -1,2 +1,10 @@ /// /// + +interface ImportMetaEnv { + readonly RENDERER_VITE_INTERCOM_APP_ID: string; +} + +interface ImportMeta { + readonly env: ImportMetaEnv; +} diff --git a/src/shared/index.ts b/src/shared/index.ts index 1f17ac56..173867df 100644 --- a/src/shared/index.ts +++ b/src/shared/index.ts @@ -55,6 +55,9 @@ export const removeDuplicateSpaces = (name: string) => export const replaceDotsWithSpace = (name: string) => name.replace(/\./g, " "); +export const replaceNbspWithSpace = (name: string) => + name.replace(new RegExp(String.fromCharCode(160), "g"), " "); + export const replaceUnderscoreWithSpace = (name: string) => name.replace(/_/g, " "); @@ -69,6 +72,7 @@ export const formatName = pipe( removeSpecialEditionFromName, replaceUnderscoreWithSpace, replaceDotsWithSpace, + replaceNbspWithSpace, (str) => str.replace(/DIRECTOR'S CUT/g, ""), removeSymbolsFromName, removeDuplicateSpaces, diff --git a/src/types/howlongtobeat.types.ts b/src/types/how-long-to-beat.types.ts similarity index 100% rename from src/types/howlongtobeat.types.ts rename to src/types/how-long-to-beat.types.ts diff --git a/src/types/index.ts b/src/types/index.ts index 9bb25e3f..c0269cd3 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -161,6 +161,7 @@ export interface UserPreferences { preferQuitInsteadOfHiding: boolean; runAtStartup: boolean; startMinimized: boolean; + disableNsfwAlert: boolean; } export interface Steam250Game { @@ -245,6 +246,7 @@ export interface Subscription { export interface UserDetails { id: string; username: string; + email: string | null; displayName: string; profileImageUrl: string | null; backgroundImageUrl: string | null; @@ -257,6 +259,7 @@ export interface UserProfile { id: string; displayName: string; profileImageUrl: string | null; + email: string | null; backgroundImageUrl: string | null; profileVisibility: ProfileVisibility; libraryGames: UserGame[]; @@ -373,4 +376,4 @@ export interface ComparedAchievements { export * from "./steam.types"; export * from "./real-debrid.types"; export * from "./ludusavi.types"; -export * from "./howlongtobeat.types"; +export * from "./how-long-to-beat.types"; diff --git a/yarn.lock b/yarn.lock index d241181c..0220a873 100644 --- a/yarn.lock +++ b/yarn.lock @@ -480,11 +480,6 @@ resolved "https://registry.yarnpkg.com/@bufbuild/protobuf/-/protobuf-2.2.2.tgz#1a6d89603fb215dc4d4178052d05b30b83c75402" integrity sha512-UNtPCbrwrenpmrXuRwn9jYpPoweNXj8X5sMvYgsqYyaH8jQ6LfUJSk3dJLnBK+6sfYPrF4iAIo5sd5HQ+tg75A== -"@canvas/image-data@^1.0.0": - version "1.0.0" - resolved "https://registry.npmjs.org/@canvas/image-data/-/image-data-1.0.0.tgz" - integrity sha512-BxOqI5LgsIQP1odU5KMwV9yoijleOPzHL18/YvNqF9KFSGF2K/DLlYAbDQsWqd/1nbaFuSkYD/191dpMtNh4vw== - "@commitlint/cli@^19.5.0": version "19.5.0" resolved "https://registry.yarnpkg.com/@commitlint/cli/-/cli-19.5.0.tgz#a6e2f7f8397ddf9abd5ee5870e30a1bf51b7be2b" @@ -1071,6 +1066,11 @@ resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz#4a2868d75d6d6963e423bcf90b7fd1be343409d3" integrity sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA== +"@intercom/messenger-js-sdk@^0.0.14": + version "0.0.14" + resolved "https://registry.yarnpkg.com/@intercom/messenger-js-sdk/-/messenger-js-sdk-0.0.14.tgz#a27999370cc0a82a2a57a779426df25a57891863" + integrity sha512-2dH4BDAh9EI90K7hUkAdZ76W79LM45Sd1OBX7t6Vzy8twpNiQ5X+7sH9G5hlJlkSGnf+vFWlFcy9TOYAyEs1hA== + "@isaacs/cliui@^8.0.2": version "8.0.2" resolved "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz" @@ -1090,21 +1090,6 @@ dependencies: minipass "^7.0.4" -"@jimp/bmp@^0.22.12": - version "0.22.12" - resolved "https://registry.yarnpkg.com/@jimp/bmp/-/bmp-0.22.12.tgz#0316044dc7b1a90274aef266d50349347fb864d4" - integrity sha512-aeI64HD0npropd+AR76MCcvvRaa+Qck6loCOS03CkkxGHN5/r336qTM5HPUdHKMDOGzqknuVPA8+kK1t03z12g== - dependencies: - "@jimp/utils" "^0.22.12" - bmp-js "^0.1.0" - -"@jimp/utils@^0.22.12": - version "0.22.12" - resolved "https://registry.npmjs.org/@jimp/utils/-/utils-0.22.12.tgz" - integrity sha512-yJ5cWUknGnilBq97ZXOyOS0HhsHOyAyjHwYfHxGbSyMTohgQI6sVyE8KPgDwH8HHW/nMKXk8TrSwAE71zt716Q== - dependencies: - regenerator-runtime "^0.13.3" - "@jridgewell/gen-mapping@^0.3.5": version "0.3.5" resolved "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz" @@ -1620,7 +1605,7 @@ "@tokenizer/token@^0.3.0": version "0.3.0" - resolved "https://registry.npmjs.org/@tokenizer/token/-/token-0.3.0.tgz" + resolved "https://registry.yarnpkg.com/@tokenizer/token/-/token-0.3.0.tgz#fe98a93fe789247e998c75e74e9c7c63217aa276" integrity sha512-OvjF+z51L3ov0OyAU0duzsYuvO01PH7x4t6DJx+guahgTnBHkhJdG7soQeTSFLWN3efnHyibZ4Z8l2EuWwJN3A== "@tootallnate/once@2": @@ -2523,11 +2508,6 @@ bluebird@^3.5.5: resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f" integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg== -bmp-js@^0.1.0: - version "0.1.0" - resolved "https://registry.yarnpkg.com/bmp-js/-/bmp-js-0.1.0.tgz#e05a63f796a6c1ff25f4771ec7adadc148c07233" - integrity sha512-vHdS19CnY3hwiNdkaqk93DvjVLfbEcI8mys4UjuWrlX1haDmroo8o4xCzh4wD6DGV6HxRCyauwhHRqMTfERtjw== - boolean@^3.0.1: version "3.2.0" resolved "https://registry.yarnpkg.com/boolean/-/boolean-3.2.0.tgz#9e5294af4e98314494cbb17979fa54ca159f116b" @@ -3139,23 +3119,6 @@ decimal.js@^10.4.3: resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.4.3.tgz#1044092884d245d1b7f65725fa4ad4c6f781cc23" integrity sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA== -decode-bmp@^0.2.0: - version "0.2.1" - resolved "https://registry.yarnpkg.com/decode-bmp/-/decode-bmp-0.2.1.tgz#cec3e0197ec3b6c60f02220f50e8757030ff2427" - integrity sha512-NiOaGe+GN0KJqi2STf24hfMkFitDUaIoUU3eKvP/wAbLe8o6FuW5n/x7MHPR0HKvBokp6MQY/j7w8lewEeVCIA== - dependencies: - "@canvas/image-data" "^1.0.0" - to-data-view "^1.1.0" - -decode-ico@^0.4.1: - version "0.4.1" - resolved "https://registry.yarnpkg.com/decode-ico/-/decode-ico-0.4.1.tgz#e0f7373081532c7b8495bd51fb225d354e14de25" - integrity sha512-69NZfbKIzux1vBOd31al3XnMnH+2mqDhEgLdpygErm4d60N+UwA5Sq5WFjmEDQzumgB9fElojGwWG0vybVfFmA== - dependencies: - "@canvas/image-data" "^1.0.0" - decode-bmp "^0.2.0" - to-data-view "^1.1.0" - decompress-response@^6.0.0: version "6.0.0" resolved "https://registry.yarnpkg.com/decompress-response/-/decompress-response-6.0.0.tgz#ca387612ddb7e104bd16d85aab00d5ecf09c66fc" @@ -3967,13 +3930,13 @@ file-entry-cache@^6.0.1: dependencies: flat-cache "^3.0.4" -file-type@^19.0.0: - version "19.5.0" - resolved "https://registry.yarnpkg.com/file-type/-/file-type-19.5.0.tgz#c13c5eca9c1c7270f6d5fbff70331b3c976f92b5" - integrity sha512-dMuq6WWnP6BpQY0zYJNpTtQWgeCImSMG0BTIzUBXvxbwc1HWP/E7AE4UWU9XSCOPGJuOHda0HpDnwM2FW+d90A== +file-type@^19.6.0: + version "19.6.0" + resolved "https://registry.yarnpkg.com/file-type/-/file-type-19.6.0.tgz#b43d8870453363891884cf5e79bb3e4464f2efd3" + integrity sha512-VZR5I7k5wkD0HgFnMsq5hOsSc710MJMu5Nc5QYsbe38NN5iPV/XTObYLc/cpttRTf6lX538+5uO1ZQRhYibiZQ== dependencies: get-stream "^9.0.1" - strtok3 "^8.1.0" + strtok3 "^9.0.1" token-types "^6.0.0" uint8array-extras "^1.3.0" @@ -4529,18 +4492,6 @@ i18next@^23.11.2: dependencies: "@babel/runtime" "^7.23.2" -icojs@^0.19.4: - version "0.19.4" - resolved "https://registry.yarnpkg.com/icojs/-/icojs-0.19.4.tgz#fdbc9e61a0945ed1d331beb358d67f72cf7d78dc" - integrity sha512-86oNepPk2jAmbb96BPeucZI7HoSBobFlXDhhjIbwRb3wkQpvdBO5HO9KtMUNzMFT3qqQZsjLsfW+L0/9Rl9VqA== - dependencies: - "@jimp/bmp" "^0.22.12" - decode-ico "^0.4.1" - file-type "^19.0.0" - jpeg-js "^0.4.4" - pngjs "^7.0.0" - to-data-view "^2.0.0" - iconv-corefoundation@^1.1.7: version "1.1.7" resolved "https://registry.yarnpkg.com/iconv-corefoundation/-/iconv-corefoundation-1.1.7.tgz#31065e6ab2c9272154c8b0821151e2c88f1b002a" @@ -4955,11 +4906,6 @@ jiti@^1.19.1: resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.6.tgz#6c7f7398dd4b3142767f9a168af2f317a428d268" integrity sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w== -jpeg-js@^0.4.4: - version "0.4.4" - resolved "https://registry.yarnpkg.com/jpeg-js/-/jpeg-js-0.4.4.tgz#a9f1c6f1f9f0fa80cdb3484ed9635054d28936aa" - integrity sha512-WZzeDOEtTOBK4Mdsar0IqEU5sMr3vSV2RqkAIzUEV2BHnUfKGyswWFPFwK5EeDo93K3FohSHbLAjj0s1Wzd+dg== - "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" @@ -5961,10 +5907,10 @@ pe-library@^0.4.1: resolved "https://registry.yarnpkg.com/pe-library/-/pe-library-0.4.1.tgz#e269be0340dcb13aa6949d743da7d658c3e2fbea" integrity sha512-eRWB5LBz7PpDu4PUlwT0PhnQfTQJlDDdPa35urV4Osrm0t0AqQFGn+UIkU3klZvwJ8KPO3VbBFsXquA6p6kqZw== -peek-readable@^5.1.4: - version "5.2.0" - resolved "https://registry.yarnpkg.com/peek-readable/-/peek-readable-5.2.0.tgz#7458f18126217c154938c32a185f5d05f3df3710" - integrity sha512-U94a+eXHzct7vAd19GH3UQ2dH4Satbng0MyYTMaQatL0pvYYL5CTPR25HBhKtecl+4bfu1/i3vC6k0hydO5Vcw== +peek-readable@^5.3.1: + version "5.3.1" + resolved "https://registry.yarnpkg.com/peek-readable/-/peek-readable-5.3.1.tgz#9cc2c275cceda9f3d07a988f4f664c2080387dff" + integrity sha512-GVlENSDW6KHaXcd9zkZltB7tCLosKB/4Hg0fqBJkAoBgYG2Tn1xtMgXtSUuMU9AK/gCm/tTdT8mgAeF4YNeeqw== pend@~1.2.0: version "1.2.0" @@ -6011,11 +5957,6 @@ plist@^3.0.4, plist@^3.0.5, plist@^3.1.0: base64-js "^1.5.1" xmlbuilder "^15.1.1" -pngjs@^7.0.0: - version "7.0.0" - resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-7.0.0.tgz#a8b7446020ebbc6ac739db6c5415a65d17090e26" - integrity sha512-LKWqWJRhstyYo9pGvgor/ivk2w94eSjE3RGVuzLGlr3NmD8bf7RcYGze1mNdEHRP6TRP6rMuDHk5t44hnTRyow== - possible-typed-array-names@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz#89bb63c6fada2c3e90adc4a647beeeb39cc7bf8f" @@ -6262,11 +6203,6 @@ reflect.getprototypeof@^1.0.4: globalthis "^1.0.3" which-builtin-type "^1.1.3" -regenerator-runtime@^0.13.3: - version "0.13.11" - resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9" - integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg== - regenerator-runtime@^0.14.0: version "0.14.1" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f" @@ -6971,13 +6907,13 @@ strip-json-comments@~2.0.1: resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a" integrity sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ== -strtok3@^8.1.0: - version "8.1.0" - resolved "https://registry.yarnpkg.com/strtok3/-/strtok3-8.1.0.tgz#9234a6f42ee03bf8569c7ae0788d5fd4e67e095b" - integrity sha512-ExzDvHYPj6F6QkSNe/JxSlBxTh3OrI6wrAIz53ulxo1c4hBJ1bT9C/JrAthEKHWG9riVH3Xzg7B03Oxty6S2Lw== +strtok3@^9.0.1: + version "9.0.1" + resolved "https://registry.yarnpkg.com/strtok3/-/strtok3-9.0.1.tgz#7e3d7bbd2b829c9def6a7bb90d82e240abdd32be" + integrity sha512-ERPW+XkvX9W2A+ov07iy+ZFJpVdik04GhDA4eVogiG9hpC97Kem2iucyzhFxbFRvQ5o2UckFtKZdp1hkGvnrEw== dependencies: "@tokenizer/token" "^0.3.0" - peek-readable "^5.1.4" + peek-readable "^5.3.1" sudo-prompt@^9.2.1: version "9.2.1" @@ -7154,16 +7090,6 @@ tmp@^0.2.0: resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.3.tgz#eb783cc22bc1e8bebd0671476d46ea4eb32a79ae" integrity sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w== -to-data-view@^1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/to-data-view/-/to-data-view-1.1.0.tgz#08d6492b0b8deb9b29bdf1f61c23eadfa8994d00" - integrity sha512-1eAdufMg6mwgmlojAx3QeMnzB/BTVp7Tbndi3U7ftcT2zCZadjxkkmLmd97zmaxWi+sgGcgWrokmpEoy0Dn0vQ== - -to-data-view@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/to-data-view/-/to-data-view-2.0.0.tgz#4cc3f5c9eb59514a7436fc54c587c3c34c9b1d60" - integrity sha512-RGEM5KqlPHr+WVTPmGNAXNeFEmsBnlkxXaIfEpUYV0AST2Z5W1EGq9L/MENFrMMmL2WQr1wjkmZy/M92eKhjYA== - to-fast-properties@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e" From f6707a5c84ef689a91acb3928608721415e672be Mon Sep 17 00:00:00 2001 From: Hachi-R Date: Thu, 16 Jan 2025 11:30:24 -0300 Subject: [PATCH 03/25] lint --- src/main/services/hosters/datanodes.ts | 3 ++- src/renderer/src/components/checkbox-field/checkbox-field.tsx | 4 +++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/main/services/hosters/datanodes.ts b/src/main/services/hosters/datanodes.ts index d77e7d51..ae144418 100644 --- a/src/main/services/hosters/datanodes.ts +++ b/src/main/services/hosters/datanodes.ts @@ -33,7 +33,8 @@ export class DatanodesApi { "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36", }, - maxRedirects: 0, validateStatus: (status: number) => status === 302 || status < 400, + maxRedirects: 0, + validateStatus: (status: number) => status === 302 || status < 400, } ); diff --git a/src/renderer/src/components/checkbox-field/checkbox-field.tsx b/src/renderer/src/components/checkbox-field/checkbox-field.tsx index a93e50d9..61cd9fda 100644 --- a/src/renderer/src/components/checkbox-field/checkbox-field.tsx +++ b/src/renderer/src/components/checkbox-field/checkbox-field.tsx @@ -15,7 +15,9 @@ export function CheckboxField({ label, ...props }: CheckboxFieldProps) { return (
-
+
Date: Thu, 16 Jan 2025 12:18:25 -0300 Subject: [PATCH 04/25] refactor: change notifications header to paragraph --- src/renderer/src/pages/settings/settings-general.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderer/src/pages/settings/settings-general.tsx b/src/renderer/src/pages/settings/settings-general.tsx index 3aa3044e..9916e4e6 100644 --- a/src/renderer/src/pages/settings/settings-general.tsx +++ b/src/renderer/src/pages/settings/settings-general.tsx @@ -138,7 +138,7 @@ export function SettingsGeneral() { }))} /> -

{t("notifications")}

+

{t("notifications")}

Date: Sat, 18 Jan 2025 22:03:56 -0300 Subject: [PATCH 05/25] refactor: migrate achievement panel styles from VE to SCSS + BEM --- .../achievements/achievement-panel.css.ts | 71 ------------------- .../pages/achievements/achievement-panel.scss | 70 ++++++++++++++++++ .../pages/achievements/achievement-panel.tsx | 12 ++-- .../compared-achievement-panel.tsx | 8 +-- 4 files changed, 79 insertions(+), 82 deletions(-) delete mode 100644 src/renderer/src/pages/achievements/achievement-panel.css.ts create mode 100644 src/renderer/src/pages/achievements/achievement-panel.scss diff --git a/src/renderer/src/pages/achievements/achievement-panel.css.ts b/src/renderer/src/pages/achievements/achievement-panel.css.ts deleted file mode 100644 index f8daeab9..00000000 --- a/src/renderer/src/pages/achievements/achievement-panel.css.ts +++ /dev/null @@ -1,71 +0,0 @@ -import { style } from "@vanilla-extract/css"; -import { recipe } from "@vanilla-extract/recipes"; - -import { SPACING_UNIT, vars } from "../../theme.css"; - -export const panel = style({ - width: "100%", - padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 3}px`, - backgroundColor: vars.color.background, - display: "flex", - flexDirection: "column", - alignItems: "start", - justifyContent: "space-between", - borderBottom: `solid 1px ${vars.color.border}`, -}); - -export const content = style({ - display: "flex", - gap: `${SPACING_UNIT}px`, - justifyContent: "center", -}); - -export const actions = style({ - display: "flex", - gap: `${SPACING_UNIT}px`, -}); - -export const downloadDetailsRow = style({ - gap: `${SPACING_UNIT}px`, - display: "flex", - color: vars.color.body, - alignItems: "center", -}); - -export const downloadsLink = style({ - color: vars.color.body, - textDecoration: "underline", -}); - -export const progressBar = recipe({ - base: { - position: "absolute", - bottom: "0", - left: "0", - width: "100%", - height: "3px", - transition: "all ease 0.2s", - "::-webkit-progress-bar": { - backgroundColor: "transparent", - }, - "::-webkit-progress-value": { - backgroundColor: vars.color.muted, - }, - }, - variants: { - disabled: { - true: { - opacity: vars.opacity.disabled, - }, - }, - }, -}); - -export const link = style({ - textAlign: "start", - color: vars.color.body, - ":hover": { - textDecoration: "underline", - cursor: "pointer", - }, -}); diff --git a/src/renderer/src/pages/achievements/achievement-panel.scss b/src/renderer/src/pages/achievements/achievement-panel.scss new file mode 100644 index 00000000..8cf653ea --- /dev/null +++ b/src/renderer/src/pages/achievements/achievement-panel.scss @@ -0,0 +1,70 @@ +@use "../../scss/globals.scss"; + +.achievement-panel { + width: 100%; + padding: globals.$spacing-unit * 2 globals.$spacing-unit * 3; + background-color: var(--color-background); + display: flex; + flex-direction: column; + align-items: start; + justify-content: space-between; + border-bottom: solid 1px var(--color-border); + + &__content { + display: flex; + gap: globals.$spacing-unit; + justify-content: center; + align-items: center; + } + + &__actions { + display: flex; + gap: globals.$spacing-unit; + } + + &__download-details-row { + gap: globals.$spacing-unit; + display: flex; + color: var(--color-body); + align-items: center; + } + + &__downloads-link { + color: var(--color-body); + text-decoration: underline; + } + + &__progress-bar { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 3px; + transition: all ease 0.2s; + + &::-webkit-progress-bar { + background-color: transparent; + } + + &::-webkit-progress-value { + background-color: var(--color-muted); + } + + &--disabled { + opacity: var(--opacity-disabled); + } + } + + &__link { + text-align: start; + color: var(--color-body); + background: none; + border: none; + padding: 0; + + &:hover { + text-decoration: underline; + cursor: pointer; + } + } +} diff --git a/src/renderer/src/pages/achievements/achievement-panel.tsx b/src/renderer/src/pages/achievements/achievement-panel.tsx index bda25a89..4da19dcd 100644 --- a/src/renderer/src/pages/achievements/achievement-panel.tsx +++ b/src/renderer/src/pages/achievements/achievement-panel.tsx @@ -4,7 +4,7 @@ import { UserAchievement } from "@types"; import { useSubscription } from "@renderer/hooks/use-subscription"; import { useUserDetails } from "@renderer/hooks"; import { vars } from "@renderer/theme.css"; -import * as styles from "./achievement-panel.css"; +import "./achievement-panel.scss"; export interface AchievementPanelProps { achievements: UserAchievement[]; @@ -28,15 +28,15 @@ export function AchievementPanel({ achievements }: AchievementPanelProps) { if (!hasActiveSubscription) { return ( -
-
+
+
{t("earned_points")} ??? / ???
@@ -49,7 +49,8 @@ export function AchievementPanel({ achievements }: AchievementPanelProps) { return (
- {t("earned_points")} + {t("earned_points")}{" "} + {achievementsPointsEarnedSum} / {achievementsPointsTotal}
diff --git a/src/renderer/src/pages/achievements/compared-achievement-panel.tsx b/src/renderer/src/pages/achievements/compared-achievement-panel.tsx index db9baa09..ac124b26 100644 --- a/src/renderer/src/pages/achievements/compared-achievement-panel.tsx +++ b/src/renderer/src/pages/achievements/compared-achievement-panel.tsx @@ -1,8 +1,8 @@ import { useTranslation } from "react-i18next"; import HydraIcon from "@renderer/assets/icons/hydra.svg?react"; import { ComparedAchievements } from "@types"; -import { SPACING_UNIT } from "@renderer/theme.css"; import { useUserDetails } from "@renderer/hooks"; +import "./achievement-panel.scss"; export interface ComparedAchievementPanelProps { achievements: ComparedAchievements; @@ -16,25 +16,25 @@ export function ComparedAchievementPanel({ return (
-
- {t("available_points")} {" "} +
+ {t("available_points")}{" "} + {" "} {achievements.achievementsPointsTotal}
{hasActiveSubscription && (
- + {achievements.owner.achievementsPointsEarnedSum ?? 0}
)}
- + {achievements.target.achievementsPointsEarnedSum}
From 86d7ced0c04fc01780eed6907d8e3f94bbf1a0cc Mon Sep 17 00:00:00 2001 From: Hachi-R Date: Sat, 18 Jan 2025 23:43:56 -0300 Subject: [PATCH 07/25] refactor: migrate achievement list styles from VE to SCSS + BEM --- .../pages/achievements/achievement-list.tsx | 50 ++-- .../achievements/achievements-skeleton.tsx | 10 +- .../src/pages/achievements/achievements.scss | 262 ++++++++++++++++++ .../compared-achievement-list.tsx | 66 +---- 4 files changed, 300 insertions(+), 88 deletions(-) create mode 100644 src/renderer/src/pages/achievements/achievements.scss diff --git a/src/renderer/src/pages/achievements/achievement-list.tsx b/src/renderer/src/pages/achievements/achievement-list.tsx index ef178b50..36ef97d4 100644 --- a/src/renderer/src/pages/achievements/achievement-list.tsx +++ b/src/renderer/src/pages/achievements/achievement-list.tsx @@ -1,11 +1,10 @@ import { useDate } from "@renderer/hooks"; import type { UserAchievement } from "@types"; import { useTranslation } from "react-i18next"; -import * as styles from "./achievements.css"; +import "./achievements.scss"; import { EyeClosedIcon } from "@primer/octicons-react"; import HydraIcon from "@renderer/assets/icons/hydra.svg?react"; import { useSubscription } from "@renderer/hooks/use-subscription"; -import { vars } from "@renderer/theme.css"; interface AchievementListProps { achievements: UserAchievement[]; @@ -17,27 +16,21 @@ export function AchievementList({ achievements }: AchievementListProps) { const { formatDateTime } = useDate(); return ( -
    +
      {achievements.map((achievement) => ( -
    • +
    • {achievement.displayName} -
      -

      +
      +

      {achievement.hidden && ( @@ -47,41 +40,36 @@ export function AchievementList({ achievements }: AchievementListProps) {

      {achievement.description}

      -
      + +
      {achievement.points != undefined ? (
      - -

      {achievement.points}

      + +

      + {achievement.points} +

      ) : ( )} {achievement.unlockTime != null && (
      {formatDateTime(achievement.unlockTime)}
      diff --git a/src/renderer/src/pages/achievements/achievements-skeleton.tsx b/src/renderer/src/pages/achievements/achievements-skeleton.tsx index f9ae81ac..7ead05fd 100644 --- a/src/renderer/src/pages/achievements/achievements-skeleton.tsx +++ b/src/renderer/src/pages/achievements/achievements-skeleton.tsx @@ -1,13 +1,13 @@ import Skeleton from "react-loading-skeleton"; -import * as styles from "./achievements.css"; +import "./achievements.scss"; export function AchievementsSkeleton() { return ( -
      -
      - +
      +
      +
      -
      +
      ); } diff --git a/src/renderer/src/pages/achievements/achievements.scss b/src/renderer/src/pages/achievements/achievements.scss new file mode 100644 index 00000000..5a5de8e6 --- /dev/null +++ b/src/renderer/src/pages/achievements/achievements.scss @@ -0,0 +1,262 @@ +@use "../../scss/globals.scss"; +@use "sass:math"; + +$hero-height: 150px; +$logo-height: 100px; +$logo-max-width: 200px; + +.achievements { + display: flex; + flex-direction: column; + overflow: hidden; + width: 100%; + height: 100%; + transition: all ease 0.3s; + + &__hero { + width: 100%; + height: $hero-height; + min-height: $hero-height; + display: flex; + flex-direction: column; + position: relative; + transition: all ease 0.2s; + + &-content { + padding: globals.$spacing-unit * 2; + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + } + + &-logo-backdrop { + width: 100%; + height: 100%; + position: absolute; + display: flex; + flex-direction: column; + justify-content: flex-end; + } + + &-image-skeleton { + height: 150px; + } + } + + &__game-logo { + width: $logo-max-width; + height: $logo-height; + object-fit: contain; + transition: all ease 0.2s; + + &:hover { + transform: scale(1.05); + } + } + + &__container { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + overflow: auto; + z-index: 1; + } + + &__table-header { + width: 100%; + background-color: var(--color-dark-background); + transition: all ease 0.2s; + border-bottom: solid 1px var(--color-border); + position: sticky; + top: 0; + z-index: 1; + + &--stuck { + box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.8); + } + } + + &__list { + list-style: none; + margin: 0; + display: flex; + flex-direction: column; + gap: globals.$spacing-unit * 2; + padding: globals.$spacing-unit * 2; + width: 100%; + background-color: var(--color-background); + } + + &__item { + display: flex; + transition: all ease 0.1s; + color: var(--color-muted); + width: 100%; + overflow: hidden; + border-radius: 4px; + padding: globals.$spacing-unit globals.$spacing-unit; + gap: globals.$spacing-unit * 2; + align-items: center; + text-align: left; + + &:hover { + background-color: rgba(255, 255, 255, 0.15); + text-decoration: none; + } + + &-image { + width: 54px; + height: 54px; + border-radius: 4px; + object-fit: cover; + + &--locked { + filter: grayscale(100%); + } + } + + &-content { + flex: 1; + } + + &-title { + display: flex; + align-items: center; + gap: 4px; + } + + &-hidden-icon { + display: flex; + color: var(--color-warning); + opacity: 0.8; + + &:hover { + opacity: 1; + } + + svg { + width: 12px; + height: 12px; + } + } + + &-eye-closed { + width: 12px; + height: 12px; + color: globals.$warning-color; + scale: 4; + } + + &-meta { + display: flex; + flex-direction: column; + gap: 8px; + } + + &-points { + display: flex; + align-items: center; + gap: 4px; + margin-right: 4px; + font-weight: 600; + + &--locked { + cursor: pointer; + color: var(--color-warning); + } + + &-icon { + width: 18px; + height: 18px; + } + + &-value { + font-size: 1.1em; + } + } + + &-unlock-time { + white-space: nowrap; + gap: 4px; + display: flex; + } + + &-compared { + display: grid; + grid-template-columns: 3fr 1fr 1fr; + + &--no-owner { + grid-template-columns: 3fr 2fr; + } + } + + &-main { + display: flex; + flex-direction: row; + align-items: center; + gap: globals.$spacing-unit; + } + + &-status { + display: flex; + padding: globals.$spacing-unit; + justify-content: center; + + &--unlocked { + white-space: nowrap; + flex-direction: row; + gap: globals.$spacing-unit; + padding: 0; + } + } + } + + &__progress-bar { + width: 100%; + height: 8px; + transition: all ease 0.2s; + + &::-webkit-progress-bar { + background-color: rgba(255, 255, 255, 0.15); + border-radius: 4px; + } + + &::-webkit-progress-value { + background-color: var(--color-muted); + border-radius: 4px; + } + } + + &__profile-avatar { + height: 54px; + width: 54px; + border-radius: 4px; + display: flex; + justify-content: center; + align-items: center; + background-color: var(--color-background); + position: relative; + object-fit: cover; + + &--small { + height: 32px; + width: 32px; + } + } + + &__subscription-button { + text-decoration: none; + display: flex; + justify-content: center; + width: 100%; + gap: math.div(globals.$spacing-unit, 2); + color: var(--color-body); + cursor: pointer; + + &:hover { + text-decoration: underline; + } + } +} diff --git a/src/renderer/src/pages/achievements/compared-achievement-list.tsx b/src/renderer/src/pages/achievements/compared-achievement-list.tsx index 44aec686..1fb15c4d 100644 --- a/src/renderer/src/pages/achievements/compared-achievement-list.tsx +++ b/src/renderer/src/pages/achievements/compared-achievement-list.tsx @@ -1,12 +1,11 @@ import type { ComparedAchievements } from "@types"; -import * as styles from "./achievements.css"; +import "./achievements.scss"; import { CheckCircleIcon, EyeClosedIcon, LockIcon, } from "@primer/octicons-react"; import { useDate } from "@renderer/hooks"; -import { SPACING_UNIT } from "@renderer/theme.css"; import { useTranslation } from "react-i18next"; export interface ComparedAchievementListProps { @@ -20,39 +19,26 @@ export function ComparedAchievementList({ const { formatDateTime } = useDate(); return ( -
        +
          {achievements.achievements.map((achievement, index) => (
        • -
          +
          {achievement.displayName} -
          -

          +
          +

          {achievement.hidden && ( @@ -67,25 +53,13 @@ export function ComparedAchievementList({ {achievement.ownerStat ? ( achievement.ownerStat.unlocked ? (
          ) : ( -
          +
          ) @@ -93,25 +67,13 @@ export function ComparedAchievementList({ {achievement.targetStat.unlocked ? (
          ) : ( -
          +
          )} From b855abbab07874067d5f6ffe3a32fd6ff92e3682 Mon Sep 17 00:00:00 2001 From: Hachi-R Date: Sun, 19 Jan 2025 13:42:26 -0300 Subject: [PATCH 08/25] refactor: migrate filter item and section styles from VE to SCSS + BEM --- .../src/pages/catalogue/filter-item.tsx | 34 ++------- .../src/pages/catalogue/filter-section.tsx | 37 +++------- src/renderer/src/pages/catalogue/filter.scss | 71 +++++++++++++++++++ 3 files changed, 84 insertions(+), 58 deletions(-) create mode 100644 src/renderer/src/pages/catalogue/filter.scss diff --git a/src/renderer/src/pages/catalogue/filter-item.tsx b/src/renderer/src/pages/catalogue/filter-item.tsx index 2413bee9..dffe9268 100644 --- a/src/renderer/src/pages/catalogue/filter-item.tsx +++ b/src/renderer/src/pages/catalogue/filter-item.tsx @@ -1,5 +1,5 @@ -import { vars } from "@renderer/theme.css"; import { XIcon } from "@primer/octicons-react"; +import "./filter.scss"; interface FilterItemProps { filter: string; @@ -9,39 +9,13 @@ interface FilterItemProps { export function FilterItem({ filter, orbColor, onRemove }: FilterItemProps) { return ( -
          -
          +
          +
          {filter} diff --git a/src/renderer/src/pages/catalogue/filter-section.tsx b/src/renderer/src/pages/catalogue/filter-section.tsx index 0569ba9d..ecd00dfe 100644 --- a/src/renderer/src/pages/catalogue/filter-section.tsx +++ b/src/renderer/src/pages/catalogue/filter-section.tsx @@ -1,9 +1,8 @@ import { CheckboxField, TextField } from "@renderer/components"; import { useFormat } from "@renderer/hooks"; import { useCallback, useMemo, useState } from "react"; - +import "./filter.scss"; import List from "rc-virtual-list"; -import { vars } from "@renderer/theme.css"; import { useTranslation } from "react-i18next"; export interface FilterSectionProps { @@ -54,36 +53,18 @@ export function FilterSection({ return (
          -
          +
          -

          - {title} -

          +

          {title}

          {selectedItemsCount > 0 ? ( ) : ( - + {t("filter_count", { filterCount: formatNumber(items.length), })} @@ -102,7 +83,7 @@ export function FilterSection({ placeholder={t("search")} onChange={(e) => onSearch(e.target.value)} value={search} - containerProps={{ style: { marginBottom: 16 } }} + containerProps={{ className: "filter-section__search" }} theme="dark" /> @@ -122,7 +103,7 @@ export function FilterSection({ }} > {(item) => ( -
          +
          Date: Sun, 19 Jan 2025 13:49:21 -0300 Subject: [PATCH 09/25] refactor: migrate pagination styles from VE to SCSS + BEM --- .../src/pages/catalogue/pagination.scss | 21 ++++++++++ .../src/pages/catalogue/pagination.tsx | 40 +++++-------------- 2 files changed, 32 insertions(+), 29 deletions(-) create mode 100644 src/renderer/src/pages/catalogue/pagination.scss diff --git a/src/renderer/src/pages/catalogue/pagination.scss b/src/renderer/src/pages/catalogue/pagination.scss new file mode 100644 index 00000000..141dfe54 --- /dev/null +++ b/src/renderer/src/pages/catalogue/pagination.scss @@ -0,0 +1,21 @@ +.pagination { + display: flex; + gap: 4px; + + &__button { + width: 40px; + max-width: 40px; + max-height: 40px; + } + + &__ellipsis { + width: 40px; + display: flex; + justify-content: center; + align-items: center; + + &-text { + font-size: 16px; + } + } +} diff --git a/src/renderer/src/pages/catalogue/pagination.tsx b/src/renderer/src/pages/catalogue/pagination.tsx index 3669e902..3a7356d6 100644 --- a/src/renderer/src/pages/catalogue/pagination.tsx +++ b/src/renderer/src/pages/catalogue/pagination.tsx @@ -1,6 +1,7 @@ import { Button } from "@renderer/components/button/button"; import { ChevronLeftIcon, ChevronRightIcon } from "@primer/octicons-react"; import { useFormat } from "@renderer/hooks/use-format"; +import "./pagination.scss"; interface PaginationProps { page: number; @@ -31,17 +32,12 @@ export function Pagination({ } return ( -
          +
          {/* Previous Button */} {/* ellipsis */} -
          - ... +
          + ...
          )} @@ -81,7 +70,7 @@ export function Pagination({ diff --git a/src/renderer/src/pages/downloads/download-group.scss b/src/renderer/src/pages/downloads/download-group.scss new file mode 100644 index 00000000..504ec73a --- /dev/null +++ b/src/renderer/src/pages/downloads/download-group.scss @@ -0,0 +1,140 @@ +@use "../../scss/globals.scss"; + +.download-group { + display: flex; + flex-direction: column; + gap: calc(globals.$spacing-unit * 2); + + &__header { + display: flex; + align-items: center; + justify-content: space-between; + gap: calc(globals.$spacing-unit * 2); + + &-divider { + flex: 1; + background-color: globals.$color-border; + height: 1px; + } + + &-count { + font-weight: 400; + } + } + + &__title-wrapper { + display: flex; + align-items: center; + margin-bottom: globals.$spacing-unit; + gap: globals.$spacing-unit; + } + + &__title { + font-weight: bold; + cursor: pointer; + color: globals.$color-body; + text-align: left; + font-size: 16px; + display: block; + + &:hover { + text-decoration: underline; + } + } + + &__downloads { + width: 100%; + gap: calc(globals.$spacing-unit * 2); + display: flex; + flex-direction: column; + margin: 0; + padding: 0; + margin-top: globals.$spacing-unit; + } + + &__item { + width: 100%; + background-color: globals.$color-background; + display: flex; + border-radius: 8px; + border: solid 1px globals.$color-border; + overflow: hidden; + box-shadow: 0px 0px 5px 0px #000000; + transition: all ease 0.2s; + height: 140px; + min-height: 140px; + max-height: 140px; + position: relative; + } + + &__cover { + width: 280px; + min-width: 280px; + height: auto; + border-right: solid 1px globals.$color-border; + position: relative; + z-index: 1; + + &-content { + width: 100%; + height: 100%; + padding: globals.$spacing-unit; + display: flex; + align-items: flex-end; + justify-content: flex-end; + } + + &-backdrop { + width: 100%; + height: 100%; + background: linear-gradient( + 0deg, + rgba(0, 0, 0, 0.8) 5%, + transparent 100% + ); + display: flex; + overflow: hidden; + z-index: 1; + } + + &-image { + width: 100%; + height: 100%; + position: absolute; + z-index: -1; + } + } + + &__right-content { + display: flex; + padding: calc(globals.$spacing-unit * 2); + flex: 1; + gap: globals.$spacing-unit; + background: linear-gradient(90deg, transparent 20%, rgb(0 0 0 / 20%) 100%); + } + + &__details { + display: flex; + flex-direction: column; + flex: 1; + justify-content: center; + gap: calc(globals.$spacing-unit / 2); + font-size: 14px; + } + + &__actions { + display: flex; + align-items: center; + gap: globals.$spacing-unit; + } + + &__menu-button { + position: absolute; + top: 12px; + right: 12px; + border-radius: 50%; + border: none; + padding: 8px; + min-height: unset; + } +} diff --git a/src/renderer/src/pages/downloads/download-group.tsx b/src/renderer/src/pages/downloads/download-group.tsx index 88cf1433..192a4428 100644 --- a/src/renderer/src/pages/downloads/download-group.tsx +++ b/src/renderer/src/pages/downloads/download-group.tsx @@ -12,9 +12,8 @@ import { Downloader, formatBytes, steamUrlBuilder } from "@shared"; import { DOWNLOADER_NAME } from "@renderer/constants"; import { useAppSelector, useDownload } from "@renderer/hooks"; -import * as styles from "./download-group.css"; +import "./download-group.scss"; import { useTranslation } from "react-i18next"; -import { SPACING_UNIT, vars } from "@renderer/theme.css"; import { useMemo } from "react"; import { DropdownMenu, @@ -238,54 +237,36 @@ export function DownloadGroup({ if (!library.length) return null; return ( -
          -
          +
          +

          {title}

          - -
          -

          {library.length}

          +
          +

          {library.length}

          -
            +
              {library.map((game) => { return ( -
            • -
              -
              +
            • +
              +
              {game.title} -
              +
              {DOWNLOADER_NAME[game.downloader]}
              -
              -
              -
              +
              +
              +
              -
              +
              {selectedFileMappingMethod === FileMappingMethod.Automatic ? (

              {t("files_automatically_mapped")}

              ) : ( @@ -142,11 +144,11 @@ export function CloudSyncFilesModal({ /> )} -
                +
                  {files.map((file) => ( -
                • +
              -
              -
              -

              {t("backups")}

              - - {artifacts.length} / {backupsPerGameLimit} - -
              + {uploadingBackup && ( + + )} + +
              +

              {t("backups")}

              + + {artifacts.length} / {backupsPerGameLimit} +
              {artifacts.length > 0 ? ( -
                +
                  {artifacts.map((artifact) => ( -
                • -
                  -
                  +
                • +
                  +

                  {t("backup_from", { date: format(artifact.createdAt, "dd/MM/yyyy"), @@ -230,29 +218,33 @@ export function CloudSyncModal({ visible, onClose }: CloudSyncModalProps) { {formatBytes(artifact.artifactLengthInBytes)}

                  - + {artifact.hostname} - + {artifact.downloadOptionTitle ?? t("no_download_option_info")} - + {format(artifact.createdAt, "dd/MM/yyyy HH:mm:ss")}
                  -
                  +
                  -
                  +
                  {previews.map((media, i) => ( diff --git a/src/renderer/src/pages/game-details/game-details-content.tsx b/src/renderer/src/pages/game-details/game-details-content.tsx index bd138e81..ce00216d 100644 --- a/src/renderer/src/pages/game-details/game-details-content.tsx +++ b/src/renderer/src/pages/game-details/game-details-content.tsx @@ -7,7 +7,6 @@ import { DescriptionHeader } from "./description-header/description-header"; import { GallerySlider } from "./gallery-slider/gallery-slider"; import { Sidebar } from "./sidebar/sidebar"; -import * as styles from "./game-details.css"; import { useTranslation } from "react-i18next"; import { cloudSyncContext, gameDetailsContext } from "@renderer/context"; import { AuthPage, steamUrlBuilder } from "@shared"; @@ -15,7 +14,9 @@ import { AuthPage, steamUrlBuilder } from "@shared"; import cloudIconAnimated from "@renderer/assets/icons/cloud-animated.gif"; import { useUserDetails } from "@renderer/hooks"; import { useSubscription } from "@renderer/hooks/use-subscription"; +import "./game-details.scss"; +const HERO_HEIGHT = 300; const HERO_ANIMATION_THRESHOLD = 25; export function GameDetailsContent() { @@ -80,7 +81,7 @@ export function GameDetailsContent() { }, [objectId]); const onScroll: React.UIEventHandler = (event) => { - const heroHeight = heroRef.current?.clientHeight ?? styles.HERO_HEIGHT; + const heroHeight = heroRef.current?.clientHeight ?? HERO_HEIGHT; const scrollY = (event.target as HTMLDivElement).scrollTop; const opacity = Math.max( @@ -118,10 +119,12 @@ export function GameDetailsContent() { }, [getGameArtifacts]); return ( -
                  +
                  {game?.title} @@ -129,47 +132,38 @@ export function GameDetailsContent() {
                  -
                  +
                  -
                  +
                  {game?.title} -
                  -
                  +
                  {Array.from({ length: 6 }).map((_, index) => ( ))} diff --git a/src/renderer/src/pages/game-details/game-details.scss b/src/renderer/src/pages/game-details/game-details.scss new file mode 100644 index 00000000..899d654a --- /dev/null +++ b/src/renderer/src/pages/game-details/game-details.scss @@ -0,0 +1,270 @@ +@use "../../scss/globals.scss"; + +$hero-height: 300px; + +@keyframes slide-in { + 0% { + transform: translateY(calc(40px + globals.$spacing-unit * 2)); + opacity: 0; + } + + 100% { + transform: translateY(0); + opacity: 1; + } +} + +.game-details { + &__wrapper { + display: flex; + flex-direction: column; + overflow: hidden; + width: 100%; + height: 100%; + transition: all ease 0.3s; + + &--blurred { + filter: blur(20px); + } + } + + &__hero { + width: 100%; + height: $hero-height; + min-height: $hero-height; + display: flex; + flex-direction: column; + position: relative; + transition: all ease 0.2s; + + @media (min-width: 1250px) { + height: 350px; + min-height: 350px; + } + } + + &__hero-content { + padding: calc(globals.$spacing-unit * 2); + height: 100%; + width: 100%; + display: flex; + justify-content: space-between; + align-items: flex-end; + } + + &__hero-logo-backdrop { + width: 100%; + height: 100%; + background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 60%, transparent 100%); + position: absolute; + display: flex; + flex-direction: column; + justify-content: space-between; + } + + &__hero-image { + width: 100%; + height: $hero-height; + min-height: $hero-height; + object-fit: cover; + object-position: top; + transition: all ease 0.2s; + position: absolute; + z-index: 0; + + @media (min-width: 1250px) { + object-position: center; + height: 350px; + min-height: 350px; + } + } + + &__game-logo { + width: 300px; + align-self: flex-end; + } + + &__hero-image-skeleton { + height: 300px; + + @media (min-width: 1250px) { + height: 350px; + } + } + + &__container { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + overflow: auto; + z-index: 1; + } + + &__description-container { + display: flex; + width: 100%; + flex: 1; + background: linear-gradient( + 0deg, + globals.$background-color 50%, + globals.$dark-background-color 100% + ); + } + + &__description-content { + width: 100%; + height: 100%; + } + + &__description { + user-select: text; + line-height: 22px; + font-size: globals.$body-font-size; + padding: calc(globals.$spacing-unit * 3) calc(globals.$spacing-unit * 2); + width: 100%; + margin-left: auto; + margin-right: auto; + + @media (min-width: 1280px) { + width: 60%; + } + + img { + border-radius: 5px; + margin-top: globals.$spacing-unit; + margin-bottom: calc(globals.$spacing-unit * 3); + display: block; + width: 100%; + height: auto; + object-fit: cover; + } + + a { + color: globals.$body-color; + } + + .bb_tag { + margin-top: calc(globals.$spacing-unit * 2); + margin-bottom: calc(globals.$spacing-unit * 2); + } + } + + &__description-skeleton { + display: flex; + flex-direction: column; + gap: globals.$spacing-unit; + padding: calc(globals.$spacing-unit * 3) calc(globals.$spacing-unit * 2); + width: 100%; + margin-left: auto; + margin-right: auto; + + @media (min-width: 1280px) { + width: 60%; + line-height: 22px; + } + } + + &__randomizer-button { + animation: slide-in 0.2s; + position: fixed; + bottom: calc(globals.$spacing-unit * 3); + right: calc(9px + globals.$spacing-unit * 2); + box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 10px 1px; + border: solid 2px globals.$border-color; + z-index: 1; + background-color: globals.$background-color; + + &:hover { + background-color: globals.$background-color; + box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 15px 5px; + opacity: 1; + } + + &:active { + transform: scale(0.98); + } + + &:disabled { + box-shadow: none; + transform: none; + opacity: 0.8; + background-color: globals.$background-color; + } + } + + &__hero-panel-skeleton { + width: 100%; + padding: calc(globals.$spacing-unit * 2); + display: flex; + align-items: center; + background-color: globals.$background-color; + height: 72px; + border-bottom: solid 1px globals.$border-color; + } + + &__cloud-sync-button { + padding: calc(globals.$spacing-unit * 1.5) calc(globals.$spacing-unit * 2); + background-color: rgba(0, 0, 0, 0.6); + backdrop-filter: blur(20px); + border-radius: 8px; + transition: all ease 0.2s; + cursor: pointer; + min-height: 40px; + display: flex; + align-items: center; + justify-content: center; + gap: globals.$spacing-unit; + color: globals.$muted-color; + font-size: globals.$small-font-size; + border: solid 1px globals.$border-color; + box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.8); + animation: slide-in 0.3s cubic-bezier(0.33, 1, 0.68, 1); + + &:active { + opacity: 0.9; + } + + &:disabled { + opacity: globals.$disabled-opacity; + cursor: not-allowed; + } + + &:hover { + background-color: rgba(0, 0, 0, 0.5); + } + } + + &__stars-icon-container { + width: 16px; + height: 16px; + position: relative; + } + + &__stars-icon { + width: 70px; + position: absolute; + top: -28px; + left: -27px; + } + + &__cloud-icon-container { + width: 20px; + height: 16px; + display: flex; + align-items: center; + justify-content: center; + position: relative; + } + + &__cloud-icon { + width: 26px; + position: absolute; + top: -3px; + } + + &__hero-backdrop { + flex: 1; + transition: opacity 0.2s ease; + } +} diff --git a/src/renderer/src/pages/game-details/game-details.tsx b/src/renderer/src/pages/game-details/game-details.tsx index 4fbcc855..d43ecff9 100644 --- a/src/renderer/src/pages/game-details/game-details.tsx +++ b/src/renderer/src/pages/game-details/game-details.tsx @@ -11,7 +11,6 @@ import starsIconAnimated from "@renderer/assets/icons/stars-animated.gif"; import { useTranslation } from "react-i18next"; import { SkeletonTheme } from "react-loading-skeleton"; import { GameDetailsSkeleton } from "./game-details-skeleton"; -import * as styles from "./game-details.css"; import { vars } from "@renderer/theme.css"; @@ -27,6 +26,7 @@ import { GameOptionsModal, RepacksModal } from "./modals"; import { Downloader, getDownloadersForUri } from "@shared"; import { CloudSyncModal } from "./cloud-sync-modal/cloud-sync-modal"; import { CloudSyncFilesModal } from "./cloud-sync-files-modal/cloud-sync-files-modal"; +import "./game-details.scss"; export default function GameDetails() { const [randomGame, setRandomGame] = useState(null); @@ -185,23 +185,16 @@ export default function GameDetails() { {fromRandomizer && ( @@ -109,7 +108,7 @@ export function HeroPanelActions() { onClick={closeGame} theme="outline" disabled={deleting} - className={styles.heroPanelAction} + className="hero-panel-actions__action" > {t("close")} @@ -122,7 +121,7 @@ export function HeroPanelActions() { onClick={openGame} theme="outline" disabled={deleting || isGameRunning} - className={styles.heroPanelAction} + className="hero-panel-actions__action" > {t("play")} @@ -135,7 +134,7 @@ export function HeroPanelActions() { onClick={() => setShowRepacksModal(true)} theme="outline" disabled={isGameDownloading || !repacks.length} - className={styles.heroPanelAction} + className="hero-panel-actions__action" > {t("download")} @@ -154,16 +153,14 @@ export function HeroPanelActions() { if (game) { return ( -
                  +
                  {gameActionButton()} - -
                  - +
                  @@ -178,13 +169,7 @@ export function DownloadSettingsModal({
                  -
                  +
                  {t("no_write_permission")} @@ -212,7 +197,7 @@ export function DownloadSettingsModal({ } /> -

                  +

                  diff --git a/src/renderer/src/pages/game-details/modals/game-options-modal.scss b/src/renderer/src/pages/game-details/modals/game-options-modal.scss new file mode 100644 index 00000000..0a3c0246 --- /dev/null +++ b/src/renderer/src/pages/game-details/modals/game-options-modal.scss @@ -0,0 +1,24 @@ +@use "../../../scss/globals.scss"; + +.game-options-modal { + &__container { + display: flex; + gap: calc(globals.$spacing-unit * 2); + flex-direction: column; + } + + &__header { + display: flex; + flex-direction: column; + gap: globals.$spacing-unit; + } + + &__header-description { + font-weight: 400; + } + + &__row { + display: flex; + gap: globals.$spacing-unit; + } +} diff --git a/src/renderer/src/pages/game-details/modals/game-options-modal.tsx b/src/renderer/src/pages/game-details/modals/game-options-modal.tsx index b06de28a..2a826c04 100644 --- a/src/renderer/src/pages/game-details/modals/game-options-modal.tsx +++ b/src/renderer/src/pages/game-details/modals/game-options-modal.tsx @@ -10,6 +10,7 @@ import { RemoveGameFromLibraryModal } from "./remove-from-library-modal"; import { ResetAchievementsModal } from "./reset-achievements-modal"; import { FileDirectoryIcon, FileIcon } from "@primer/octicons-react"; import { debounce } from "lodash-es"; +import "./game-options-modal.scss"; export interface GameOptionsModalProps { visible: boolean; @@ -199,10 +200,10 @@ export function GameOptionsModal({ onClose={onClose} large={true} > -

                  -
                  +
                  +

                  {t("executable_section_title")}

                  -

                  +

                  {t("executable_section_description")}

                  diff --git a/src/renderer/src/pages/game-details/modals/remove-from-library-modal.scss b/src/renderer/src/pages/game-details/modals/remove-from-library-modal.scss new file mode 100644 index 00000000..9c390d67 --- /dev/null +++ b/src/renderer/src/pages/game-details/modals/remove-from-library-modal.scss @@ -0,0 +1,11 @@ +@use "../../../scss/globals.scss"; + +.remove-from-library-modal { + &__actions { + display: flex; + width: 100%; + justify-content: flex-end; + align-items: center; + gap: globals.$spacing-unit; + } +} diff --git a/src/renderer/src/pages/game-details/modals/remove-from-library-modal.tsx b/src/renderer/src/pages/game-details/modals/remove-from-library-modal.tsx index 39789872..85cea8cd 100644 --- a/src/renderer/src/pages/game-details/modals/remove-from-library-modal.tsx +++ b/src/renderer/src/pages/game-details/modals/remove-from-library-modal.tsx @@ -1,7 +1,7 @@ import { useTranslation } from "react-i18next"; import { Button, Modal } from "@renderer/components"; -import * as styles from "./remove-from-library-modal.css"; import type { Game } from "@types"; +import "./remove-from-library-modal.scss"; interface RemoveGameFromLibraryModalProps { visible: boolean; @@ -30,7 +30,7 @@ export function RemoveGameFromLibraryModal({ description={t("remove_from_library_description", { game: game.title })} onClose={onClose} > -
                  +
                  diff --git a/src/renderer/src/pages/game-details/modals/repacks-modal.scss b/src/renderer/src/pages/game-details/modals/repacks-modal.scss new file mode 100644 index 00000000..a575b291 --- /dev/null +++ b/src/renderer/src/pages/game-details/modals/repacks-modal.scss @@ -0,0 +1,28 @@ +@use "../../../scss/globals.scss"; + +.repacks-modal { + &__repacks { + display: flex; + gap: globals.$spacing-unit; + flex-direction: column; + } + + &__repack-button { + display: flex; + text-align: left; + flex-direction: column; + align-items: flex-start; + gap: globals.$spacing-unit; + color: globals.$body-color; + padding: calc(globals.$spacing-unit * 2); + } + + &__repack-title { + color: globals.$muted-color; + word-break: break-word; + } + + &__repack-info { + font-size: globals.$small-font-size; + } +} diff --git a/src/renderer/src/pages/game-details/modals/repacks-modal.tsx b/src/renderer/src/pages/game-details/modals/repacks-modal.tsx index 635c7f99..0dac3bd0 100644 --- a/src/renderer/src/pages/game-details/modals/repacks-modal.tsx +++ b/src/renderer/src/pages/game-details/modals/repacks-modal.tsx @@ -4,14 +4,13 @@ import { useTranslation } from "react-i18next"; import { Badge, Button, Modal, TextField } from "@renderer/components"; import type { GameRepack } from "@types"; -import * as styles from "./repacks-modal.css"; - import { SPACING_UNIT } from "@renderer/theme.css"; import { DownloadSettingsModal } from "./download-settings-modal"; import { gameDetailsContext } from "@renderer/context"; import { Downloader } from "@shared"; import { orderBy } from "lodash-es"; import { useDate } from "@renderer/hooks"; +import "./repacks-modal.scss"; export interface RepacksModalProps { visible: boolean; @@ -90,7 +89,7 @@ export function RepacksModal({
                  -
                  +
                  {filteredRepacks.map((repack) => { const isLastDownloadedOption = checkIfLastDownloadedOption(repack); @@ -99,17 +98,15 @@ export function RepacksModal({ key={repack.id} theme="dark" onClick={() => handleRepackClick(repack)} - className={styles.repackButton} + className="repacks-modal__repack-button" > -

                  - {repack.title} -

                  +

                  {repack.title}

                  {isLastDownloadedOption && ( {t("last_downloaded_option")} )} -

                  +

                  {repack.fileSize} - {repack.repacker} -{" "} {repack.uploadDate ? formatDate(repack.uploadDate!) : ""}

                  diff --git a/src/renderer/src/pages/game-details/modals/reset-achievements-modal.scss b/src/renderer/src/pages/game-details/modals/reset-achievements-modal.scss new file mode 100644 index 00000000..b41be41d --- /dev/null +++ b/src/renderer/src/pages/game-details/modals/reset-achievements-modal.scss @@ -0,0 +1,11 @@ +@use "../../../scss/globals.scss"; + +.reset-achievements-modal { + &__actions { + display: flex; + width: 100%; + justify-content: flex-end; + align-items: center; + gap: globals.$spacing-unit; + } +} diff --git a/src/renderer/src/pages/game-details/modals/reset-achievements-modal.tsx b/src/renderer/src/pages/game-details/modals/reset-achievements-modal.tsx index 642d32ba..fc71e2d0 100644 --- a/src/renderer/src/pages/game-details/modals/reset-achievements-modal.tsx +++ b/src/renderer/src/pages/game-details/modals/reset-achievements-modal.tsx @@ -1,7 +1,8 @@ import { useTranslation } from "react-i18next"; import { Button, Modal } from "@renderer/components"; -import * as styles from "./remove-from-library-modal.css"; import type { Game } from "@types"; +import "./reset-achievements-modal.scss"; + type ResetAchievementsModalProps = Readonly<{ visible: boolean; game: Game; @@ -34,7 +35,7 @@ export function ResetAchievementsModal({ game: game.title, })} > -
                  +
                  diff --git a/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.scss b/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.scss new file mode 100644 index 00000000..5ea421c3 --- /dev/null +++ b/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.scss @@ -0,0 +1,40 @@ +@use "../../../scss/globals.scss"; + +.sidebar-section { + &__button { + height: 72px; + padding: calc(globals.$spacing-unit * 2) calc(globals.$spacing-unit * 2); + display: flex; + align-items: center; + background-color: globals.$background-color; + color: globals.$muted-color; + width: 100%; + cursor: pointer; + transition: all ease 0.2s; + gap: globals.$spacing-unit; + font-size: globals.$body-font-size; + font-weight: bold; + + &:hover { + background-color: rgba(255, 255, 255, 0.05); + } + + &:active { + opacity: globals.$active-opacity; + } + } + + &__chevron { + transition: transform ease 0.2s; + + &--open { + transform: rotate(180deg); + } + } + + &__content { + overflow: hidden; + transition: max-height 0.4s cubic-bezier(0, 1, 0, 1); + position: relative; + } +} diff --git a/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.tsx b/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.tsx index e24f677b..42697fe3 100644 --- a/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.tsx +++ b/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.tsx @@ -1,7 +1,6 @@ import { ChevronDownIcon } from "@primer/octicons-react"; import { useEffect, useRef, useState } from "react"; - -import * as styles from "./sidebar-section.css"; +import "./sidebar-section.scss"; export interface SidebarSectionProps { title: string; @@ -22,23 +21,25 @@ export function SidebarSection({ title, children }: SidebarSectionProps) { }, [isOpen, children, height]); return ( -
                  +
                  {children} 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 d63879f5..138826ff 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 @@ -2,9 +2,8 @@ import Skeleton, { SkeletonTheme } from "react-loading-skeleton"; import { useTranslation } from "react-i18next"; import type { HowLongToBeatCategory } from "@types"; import { vars } from "@renderer/theme.css"; - -import * as styles from "./sidebar.css"; import { SidebarSection } from "../sidebar-section/sidebar-section"; +import "./sidebar.scss"; const durationTranslation: Record = { Hours: "hours", @@ -32,15 +31,12 @@ export function HowLongToBeatSection({ return ( -
                    +
                      {howLongToBeatData ? howLongToBeatData.map((category) => ( -
                    • +

                    • -

                      +

                      {getDuration(category.duration)}

                      @@ -62,7 +58,7 @@ export function HowLongToBeatSection({ : Array.from({ length: 4 }).map((_, index) => ( ))}
                    diff --git a/src/renderer/src/pages/game-details/sidebar/sidebar.scss b/src/renderer/src/pages/game-details/sidebar/sidebar.scss new file mode 100644 index 00000000..15bc74c3 --- /dev/null +++ b/src/renderer/src/pages/game-details/sidebar/sidebar.scss @@ -0,0 +1,174 @@ +@use "../../../scss/globals.scss"; + +.content-sidebar { + border-left: solid 1px globals.$border-color; + background-color: globals.$dark-background-color; + width: 100%; + height: 100%; + + @media (min-width: 1024px) { + max-width: 300px; + width: 100%; + } + + @media (min-width: 1280px) { + width: 100%; + max-width: 400px; + } +} + +.requirement { + &__button-container { + width: 100%; + display: flex; + } + + &__button { + border: solid 1px globals.$border-color; + border-left: none; + border-right: none; + border-radius: 0; + width: 100%; + } + + &__details { + padding: calc(globals.$spacing-unit * 2); + line-height: 22px; + font-size: globals.$body-font-size; + + a { + display: flex; + color: globals.$body-color; + } + } + + &__details-skeleton { + display: flex; + flex-direction: column; + gap: globals.$spacing-unit; + padding: calc(globals.$spacing-unit * 2); + font-size: globals.$body-font-size; + } +} + +.how-long-to-beat { + &__categories-list { + margin: 0; + padding: calc(globals.$spacing-unit * 2); + display: flex; + flex-direction: column; + gap: calc(globals.$spacing-unit * 2); + } + + &__category { + display: flex; + flex-direction: column; + gap: calc(globals.$spacing-unit / 2); + background: linear-gradient( + 90deg, + transparent 20%, + rgb(255 255 255 / 2%) 100% + ); + border-radius: 4px; + padding: globals.$spacing-unit calc(globals.$spacing-unit * 2); + border: solid 1px globals.$border-color; + } + + &__category-label { + color: globals.$muted-color; + } + + &__category-skeleton { + border: solid 1px globals.$border-color; + border-radius: 4px; + height: 76px; + } +} + +.stats { + &__section { + display: flex; + gap: calc(globals.$spacing-unit * 2); + padding: calc(globals.$spacing-unit * 2); + justify-content: space-between; + transition: max-height ease 0.5s; + overflow: hidden; + + @media (min-width: 1024px) { + flex-direction: column; + } + + @media (min-width: 1280px) { + flex-direction: row; + } + } + + &__category-title { + font-size: globals.$small-font-size; + font-weight: bold; + display: flex; + align-items: center; + gap: globals.$spacing-unit; + } + + &__category { + display: flex; + flex-direction: row; + gap: calc(globals.$spacing-unit / 2); + justify-content: space-between; + align-items: center; + } +} + +.list { + list-style: none; + margin: 0; + display: flex; + flex-direction: column; + gap: calc(globals.$spacing-unit * 2); + padding: calc(globals.$spacing-unit * 2); + + &__item { + display: flex; + cursor: pointer; + transition: all ease 0.1s; + color: globals.$muted-color; + width: 100%; + overflow: hidden; + border-radius: 4px; + padding: globals.$spacing-unit; + gap: calc(globals.$spacing-unit * 2); + align-items: center; + text-align: left; + + &:hover { + background-color: rgba(255, 255, 255, 0.15); + text-decoration: none; + } + } + + &__item-image { + width: 54px; + height: 54px; + border-radius: 4px; + object-fit: cover; + + &--locked { + filter: grayscale(100%); + } + } +} + +.subscription-required-button { + text-decoration: none; + display: flex; + justify-content: center; + width: 100%; + gap: calc(globals.$spacing-unit / 2); + color: globals.$warning-color; + cursor: pointer; + + &:hover { + text-decoration: underline; + } +} diff --git a/src/renderer/src/pages/game-details/sidebar/sidebar.tsx b/src/renderer/src/pages/game-details/sidebar/sidebar.tsx index 7787b22a..27c3ee47 100644 --- a/src/renderer/src/pages/game-details/sidebar/sidebar.tsx +++ b/src/renderer/src/pages/game-details/sidebar/sidebar.tsx @@ -7,7 +7,6 @@ import type { import { useTranslation } from "react-i18next"; import { Button, Link } from "@renderer/components"; -import * as styles from "./sidebar.css"; import { gameDetailsContext } from "@renderer/context"; import { useDate, useFormat, useUserDetails } from "@renderer/hooks"; import { @@ -20,8 +19,8 @@ import { HowLongToBeatSection } from "./how-long-to-beat-section"; import { howLongToBeatEntriesTable } from "@renderer/dexie"; import { SidebarSection } from "../sidebar-section/sidebar-section"; import { buildGameAchievementPath } from "@renderer/helpers"; -import { SPACING_UNIT } from "@renderer/theme.css"; import { useSubscription } from "@renderer/hooks/use-subscription"; +import "./sidebar.scss"; const fakeAchievements: UserAchievement[] = [ { @@ -64,7 +63,6 @@ export function Sidebar() { }>({ isLoading: true, data: null }); const { userDetails, hasActiveSubscription } = useUserDetails(); - const [activeRequirement, setActiveRequirement] = useState("minimum"); @@ -72,10 +70,8 @@ export function Sidebar() { useContext(gameDetailsContext); const { showHydraCloudModal } = useSubscription(); - const { t } = useTranslation("game_details"); const { formatDateTime } = useDate(); - const { numberFormatter } = useFormat(); useEffect(() => { @@ -118,7 +114,7 @@ export function Sidebar() { }, [objectId, shop, gameTitle]); return ( -
                  Date: Sun, 19 Jan 2025 19:42:18 -0300 Subject: [PATCH 14/25] fix: border color --- src/renderer/src/pages/downloads/download-group.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/renderer/src/pages/downloads/download-group.scss b/src/renderer/src/pages/downloads/download-group.scss index 4b8f910f..382c600a 100644 --- a/src/renderer/src/pages/downloads/download-group.scss +++ b/src/renderer/src/pages/downloads/download-group.scss @@ -13,7 +13,7 @@ &-divider { flex: 1; - background-color: globals.$color-border; + background-color: globals.$border-color; height: 1px; } @@ -57,7 +57,7 @@ background-color: globals.$color-background; display: flex; border-radius: 8px; - border: solid 1px globals.$color-border; + border: solid 1px globals.$border-color; overflow: hidden; box-shadow: 0px 0px 5px 0px #000000; transition: all ease 0.2s; @@ -71,7 +71,7 @@ width: 280px; min-width: 280px; height: auto; - border-right: solid 1px globals.$color-border; + border-right: solid 1px globals.$border-color; position: relative; z-index: 1; From 88fe3d8f07dff2954a6042a7f3c432ed5c6d522c Mon Sep 17 00:00:00 2001 From: Hachi-R Date: Sun, 19 Jan 2025 19:48:48 -0300 Subject: [PATCH 15/25] fix: background color --- src/renderer/src/pages/downloads/download-group.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderer/src/pages/downloads/download-group.scss b/src/renderer/src/pages/downloads/download-group.scss index 382c600a..321458e9 100644 --- a/src/renderer/src/pages/downloads/download-group.scss +++ b/src/renderer/src/pages/downloads/download-group.scss @@ -54,7 +54,7 @@ &__item { width: 100%; - background-color: globals.$color-background; + background-color: globals.$background-color; display: flex; border-radius: 8px; border: solid 1px globals.$border-color; From cbe94665d0b6729d0c53f1c2aab30c77c9ff3a42 Mon Sep 17 00:00:00 2001 From: Hachi-R Date: Sun, 19 Jan 2025 19:49:55 -0300 Subject: [PATCH 16/25] fix --- src/renderer/src/pages/downloads/download-group.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderer/src/pages/downloads/download-group.scss b/src/renderer/src/pages/downloads/download-group.scss index 321458e9..2c5e9701 100644 --- a/src/renderer/src/pages/downloads/download-group.scss +++ b/src/renderer/src/pages/downloads/download-group.scss @@ -32,7 +32,7 @@ &__title { font-weight: bold; cursor: pointer; - color: var(--color-body); + color: globals.$body-color; text-align: left; font-size: 16px; display: block; From c44b5fa6af2e3bab76981a223d256c18bdf448bb Mon Sep 17 00:00:00 2001 From: Hachi-R Date: Sun, 19 Jan 2025 20:27:38 -0300 Subject: [PATCH 17/25] refactor: migrate home page styles from VE to SCSS + BEM --- src/renderer/src/pages/home/home.scss | 103 ++++++++++++++++++++++++++ src/renderer/src/pages/home/home.tsx | 37 ++++----- 2 files changed, 118 insertions(+), 22 deletions(-) create mode 100644 src/renderer/src/pages/home/home.scss diff --git a/src/renderer/src/pages/home/home.scss b/src/renderer/src/pages/home/home.scss new file mode 100644 index 00000000..878b84f1 --- /dev/null +++ b/src/renderer/src/pages/home/home.scss @@ -0,0 +1,103 @@ +@use "../../scss/globals.scss"; + +.home { + &__content { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + gap: calc(globals.$spacing-unit * 3); + padding: calc(globals.$spacing-unit * 3); + flex: 1; + overflow-y: auto; + } + + &__header { + display: flex; + gap: globals.$spacing-unit; + justify-content: space-between; + align-items: center; + } + + &__buttons-list { + display: flex; + list-style: none; + margin: 0; + padding: 0; + gap: globals.$spacing-unit; + } + + &__cards { + display: grid; + grid-template-columns: repeat(1, 1fr); + gap: calc(globals.$spacing-unit * 2); + transition: all ease 0.2s; + + @media (min-width: 768px) { + grid-template-columns: repeat(2, 1fr); + } + + @media (min-width: 1250px) { + grid-template-columns: repeat(3, 1fr); + } + + @media (min-width: 1600px) { + grid-template-columns: repeat(4, 1fr); + } + } + + &__card-skeleton { + width: 100%; + height: 180px; + box-shadow: 0px 0px 15px 0px #000000; + overflow: hidden; + border-radius: 4px; + transition: all ease 0.2s; + z-index: 1; + + &:active { + opacity: globals.$active-opacity; + } + } + + &__no-results { + height: 100%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 16px; + grid-column: 1 / -1; + } + + &__flame-icon { + width: 30px; + top: -10px; + left: -5px; + position: absolute; + } + + &__stars-icon { + width: 70px; + position: absolute; + top: -28px; + left: -27px; + } + + &__icon-wrapper { + width: 16px; + height: 16px; + position: relative; + } + + &__title-icon { + width: 24px; + height: 24px; + position: relative; + } + + &__title { + display: flex; + gap: globals.$spacing-unit; + } +} diff --git a/src/renderer/src/pages/home/home.tsx b/src/renderer/src/pages/home/home.tsx index abaaba84..c083d2b6 100644 --- a/src/renderer/src/pages/home/home.tsx +++ b/src/renderer/src/pages/home/home.tsx @@ -11,10 +11,10 @@ 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 * as styles from "./home.css"; -import { SPACING_UNIT, vars } from "@renderer/theme.css"; +import { vars } from "@renderer/theme.css"; import { buildGameDetailsPath } from "@renderer/helpers"; import { CatalogueCategory } from "@shared"; +import "./home.scss"; export default function Home() { const { t } = useTranslation("home"); @@ -95,13 +95,13 @@ export default function Home() { return ( -
                  +

                  {t("featured")}

                  -
                  -
                    +
                    +
                      {categories.map((category) => (
                    -

                    +

                    {currentCatalogueCategory === CatalogueCategory.Hot && ( -
                    +
                    Flame animation
                    )} @@ -174,10 +167,10 @@ export default function Home() { {t(currentCatalogueCategory)}

                    -
                    +
                    {isLoading ? Array.from({ length: 12 }).map((_, index) => ( - + )) : catalogue[currentCatalogueCategory].map((result) => ( Date: Mon, 20 Jan 2025 12:45:24 -0300 Subject: [PATCH 18/25] refactor: migrate profile page styles from VE to SCSS + BEM --- .../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.scss | 24 ++++ .../profile-content/locked-profile.tsx | 7 +- .../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.scss | 124 ++++++++++++++++ .../profile/profile-hero/profile-hero.tsx | 70 ++++----- src/renderer/src/pages/profile/profile.scss | 10 ++ src/renderer/src/pages/profile/profile.tsx | 8 +- .../report-profile/report-profile.scss | 24 ++++ .../profile/report-profile/report-profile.tsx | 15 +- .../upload-background-image-button.scss | 11 ++ .../upload-background-image-button.tsx | 8 +- 22 files changed, 786 insertions(+), 237 deletions(-) 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 create mode 100644 src/renderer/src/pages/profile/profile-content/locked-profile.scss 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 create mode 100644 src/renderer/src/pages/profile/profile-hero/profile-hero.scss create mode 100644 src/renderer/src/pages/profile/profile.scss create mode 100644 src/renderer/src/pages/profile/report-profile/report-profile.scss create mode 100644 src/renderer/src/pages/profile/upload-background-image-button/upload-background-image-button.scss diff --git a/src/renderer/src/pages/profile/edit-profile-modal/edit-profile-modal.scss b/src/renderer/src/pages/profile/edit-profile-modal/edit-profile-modal.scss new file mode 100644 index 00000000..2575def1 --- /dev/null +++ b/src/renderer/src/pages/profile/edit-profile-modal/edit-profile-modal.scss @@ -0,0 +1,57 @@ +@use "../../../scss/globals.scss"; + +.edit-profile-modal { + &__form { + display: flex; + flex-direction: column; + justify-content: center; + width: 350px; + } + + &__content { + gap: calc(globals.$spacing-unit * 3); + display: flex; + flex-direction: column; + } + + &__hint { + margin-top: calc(globals.$spacing-unit * 2); + } + + &__submit { + align-self: end; + margin-top: calc(globals.$spacing-unit * 3); + width: 100%; + } + + &__avatar-container { + align-self: center; + display: flex; + color: globals.$body-color; + justify-content: center; + align-items: center; + background-color: globals.$background-color; + position: relative; + cursor: pointer; + } + + &__avatar-overlay { + position: absolute; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.7); + color: globals.$muted-color; + z-index: 1; + cursor: pointer; + display: flex; + justify-content: center; + transition: all ease 0.2s; + align-items: center; + border-radius: 4px; + opacity: 0; + } + + &__avatar-container:hover &__avatar-overlay { + opacity: 1; + } +} diff --git a/src/renderer/src/pages/profile/edit-profile-modal/edit-profile-modal.tsx b/src/renderer/src/pages/profile/edit-profile-modal/edit-profile-modal.tsx index b9e1927f..d5cb12a8 100644 --- a/src/renderer/src/pages/profile/edit-profile-modal/edit-profile-modal.tsx +++ b/src/renderer/src/pages/profile/edit-profile-modal/edit-profile-modal.tsx @@ -13,13 +13,12 @@ import { } from "@renderer/components"; import { useToast, useUserDetails } from "@renderer/hooks"; -import { SPACING_UNIT } from "@renderer/theme.css"; import { yupResolver } from "@hookform/resolvers/yup"; import * as yup from "yup"; -import * as styles from "./edit-profile-modal.css"; import { userProfileContext } from "@renderer/context"; +import "./edit-profile-modal.scss"; interface FormValues { profileImageUrl?: string; @@ -80,20 +79,9 @@ export function EditProfileModal(
                    -
                    +
                    -
                    +
                    @@ -167,7 +155,7 @@ export function EditProfileModal( />
                    - + @@ -175,7 +163,7 @@ export function EditProfileModal( diff --git a/src/renderer/src/pages/profile/profile-content/user-stats-box.scss b/src/renderer/src/pages/profile/profile-content/user-stats-box.scss new file mode 100644 index 00000000..c19fb612 --- /dev/null +++ b/src/renderer/src/pages/profile/profile-content/user-stats-box.scss @@ -0,0 +1,75 @@ +@use "../../../scss/globals.scss"; + +.user-stats { + &__box { + background-color: globals.$background-color; + border-radius: 4px; + border: solid 1px globals.$border-color; + padding: calc(globals.$spacing-unit * 2); + } + + &__section-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: calc(globals.$spacing-unit * 2); + } + + &__list { + list-style: none; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + gap: calc(globals.$spacing-unit * 2); + } + + &__list-item { + display: flex; + flex-direction: column; + transition: all ease 0.1s; + color: globals.$muted-color; + width: 100%; + overflow: hidden; + border-radius: 4px; + padding: globals.$spacing-unit; + gap: globals.$spacing-unit; + + &:hover { + background-color: rgba(255, 255, 255, 0.15); + text-decoration: none; + } + } + + &__list-title { + font-weight: bold; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + &__list-description { + display: flex; + align-items: center; + gap: globals.$spacing-unit; + } + + &__stats-row { + display: flex; + justify-content: space-between; + } + + &__link { + text-align: start; + color: globals.$body-color; + + &--warning { + color: globals.$warning-color; + } + + &:hover { + text-decoration: underline; + cursor: pointer; + } + } +} diff --git a/src/renderer/src/pages/profile/profile-content/user-stats-box.tsx b/src/renderer/src/pages/profile/profile-content/user-stats-box.tsx index b33afab5..26ec79f4 100644 --- a/src/renderer/src/pages/profile/profile-content/user-stats-box.tsx +++ b/src/renderer/src/pages/profile/profile-content/user-stats-box.tsx @@ -1,4 +1,3 @@ -import * as styles from "./profile-content.css"; import { useCallback, useContext } from "react"; import { userProfileContext } from "@renderer/context"; import { useTranslation } from "react-i18next"; @@ -7,7 +6,7 @@ import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants"; import HydraIcon from "@renderer/assets/icons/hydra.svg?react"; import { useSubscription } from "@renderer/hooks/use-subscription"; import { ClockIcon, TrophyIcon } from "@primer/octicons-react"; -import { vars } from "@renderer/theme.css"; +import "./user-stats-box.scss"; export function UserStatsBox() { const { showHydraCloudModal } = useSubscription(); @@ -36,22 +35,20 @@ export function UserStatsBox() { return (
                    -
                    +

                    {t("stats")}

                    -
                    -
                      +
                      +
                        {(isMe || userStats.unlockedAchievementSum !== undefined) && ( -
                      • -

                        +
                      • +

                        {t("achievements_unlocked")}

                        {userStats.unlockedAchievementSum !== undefined ? ( -
                        -

                        +

                        +

                        {userStats.unlockedAchievementSum}{" "} {t("achievements")}

                        @@ -60,9 +57,9 @@ export function UserStatsBox() { @@ -71,13 +68,11 @@ export function UserStatsBox() { )} {(isMe || userStats.achievementsPointsEarnedSum !== undefined) && ( -
                      • -

                        {t("earned_points")}

                        +
                      • +

                        {t("earned_points")}

                        {userStats.achievementsPointsEarnedSum !== undefined ? ( -
                        -

                        +

                        +

                        {numberFormatter.format( userStats.achievementsPointsEarnedSum.value @@ -94,9 +89,9 @@ export function UserStatsBox() { @@ -104,10 +99,10 @@ export function UserStatsBox() {

                        • )} -
                      • -

                        {t("total_play_time")}

                        -
                        -

                        +

                      • +

                        {t("total_play_time")}

                        +
                        +

                        {formatPlayTime(userStats.totalPlayTimeInSeconds.value)}

                        diff --git a/src/renderer/src/pages/profile/profile-hero/profile-hero.scss b/src/renderer/src/pages/profile/profile-hero/profile-hero.scss new file mode 100644 index 00000000..8be99794 --- /dev/null +++ b/src/renderer/src/pages/profile/profile-hero/profile-hero.scss @@ -0,0 +1,124 @@ +@use "../../../scss/globals.scss"; + +.profile-hero { + &__content-box { + display: flex; + flex-direction: column; + position: relative; + } + + &__background { + &-image { + position: absolute; + width: 100%; + height: 100%; + object-fit: cover; + } + + &-overlay { + width: 100%; + height: 100%; + z-index: 1; + background: linear-gradient(135deg, rgb(0 0 0 / 40%), rgb(0 0 0 / 30%)); + + &--transparent { + background: transparent; + } + } + } + + &__user-information { + display: flex; + padding: calc(globals.$spacing-unit * 7) calc(globals.$spacing-unit * 3); + align-items: center; + gap: calc(globals.$spacing-unit * 2); + } + + &__avatar-button { + width: 96px; + min-width: 96px; + height: 96px; + border-radius: 4px; + display: flex; + justify-content: center; + align-items: center; + background-color: globals.$background-color; + border: solid 1px globals.$border-color; + box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.7); + cursor: pointer; + transition: all ease 0.3s; + color: globals.$muted-color; + position: relative; + + &:hover { + box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7); + } + } + + &__information { + display: flex; + flex-direction: column; + gap: globals.$spacing-unit; + align-items: flex-start; + color: globals.$muted-color; + z-index: 1; + overflow: hidden; + } + + &__display-name { + font-weight: bold; + overflow: hidden; + text-overflow: ellipsis; + width: 100%; + display: flex; + align-items: center; + position: relative; + text-shadow: 0 0 5px rgb(0 0 0 / 40%); + } + + &__current-game { + &-wrapper { + display: flex; + flex-direction: column; + gap: calc(globals.$spacing-unit / 2); + } + + &-details { + display: flex; + flex-direction: row; + gap: globals.$spacing-unit; + align-items: center; + } + } + + &__hero-panel { + width: 100%; + height: 72px; + min-height: 72px; + padding: calc(globals.$spacing-unit * 2) calc(globals.$spacing-unit * 3); + display: flex; + gap: globals.$spacing-unit; + justify-content: space-between; + backdrop-filter: blur(15px); + border-top: solid 1px rgba(255, 255, 255, 0.1); + box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.5); + background-color: rgba(0, 0, 0, 0.3); + + &--transparent { + background: transparent; + } + } + + &__actions { + display: flex; + gap: globals.$spacing-unit; + justify-content: flex-end; + flex: 1; + } + + &__button { + &--outline { + border-color: globals.$body-color; + } + } +} diff --git a/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx b/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx index 0aaee611..c8225bfb 100644 --- a/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx +++ b/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx @@ -1,6 +1,3 @@ -import { SPACING_UNIT, vars } from "@renderer/theme.css"; - -import * as styles from "./profile-hero.css"; import { useCallback, useContext, useMemo, useState } from "react"; import { userProfileContext } from "@renderer/context"; import { @@ -27,14 +24,12 @@ import type { FriendRequestAction } from "@types"; import { EditProfileModal } from "../edit-profile-modal/edit-profile-modal"; import Skeleton from "react-loading-skeleton"; import { UploadBackgroundImageButton } from "../upload-background-image-button/upload-background-image-button"; +import "./profile-hero.scss"; type FriendAction = | FriendRequestAction | ("BLOCK" | "UNDO_FRIENDSHIP" | "SEND"); -const backgroundImageLayer = - "linear-gradient(135deg, rgb(0 0 0 / 40%), rgb(0 0 0 / 30%))"; - export function ProfileHero() { const [showEditProfileModal, setShowEditProfileModal] = useState(false); const [isPerformingAction, setIsPerformingAction] = useState(false); @@ -127,7 +122,7 @@ export function ProfileHero() { theme="outline" onClick={() => setShowEditProfileModal(true)} disabled={isPerformingAction} - style={{ borderColor: vars.color.body }} + className="profile-hero__button--outline" > {t("edit_profile")} @@ -152,7 +147,7 @@ export function ProfileHero() { theme="outline" onClick={() => handleFriendAction(userProfile.id, "SEND")} disabled={isPerformingAction} - style={{ borderColor: vars.color.body }} + className="profile-hero__button--outline" > {t("add_friend")} @@ -187,7 +182,7 @@ export function ProfileHero() { handleFriendAction(userProfile.id, "UNDO_FRIENDSHIP") } disabled={isPerformingAction} - style={{ borderColor: vars.color.body }} + className="profile-hero__button--outline" > {t("undo_friendship")} @@ -201,10 +196,10 @@ export function ProfileHero() { @@ -219,7 +214,7 @@ export function ProfileHero() { handleFriendAction(userProfile.relation!.AId, "ACCEPTED") } disabled={isPerformingAction} - style={{ borderColor: vars.color.body }} + className="profile-hero__button--outline" > {t("accept_request")} @@ -279,34 +274,28 @@ export function ProfileHero() { />
                        {backgroundImage && ( )}
                        -
                        +
                        -
                        +
                        {userProfile ? ( -

                        +

                        {userProfile?.displayName}

                        ) : ( @@ -326,8 +315,8 @@ export function ProfileHero() { )} {currentGame && ( -
                        -
                        +
                        +
                        -
                        - {profileActions} -
                        +
                        {profileActions}
                        diff --git a/src/renderer/src/pages/profile/profile.scss b/src/renderer/src/pages/profile/profile.scss new file mode 100644 index 00000000..0e3bcf0a --- /dev/null +++ b/src/renderer/src/pages/profile/profile.scss @@ -0,0 +1,10 @@ +@use "../../scss/globals.scss"; + +.profile { + &__wrapper { + width: 100%; + display: flex; + flex-direction: column; + gap: calc(globals.$spacing-unit * 3); + } +} diff --git a/src/renderer/src/pages/profile/profile.tsx b/src/renderer/src/pages/profile/profile.tsx index e6b4f5b3..d3fb6957 100644 --- a/src/renderer/src/pages/profile/profile.tsx +++ b/src/renderer/src/pages/profile/profile.tsx @@ -1,18 +1,16 @@ import { ProfileContent } from "./profile-content/profile-content"; import { SkeletonTheme } from "react-loading-skeleton"; -import { vars } from "@renderer/theme.css"; - -import * as styles from "./profile.css"; import { UserProfileContextProvider } from "@renderer/context"; import { useParams } from "react-router-dom"; +import "./profile.scss"; export default function Profile() { const { userId } = useParams(); return ( - -
                        + +
                        diff --git a/src/renderer/src/pages/profile/report-profile/report-profile.scss b/src/renderer/src/pages/profile/report-profile/report-profile.scss new file mode 100644 index 00000000..6c0ca923 --- /dev/null +++ b/src/renderer/src/pages/profile/report-profile/report-profile.scss @@ -0,0 +1,24 @@ +@use "../../../scss/globals.scss"; + +.report-profile { + &__button { + align-self: flex-end; + color: globals.$muted-color; + gap: globals.$spacing-unit; + display: flex; + cursor: pointer; + align-items: center; + font-size: globals.$small-font-size; + } + + &__form { + display: flex; + flex-direction: column; + gap: calc(globals.$spacing-unit * 2); + } + + &__submit { + margin-top: globals.$spacing-unit; + align-self: flex-end; + } +} diff --git a/src/renderer/src/pages/profile/report-profile/report-profile.tsx b/src/renderer/src/pages/profile/report-profile/report-profile.tsx index f859b7f3..04afea51 100644 --- a/src/renderer/src/pages/profile/report-profile/report-profile.tsx +++ b/src/renderer/src/pages/profile/report-profile/report-profile.tsx @@ -1,15 +1,14 @@ import { ReportIcon } from "@primer/octicons-react"; -import * as styles from "./report-profile.css"; import { Button, Modal, SelectField, TextField } from "@renderer/components"; import { useCallback, useContext, useEffect, useState } from "react"; import { Controller, useForm } from "react-hook-form"; import { useTranslation } from "react-i18next"; import * as yup from "yup"; -import { SPACING_UNIT } from "@renderer/theme.css"; import { userProfileContext } from "@renderer/context"; import { yupResolver } from "@hookform/resolvers/yup"; import { useToast } from "@renderer/hooks"; +import "./report-profile.scss"; const reportReasons = ["hate", "sexual_content", "violence", "spam", "other"]; @@ -75,13 +74,7 @@ export function ReportProfile() { title={t("report_profile")} clickOutsideToClose={false} > - +

                    -
                    +

                    Hydra Cloud

                    -
                    +
                    {getHydraCloudSectionContent().description}
                    -
                    +

                    {t("blocked_users")}

                    {blockedUsers.length > 0 ? ( -
                      +
                        {blockedUsers.map((user) => { return ( -
                      • -
                        +
                      • +
                        handleUnblockClick(user.id)} disabled={isUnblocking} > diff --git a/src/renderer/src/pages/settings/settings-behavior.scss b/src/renderer/src/pages/settings/settings-behavior.scss new file mode 100644 index 00000000..693ef08a --- /dev/null +++ b/src/renderer/src/pages/settings/settings-behavior.scss @@ -0,0 +1,13 @@ +@use "../../scss/globals.scss"; + +.settings-behavior { + &__checkbox-container { + opacity: globals.$disabled-opacity; + cursor: not-allowed; + + &--enabled { + opacity: 1; + cursor: pointer; + } + } +} diff --git a/src/renderer/src/pages/settings/settings-behavior.tsx b/src/renderer/src/pages/settings/settings-behavior.tsx index 28c50256..b7bbdfaa 100644 --- a/src/renderer/src/pages/settings/settings-behavior.tsx +++ b/src/renderer/src/pages/settings/settings-behavior.tsx @@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next"; import { CheckboxField } from "@renderer/components"; import { useAppSelector } from "@renderer/hooks"; import { settingsContext } from "@renderer/context"; +import "./settings-behavior.scss"; export function SettingsBehavior() { const userPreferences = useAppSelector( @@ -77,10 +78,11 @@ export function SettingsBehavior() { )} {showRunAtStartup && ( -
                        +
                        { diff --git a/src/renderer/src/pages/settings/settings-download-sources.scss b/src/renderer/src/pages/settings/settings-download-sources.scss new file mode 100644 index 00000000..6ef42283 --- /dev/null +++ b/src/renderer/src/pages/settings/settings-download-sources.scss @@ -0,0 +1,56 @@ +@use "../../scss/globals.scss"; + +.settings-download-sources { + &__list { + padding: 0; + margin: 0; + gap: calc(globals.$spacing-unit * 2); + display: flex; + flex-direction: column; + } + + &__item { + display: flex; + flex-direction: column; + background-color: globals.$dark-background-color; + border-radius: 8px; + padding: calc(globals.$spacing-unit * 2); + gap: globals.$spacing-unit; + border: solid 1px globals.$border-color; + transition: all ease 0.2s; + + &--syncing { + opacity: globals.$disabled-opacity; + } + } + + &__item-header { + margin-bottom: globals.$spacing-unit; + display: flex; + flex-direction: column; + gap: globals.$spacing-unit; + } + + &__header { + display: flex; + justify-content: space-between; + align-items: center; + } + + &__navigate-button { + display: flex; + align-items: center; + gap: globals.$spacing-unit; + color: globals.$muted-color; + text-decoration: underline; + cursor: pointer; + background: none; + border: none; + padding: 0; + + &:disabled { + cursor: default; + text-decoration: none; + } + } +} diff --git a/src/renderer/src/pages/settings/settings-download-sources.tsx b/src/renderer/src/pages/settings/settings-download-sources.tsx index cacd1910..11afa630 100644 --- a/src/renderer/src/pages/settings/settings-download-sources.tsx +++ b/src/renderer/src/pages/settings/settings-download-sources.tsx @@ -3,7 +3,6 @@ import { useContext, useEffect, useState } from "react"; import { TextField, Button, Badge } from "@renderer/components"; import { useTranslation } from "react-i18next"; -import * as styles from "./settings-download-sources.css"; import type { DownloadSource } from "@types"; import { NoEntryIcon, PlusCircleIcon, SyncIcon } from "@primer/octicons-react"; import { AddDownloadSourceModal } from "./add-download-source-modal"; @@ -14,6 +13,7 @@ import { downloadSourcesTable } from "@renderer/dexie"; import { downloadSourcesWorker } from "@renderer/workers"; import { useNavigate } from "react-router-dom"; import { setFilters, clearFilters } from "@renderer/features"; +import "./settings-download-sources.scss"; export function SettingsDownloadSources() { const [showAddDownloadSourceModal, setShowAddDownloadSourceModal] = @@ -118,7 +118,7 @@ export function SettingsDownloadSources() {

                        {t("download_sources_description")}

                        -
                        +
                        -
                          +
                            {downloadSources.map((downloadSource) => (
                          • -
                            +

                            {downloadSource.name}

                            @@ -161,7 +159,7 @@ export function SettingsDownloadSources() { + } placeholder="API Token" - containerProps={{ style: { marginTop: `${SPACING_UNIT}px` } }} hint={ @@ -109,14 +114,6 @@ export function SettingsRealDebrid() { } /> )} - - ); } diff --git a/src/renderer/src/pages/settings/settings.scss b/src/renderer/src/pages/settings/settings.scss new file mode 100644 index 00000000..49b228bc --- /dev/null +++ b/src/renderer/src/pages/settings/settings.scss @@ -0,0 +1,27 @@ +@use "../../scss/globals.scss"; + +.settings { + &__container { + padding: 24px; + width: 100%; + display: flex; + } + + &__content { + background-color: globals.$background-color; + width: 100%; + height: 100%; + padding: calc(globals.$spacing-unit * 3); + border: solid 1px globals.$border-color; + box-shadow: 0px 0px 15px 0px #000000; + border-radius: 8px; + gap: calc(globals.$spacing-unit * 2); + display: flex; + flex-direction: column; + } + + &__categories { + display: flex; + gap: globals.$spacing-unit; + } +} diff --git a/src/renderer/src/pages/settings/settings.tsx b/src/renderer/src/pages/settings/settings.tsx index 5fba6c5d..75989aed 100644 --- a/src/renderer/src/pages/settings/settings.tsx +++ b/src/renderer/src/pages/settings/settings.tsx @@ -1,11 +1,8 @@ import { Button } from "@renderer/components"; - -import * as styles from "./settings.css"; import { useTranslation } from "react-i18next"; import { SettingsRealDebrid } from "./settings-real-debrid"; import { SettingsGeneral } from "./settings-general"; import { SettingsBehavior } from "./settings-behavior"; - import { SettingsDownloadSources } from "./settings-download-sources"; import { SettingsContextConsumer, @@ -14,10 +11,10 @@ import { import { SettingsAccount } from "./settings-account"; import { useUserDetails } from "@renderer/hooks"; import { useMemo } from "react"; +import "./settings.scss"; export default function Settings() { const { t } = useTranslation("settings"); - const { userDetails } = useUserDetails(); const categories = useMemo(() => { @@ -57,9 +54,9 @@ export default function Settings() { }; return ( -
                            -
                            -
                            +
                            +
                            +
                            {categories.map((category, index) => ( diff --git a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-item.scss b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-item.scss new file mode 100644 index 00000000..715684e2 --- /dev/null +++ b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-item.scss @@ -0,0 +1,64 @@ +@use "../../../scss/globals.scss"; + +.user-friend-item { + &__container { + display: flex; + gap: calc(globals.$spacing-unit * 3); + align-items: center; + border-radius: 4px; + border: solid 1px globals.$border-color; + width: 100%; + height: 54px; + min-height: 54px; + transition: all ease 0.2s; + position: relative; + + &:hover { + background-color: rgba(255, 255, 255, 0.15); + } + } + + &__button { + display: flex; + align-items: center; + position: absolute; + cursor: pointer; + height: 100%; + width: 100%; + flex-direction: row; + color: globals.$body-color; + gap: calc(globals.$spacing-unit + globals.$spacing-unit / 2); + padding: 0 globals.$spacing-unit; + } + + &__display-name { + font-weight: bold; + font-size: globals.$body-font-size; + text-align: left; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + &__accept-button { + cursor: pointer; + color: globals.$body-color; + width: 28px; + height: 28px; + + &:hover { + color: globals.$success-color; + } + } + + &__cancel-button { + cursor: pointer; + color: globals.$body-color; + width: 28px; + height: 28px; + + &:hover { + color: globals.$danger-color; + } + } +} diff --git a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-item.tsx b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-item.tsx index 38f0dd25..13a22357 100644 --- a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-item.tsx +++ b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-item.tsx @@ -1,8 +1,7 @@ import { CheckCircleIcon, XCircleIcon } from "@primer/octicons-react"; -import * as styles from "./user-friend-modal.css"; -import { SPACING_UNIT } from "@renderer/theme.css"; import { useTranslation } from "react-i18next"; import { Avatar } from "@renderer/components"; +import "./user-friend-item.scss"; export type UserFriendItemProps = { userId: string; @@ -31,10 +30,9 @@ export const UserFriendItem = (props: UserFriendItemProps) => { const getRequestDescription = () => { if (type === "ACCEPTED" || type === null) return null; - return ( - {type == "SENT" ? t("request_sent") : t("request_received")} + {type === "SENT" ? t("request_sent") : t("request_received")} ); }; @@ -45,7 +43,7 @@ export const UserFriendItem = (props: UserFriendItemProps) => { if (type === "SENT") { return (
                            -
                            {getRequestActions()} diff --git a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-add-friend.scss b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-add-friend.scss new file mode 100644 index 00000000..8c896a9e --- /dev/null +++ b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-add-friend.scss @@ -0,0 +1,21 @@ +@use "../../../scss/globals.scss"; + +.user-friend-modal-add-friend { + &__actions { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: globals.$spacing-unit; + } + + &__button { + align-self: end; + } + + &__pending-container { + display: flex; + flex-direction: column; + gap: calc(globals.$spacing-unit * 2); + } +} diff --git a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-add-friend.tsx b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-add-friend.tsx index 23444e70..2bcf5ba7 100644 --- a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-add-friend.tsx +++ b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-add-friend.tsx @@ -1,10 +1,10 @@ import { Button, TextField } from "@renderer/components"; import { useToast, useUserDetails } from "@renderer/hooks"; -import { SPACING_UNIT } from "@renderer/theme.css"; import { useState } from "react"; import { useTranslation } from "react-i18next"; import { useNavigate } from "react-router-dom"; import { UserFriendItem } from "./user-friend-item"; +import "./user-friend-modal-add-friend.scss"; export interface UserFriendModalAddFriendProps { closeModal: () => void; @@ -76,15 +76,7 @@ export const UserFriendModalAddFriend = ({ return ( <> -
                            +
                            -
                            +

                            {t("pending")}

                            {friendRequests.length === 0 &&

                            {t("no_pending_invites")}

                            } {friendRequests.map((request) => { diff --git a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-list.scss b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-list.scss new file mode 100644 index 00000000..eaf0e527 --- /dev/null +++ b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-list.scss @@ -0,0 +1,16 @@ +@use "../../../scss/globals.scss"; + +.user-friend-modal-list { + display: flex; + flex-direction: column; + gap: calc(globals.$spacing-unit * 2); + max-height: 400px; + overflow-y: scroll; + + &__skeleton { + width: 100%; + height: 54px; + overflow: hidden; + border-radius: 4px; + } +} diff --git a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-list.tsx b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-list.tsx index d104e676..610816fa 100644 --- a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-list.tsx +++ b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-list.tsx @@ -1,4 +1,3 @@ -import { SPACING_UNIT, vars } from "@renderer/theme.css"; import type { UserFriend } from "@types"; import { useEffect, useRef, useState } from "react"; import { UserFriendItem } from "./user-friend-item"; @@ -6,6 +5,7 @@ import { useNavigate } from "react-router-dom"; import { useToast, useUserDetails } from "@renderer/hooks"; import { useTranslation } from "react-i18next"; import Skeleton, { SkeletonTheme } from "react-loading-skeleton"; +import "./user-friend-modal-list.scss"; export interface UserFriendModalListProps { userId: string; @@ -94,41 +94,21 @@ export const UserFriendModalList = ({ }; return ( - -
                            + +
                            {!isLoading && friends.length === 0 &&

                            {t("no_friends_added")}

                            } - {friends.map((friend) => { - return ( - - ); - })} - {isLoading && ( - ( + - )} + ))} + {isLoading && }
                            ); diff --git a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.scss b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.scss new file mode 100644 index 00000000..550c0fd9 --- /dev/null +++ b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.scss @@ -0,0 +1,34 @@ +@use "../../../scss/globals.scss"; + +.user-friend-modal { + &__container { + display: flex; + width: 500px; + flex-direction: column; + gap: calc(globals.$spacing-unit * 2); + } + + &__header { + display: flex; + gap: globals.$spacing-unit; + align-items: center; + } + + &__friend-code-button { + color: globals.$body-color; + cursor: pointer; + display: flex; + gap: calc(globals.$spacing-unit / 2); + align-items: center; + transition: all ease 0.2s; + + &:hover { + color: globals.$muted-color; + } + } + + &__tabs { + display: flex; + gap: globals.$spacing-unit; + } +} diff --git a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.tsx b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.tsx index d827fa20..93997777 100644 --- a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.tsx +++ b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.tsx @@ -1,12 +1,11 @@ import { Button, Modal } from "@renderer/components"; -import { SPACING_UNIT } from "@renderer/theme.css"; import { useCallback, useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; import { UserFriendModalAddFriend } from "./user-friend-modal-add-friend"; import { useToast, useUserDetails } from "@renderer/hooks"; import { UserFriendModalList } from "./user-friend-modal-list"; import { CopyIcon } from "@primer/octicons-react"; -import * as styles from "./user-friend-modal.css"; +import "./user-friend-modal.scss"; export enum UserFriendModalTab { FriendsList, @@ -27,15 +26,11 @@ export const UserFriendModal = ({ userId, }: UserFriendsModalProps) => { const { t } = useTranslation("user_profile"); - const tabs = [t("friends_list"), t("add_friends")]; - const [currentTab, setCurrentTab] = useState( initialTab || UserFriendModalTab.FriendsList ); - const { showSuccessToast } = useToast(); - const { userDetails } = useUserDetails(); const isMe = userDetails?.id == userId; @@ -64,44 +59,29 @@ export const UserFriendModal = ({ return ( -
                            +
                            {isMe && ( <> -
                            +

                            {t("your_friend_code")}

                            -
                            - {tabs.map((tab, index) => { - return ( - - ); - })} +
                            + {tabs.map((tab, index) => ( + + ))}
                            )} From c7bc868fbba262e85574c3bc4630568c36c4d9d2 Mon Sep 17 00:00:00 2001 From: Hachi-R Date: Tue, 21 Jan 2025 15:56:54 -0300 Subject: [PATCH 23/25] refactor: migrate playtime styles from VE to SCSS + BEM --- .../game-details/hero/hero-panel-playtime.scss | 15 +++++++++++++++ .../game-details/hero/hero-panel-playtime.tsx | 13 +++---------- 2 files changed, 18 insertions(+), 10 deletions(-) create mode 100644 src/renderer/src/pages/game-details/hero/hero-panel-playtime.scss diff --git a/src/renderer/src/pages/game-details/hero/hero-panel-playtime.scss b/src/renderer/src/pages/game-details/hero/hero-panel-playtime.scss new file mode 100644 index 00000000..c8a1de09 --- /dev/null +++ b/src/renderer/src/pages/game-details/hero/hero-panel-playtime.scss @@ -0,0 +1,15 @@ +@use "../../../scss/globals.scss"; + +.hero-panel-playtime { + &__download-details { + gap: globals.$spacing-unit; + display: flex; + color: globals.$body-color; + align-items: center; + } + + &__downloads-link { + color: globals.$body-color; + text-decoration: underline; + } +} diff --git a/src/renderer/src/pages/game-details/hero/hero-panel-playtime.tsx b/src/renderer/src/pages/game-details/hero/hero-panel-playtime.tsx index 7955694b..567858c3 100644 --- a/src/renderer/src/pages/game-details/hero/hero-panel-playtime.tsx +++ b/src/renderer/src/pages/game-details/hero/hero-panel-playtime.tsx @@ -1,24 +1,18 @@ import { useContext, useEffect, useMemo, useState } from "react"; import { useTranslation } from "react-i18next"; -import * as styles from "./hero-panel.css"; import { formatDownloadProgress } from "@renderer/helpers"; import { useDate, useDownload, useFormat } from "@renderer/hooks"; import { Link } from "@renderer/components"; - import { gameDetailsContext } from "@renderer/context"; import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants"; +import "./hero-panel-playtime.scss"; export function HeroPanelPlaytime() { const [lastTimePlayed, setLastTimePlayed] = useState(""); - const { game, isGameRunning } = useContext(gameDetailsContext); - const { t } = useTranslation("game_details"); - const { numberFormatter } = useFormat(); - const { progress, lastPacket } = useDownload(); - const { formatDistance } = useDate(); useEffect(() => { @@ -55,8 +49,8 @@ export function HeroPanelPlaytime() { game.status === "active" && lastPacket?.game.id === game.id; const downloadInProgressInfo = ( -
                            - +
                            + {game.status === "active" ? t("download_in_progress") : t("download_paused")} @@ -81,7 +75,6 @@ export function HeroPanelPlaytime() { return ( <>

                            {t("playing_now")}

                            - {hasDownload && downloadInProgressInfo} ); From 28a2f1dda5796eda394f887f4ffa5152926b3f75 Mon Sep 17 00:00:00 2001 From: Hachi-R Date: Tue, 21 Jan 2025 17:41:58 -0300 Subject: [PATCH 24/25] refactor: fix some styles in game details modals --- .../modals/download-settings-modal.scss | 3 +- .../modals/game-options-modal.scss | 68 ++++- .../modals/game-options-modal.tsx | 234 +++++++++--------- 3 files changed, 189 insertions(+), 116 deletions(-) diff --git a/src/renderer/src/pages/game-details/modals/download-settings-modal.scss b/src/renderer/src/pages/game-details/modals/download-settings-modal.scss index 5aa58197..d98a95ad 100644 --- a/src/renderer/src/pages/game-details/modals/download-settings-modal.scss +++ b/src/renderer/src/pages/game-details/modals/download-settings-modal.scss @@ -10,11 +10,12 @@ &__downloads-path-field { display: flex; + flex-direction: column; gap: globals.$spacing-unit; } &__hint-text { - font-size: globals.$small-font-size; + font-size: 12px; color: globals.$body-color; } diff --git a/src/renderer/src/pages/game-details/modals/game-options-modal.scss b/src/renderer/src/pages/game-details/modals/game-options-modal.scss index 0a3c0246..00113260 100644 --- a/src/renderer/src/pages/game-details/modals/game-options-modal.scss +++ b/src/renderer/src/pages/game-details/modals/game-options-modal.scss @@ -7,18 +7,80 @@ flex-direction: column; } - &__header { + &__section { display: flex; flex-direction: column; gap: globals.$spacing-unit; } - &__header-description { - font-weight: 400; + &__header { + display: flex; + flex-direction: column; + gap: globals.$spacing-unit; + + &-description { + font-weight: 400; + } } &__row { display: flex; gap: globals.$spacing-unit; } + + &__executable-field { + display: flex; + flex-direction: column; + gap: globals.$spacing-unit; + + &-input { + width: 100%; + } + + &-buttons { + display: flex; + gap: globals.$spacing-unit; + } + } + + &__wine-prefix { + display: flex; + flex-direction: column; + gap: calc(globals.$spacing-unit * 2); + + &-input { + width: 100%; + } + } + + &__launch-options { + display: flex; + flex-direction: column; + gap: globals.$spacing-unit; + + &-input { + width: 100%; + } + } + + &__downloads { + display: flex; + flex-direction: column; + gap: globals.$spacing-unit; + } + + &__danger-zone { + display: flex; + flex-direction: column; + gap: globals.$spacing-unit; + + &-description { + font-weight: 400; + } + + &-buttons { + display: flex; + gap: globals.$spacing-unit; + } + } } diff --git a/src/renderer/src/pages/game-details/modals/game-options-modal.tsx b/src/renderer/src/pages/game-details/modals/game-options-modal.tsx index 2a826c04..ec6a8b07 100644 --- a/src/renderer/src/pages/game-details/modals/game-options-modal.tsx +++ b/src/renderer/src/pages/game-details/modals/game-options-modal.tsx @@ -2,7 +2,6 @@ import { useContext, useRef, useState } from "react"; import { useTranslation } from "react-i18next"; import { Button, Modal, TextField } from "@renderer/components"; import type { Game } from "@types"; -import * as styles from "./game-options-modal.css"; import { gameDetailsContext } from "@renderer/context"; import { DeleteGameModal } from "@renderer/pages/downloads/delete-game-modal"; import { useDownload, useToast, useUserDetails } from "@renderer/hooks"; @@ -179,14 +178,12 @@ export function GameOptionsModal({ onClose={() => setShowDeleteModal(false)} deleteGame={handleDeleteGame} /> - setShowRemoveGameModal(false)} removeGameFromLibrary={handleRemoveGameFromLibrary} game={game} /> - setShowResetAchievementsModal(false)} @@ -201,58 +198,65 @@ export function GameOptionsModal({ large={true} >
                            -
                            -

                            {t("executable_section_title")}

                            -

                            - {t("executable_section_description")} -

                            +
                            +
                            +

                            {t("executable_section_title")}

                            +

                            + {t("executable_section_description")} +

                            +
                            + +
                            + + + {game.executablePath && ( + + )} + + } + /> + + {game.executablePath && ( +
                            + + +
                            + )} +
                            - - - {game.executablePath && ( - - )} - - } - /> - - {game.executablePath && ( -
                            - - -
                            - )} - {shouldShowWinePrefixConfiguration && ( -
                            -
                            +
                            +

                            {t("wine_prefix")}

                            -

                            +

                            {t("wine_prefix_description")}

                            @@ -287,11 +291,13 @@ export function GameOptionsModal({ )} {shouldShowLaunchOptionsConfiguration && ( -
                            -

                            {t("launch_options")}

                            -

                            - {t("launch_options_description")} -

                            +
                            +
                            +

                            {t("launch_options")}

                            +

                            + {t("launch_options_description")} +

                            +
                            )} -
                            -

                            {t("downloads_secion_title")}

                            -

                            - {t("downloads_section_description")} -

                            +
                            +
                            +

                            {t("downloads_secion_title")}

                            +

                            + {t("downloads_section_description")} +

                            +
                            + +
                            + + {game.downloadPath && ( + + )} +
                            -
                            - - {game.downloadPath && ( +
                            +
                            +

                            {t("danger_zone_section_title")}

                            +

                            + {t("danger_zone_section_description")} +

                            +
                            + +
                            - )} -
                            -
                            -

                            {t("danger_zone_section_title")}

                            -

                            - {t("danger_zone_section_description")} -

                            -
                            + -
                            - - - - - + +
                            From 52f7647c79139587d5265093a028a4f268ea493d Mon Sep 17 00:00:00 2001 From: Hachi-R Date: Tue, 21 Jan 2025 18:09:08 -0300 Subject: [PATCH 25/25] refactor: remove css-in-ts styles from all pages --- .../pages/downloads/delete-game-modal.css.ts | 11 - .../src/pages/downloads/download-group.css.ts | 109 -------- .../src/pages/downloads/downloads.css.ts | 37 --- .../cloud-sync-files-modal.css.ts | 27 -- .../cloud-sync-modal/cloud-sync-modal.css.ts | 65 ----- .../description-header.css.ts | 19 -- .../gallery-slider/gallery-slider.css.ts | 131 ---------- .../pages/game-details/game-details.css.ts | 234 ----------------- .../hero/hero-panel-actions.css.ts | 18 -- .../pages/game-details/hero/hero-panel.css.ts | 77 ------ .../modals/download-settings-modal.css.ts | 45 ---- .../modals/game-options-modal.css.ts | 24 -- .../modals/remove-from-library-modal.css.ts | 11 - .../game-details/modals/repacks-modal.css.ts | 19 -- .../sidebar-section/sidebar-section.css.ts | 37 --- .../pages/game-details/sidebar/sidebar.css.ts | 169 ------------- .../src/pages/home/catalogue-home.css.ts | 24 -- src/renderer/src/pages/home/home.css.ts | 77 ------ .../edit-profile-modal.css.ts | 36 --- .../profile-content/locked-profile.css.ts | 24 -- .../profile-content/profile-content.css.ts | 237 ------------------ .../profile/profile-hero/profile-hero.css.ts | 90 ------- src/renderer/src/pages/profile/profile.css.ts | 9 - .../report-profile/report-profile.css.ts | 12 - .../upload-background-image-button.css.ts | 12 - .../pages/settings/settings-account.css.ts | 39 --- .../settings/settings-download-sources.css.ts | 58 ----- .../settings/settings-real-debrid.css.ts | 13 - .../src/pages/settings/settings.css.ts | 27 -- .../user-friend-modal.css.ts | 79 ------ 30 files changed, 1770 deletions(-) delete mode 100644 src/renderer/src/pages/downloads/delete-game-modal.css.ts delete mode 100644 src/renderer/src/pages/downloads/download-group.css.ts delete mode 100644 src/renderer/src/pages/downloads/downloads.css.ts delete mode 100644 src/renderer/src/pages/game-details/cloud-sync-files-modal/cloud-sync-files-modal.css.ts delete mode 100644 src/renderer/src/pages/game-details/cloud-sync-modal/cloud-sync-modal.css.ts delete mode 100644 src/renderer/src/pages/game-details/description-header/description-header.css.ts delete mode 100644 src/renderer/src/pages/game-details/gallery-slider/gallery-slider.css.ts delete mode 100644 src/renderer/src/pages/game-details/game-details.css.ts delete mode 100644 src/renderer/src/pages/game-details/hero/hero-panel-actions.css.ts delete mode 100644 src/renderer/src/pages/game-details/hero/hero-panel.css.ts delete mode 100644 src/renderer/src/pages/game-details/modals/download-settings-modal.css.ts delete mode 100644 src/renderer/src/pages/game-details/modals/game-options-modal.css.ts delete mode 100644 src/renderer/src/pages/game-details/modals/remove-from-library-modal.css.ts delete mode 100644 src/renderer/src/pages/game-details/modals/repacks-modal.css.ts delete mode 100644 src/renderer/src/pages/game-details/sidebar-section/sidebar-section.css.ts delete mode 100644 src/renderer/src/pages/game-details/sidebar/sidebar.css.ts delete mode 100644 src/renderer/src/pages/home/catalogue-home.css.ts delete mode 100644 src/renderer/src/pages/home/home.css.ts delete mode 100644 src/renderer/src/pages/profile/edit-profile-modal/edit-profile-modal.css.ts delete mode 100644 src/renderer/src/pages/profile/profile-content/locked-profile.css.ts delete mode 100644 src/renderer/src/pages/profile/profile-content/profile-content.css.ts delete mode 100644 src/renderer/src/pages/profile/profile-hero/profile-hero.css.ts delete mode 100644 src/renderer/src/pages/profile/profile.css.ts delete mode 100644 src/renderer/src/pages/profile/report-profile/report-profile.css.ts delete mode 100644 src/renderer/src/pages/profile/upload-background-image-button/upload-background-image-button.css.ts delete mode 100644 src/renderer/src/pages/settings/settings-account.css.ts delete mode 100644 src/renderer/src/pages/settings/settings-download-sources.css.ts delete mode 100644 src/renderer/src/pages/settings/settings-real-debrid.css.ts delete mode 100644 src/renderer/src/pages/settings/settings.css.ts delete mode 100644 src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.css.ts diff --git a/src/renderer/src/pages/downloads/delete-game-modal.css.ts b/src/renderer/src/pages/downloads/delete-game-modal.css.ts deleted file mode 100644 index ca6c3888..00000000 --- a/src/renderer/src/pages/downloads/delete-game-modal.css.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { style } from "@vanilla-extract/css"; - -import { SPACING_UNIT } from "../../theme.css"; - -export const deleteActionsButtonsCtn = style({ - display: "flex", - width: "100%", - justifyContent: "end", - alignItems: "center", - gap: `${SPACING_UNIT}px`, -}); diff --git a/src/renderer/src/pages/downloads/download-group.css.ts b/src/renderer/src/pages/downloads/download-group.css.ts deleted file mode 100644 index cbbb4f8e..00000000 --- a/src/renderer/src/pages/downloads/download-group.css.ts +++ /dev/null @@ -1,109 +0,0 @@ -import { style } from "@vanilla-extract/css"; - -import { SPACING_UNIT, vars } from "../../theme.css"; - -export const downloadTitleWrapper = style({ - display: "flex", - alignItems: "center", - marginBottom: `${SPACING_UNIT}px`, - gap: `${SPACING_UNIT}px`, -}); - -export const downloadTitle = style({ - fontWeight: "bold", - cursor: "pointer", - color: vars.color.body, - textAlign: "left", - fontSize: "16px", - display: "block", - ":hover": { - textDecoration: "underline", - }, -}); - -export const downloads = style({ - width: "100%", - gap: `${SPACING_UNIT * 2}px`, - display: "flex", - flexDirection: "column", - margin: "0", - padding: "0", - marginTop: `${SPACING_UNIT}px`, -}); - -export const downloadCover = style({ - width: "280px", - minWidth: "280px", - height: "auto", - borderRight: `solid 1px ${vars.color.border}`, - position: "relative", - zIndex: "1", -}); - -export const downloadCoverContent = style({ - width: "100%", - height: "100%", - padding: `${SPACING_UNIT}px`, - display: "flex", - alignItems: "flex-end", - justifyContent: "flex-end", -}); - -export const downloadCoverBackdrop = style({ - width: "100%", - height: "100%", - background: "linear-gradient(0deg, rgba(0, 0, 0, 0.8) 5%, transparent 100%)", - display: "flex", - overflow: "hidden", - zIndex: "1", -}); - -export const downloadCoverImage = style({ - width: "100%", - height: "100%", - position: "absolute", - zIndex: "-1", -}); - -export const download = style({ - width: "100%", - backgroundColor: vars.color.background, - display: "flex", - borderRadius: "8px", - border: `solid 1px ${vars.color.border}`, - overflow: "hidden", - boxShadow: "0px 0px 5px 0px #000000", - transition: "all ease 0.2s", - height: "140px", - minHeight: "140px", - maxHeight: "140px", -}); - -export const downloadDetails = style({ - display: "flex", - flexDirection: "column", - flex: "1", - justifyContent: "center", - gap: `${SPACING_UNIT / 2}px`, - fontSize: "14px", -}); - -export const downloadRightContent = style({ - display: "flex", - padding: `${SPACING_UNIT * 2}px`, - flex: "1", - gap: `${SPACING_UNIT}px`, - background: "linear-gradient(90deg, transparent 20%, rgb(0 0 0 / 20%) 100%)", -}); - -export const downloadActions = style({ - display: "flex", - alignItems: "center", - gap: `${SPACING_UNIT}px`, -}); - -export const downloadGroup = style({ - display: "flex", - flexDirection: "column", - gap: `${SPACING_UNIT * 2}px`, -}); diff --git a/src/renderer/src/pages/downloads/downloads.css.ts b/src/renderer/src/pages/downloads/downloads.css.ts deleted file mode 100644 index abb3c30b..00000000 --- a/src/renderer/src/pages/downloads/downloads.css.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { style } from "@vanilla-extract/css"; - -import { SPACING_UNIT } from "../../theme.css"; - -export const downloadsContainer = style({ - display: "flex", - padding: `${SPACING_UNIT * 3}px`, - flexDirection: "column", - width: "100%", -}); - -export const downloadGroups = style({ - display: "flex", - gap: `${SPACING_UNIT * 3}px`, - flexDirection: "column", -}); - -export const arrowIcon = style({ - width: "60px", - height: "60px", - borderRadius: "50%", - backgroundColor: "rgba(255, 255, 255, 0.06)", - display: "flex", - alignItems: "center", - justifyContent: "center", - marginBottom: `${SPACING_UNIT * 2}px`, -}); - -export const noDownloads = style({ - display: "flex", - width: "100%", - height: "100%", - justifyContent: "center", - alignItems: "center", - flexDirection: "column", - gap: `${SPACING_UNIT}px`, -}); diff --git a/src/renderer/src/pages/game-details/cloud-sync-files-modal/cloud-sync-files-modal.css.ts b/src/renderer/src/pages/game-details/cloud-sync-files-modal/cloud-sync-files-modal.css.ts deleted file mode 100644 index 0dbab770..00000000 --- a/src/renderer/src/pages/game-details/cloud-sync-files-modal/cloud-sync-files-modal.css.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { style } from "@vanilla-extract/css"; - -import { SPACING_UNIT, vars } from "../../../theme.css"; - -export const mappingMethods = style({ - display: "grid", - gap: `${SPACING_UNIT}px`, - gridTemplateColumns: "repeat(2, 1fr)", -}); - -export const fileList = style({ - listStyle: "none", - margin: "0", - padding: "0", - display: "flex", - flexDirection: "column", - gap: `${SPACING_UNIT}px`, - marginTop: `${SPACING_UNIT * 2}px`, -}); - -export const fileItem = style({ - flex: 1, - color: vars.color.muted, - textDecoration: "underline", - display: "flex", - cursor: "pointer", -}); diff --git a/src/renderer/src/pages/game-details/cloud-sync-modal/cloud-sync-modal.css.ts b/src/renderer/src/pages/game-details/cloud-sync-modal/cloud-sync-modal.css.ts deleted file mode 100644 index dc2d0031..00000000 --- a/src/renderer/src/pages/game-details/cloud-sync-modal/cloud-sync-modal.css.ts +++ /dev/null @@ -1,65 +0,0 @@ -import { keyframes, style } from "@vanilla-extract/css"; - -import { SPACING_UNIT, vars } from "../../../theme.css"; - -export const rotate = keyframes({ - "0%": { transform: "rotate(0deg)" }, - "100%": { - transform: "rotate(360deg)", - }, -}); - -export const artifacts = style({ - display: "flex", - gap: `${SPACING_UNIT}px`, - flexDirection: "column", - listStyle: "none", - margin: "0", - padding: "0", -}); - -export const artifactButton = style({ - display: "flex", - textAlign: "left", - flexDirection: "row", - alignItems: "center", - gap: `${SPACING_UNIT}px`, - color: vars.color.body, - padding: `${SPACING_UNIT * 2}px`, - backgroundColor: vars.color.darkBackground, - border: `1px solid ${vars.color.border}`, - borderRadius: "4px", - justifyContent: "space-between", -}); - -export const syncIcon = style({ - animationName: rotate, - animationDuration: "1s", - animationIterationCount: "infinite", - animationTimingFunction: "linear", -}); - -export const progress = style({ - width: "100%", - height: "5px", - "::-webkit-progress-bar": { - backgroundColor: vars.color.darkBackground, - }, - "::-webkit-progress-value": { - backgroundColor: vars.color.muted, - }, -}); - -export const manageFilesButton = style({ - margin: "0", - padding: "0", - alignSelf: "flex-start", - fontSize: 14, - cursor: "pointer", - textDecoration: "underline", - color: vars.color.body, - ":disabled": { - cursor: "not-allowed", - opacity: vars.opacity.disabled, - }, -}); diff --git a/src/renderer/src/pages/game-details/description-header/description-header.css.ts b/src/renderer/src/pages/game-details/description-header/description-header.css.ts deleted file mode 100644 index 45856f31..00000000 --- a/src/renderer/src/pages/game-details/description-header/description-header.css.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { style } from "@vanilla-extract/css"; - -import { SPACING_UNIT, vars } from "../../../theme.css"; - -export const descriptionHeader = style({ - width: "100%", - padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 2}px`, - display: "flex", - justifyContent: "space-between", - alignItems: "center", - backgroundColor: vars.color.background, - height: "72px", -}); - -export const descriptionHeaderInfo = style({ - display: "flex", - gap: `${SPACING_UNIT}px`, - flexDirection: "column", -}); diff --git a/src/renderer/src/pages/game-details/gallery-slider/gallery-slider.css.ts b/src/renderer/src/pages/game-details/gallery-slider/gallery-slider.css.ts deleted file mode 100644 index d4f8084a..00000000 --- a/src/renderer/src/pages/game-details/gallery-slider/gallery-slider.css.ts +++ /dev/null @@ -1,131 +0,0 @@ -import { recipe } from "@vanilla-extract/recipes"; -import { style } from "@vanilla-extract/css"; - -import { SPACING_UNIT, vars } from "../../../theme.css"; - -export const gallerySliderContainer = style({ - padding: `${SPACING_UNIT * 3}px ${SPACING_UNIT * 2}px`, - width: "100%", - display: "flex", - flexDirection: "column", - alignItems: "center", -}); - -export const gallerySliderMedia = style({ - width: "100%", - height: "100%", - display: "block", - flexShrink: "0", - flexGrow: "0", - transition: "translate 0.3s ease-in-out", - borderRadius: "4px", - alignSelf: "center", -}); - -export const gallerySliderAnimationContainer = style({ - width: "100%", - height: "100%", - display: "flex", - position: "relative", - overflow: "hidden", - "@media": { - "(min-width: 1280px)": { - width: "60%", - }, - }, -}); - -export const gallerySliderPreview = style({ - width: "100%", - padding: `${SPACING_UNIT}px 0`, - height: "100%", - display: "flex", - position: "relative", - overflowX: "auto", - overflowY: "hidden", - gap: `${SPACING_UNIT / 2}px`, - "@media": { - "(min-width: 1280px)": { - width: "60%", - }, - }, - "::-webkit-scrollbar-thumb": { - width: "20%", - }, - "::-webkit-scrollbar": { - height: "10px", - }, -}); - -export const mediaPreviewButton = recipe({ - base: { - cursor: "pointer", - width: "20%", - display: "block", - flexShrink: "0", - flexGrow: "0", - opacity: "0.3", - transition: "translate 0.3s ease-in-out, opacity 0.2s ease", - borderRadius: "4px", - border: `solid 1px ${vars.color.border}`, - overflow: "hidden", - ":hover": { - opacity: "0.8", - }, - }, - variants: { - active: { - true: { - opacity: "1", - }, - }, - }, -}); - -export const mediaPreview = style({ - width: "100%", - display: "flex", -}); - -export const gallerySliderButton = recipe({ - base: { - position: "absolute", - alignSelf: "center", - cursor: "pointer", - backgroundColor: "rgba(0, 0, 0, 0.4)", - transition: "all 0.2s ease-in-out", - borderRadius: "50%", - color: vars.color.muted, - width: "48px", - height: "48px", - ":hover": { - backgroundColor: "rgba(0, 0, 0, 0.6)", - }, - ":active": { - transform: "scale(0.95)", - }, - }, - variants: { - direction: { - left: { - left: "0", - marginLeft: `${SPACING_UNIT}px`, - transform: `translateX(${-(48 + SPACING_UNIT)}px)`, - }, - right: { - right: "0", - marginRight: `${SPACING_UNIT}px`, - transform: `translateX(${48 + SPACING_UNIT}px)`, - }, - }, - visible: { - true: { - transform: "translateX(0)", - opacity: "1", - }, - false: { - opacity: "0", - }, - }, - }, -}); diff --git a/src/renderer/src/pages/game-details/game-details.css.ts b/src/renderer/src/pages/game-details/game-details.css.ts deleted file mode 100644 index 228b2aeb..00000000 --- a/src/renderer/src/pages/game-details/game-details.css.ts +++ /dev/null @@ -1,234 +0,0 @@ -import { globalStyle, keyframes, style } from "@vanilla-extract/css"; - -import { SPACING_UNIT, vars } from "../../theme.css"; -import { recipe } from "@vanilla-extract/recipes"; - -export const HERO_HEIGHT = 300; - -export const slideIn = keyframes({ - "0%": { transform: `translateY(${40 + SPACING_UNIT * 2}px)`, opacity: "0px" }, - "100%": { transform: "translateY(0)", opacity: "1" }, -}); - -export const wrapper = recipe({ - base: { - display: "flex", - flexDirection: "column", - overflow: "hidden", - width: "100%", - height: "100%", - transition: "all ease 0.3s", - }, - variants: { - blurredContent: { - true: { - filter: "blur(20px)", - }, - }, - }, -}); - -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", - "@media": { - "(min-width: 1250px)": { - height: "350px", - minHeight: "350px", - }, - }, -}); - -export const heroContent = style({ - padding: `${SPACING_UNIT * 2}px`, - height: "100%", - width: "100%", - display: "flex", - justifyContent: "space-between", - alignItems: "flex-end", -}); - -export const heroLogoBackdrop = style({ - width: "100%", - height: "100%", - background: "linear-gradient(0deg, rgba(0, 0, 0, 0.3) 60%, transparent 100%)", - position: "absolute", - display: "flex", - flexDirection: "column", - justifyContent: "space-between", -}); - -export const heroImage = style({ - width: "100%", - height: `${HERO_HEIGHT}px`, - minHeight: `${HERO_HEIGHT}px`, - objectFit: "cover", - objectPosition: "top", - transition: "all ease 0.2s", - position: "absolute", - zIndex: "0", - "@media": { - "(min-width: 1250px)": { - objectPosition: "center", - height: "350px", - minHeight: "350px", - }, - }, -}); - -export const gameLogo = style({ - width: 300, - alignSelf: "flex-end", -}); - -export const heroImageSkeleton = style({ - height: "300px", - "@media": { - "(min-width: 1250px)": { - height: "350px", - }, - }, -}); - -export const container = style({ - width: "100%", - height: "100%", - display: "flex", - flexDirection: "column", - overflow: "auto", - zIndex: "1", -}); - -export const descriptionContainer = style({ - display: "flex", - width: "100%", - flex: "1", - background: `linear-gradient(0deg, ${vars.color.background} 50%, ${vars.color.darkBackground} 100%)`, -}); - -export const descriptionContent = style({ - width: "100%", - height: "100%", -}); - -export const description = style({ - userSelect: "text", - lineHeight: "22px", - fontSize: "16px", - padding: `${SPACING_UNIT * 3}px ${SPACING_UNIT * 2}px`, - "@media": { - "(min-width: 1280px)": { - width: "60%", - }, - }, - width: "100%", - marginLeft: "auto", - marginRight: "auto", -}); - -export const descriptionSkeleton = style({ - display: "flex", - flexDirection: "column", - gap: `${SPACING_UNIT}px`, - padding: `${SPACING_UNIT * 3}px ${SPACING_UNIT * 2}px`, - width: "100%", - "@media": { - "(min-width: 1280px)": { - width: "60%", - lineHeight: "22px", - }, - }, - marginLeft: "auto", - marginRight: "auto", -}); - -export const randomizerButton = style({ - animationName: slideIn, - animationDuration: "0.2s", - position: "fixed", - bottom: `${SPACING_UNIT * 3}px`, - /* Scroll bar + spacing */ - right: `${9 + SPACING_UNIT * 2}px`, - boxShadow: "rgba(255, 255, 255, 0.1) 0px 0px 10px 1px", - border: `solid 2px ${vars.color.border}`, - zIndex: "1", - backgroundColor: vars.color.background, - ":hover": { - backgroundColor: vars.color.background, - boxShadow: "rgba(255, 255, 255, 0.1) 0px 0px 15px 5px", - opacity: "1", - }, - ":active": { - transform: "scale(0.98)", - }, - ":disabled": { - boxShadow: "none", - transform: "none", - opacity: "0.8", - backgroundColor: vars.color.background, - }, -}); - -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}`, -}); - -globalStyle(".bb_tag", { - marginTop: `${SPACING_UNIT * 2}px`, - marginBottom: `${SPACING_UNIT * 2}px`, -}); - -globalStyle(`${description} img`, { - borderRadius: "5px", - marginTop: `${SPACING_UNIT}px`, - marginBottom: `${SPACING_UNIT * 3}px`, - display: "block", - width: "100%", - height: "auto", - objectFit: "cover", -}); - -globalStyle(`${description} a`, { - color: vars.color.body, -}); - -export const cloudSyncButton = style({ - padding: `${SPACING_UNIT * 1.5}px ${SPACING_UNIT * 2}px`, - backgroundColor: "rgba(0, 0, 0, 0.6)", - backdropFilter: "blur(20px)", - borderRadius: "8px", - transition: "all ease 0.2s", - cursor: "pointer", - minHeight: "40px", - display: "flex", - alignItems: "center", - justifyContent: "center", - gap: `${SPACING_UNIT}px`, - color: vars.color.muted, - fontSize: "14px", - border: `solid 1px ${vars.color.border}`, - boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.8)", - animation: `${slideIn} 0.2s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running`, - animationDuration: "0.3s", - ":active": { - opacity: "0.9", - }, - ":disabled": { - opacity: vars.opacity.disabled, - cursor: "not-allowed", - }, - ":hover": { - backgroundColor: "rgba(0, 0, 0, 0.5)", - }, -}); diff --git a/src/renderer/src/pages/game-details/hero/hero-panel-actions.css.ts b/src/renderer/src/pages/game-details/hero/hero-panel-actions.css.ts deleted file mode 100644 index ac9e6df1..00000000 --- a/src/renderer/src/pages/game-details/hero/hero-panel-actions.css.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { style } from "@vanilla-extract/css"; - -import { SPACING_UNIT, vars } from "../../../theme.css"; - -export const heroPanelAction = style({ - border: `solid 1px ${vars.color.muted}`, -}); - -export const actions = style({ - display: "flex", - gap: `${SPACING_UNIT * 2}px`, -}); - -export const separator = style({ - width: "1px", - backgroundColor: vars.color.muted, - opacity: "0.2", -}); diff --git a/src/renderer/src/pages/game-details/hero/hero-panel.css.ts b/src/renderer/src/pages/game-details/hero/hero-panel.css.ts deleted file mode 100644 index 3fdbc73b..00000000 --- a/src/renderer/src/pages/game-details/hero/hero-panel.css.ts +++ /dev/null @@ -1,77 +0,0 @@ -import { style } from "@vanilla-extract/css"; -import { recipe } from "@vanilla-extract/recipes"; - -import { SPACING_UNIT, vars } from "../../../theme.css"; - -export const panel = recipe({ - base: { - width: "100%", - height: "72px", - minHeight: "72px", - padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 3}px`, - backgroundColor: vars.color.darkBackground, - display: "flex", - alignItems: "center", - justifyContent: "space-between", - transition: "all ease 0.2s", - borderBottom: `solid 1px ${vars.color.border}`, - position: "sticky", - overflow: "hidden", - top: "0", - zIndex: "2", - }, - variants: { - stuck: { - true: { - boxShadow: "0px 0px 15px 0px rgba(0, 0, 0, 0.8)", - }, - }, - }, -}); - -export const content = style({ - display: "flex", - flexDirection: "column", - gap: `${SPACING_UNIT}px`, -}); - -export const actions = style({ - display: "flex", - gap: `${SPACING_UNIT}px`, -}); - -export const downloadDetailsRow = style({ - gap: `${SPACING_UNIT}px`, - display: "flex", - color: vars.color.body, - alignItems: "center", -}); - -export const downloadsLink = style({ - color: vars.color.body, - textDecoration: "underline", -}); - -export const progressBar = recipe({ - base: { - position: "absolute", - bottom: "0", - left: "0", - width: "100%", - height: "3px", - transition: "all ease 0.2s", - "::-webkit-progress-bar": { - backgroundColor: "transparent", - }, - "::-webkit-progress-value": { - backgroundColor: vars.color.muted, - }, - }, - variants: { - disabled: { - true: { - opacity: vars.opacity.disabled, - }, - }, - }, -}); diff --git a/src/renderer/src/pages/game-details/modals/download-settings-modal.css.ts b/src/renderer/src/pages/game-details/modals/download-settings-modal.css.ts deleted file mode 100644 index 3a776736..00000000 --- a/src/renderer/src/pages/game-details/modals/download-settings-modal.css.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { style } from "@vanilla-extract/css"; - -import { SPACING_UNIT, vars } from "../../../theme.css"; - -export const container = style({ - display: "flex", - flexDirection: "column", - gap: `${SPACING_UNIT * 3}px`, - width: "100%", -}); - -export const downloadsPathField = style({ - display: "flex", - gap: `${SPACING_UNIT}px`, -}); - -export const hintText = style({ - fontSize: "12px", - color: vars.color.body, -}); - -export const downloaders = style({ - display: "grid", - gap: `${SPACING_UNIT}px`, - gridTemplateColumns: "repeat(2, 1fr)", -}); - -export const downloaderOption = style({ - position: "relative", - ":only-child": { - gridColumn: "1 / -1", - }, -}); - -export const downloaderIcon = style({ - position: "absolute", - left: `${SPACING_UNIT * 2}px`, -}); - -export const pathError = style({ - cursor: "pointer", - ":hover": { - textDecoration: "underline", - }, -}); diff --git a/src/renderer/src/pages/game-details/modals/game-options-modal.css.ts b/src/renderer/src/pages/game-details/modals/game-options-modal.css.ts deleted file mode 100644 index f844a686..00000000 --- a/src/renderer/src/pages/game-details/modals/game-options-modal.css.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { style } from "@vanilla-extract/css"; - -import { SPACING_UNIT } from "../../../theme.css"; - -export const optionsContainer = style({ - display: "flex", - gap: `${SPACING_UNIT * 2}px`, - flexDirection: "column", -}); - -export const gameOptionHeader = style({ - display: "flex", - flexDirection: "column", - gap: `${SPACING_UNIT}px`, -}); - -export const gameOptionHeaderDescription = style({ - fontWeight: "400", -}); - -export const gameOptionRow = style({ - display: "flex", - gap: `${SPACING_UNIT}px`, -}); diff --git a/src/renderer/src/pages/game-details/modals/remove-from-library-modal.css.ts b/src/renderer/src/pages/game-details/modals/remove-from-library-modal.css.ts deleted file mode 100644 index 2c70717d..00000000 --- a/src/renderer/src/pages/game-details/modals/remove-from-library-modal.css.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { style } from "@vanilla-extract/css"; - -import { SPACING_UNIT } from "../../../theme.css"; - -export const deleteActionsButtonsCtn = style({ - display: "flex", - width: "100%", - justifyContent: "end", - alignItems: "center", - gap: `${SPACING_UNIT}px`, -}); diff --git a/src/renderer/src/pages/game-details/modals/repacks-modal.css.ts b/src/renderer/src/pages/game-details/modals/repacks-modal.css.ts deleted file mode 100644 index 8d54e402..00000000 --- a/src/renderer/src/pages/game-details/modals/repacks-modal.css.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { style } from "@vanilla-extract/css"; - -import { SPACING_UNIT, vars } from "../../../theme.css"; - -export const repacks = style({ - display: "flex", - gap: `${SPACING_UNIT}px`, - flexDirection: "column", -}); - -export const repackButton = style({ - display: "flex", - textAlign: "left", - flexDirection: "column", - alignItems: "flex-start", - gap: `${SPACING_UNIT}px`, - color: vars.color.body, - padding: `${SPACING_UNIT * 2}px`, -}); diff --git a/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.css.ts b/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.css.ts deleted file mode 100644 index cd9fdc8f..00000000 --- a/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.css.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { recipe } from "@vanilla-extract/recipes"; -import { SPACING_UNIT, vars } from "../../../theme.css"; -import { style } from "@vanilla-extract/css"; - -export const sidebarSectionButton = style({ - height: "72px", - padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 2}px`, - display: "flex", - alignItems: "center", - backgroundColor: vars.color.background, - color: vars.color.muted, - width: "100%", - cursor: "pointer", - transition: "all ease 0.2s", - gap: `${SPACING_UNIT}px`, - fontSize: "14px", - fontWeight: "bold", - ":hover": { - backgroundColor: "rgba(255, 255, 255, 0.05)", - }, - ":active": { - opacity: vars.opacity.active, - }, -}); - -export const chevron = recipe({ - base: { - transition: "transform ease 0.2s", - }, - variants: { - open: { - true: { - transform: "rotate(180deg)", - }, - }, - }, -}); diff --git a/src/renderer/src/pages/game-details/sidebar/sidebar.css.ts b/src/renderer/src/pages/game-details/sidebar/sidebar.css.ts deleted file mode 100644 index aa27cd42..00000000 --- a/src/renderer/src/pages/game-details/sidebar/sidebar.css.ts +++ /dev/null @@ -1,169 +0,0 @@ -import { globalStyle, style } from "@vanilla-extract/css"; - -import { SPACING_UNIT, vars } from "../../../theme.css"; -import { recipe } from "@vanilla-extract/recipes"; - -export const contentSidebar = style({ - borderLeft: `solid 1px ${vars.color.border}`, - backgroundColor: vars.color.darkBackground, - width: "100%", - height: "100%", - "@media": { - "(min-width: 1024px)": { - maxWidth: "300px", - width: "100%", - }, - "(min-width: 1280px)": { - width: "100%", - maxWidth: "400px", - }, - }, -}); - -export const requirementButtonContainer = style({ - width: "100%", - display: "flex", -}); - -export const requirementButton = style({ - border: `solid 1px ${vars.color.border};`, - borderLeft: "none", - borderRight: "none", - borderRadius: "0", - width: "100%", -}); - -export const requirementsDetails = style({ - padding: `${SPACING_UNIT * 2}px`, - lineHeight: "22px", - fontSize: "16px", -}); - -export const requirementsDetailsSkeleton = style({ - display: "flex", - flexDirection: "column", - gap: "8px", - padding: `${SPACING_UNIT * 2}px`, - fontSize: "16px", -}); - -export const howLongToBeatCategoriesList = style({ - margin: "0", - padding: `${SPACING_UNIT * 2}px`, - display: "flex", - flexDirection: "column", - gap: "16px", -}); - -export const howLongToBeatCategory = style({ - display: "flex", - flexDirection: "column", - gap: "4px", - background: - "linear-gradient(90deg, transparent 20%, rgb(255 255 255 / 2%) 100%)", - borderRadius: "4px", - padding: `8px 16px`, - border: `solid 1px ${vars.color.border}`, -}); - -export const howLongToBeatCategoryLabel = style({ - color: vars.color.muted, -}); - -export const howLongToBeatCategorySkeleton = style({ - border: `solid 1px ${vars.color.border}`, - borderRadius: "4px", - height: "76px", -}); - -export const statsSection = style({ - display: "flex", - gap: `${SPACING_UNIT * 2}px`, - padding: `${SPACING_UNIT * 2}px`, - justifyContent: "space-between", - transition: "max-height ease 0.5s", - overflow: "hidden", - "@media": { - "(min-width: 1024px)": { - flexDirection: "column", - }, - "(min-width: 1280px)": { - flexDirection: "row", - }, - }, -}); - -export const statsCategoryTitle = style({ - fontSize: "14px", - fontWeight: "bold", - display: "flex", - alignItems: "center", - gap: `${SPACING_UNIT}px`, -}); - -export const statsCategory = style({ - display: "flex", - flexDirection: "column", - gap: `${SPACING_UNIT / 2}px`, -}); - -globalStyle(`${requirementsDetails} a`, { - display: "flex", - color: vars.color.body, -}); - -export const list = style({ - listStyle: "none", - margin: "0", - display: "flex", - flexDirection: "column", - gap: `${SPACING_UNIT * 2}px`, - padding: `${SPACING_UNIT * 2}px`, -}); - -export const listItem = style({ - display: "flex", - cursor: "pointer", - 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 subscriptionRequiredButton = style({ - textDecoration: "none", - display: "flex", - justifyContent: "center", - width: "100%", - gap: `${SPACING_UNIT / 2}px`, - color: vars.color.warning, - cursor: "pointer", - ":hover": { - textDecoration: "underline", - }, -}); diff --git a/src/renderer/src/pages/home/catalogue-home.css.ts b/src/renderer/src/pages/home/catalogue-home.css.ts deleted file mode 100644 index a13d58f4..00000000 --- a/src/renderer/src/pages/home/catalogue-home.css.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { style } from "@vanilla-extract/css"; - -import { SPACING_UNIT } from "../../theme.css"; - -export const catalogueCategories = style({ - display: "flex", - gap: `${SPACING_UNIT}px`, -}); - -export const content = style({ - width: "100%", - display: "flex", - flexDirection: "column", - gap: `${SPACING_UNIT * 3}px`, - padding: `${SPACING_UNIT * 3}px`, - flex: "1", -}); - -export const cards = style({ - display: "grid", - gridTemplateColumns: "repeat(2, 1fr)", - gap: `${SPACING_UNIT * 2}px`, - transition: "all ease 0.2s", -}); diff --git a/src/renderer/src/pages/home/home.css.ts b/src/renderer/src/pages/home/home.css.ts deleted file mode 100644 index 4c605377..00000000 --- a/src/renderer/src/pages/home/home.css.ts +++ /dev/null @@ -1,77 +0,0 @@ -import { style } from "@vanilla-extract/css"; - -import { SPACING_UNIT, vars } from "../../theme.css"; - -export const homeHeader = style({ - display: "flex", - gap: `${SPACING_UNIT}px`, - justifyContent: "space-between", - alignItems: "center", -}); - -export const content = style({ - width: "100%", - height: "100%", - display: "flex", - flexDirection: "column", - gap: `${SPACING_UNIT * 3}px`, - padding: `${SPACING_UNIT * 3}px`, - flex: "1", - overflowY: "auto", -}); - -export const cards = style({ - display: "grid", - gridTemplateColumns: "repeat(1, 1fr)", - gap: `${SPACING_UNIT * 2}px`, - transition: "all ease 0.2s", - "@media": { - "(min-width: 768px)": { - gridTemplateColumns: "repeat(2, 1fr)", - }, - "(min-width: 1250px)": { - gridTemplateColumns: "repeat(3, 1fr)", - }, - "(min-width: 1600px)": { - gridTemplateColumns: "repeat(4, 1fr)", - }, - }, -}); - -export const cardSkeleton = style({ - width: "100%", - height: "180px", - boxShadow: "0px 0px 15px 0px #000000", - overflow: "hidden", - borderRadius: "4px", - transition: "all ease 0.2s", - zIndex: "1", - ":active": { - opacity: vars.opacity.active, - }, -}); - -export const noResults = style({ - height: "100%", - display: "flex", - alignItems: "center", - justifyContent: "center", - flexDirection: "column", - gap: "16px", - gridColumn: "1 / -1", -}); - -export const buttonsList = style({ - display: "flex", - listStyle: "none", - margin: "0", - padding: "0", - gap: `${SPACING_UNIT}px`, -}); - -export const flameIcon = style({ - width: "30px", - top: "-10px", - left: "-5px", - position: "absolute", -}); diff --git a/src/renderer/src/pages/profile/edit-profile-modal/edit-profile-modal.css.ts b/src/renderer/src/pages/profile/edit-profile-modal/edit-profile-modal.css.ts deleted file mode 100644 index 8dd1df51..00000000 --- a/src/renderer/src/pages/profile/edit-profile-modal/edit-profile-modal.css.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { vars } from "../../../theme.css"; -import { globalStyle, style } from "@vanilla-extract/css"; - -export const profileAvatarEditContainer = style({ - alignSelf: "center", - // width: "132px", - // height: "132px", - display: "flex", - // borderRadius: "4px", - color: vars.color.body, - justifyContent: "center", - alignItems: "center", - backgroundColor: vars.color.background, - position: "relative", - cursor: "pointer", -}); - -export const profileAvatarEditOverlay = style({ - position: "absolute", - width: "100%", - height: "100%", - backgroundColor: "rgba(0, 0, 0, 0.7)", - color: vars.color.muted, - zIndex: "1", - cursor: "pointer", - display: "flex", - justifyContent: "center", - transition: "all ease 0.2s", - alignItems: "center", - borderRadius: "4px", - opacity: "0", -}); - -globalStyle(`${profileAvatarEditContainer}:hover ${profileAvatarEditOverlay}`, { - opacity: "1", -}); diff --git a/src/renderer/src/pages/profile/profile-content/locked-profile.css.ts b/src/renderer/src/pages/profile/profile-content/locked-profile.css.ts deleted file mode 100644 index bf5494b6..00000000 --- a/src/renderer/src/pages/profile/profile-content/locked-profile.css.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { SPACING_UNIT } from "../../../theme.css"; - -import { style } from "@vanilla-extract/css"; - -export const container = style({ - display: "flex", - width: "100%", - height: "100%", - justifyContent: "center", - alignItems: "center", - flexDirection: "column", - gap: `${SPACING_UNIT}px`, -}); - -export const lockIcon = style({ - width: "60px", - height: "60px", - borderRadius: "50%", - backgroundColor: "rgba(255, 255, 255, 0.06)", - display: "flex", - alignItems: "center", - justifyContent: "center", - marginBottom: `${SPACING_UNIT * 2}px`, -}); diff --git a/src/renderer/src/pages/profile/profile-content/profile-content.css.ts b/src/renderer/src/pages/profile/profile-content/profile-content.css.ts deleted file mode 100644 index 9bd2b027..00000000 --- a/src/renderer/src/pages/profile/profile-content/profile-content.css.ts +++ /dev/null @@ -1,237 +0,0 @@ -import { vars, SPACING_UNIT } from "../../../theme.css"; -import { globalStyle, style } from "@vanilla-extract/css"; - -export const gameCover = style({ - transition: "all ease 0.2s", - boxShadow: "0 8px 10px -2px rgba(0, 0, 0, 0.5)", - width: "100%", - position: "relative", - ":before": { - content: "", - top: "0", - left: "0", - width: "100%", - height: "172%", - position: "absolute", - background: - "linear-gradient(35deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 51.5%, rgba(255, 255, 255, 0.15) 54%, rgba(255, 255, 255, 0.15) 100%)", - transition: "all ease 0.3s", - transform: "translateY(-36%)", - opacity: "0.5", - }, -}); - -export const game = style({ - transition: "all ease 0.2s", - ":hover": { - transform: "scale(1.05)", - }, -}); - -globalStyle(`${gameCover}:hover::before`, { - opacity: "1", - transform: "translateY(-20%)", -}); - -export const box = style({ - backgroundColor: vars.color.background, - borderRadius: "4px", - border: `solid 1px ${vars.color.border}`, - padding: `${SPACING_UNIT * 2}px`, -}); - -export const sectionHeader = style({ - display: "flex", - alignItems: "center", - justifyContent: "space-between", - marginBottom: `${SPACING_UNIT * 2}px`, -}); - -export const list = style({ - listStyle: "none", - margin: "0", - padding: "0", - display: "flex", - flexDirection: "column", - gap: `${SPACING_UNIT * 2}px`, -}); - -export const friend = style({ - display: "flex", - gap: `${SPACING_UNIT}px`, - alignItems: "center", -}); - -export const friendName = style({ - color: vars.color.muted, - fontWeight: "bold", - fontSize: vars.size.body, -}); - -export const rightContent = style({ - width: "100%", - height: "100%", - display: "flex", - gap: `${SPACING_UNIT * 2}px`, - flexDirection: "column", - transition: "all ease 0.2s", - "@media": { - "(min-width: 1024px)": { - maxWidth: "300px", - width: "100%", - }, - "(min-width: 1280px)": { - width: "100%", - maxWidth: "400px", - }, - }, -}); - -export const listItem = style({ - display: "flex", - cursor: "pointer", - 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", - ":hover": { - backgroundColor: "rgba(255, 255, 255, 0.15)", - textDecoration: "none", - }, -}); - -export const statsListItem = style({ - display: "flex", - flexDirection: "column", - 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}px`, - ":hover": { - backgroundColor: "rgba(255, 255, 255, 0.15)", - textDecoration: "none", - }, -}); - -export const gamesGrid = style({ - listStyle: "none", - margin: "0", - padding: "0", - display: "grid", - gap: `${SPACING_UNIT * 2}px`, - gridTemplateColumns: "repeat(2, 1fr)", - "@container": { - [`app-container (min-width: 900px)`]: { - gridTemplateColumns: "repeat(4, 1fr)", - }, - [`app-container (min-width: 1300px)`]: { - gridTemplateColumns: "repeat(5, 1fr)", - }, - [`app-container (min-width: 2000px)`]: { - gridTemplateColumns: "repeat(6, 1fr)", - }, - [`app-container (min-width: 2600px)`]: { - gridTemplateColumns: "repeat(8, 1fr)", - }, - [`app-container (min-width: 3000px)`]: { - gridTemplateColumns: "repeat(12, 1fr)", - }, - }, -}); - -export const telescopeIcon = style({ - width: "60px", - height: "60px", - borderRadius: "50%", - backgroundColor: "rgba(255, 255, 255, 0.06)", - display: "flex", - alignItems: "center", - justifyContent: "center", - marginBottom: `${SPACING_UNIT * 2}px`, -}); - -export const noGames = style({ - display: "flex", - width: "100%", - height: "100%", - justifyContent: "center", - alignItems: "center", - flexDirection: "column", - gap: `${SPACING_UNIT}px`, -}); - -export const listItemImage = style({ - width: "32px", - height: "32px", - borderRadius: "4px", - objectFit: "cover", -}); - -export const listItemDetails = style({ - display: "flex", - flexDirection: "column", - gap: `${SPACING_UNIT / 2}px`, - overflow: "hidden", -}); - -export const listItemTitle = style({ - fontWeight: "bold", - overflow: "hidden", - whiteSpace: "nowrap", - textOverflow: "ellipsis", -}); - -export const listItemDescription = style({ - display: "flex", - alignItems: "center", - gap: `${SPACING_UNIT}px`, -}); - -export const defaultAvatarWrapper = style({ - width: "32px", - height: "32px", - display: "flex", - justifyContent: "center", - alignItems: "center", - backgroundColor: vars.color.background, - border: `solid 1px ${vars.color.border}`, - borderRadius: "4px", -}); - -export const achievementsProgressBar = style({ - width: "100%", - height: "4px", - 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 link = style({ - textAlign: "start", - color: vars.color.body, - ":hover": { - textDecoration: "underline", - cursor: "pointer", - }, -}); - -export const gameCardStats = style({ - width: "100%", - height: "100%", - transition: "transform 0.5s ease-in-out", - flexShrink: "0", - flexGrow: "0", -}); diff --git a/src/renderer/src/pages/profile/profile-hero/profile-hero.css.ts b/src/renderer/src/pages/profile/profile-hero/profile-hero.css.ts deleted file mode 100644 index 2080e445..00000000 --- a/src/renderer/src/pages/profile/profile-hero/profile-hero.css.ts +++ /dev/null @@ -1,90 +0,0 @@ -import { SPACING_UNIT, vars } from "../../../theme.css"; -import { style } from "@vanilla-extract/css"; - -export const profileContentBox = style({ - display: "flex", - flexDirection: "column", - position: "relative", -}); - -export const profileAvatarButton = style({ - width: "96px", - minWidth: "96px", - height: "96px", - borderRadius: "4px", - display: "flex", - justifyContent: "center", - alignItems: "center", - backgroundColor: vars.color.background, - border: `solid 1px ${vars.color.border}`, - boxShadow: "0px 0px 5px 0px rgba(0, 0, 0, 0.7)", - cursor: "pointer", - transition: "all ease 0.3s", - color: vars.color.muted, - position: "relative", - ":hover": { - boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.7)", - }, -}); - -export const profileAvatar = style({ - height: "100%", - width: "100%", - objectFit: "cover", - overflow: "hidden", -}); - -export const profileInformation = style({ - display: "flex", - flexDirection: "column", - gap: `${SPACING_UNIT}px`, - alignItems: "flex-start", - color: "#c0c1c7", - zIndex: 1, - overflow: "hidden", -}); - -export const profileDisplayName = style({ - fontWeight: "bold", - overflow: "hidden", - textOverflow: "ellipsis", - width: "100%", - display: "flex", - alignItems: "center", - position: "relative", - textShadow: "0 0 5px rgb(0 0 0 / 40%)", -}); - -export const heroPanel = style({ - width: "100%", - height: "72px", - minHeight: "72px", - padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 3}px`, - display: "flex", - gap: `${SPACING_UNIT}px`, - justifyContent: "space-between", - backdropFilter: `blur(15px)`, - borderTop: `solid 1px rgba(255, 255, 255, 0.1)`, - boxShadow: "0px 0px 15px 0px rgba(0, 0, 0, 0.5)", - backgroundColor: "rgba(0, 0, 0, 0.3)", -}); - -export const userInformation = style({ - display: "flex", - padding: `${SPACING_UNIT * 7}px ${SPACING_UNIT * 3}px`, - alignItems: "center", - gap: `${SPACING_UNIT * 2}px`, -}); - -export const currentGameWrapper = style({ - display: "flex", - flexDirection: "column", - gap: `${SPACING_UNIT / 2}px`, -}); - -export const currentGameDetails = style({ - display: "flex", - flexDirection: "row", - gap: `${SPACING_UNIT}px`, - alignItems: "center", -}); diff --git a/src/renderer/src/pages/profile/profile.css.ts b/src/renderer/src/pages/profile/profile.css.ts deleted file mode 100644 index 68f5fa56..00000000 --- a/src/renderer/src/pages/profile/profile.css.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { SPACING_UNIT } from "../../theme.css"; -import { style } from "@vanilla-extract/css"; - -export const wrapper = style({ - width: "100%", - display: "flex", - flexDirection: "column", - gap: `${SPACING_UNIT * 3}px`, -}); diff --git a/src/renderer/src/pages/profile/report-profile/report-profile.css.ts b/src/renderer/src/pages/profile/report-profile/report-profile.css.ts deleted file mode 100644 index ba53fd62..00000000 --- a/src/renderer/src/pages/profile/report-profile/report-profile.css.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { SPACING_UNIT, vars } from "../../../theme.css"; -import { style } from "@vanilla-extract/css"; - -export const reportButton = style({ - alignSelf: "flex-end", - color: vars.color.muted, - gap: `${SPACING_UNIT}px`, - display: "flex", - cursor: "pointer", - alignItems: "center", - fontSize: "12px", -}); diff --git a/src/renderer/src/pages/profile/upload-background-image-button/upload-background-image-button.css.ts b/src/renderer/src/pages/profile/upload-background-image-button/upload-background-image-button.css.ts deleted file mode 100644 index 9a4e2c8f..00000000 --- a/src/renderer/src/pages/profile/upload-background-image-button/upload-background-image-button.css.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { style } from "@vanilla-extract/css"; -import { vars } from "../../../theme.css"; - -export const uploadBackgroundImageButton = style({ - position: "absolute", - top: 16, - right: 16, - borderColor: vars.color.body, - boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.8)", - backgroundColor: "rgba(0, 0, 0, 0.1)", - backdropFilter: "blur(20px)", -}); diff --git a/src/renderer/src/pages/settings/settings-account.css.ts b/src/renderer/src/pages/settings/settings-account.css.ts deleted file mode 100644 index 8fbb3845..00000000 --- a/src/renderer/src/pages/settings/settings-account.css.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { style } from "@vanilla-extract/css"; - -import { SPACING_UNIT, vars } from "../../theme.css"; - -export const form = style({ - display: "flex", - flexDirection: "column", - gap: `${SPACING_UNIT * 3}px`, -}); - -export const blockedUser = style({ - display: "flex", - minWidth: "240px", - justifyContent: "space-between", - alignItems: "center", - backgroundColor: vars.color.darkBackground, - border: `1px solid ${vars.color.border}`, - borderRadius: "4px", - padding: `${SPACING_UNIT}px`, -}); - -export const unblockButton = style({ - color: vars.color.muted, - cursor: "pointer", - transition: "all ease 0.2s", - ":hover": { - opacity: "0.7", - }, -}); - -export const blockedUsersList = style({ - padding: "0", - margin: "0", - listStyle: "none", - display: "flex", - flexDirection: "column", - alignItems: "flex-start", - gap: `${SPACING_UNIT}px`, -}); diff --git a/src/renderer/src/pages/settings/settings-download-sources.css.ts b/src/renderer/src/pages/settings/settings-download-sources.css.ts deleted file mode 100644 index caa93ce8..00000000 --- a/src/renderer/src/pages/settings/settings-download-sources.css.ts +++ /dev/null @@ -1,58 +0,0 @@ -import { style } from "@vanilla-extract/css"; -import { SPACING_UNIT, vars } from "../../theme.css"; -import { recipe } from "@vanilla-extract/recipes"; - -export const downloadSources = style({ - padding: "0", - margin: "0", - gap: `${SPACING_UNIT * 2}px`, - display: "flex", - flexDirection: "column", -}); - -export const downloadSourceItem = recipe({ - base: { - display: "flex", - flexDirection: "column", - backgroundColor: vars.color.darkBackground, - borderRadius: "8px", - padding: `${SPACING_UNIT * 2}px`, - gap: `${SPACING_UNIT}px`, - border: `solid 1px ${vars.color.border}`, - transition: "all ease 0.2s", - }, - variants: { - isSyncing: { - true: { - opacity: vars.opacity.disabled, - }, - }, - }, -}); - -export const downloadSourceItemHeader = style({ - marginBottom: `${SPACING_UNIT}px`, - display: "flex", - flexDirection: "column", - gap: `${SPACING_UNIT}px`, -}); - -export const downloadSourcesHeader = style({ - display: "flex", - justifyContent: "space-between", - alignItems: "center", -}); - -export const navigateToCatalogueButton = style({ - display: "flex", - alignItems: "center", - gap: `${SPACING_UNIT}px`, - color: vars.color.muted, - textDecoration: "underline", - cursor: "pointer", - - ":disabled": { - cursor: "default", - textDecoration: "none", - }, -}); diff --git a/src/renderer/src/pages/settings/settings-real-debrid.css.ts b/src/renderer/src/pages/settings/settings-real-debrid.css.ts deleted file mode 100644 index 0dfc9d78..00000000 --- a/src/renderer/src/pages/settings/settings-real-debrid.css.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { style } from "@vanilla-extract/css"; - -import { SPACING_UNIT } from "../../theme.css"; - -export const form = style({ - display: "flex", - flexDirection: "column", - gap: `${SPACING_UNIT}px`, -}); - -export const description = style({ - marginBottom: `${SPACING_UNIT * 2}px`, -}); diff --git a/src/renderer/src/pages/settings/settings.css.ts b/src/renderer/src/pages/settings/settings.css.ts deleted file mode 100644 index 9f607ece..00000000 --- a/src/renderer/src/pages/settings/settings.css.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { style } from "@vanilla-extract/css"; - -import { SPACING_UNIT, vars } from "../../theme.css"; - -export const container = style({ - padding: "24px", - width: "100%", - display: "flex", -}); - -export const content = style({ - backgroundColor: vars.color.background, - width: "100%", - height: "100%", - padding: `${SPACING_UNIT * 3}px`, - border: `solid 1px ${vars.color.border}`, - boxShadow: "0px 0px 15px 0px #000000", - borderRadius: "8px", - gap: `${SPACING_UNIT * 2}px`, - display: "flex", - flexDirection: "column", -}); - -export const settingsCategories = style({ - display: "flex", - gap: `${SPACING_UNIT}px`, -}); diff --git a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.css.ts b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.css.ts deleted file mode 100644 index a164c900..00000000 --- a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.css.ts +++ /dev/null @@ -1,79 +0,0 @@ -import { SPACING_UNIT, vars } from "../../../theme.css"; -import { style } from "@vanilla-extract/css"; - -export const friendListDisplayName = style({ - fontWeight: "bold", - fontSize: vars.size.body, - textAlign: "left", - overflow: "hidden", - textOverflow: "ellipsis", - whiteSpace: "nowrap", -}); - -export const friendListContainer = style({ - display: "flex", - gap: `${SPACING_UNIT * 3}px`, - alignItems: "center", - borderRadius: "4px", - border: `solid 1px ${vars.color.border}`, - width: "100%", - height: "54px", - minHeight: "54px", - transition: "all ease 0.2s", - position: "relative", - ":hover": { - backgroundColor: "rgba(255, 255, 255, 0.15)", - }, -}); - -export const friendListButton = style({ - display: "flex", - alignItems: "center", - position: "absolute", - cursor: "pointer", - height: "100%", - width: "100%", - flexDirection: "row", - color: vars.color.body, - gap: `${SPACING_UNIT + SPACING_UNIT / 2}px`, - padding: `0 ${SPACING_UNIT}px`, -}); - -export const friendRequestItem = style({ - color: vars.color.body, - ":hover": { - backgroundColor: "rgba(255, 255, 255, 0.15)", - }, -}); - -export const acceptRequestButton = style({ - cursor: "pointer", - color: vars.color.body, - width: "28px", - height: "28px", - ":hover": { - color: vars.color.success, - }, -}); - -export const cancelRequestButton = style({ - cursor: "pointer", - color: vars.color.body, - width: "28px", - height: "28px", - ":hover": { - color: vars.color.danger, - }, -}); - -export const friendCodeButton = style({ - color: vars.color.body, - cursor: "pointer", - display: "flex", - gap: `${SPACING_UNIT / 2}px`, - alignItems: "center", - transition: "all ease 0.2s", - ":hover": { - color: vars.color.muted, - }, -});