From c9e99d3852ed6794cc40ebcf4b2eda1ee57d5e20 Mon Sep 17 00:00:00 2001 From: bumyy Date: Thu, 7 Nov 2024 20:23:03 -0300 Subject: [PATCH 1/2] 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 000000000..2f383d04d --- /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 7c572a563..ce184474b 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 1ccfe12f1..000000000 --- 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 000000000..d62ff9a91 --- /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 f498e6640..e62d42ee7 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 606b226ae..000000000 --- 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 000000000..06235687c --- /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 bb81a9106..3e80f0aa5 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 a9aec4037..000000000 --- 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 000000000..428818c46 --- /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 31929c60c..eaf3526a8 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 c810130d6..000000000 --- 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 000000000..ee4a22b1a --- /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 869cb2d6a..622907044 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 128559860..000000000 --- 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 000000000..065aed8dc --- /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 e0721df43..83d32caa9 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 eaf0a1012..000000000 --- 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 000000000..ea14c0597 --- /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 9bc5514d1..b7a75c478 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 4f0e4c410..000000000 --- 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 000000000..170f10f69 --- /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 ffd5f89ca..1c3bad76f 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 d9d14fda9..000000000 --- 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 000000000..dbaee7306 --- /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 eb2894de3..3eceedb39 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 7acd4e986..000000000 --- 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 000000000..38dfc65bc --- /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 fb5038f66..16b266cdb 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 && ( -
+
+ {hasActiveSubscription && ( + + )} +
)} + + + handleChange({ disableNsfwAlert: !form.disableNsfwAlert }) + } + /> ); } diff --git a/src/renderer/src/vite-env.d.ts b/src/renderer/src/vite-env.d.ts index b1f45c786..304dde0fe 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 1f17ac56f..173867df2 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 9bb25e3f4..c0269cd3a 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 d241181cd..0220a873f 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"