mirror of
https://github.com/hydralauncher/hydra.git
synced 2025-02-02 16:23:48 +03:00
feat: migrated to scss
This commit is contained in:
bumyy
parent
3469b624d5
commit
c9e99d3852
130
src/renderer/src/app.scss
Normal file
130
src/renderer/src/app.scss
Normal file
@ -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;
|
||||
}
|
||||
@ -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,
|
||||
|
||||
@ -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`,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
50
src/renderer/src/components/backdrop/backdrop.scss
Normal file
50
src/renderer/src/components/backdrop/backdrop.scss
Normal file
@ -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);
|
||||
}
|
||||
}
|
||||
@ -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 (
|
||||
<div
|
||||
className={styles.backdrop({
|
||||
closing: isClosing,
|
||||
windows: window.electron.platform === "win32",
|
||||
className={cn("backdrop", {
|
||||
"backdrop--closing": isClosing,
|
||||
"backdrop--windows": window.electron.platform === "win32",
|
||||
})}
|
||||
>
|
||||
{children}
|
||||
|
||||
@ -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",
|
||||
});
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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 (
|
||||
<div className={styles.checkboxField}>
|
||||
<div className={styles.checkbox}>
|
||||
<div className="checkbox-field">
|
||||
<div className="checkbox-field__checkbox">
|
||||
<input
|
||||
id={id}
|
||||
type="checkbox"
|
||||
className={styles.checkboxInput}
|
||||
className="checkbox-field__input"
|
||||
{...props}
|
||||
/>
|
||||
{props.checked && <CheckIcon />}
|
||||
</div>
|
||||
<label htmlFor={id} className={styles.checkboxLabel}>
|
||||
<label htmlFor={id} className="checkbox-field__label">
|
||||
{label}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@ -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",
|
||||
});
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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<ModalProps, "children"> {
|
||||
confirmButtonLabel: string;
|
||||
@ -31,10 +31,10 @@ export function ConfirmationModal({
|
||||
|
||||
return (
|
||||
<Modal {...props}>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
|
||||
<p className={styles.descriptionText}>{descriptionText}</p>
|
||||
<div className="confirmation-modal">
|
||||
<p className="confirmation-modal__description">{descriptionText}</p>
|
||||
|
||||
<div className={styles.actions}>
|
||||
<div className="confirmation-modal__actions">
|
||||
<Button theme="outline" onClick={handleCancelClick}>
|
||||
{cancelButtonLabel}
|
||||
</Button>
|
||||
|
||||
@ -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",
|
||||
});
|
||||
102
src/renderer/src/components/game-card/game-card.scss
Normal file
102
src/renderer/src/components/game-card/game-card.scss
Normal file
@ -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);
|
||||
}
|
||||
}
|
||||
@ -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: <SteamLogo className={styles.shopIcon} />,
|
||||
steam: <SteamLogo className="game-card__shop-icon" />,
|
||||
};
|
||||
|
||||
export function GameCard({ game, ...props }: GameCardProps) {
|
||||
@ -56,25 +57,25 @@ export function GameCard({ game, ...props }: GameCardProps) {
|
||||
<button
|
||||
{...props}
|
||||
type="button"
|
||||
className={styles.card}
|
||||
className="game-card"
|
||||
onMouseEnter={handleHover}
|
||||
>
|
||||
<div className={styles.backdrop}>
|
||||
<div className="game-card__backdrop">
|
||||
<img
|
||||
src={game.cover}
|
||||
alt={game.title}
|
||||
className={styles.cover}
|
||||
className="game-card__cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
|
||||
<div className={styles.content}>
|
||||
<div className={styles.titleContainer}>
|
||||
<div className="game-card__content">
|
||||
<div className="game-card__title-container">
|
||||
{shopIcon[game.shop]}
|
||||
<p className={styles.title}>{game.title}</p>
|
||||
<p className="game-card__title">{game.title}</p>
|
||||
</div>
|
||||
|
||||
{uniqueRepackers.length > 0 ? (
|
||||
<ul className={styles.downloadOptions}>
|
||||
<ul className="game-card__download-options">
|
||||
{uniqueRepackers.map((repacker) => (
|
||||
<li key={repacker}>
|
||||
<Badge>{repacker}</Badge>
|
||||
@ -82,17 +83,17 @@ export function GameCard({ game, ...props }: GameCardProps) {
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<p className={styles.noDownloadsLabel}>{t("no_downloads")}</p>
|
||||
<p className="game-card__no-download-label">{t("no_downloads")}</p>
|
||||
)}
|
||||
<div className={styles.specifics}>
|
||||
<div className={styles.specificsItem}>
|
||||
<div className="game-card__specifics">
|
||||
<div className="game-card__specifics-item">
|
||||
<DownloadIcon />
|
||||
<span>
|
||||
{stats ? numberFormatter.format(stats.downloadCount) : "…"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className={styles.specificsItem}>
|
||||
<div className="game-card__specifics-item">
|
||||
<PeopleIcon />
|
||||
<span>
|
||||
{stats ? numberFormatter.format(stats?.playerCount) : "…"}
|
||||
|
||||
32
src/renderer/src/components/header/auto-update-header.scss
Normal file
32
src/renderer/src/components/header/auto-update-header.scss
Normal file
@ -0,0 +1,32 @@
|
||||
@use "../../scss/globals.scss";
|
||||
|
||||
.auto-update-sub-header {
|
||||
border-bottom: solid 1px globals.$body-color;
|
||||
padding: calc(globals.$spacing-unit / 2) calc(globals.$spacing-unit * 3);
|
||||
|
||||
&__new-version-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: globals.$spacing-unit;
|
||||
color: #8e919b;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&__new-version-icon {
|
||||
color: globals.$success-color;
|
||||
}
|
||||
|
||||
&__new-version-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: globals.$spacing-unit;
|
||||
color: globals.$body-color;
|
||||
font-size: 12px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -2,7 +2,7 @@ import { useTranslation } from "react-i18next";
|
||||
import { useEffect, useState } from "react";
|
||||
import { SyncIcon } from "@primer/octicons-react";
|
||||
import { Link } from "../link/link";
|
||||
import * as styles from "./header.css";
|
||||
import "./auto-update-header.scss";
|
||||
import type { AppUpdaterEvent } from "@types";
|
||||
|
||||
export const releasesPageUrl =
|
||||
@ -45,9 +45,15 @@ export function AutoUpdateSubHeader() {
|
||||
|
||||
if (!isAutoInstallAvailable) {
|
||||
return (
|
||||
<header className={styles.subheader}>
|
||||
<Link to={releasesPageUrl} className={styles.newVersionLink}>
|
||||
<SyncIcon className={styles.newVersionIcon} size={12} />
|
||||
<header className="auto-update-sub-header">
|
||||
<Link
|
||||
to={releasesPageUrl}
|
||||
className="auto-update-sub-header__new-version-link"
|
||||
>
|
||||
<SyncIcon
|
||||
className="auto-update-sub-header__new-version-icon"
|
||||
size={12}
|
||||
/>
|
||||
{t("version_available_download", { version: newVersion })}
|
||||
</Link>
|
||||
</header>
|
||||
@ -56,13 +62,16 @@ export function AutoUpdateSubHeader() {
|
||||
|
||||
if (isReadyToInstall) {
|
||||
return (
|
||||
<header className={styles.subheader}>
|
||||
<header className="auto-update-sub-header">
|
||||
<button
|
||||
type="button"
|
||||
className={styles.newVersionButton}
|
||||
className="auto-update-sub-header__new-version-button"
|
||||
onClick={handleClickInstallUpdate}
|
||||
>
|
||||
<SyncIcon className={styles.newVersionIcon} size={12} />
|
||||
<SyncIcon
|
||||
className="auto-update-sub-header__new-version-icon"
|
||||
size={12}
|
||||
/>
|
||||
{t("version_available_install", { version: newVersion })}
|
||||
</button>
|
||||
</header>
|
||||
|
||||
@ -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,
|
||||
});
|
||||
132
src/renderer/src/components/header/header.scss
Normal file
132
src/renderer/src/components/header/header.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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 (
|
||||
<>
|
||||
<header
|
||||
className={styles.header({
|
||||
draggingDisabled,
|
||||
isWindows: window.electron.platform === "win32",
|
||||
className={cn("header", {
|
||||
"header--dragging-disabled": draggingDisabled,
|
||||
"header--is-windows": window.electron.platform === "win32",
|
||||
})}
|
||||
>
|
||||
<section className={styles.section} style={{ flex: 1 }}>
|
||||
<section className="header__section" style={{ flex: 1 }}>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.backButton({
|
||||
enabled: location.key !== "default",
|
||||
className={cn("header__back-button", {
|
||||
"header__back-button--enabled": location.key !== "default",
|
||||
})}
|
||||
onClick={handleBackButtonClick}
|
||||
disabled={location.key === "default"}
|
||||
@ -86,19 +88,23 @@ export function Header({ onSearch, onClear, search }: HeaderProps) {
|
||||
</button>
|
||||
|
||||
<h3
|
||||
className={styles.title({
|
||||
hasBackButton: location.key !== "default",
|
||||
className={cn("header__title", {
|
||||
"header__title--has-back-button": location.key !== "default",
|
||||
})}
|
||||
>
|
||||
{title}
|
||||
</h3>
|
||||
</section>
|
||||
|
||||
<section className={styles.section}>
|
||||
<div className={styles.search({ focused: isFocused })}>
|
||||
<section className="header__section">
|
||||
<div
|
||||
className={cn("header__search", {
|
||||
"header__search--focused": isFocused,
|
||||
})}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.actionButton}
|
||||
className="header__action-button"
|
||||
onClick={focusInput}
|
||||
>
|
||||
<SearchIcon />
|
||||
@ -110,7 +116,7 @@ export function Header({ onSearch, onClear, search }: HeaderProps) {
|
||||
name="search"
|
||||
placeholder={t("search")}
|
||||
value={search}
|
||||
className={styles.searchInput}
|
||||
className="header__search-input"
|
||||
onChange={(event) => onSearch(event.target.value)}
|
||||
onFocus={() => setIsFocused(true)}
|
||||
onBlur={handleBlur}
|
||||
@ -120,7 +126,7 @@ export function Header({ onSearch, onClear, search }: HeaderProps) {
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClear}
|
||||
className={styles.actionButton}
|
||||
className="header__action-button"
|
||||
>
|
||||
<XIcon />
|
||||
</button>
|
||||
|
||||
@ -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",
|
||||
});
|
||||
56
src/renderer/src/components/hero/hero.scss
Normal file
56
src/renderer/src/components/hero/hero.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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 <Skeleton className={styles.hero} />;
|
||||
return <Skeleton className="hero" />;
|
||||
}
|
||||
|
||||
if (featuredGameDetails?.length) {
|
||||
@ -37,17 +37,17 @@ export function Hero() {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => navigate(game.uri)}
|
||||
className={styles.hero}
|
||||
className="hero"
|
||||
key={index}
|
||||
>
|
||||
<div className={styles.backdrop}>
|
||||
<div className="hero__backdrop">
|
||||
<img
|
||||
src={game.background}
|
||||
alt={game.description}
|
||||
className={styles.heroMedia}
|
||||
className="hero__media"
|
||||
/>
|
||||
|
||||
<div className={styles.content}>
|
||||
<div className="hero__content">
|
||||
{game.logo && (
|
||||
<img
|
||||
src={game.logo}
|
||||
@ -56,7 +56,7 @@ export function Hero() {
|
||||
loading="eager"
|
||||
/>
|
||||
)}
|
||||
<p className={styles.description}>{game.description}</p>
|
||||
<p className="hero__description">{game.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
import { style } from "@vanilla-extract/css";
|
||||
|
||||
export const link = style({
|
||||
textDecoration: "none",
|
||||
color: "#C0C1C7",
|
||||
":hover": {
|
||||
textDecoration: "underline",
|
||||
},
|
||||
});
|
||||
7
src/renderer/src/components/link/link.scss
Normal file
7
src/renderer/src/components/link/link.scss
Normal file
@ -0,0 +1,7 @@
|
||||
.link {
|
||||
text-decoration: none;
|
||||
color: #c0c1c7;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
@ -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 (
|
||||
<a
|
||||
href={to}
|
||||
className={cn(styles.link, className)}
|
||||
className={cn("link", className)}
|
||||
onClick={openExternal}
|
||||
{...props}
|
||||
>
|
||||
@ -22,11 +22,7 @@ export function Link({ children, to, className, ...props }: LinkProps) {
|
||||
}
|
||||
|
||||
return (
|
||||
<ReactRouterDomLink
|
||||
className={cn(styles.link, className)}
|
||||
to={to}
|
||||
{...props}
|
||||
>
|
||||
<ReactRouterDomLink className={cn("link", className)} to={to} {...props}>
|
||||
{children}
|
||||
</ReactRouterDomLink>
|
||||
);
|
||||
|
||||
@ -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,
|
||||
});
|
||||
77
src/renderer/src/components/modal/modal.scss
Normal file
77
src/renderer/src/components/modal/modal.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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(
|
||||
<Backdrop isClosing={isClosing}>
|
||||
<div
|
||||
className={styles.modal({ closing: isClosing, large })}
|
||||
className={cn("modal", {
|
||||
"modal--closing": isClosing,
|
||||
"modal--large": large,
|
||||
})}
|
||||
role="dialog"
|
||||
aria-labelledby={title}
|
||||
aria-describedby={description}
|
||||
ref={modalContentRef}
|
||||
>
|
||||
<div className={styles.modalHeader}>
|
||||
<div className="modal__header">
|
||||
<div style={{ display: "flex", gap: 4, flexDirection: "column" }}>
|
||||
<h3>{title}</h3>
|
||||
{description && <p>{description}</p>}
|
||||
@ -117,13 +121,13 @@ export function Modal({
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCloseClick}
|
||||
className={styles.closeModalButton}
|
||||
className="modal__close-button"
|
||||
aria-label={t("close")}
|
||||
>
|
||||
<XIcon className={styles.closeModalButtonIcon} size={24} />
|
||||
<XIcon className="modal__close-button-icon" size={24} />
|
||||
</button>
|
||||
</div>
|
||||
<div className={styles.modalContent}>{children}</div>
|
||||
<div className="modal__content">{children}</div>
|
||||
</div>
|
||||
</Backdrop>,
|
||||
document.body
|
||||
|
||||
@ -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,
|
||||
});
|
||||
49
src/renderer/src/components/select-field/select-field.scss
Normal file
49
src/renderer/src/components/select-field/select-field.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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>,
|
||||
HTMLSelectElement
|
||||
> {
|
||||
theme?: NonNullable<RecipeVariants<typeof styles.select>>["theme"];
|
||||
theme?: "primary" | "dark";
|
||||
label?: string;
|
||||
options?: { key: string; value: string; label: string }[];
|
||||
}
|
||||
@ -25,16 +25,20 @@ export function SelectField({
|
||||
return (
|
||||
<div style={{ flex: 1 }}>
|
||||
{label && (
|
||||
<label htmlFor={id} className={styles.label}>
|
||||
<label htmlFor={id} className="select-field__label">
|
||||
{label}
|
||||
</label>
|
||||
)}
|
||||
|
||||
<div className={styles.select({ focused: isFocused, theme })}>
|
||||
<div
|
||||
className={cn("select-field", `select-field--${theme}`, {
|
||||
"select-field--focused": isFocused,
|
||||
})}
|
||||
>
|
||||
<select
|
||||
id={id}
|
||||
value={value}
|
||||
className={styles.option}
|
||||
className="select-field__option"
|
||||
onFocus={() => setIsFocused(true)}
|
||||
onBlur={() => setIsFocused(false)}
|
||||
onChange={onChange}
|
||||
|
||||
@ -1,79 +0,0 @@
|
||||
import { style } from "@vanilla-extract/css";
|
||||
|
||||
import { SPACING_UNIT, vars } from "../../theme.css";
|
||||
|
||||
export const profileContainer = style({
|
||||
position: "relative",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
padding: `${SPACING_UNIT}px ${SPACING_UNIT * 2}px`,
|
||||
});
|
||||
|
||||
export const profileButton = 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`,
|
||||
":hover": {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.15)",
|
||||
},
|
||||
});
|
||||
|
||||
export const profileButtonContent = style({
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: `${SPACING_UNIT + SPACING_UNIT / 2}px`,
|
||||
width: "100%",
|
||||
});
|
||||
|
||||
export const profileButtonInformation = style({
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "flex-start",
|
||||
flex: "1",
|
||||
minWidth: 0,
|
||||
});
|
||||
|
||||
export const profileButtonTitle = style({
|
||||
fontWeight: "bold",
|
||||
fontSize: vars.size.body,
|
||||
width: "100%",
|
||||
textAlign: "left",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
});
|
||||
|
||||
export const friendsButton = style({
|
||||
color: vars.color.muted,
|
||||
cursor: "pointer",
|
||||
borderRadius: "50%",
|
||||
width: "40px",
|
||||
minWidth: "40px",
|
||||
minHeight: "40px",
|
||||
height: "40px",
|
||||
backgroundColor: vars.color.background,
|
||||
position: "relative",
|
||||
transition: "all ease 0.3s",
|
||||
":hover": {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.15)",
|
||||
},
|
||||
});
|
||||
|
||||
export const friendsButtonBadge = style({
|
||||
backgroundColor: vars.color.success,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
width: "20px",
|
||||
height: "20px",
|
||||
borderRadius: "50%",
|
||||
position: "absolute",
|
||||
top: "-5px",
|
||||
right: "-5px",
|
||||
});
|
||||
77
src/renderer/src/components/sidebar/sidebar-profile.scss
Normal file
77
src/renderer/src/components/sidebar/sidebar-profile.scss
Normal file
@ -0,0 +1,77 @@
|
||||
@use "../../scss/globals.scss";
|
||||
|
||||
.sidebar-profile {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: globals.$spacing-unit;
|
||||
padding: globals.$spacing-unit calc(globals.$spacing-unit * 2);
|
||||
|
||||
&__button {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
transition: all ease 0.1s;
|
||||
color: globals.$muted-color;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
padding: globals.$spacing-unit globals.$spacing-unit;
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
&__button-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: calc(globals.$spacing-unit + globals.$spacing-unit / 2);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__button-information {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__button-title {
|
||||
font-weight: bold;
|
||||
font-size: globals.$body-font-size;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__friends-button {
|
||||
color: globals.$muted-color;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
min-width: 40px;
|
||||
min-height: 40px;
|
||||
height: 40px;
|
||||
background-color: globals.$background-color;
|
||||
position: relative;
|
||||
transition: all ease 0.3s;
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
&__friends-button-badge {
|
||||
background-color: globals.$success-color;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: -5px;
|
||||
}
|
||||
}
|
||||
@ -1,12 +1,12 @@
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { PeopleIcon } from "@primer/octicons-react";
|
||||
import * as styles from "./sidebar-profile.css";
|
||||
import { useAppSelector, useUserDetails } from "@renderer/hooks";
|
||||
import { useEffect, useMemo } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { UserFriendModalTab } from "@renderer/pages/shared-modals/user-friend-modal";
|
||||
import SteamLogo from "@renderer/assets/steam-logo.svg?react";
|
||||
import { Avatar } from "../avatar/avatar";
|
||||
import "./sidebar-profile.scss";
|
||||
|
||||
const LONG_POLLING_INTERVAL = 120_000;
|
||||
|
||||
@ -49,14 +49,14 @@ export function SidebarProfile() {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className={styles.friendsButton}
|
||||
className="sidebar-profile__friends-button"
|
||||
onClick={() =>
|
||||
showFriendsModal(UserFriendModalTab.AddFriend, userDetails.id)
|
||||
}
|
||||
title={t("friends")}
|
||||
>
|
||||
{friendRequestCount > 0 && (
|
||||
<small className={styles.friendsButtonBadge}>
|
||||
<small className="sidebar-profile__friends-button-badge">
|
||||
{friendRequestCount > 99 ? "99+" : friendRequestCount}
|
||||
</small>
|
||||
)}
|
||||
@ -84,21 +84,21 @@ export function SidebarProfile() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.profileContainer}>
|
||||
<div className="sidebar-profile">
|
||||
<button
|
||||
type="button"
|
||||
className={styles.profileButton}
|
||||
className="sidebar-profile__button"
|
||||
onClick={handleProfileClick}
|
||||
>
|
||||
<div className={styles.profileButtonContent}>
|
||||
<div className="sidebar-profile__button-content">
|
||||
<Avatar
|
||||
size={35}
|
||||
src={userDetails?.profileImageUrl}
|
||||
alt={userDetails?.displayName}
|
||||
/>
|
||||
|
||||
<div className={styles.profileButtonInformation}>
|
||||
<p className={styles.profileButtonTitle}>
|
||||
<div className="sidebar-profile__button-information">
|
||||
<p className="sidebar-profile__button-title">
|
||||
{userDetails ? userDetails.displayName : t("sign_in")}
|
||||
</p>
|
||||
|
||||
|
||||
@ -1,126 +0,0 @@
|
||||
import { style } from "@vanilla-extract/css";
|
||||
import { recipe } from "@vanilla-extract/recipes";
|
||||
|
||||
import { SPACING_UNIT, vars } from "../../theme.css";
|
||||
|
||||
export const sidebar = recipe({
|
||||
base: {
|
||||
backgroundColor: vars.color.darkBackground,
|
||||
color: vars.color.muted,
|
||||
flexDirection: "column",
|
||||
display: "flex",
|
||||
transition: "opacity ease 0.2s",
|
||||
borderRight: `solid 1px ${vars.color.border}`,
|
||||
position: "relative",
|
||||
overflow: "hidden",
|
||||
},
|
||||
variants: {
|
||||
resizing: {
|
||||
true: {
|
||||
opacity: vars.opacity.active,
|
||||
pointerEvents: "none",
|
||||
},
|
||||
},
|
||||
darwin: {
|
||||
true: {
|
||||
paddingTop: `${SPACING_UNIT * 6}px`,
|
||||
},
|
||||
false: {
|
||||
paddingTop: `${SPACING_UNIT}px`,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const content = style({
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
padding: `${SPACING_UNIT * 2}px`,
|
||||
gap: `${SPACING_UNIT * 2}px`,
|
||||
width: "100%",
|
||||
overflow: "auto",
|
||||
});
|
||||
|
||||
export const handle = style({
|
||||
width: "5px",
|
||||
height: "100%",
|
||||
cursor: "col-resize",
|
||||
position: "absolute",
|
||||
right: "0",
|
||||
});
|
||||
|
||||
export const menu = style({
|
||||
listStyle: "none",
|
||||
padding: "0",
|
||||
margin: "0",
|
||||
gap: `${SPACING_UNIT / 2}px`,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
overflow: "hidden",
|
||||
});
|
||||
|
||||
export const menuItem = recipe({
|
||||
base: {
|
||||
transition: "all ease 0.1s",
|
||||
cursor: "pointer",
|
||||
textWrap: "nowrap",
|
||||
display: "flex",
|
||||
color: vars.color.muted,
|
||||
borderRadius: "4px",
|
||||
":hover": {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.15)",
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
active: {
|
||||
true: {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.1)",
|
||||
},
|
||||
},
|
||||
muted: {
|
||||
true: {
|
||||
opacity: vars.opacity.disabled,
|
||||
":hover": {
|
||||
opacity: "1",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const menuItemButton = style({
|
||||
color: "inherit",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
cursor: "pointer",
|
||||
overflow: "hidden",
|
||||
width: "100%",
|
||||
padding: `9px ${SPACING_UNIT}px`,
|
||||
});
|
||||
|
||||
export const menuItemButtonLabel = style({
|
||||
textOverflow: "ellipsis",
|
||||
overflow: "hidden",
|
||||
});
|
||||
|
||||
export const gameIcon = style({
|
||||
width: "20px",
|
||||
height: "20px",
|
||||
minWidth: "20px",
|
||||
minHeight: "20px",
|
||||
borderRadius: "4px",
|
||||
backgroundSize: "cover",
|
||||
});
|
||||
|
||||
export const sectionTitle = style({
|
||||
textTransform: "uppercase",
|
||||
fontWeight: "bold",
|
||||
});
|
||||
|
||||
export const section = style({
|
||||
gap: `${SPACING_UNIT * 2}px`,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
paddingBottom: `${SPACING_UNIT}px`,
|
||||
});
|
||||
110
src/renderer/src/components/sidebar/sidebar.scss
Normal file
110
src/renderer/src/components/sidebar/sidebar.scss
Normal file
@ -0,0 +1,110 @@
|
||||
@use "../../scss/globals.scss";
|
||||
|
||||
.sidebar {
|
||||
background-color: globals.$dark-background-color;
|
||||
color: globals.$muted-color;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
transition: opacity ease 0.2s;
|
||||
border-right: solid 1px globals.$border-color;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-top: globals.$spacing-unit;
|
||||
|
||||
&--resizing {
|
||||
opacity: globals.$active-opacity;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&--darwin {
|
||||
padding-top: calc(globals.$spacing-unit * 6);
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: calc(globals.$spacing-unit * 2);
|
||||
gap: calc(globals.$spacing-unit * 2);
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
&__handle {
|
||||
width: 5px;
|
||||
height: 100%;
|
||||
cursor: col-resize;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&__menu {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
gap: calc(globals.$spacing-unit / 2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__menu-item {
|
||||
transition: all ease 0.1s;
|
||||
cursor: pointer;
|
||||
text-wrap: nowrap;
|
||||
display: flex;
|
||||
color: globals.$muted-color;
|
||||
border-radius: 4px;
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
&--active {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
&--muted {
|
||||
opacity: globals.$disabled-opacity;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__menu-item-button {
|
||||
color: inherit;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: globals.$spacing-unit;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
padding: 9px globals.$spacing-unit;
|
||||
}
|
||||
|
||||
&__menu-item-button-label {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__game-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
min-width: 20px;
|
||||
min-height: 20px;
|
||||
border-radius: 4px;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
&__section-title {
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&__section {
|
||||
gap: calc(globals.$spacing-unit * 2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: globals.$spacing-unit;
|
||||
}
|
||||
}
|
||||
@ -9,12 +9,14 @@ import { useDownload, useLibrary, useToast } from "@renderer/hooks";
|
||||
|
||||
import { routes } from "./routes";
|
||||
|
||||
import * as styles from "./sidebar.css";
|
||||
import "./sidebar.scss";
|
||||
|
||||
import { buildGameDetailsPath } from "@renderer/helpers";
|
||||
|
||||
import SteamLogo from "@renderer/assets/steam-logo.svg?react";
|
||||
import { SidebarProfile } from "./sidebar-profile";
|
||||
import { sortBy } from "lodash-es";
|
||||
import cn from "classnames";
|
||||
|
||||
const SIDEBAR_MIN_WIDTH = 200;
|
||||
const SIDEBAR_INITIAL_WIDTH = 250;
|
||||
@ -156,9 +158,9 @@ export function Sidebar() {
|
||||
return (
|
||||
<aside
|
||||
ref={sidebarRef}
|
||||
className={styles.sidebar({
|
||||
resizing: isResizing,
|
||||
darwin: window.electron.platform === "darwin",
|
||||
className={cn("sidebar", {
|
||||
"sidebar--resizing": isResizing,
|
||||
"sidebar--darwin": window.electron.platform === "darwin",
|
||||
})}
|
||||
style={{
|
||||
width: sidebarWidth,
|
||||
@ -168,19 +170,19 @@ export function Sidebar() {
|
||||
>
|
||||
<SidebarProfile />
|
||||
|
||||
<div className={styles.content}>
|
||||
<section className={styles.section}>
|
||||
<ul className={styles.menu}>
|
||||
<div className="sidebar__content">
|
||||
<section className="sidebar__section">
|
||||
<ul className="sidebar__menu">
|
||||
{routes.map(({ nameKey, path, render }) => (
|
||||
<li
|
||||
key={nameKey}
|
||||
className={styles.menuItem({
|
||||
active: location.pathname === path,
|
||||
className={cn("sidebar__menu-item", {
|
||||
"sidebar__menu-item--active": location.pathname === path,
|
||||
})}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.menuItemButton}
|
||||
className="sidebar__menu-item-button"
|
||||
onClick={() => handleSidebarItemClick(path)}
|
||||
>
|
||||
{render()}
|
||||
@ -191,8 +193,8 @@ export function Sidebar() {
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section className={styles.section}>
|
||||
<small className={styles.sectionTitle}>{t("my_library")}</small>
|
||||
<section className="sidebar__section">
|
||||
<small className="sidebar__section-title">{t("my_library")}</small>
|
||||
|
||||
<TextField
|
||||
ref={filterRef}
|
||||
@ -201,33 +203,33 @@ export function Sidebar() {
|
||||
theme="dark"
|
||||
/>
|
||||
|
||||
<ul className={styles.menu}>
|
||||
<ul className="sidebar__menu">
|
||||
{filteredLibrary.map((game) => (
|
||||
<li
|
||||
key={game.id}
|
||||
className={styles.menuItem({
|
||||
active:
|
||||
className={cn("sidebar__menu-item", {
|
||||
"sidebar__menu-item--active":
|
||||
location.pathname === `/game/${game.shop}/${game.objectID}`,
|
||||
muted: game.status === "removed",
|
||||
"sidebar__menu-item--muted": game.status === "removed",
|
||||
})}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.menuItemButton}
|
||||
className="sidebar__menu-item-button"
|
||||
onClick={(event) => handleSidebarGameClick(event, game)}
|
||||
>
|
||||
{game.iconUrl ? (
|
||||
<img
|
||||
className={styles.gameIcon}
|
||||
className="sidebar__game-icon"
|
||||
src={game.iconUrl}
|
||||
alt={game.title}
|
||||
loading="lazy"
|
||||
/>
|
||||
) : (
|
||||
<SteamLogo className={styles.gameIcon} />
|
||||
<SteamLogo className="sidebar__game-icon" />
|
||||
)}
|
||||
|
||||
<span className={styles.menuItemButtonLabel}>
|
||||
<span className="sidebar__menu-item-button-label">
|
||||
{getGameTitle(game)}
|
||||
</span>
|
||||
</button>
|
||||
@ -239,7 +241,7 @@ export function Sidebar() {
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className={styles.handle}
|
||||
className="sidebar__handle"
|
||||
onMouseDown={handleMouseDown}
|
||||
/>
|
||||
</aside>
|
||||
|
||||
@ -1,89 +0,0 @@
|
||||
import { style } from "@vanilla-extract/css";
|
||||
import { recipe } from "@vanilla-extract/recipes";
|
||||
|
||||
import { SPACING_UNIT, vars } from "../../theme.css";
|
||||
|
||||
export const textFieldContainer = style({
|
||||
flex: "1",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
});
|
||||
|
||||
export const textField = recipe({
|
||||
base: {
|
||||
display: "inline-flex",
|
||||
transition: "all ease 0.2s",
|
||||
width: "100%",
|
||||
alignItems: "center",
|
||||
borderRadius: "8px",
|
||||
border: `solid 1px ${vars.color.border}`,
|
||||
height: "40px",
|
||||
minHeight: "40px",
|
||||
},
|
||||
variants: {
|
||||
theme: {
|
||||
primary: {
|
||||
backgroundColor: vars.color.darkBackground,
|
||||
},
|
||||
dark: {
|
||||
backgroundColor: vars.color.background,
|
||||
},
|
||||
},
|
||||
hasError: {
|
||||
true: {
|
||||
borderColor: vars.color.danger,
|
||||
},
|
||||
},
|
||||
focused: {
|
||||
true: {
|
||||
borderColor: "#DADBE1",
|
||||
},
|
||||
false: {
|
||||
":hover": {
|
||||
borderColor: "rgba(255, 255, 255, 0.5)",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const textFieldInput = recipe({
|
||||
base: {
|
||||
backgroundColor: "transparent",
|
||||
border: "none",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
outline: "none",
|
||||
color: "#DADBE1",
|
||||
cursor: "default",
|
||||
fontFamily: "inherit",
|
||||
textOverflow: "ellipsis",
|
||||
padding: `${SPACING_UNIT}px`,
|
||||
":focus": {
|
||||
cursor: "text",
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
readOnly: {
|
||||
true: {
|
||||
textOverflow: "inherit",
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const togglePasswordButton = style({
|
||||
cursor: "pointer",
|
||||
color: vars.color.muted,
|
||||
padding: `${SPACING_UNIT}px`,
|
||||
});
|
||||
|
||||
export const textFieldWrapper = style({
|
||||
display: "flex",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
});
|
||||
|
||||
export const errorLabel = style({
|
||||
color: vars.color.danger,
|
||||
});
|
||||
75
src/renderer/src/components/text-field/text-field.scss
Normal file
75
src/renderer/src/components/text-field/text-field.scss
Normal file
@ -0,0 +1,75 @@
|
||||
@use "../../scss/globals.scss";
|
||||
|
||||
.text-field-container {
|
||||
flex: 1;
|
||||
gap: globals.$spacing-unit;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&__text-field {
|
||||
display: inline-flex;
|
||||
transition: all ease 0.2s;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
border-radius: 8px;
|
||||
border: solid 1px globals.$border-color;
|
||||
height: 40px;
|
||||
min-height: 40px;
|
||||
|
||||
&:hover {
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
&--primary {
|
||||
background-color: globals.$dark-background-color;
|
||||
}
|
||||
|
||||
&--dark {
|
||||
background-color: globals.$background-color;
|
||||
}
|
||||
|
||||
&--has-error {
|
||||
border-color: globals.$danger-color;
|
||||
}
|
||||
|
||||
&--focused {
|
||||
border-color: #dadbe1;
|
||||
}
|
||||
}
|
||||
|
||||
&__text-field-input {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
outline: none;
|
||||
color: #dadbe1;
|
||||
cursor: default;
|
||||
font-family: inherit;
|
||||
text-overflow: ellipsis;
|
||||
padding: globals.$spacing-unit;
|
||||
|
||||
&:focus {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
&--read-only {
|
||||
text-overflow: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&__toggle-password-button {
|
||||
cursor: pointer;
|
||||
color: globals.$muted-color;
|
||||
padding: globals.$spacing-unit;
|
||||
}
|
||||
|
||||
&__text-field-wrapper {
|
||||
display: flex;
|
||||
gap: globals.$spacing-unit;
|
||||
}
|
||||
|
||||
&__error-label {
|
||||
color: globals.$danger-color;
|
||||
}
|
||||
}
|
||||
@ -1,17 +1,18 @@
|
||||
import React, { useId, useMemo, useState } from "react";
|
||||
import type { RecipeVariants } from "@vanilla-extract/recipes";
|
||||
import type { FieldError, FieldErrorsImpl, Merge } from "react-hook-form";
|
||||
import { EyeClosedIcon, EyeIcon } from "@primer/octicons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import * as styles from "./text-field.css";
|
||||
import cn from "classnames";
|
||||
|
||||
import "./text-field.scss";
|
||||
|
||||
export interface TextFieldProps
|
||||
extends React.DetailedHTMLProps<
|
||||
React.InputHTMLAttributes<HTMLInputElement>,
|
||||
HTMLInputElement
|
||||
> {
|
||||
theme?: NonNullable<RecipeVariants<typeof styles.textField>>["theme"];
|
||||
theme?: "primary" | "dark";
|
||||
label?: string | React.ReactNode;
|
||||
hint?: string | React.ReactNode;
|
||||
textFieldProps?: React.DetailedHTMLProps<
|
||||
@ -57,7 +58,9 @@ export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
|
||||
const hintContent = useMemo(() => {
|
||||
if (error && error.message)
|
||||
return (
|
||||
<small className={styles.errorLabel}>{error.message as string}</small>
|
||||
<small className="text-field-container__error-label">
|
||||
{error.message as string}
|
||||
</small>
|
||||
);
|
||||
|
||||
if (hint) return <small>{hint}</small>;
|
||||
@ -77,22 +80,28 @@ export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
|
||||
const hasError = !!error;
|
||||
|
||||
return (
|
||||
<div className={styles.textFieldContainer} {...containerProps}>
|
||||
<div className="text-field-container" {...containerProps}>
|
||||
{label && <label htmlFor={id}>{label}</label>}
|
||||
|
||||
<div className={styles.textFieldWrapper}>
|
||||
<div className="text-field-container__text-field-wrapper">
|
||||
<div
|
||||
className={styles.textField({
|
||||
theme,
|
||||
hasError,
|
||||
focused: isFocused,
|
||||
})}
|
||||
className={cn(
|
||||
"text-field-container__text-field",
|
||||
`text-field-container__text-field--${theme}`,
|
||||
{
|
||||
"text-field-container__text-field--has-error": hasError,
|
||||
"text-field-container__text-field--focused": isFocused,
|
||||
}
|
||||
)}
|
||||
{...textFieldProps}
|
||||
>
|
||||
<input
|
||||
ref={ref}
|
||||
id={id}
|
||||
className={styles.textFieldInput({ readOnly: props.readOnly })}
|
||||
className={cn("text-field-container__text-field-input", {
|
||||
"text-field-container__text-field-input--read-only":
|
||||
props.readOnly,
|
||||
})}
|
||||
{...props}
|
||||
onFocus={handleFocus}
|
||||
onBlur={handleBlur}
|
||||
@ -102,7 +111,7 @@ export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
|
||||
{showPasswordToggleButton && (
|
||||
<button
|
||||
type="button"
|
||||
className={styles.togglePasswordButton}
|
||||
className="text-field-container__toggle-password-button"
|
||||
onClick={() => setIsPasswordVisible(!isPasswordVisible)}
|
||||
aria-label={t("toggle_password_visibility")}
|
||||
>
|
||||
|
||||
@ -1,87 +0,0 @@
|
||||
import { keyframes, style } from "@vanilla-extract/css";
|
||||
|
||||
import { SPACING_UNIT, vars } from "../../theme.css";
|
||||
import { recipe } from "@vanilla-extract/recipes";
|
||||
|
||||
const TOAST_HEIGHT = 80;
|
||||
|
||||
export const slideIn = keyframes({
|
||||
"0%": { transform: `translateY(${TOAST_HEIGHT + SPACING_UNIT * 2}px)` },
|
||||
"100%": { transform: "translateY(0)" },
|
||||
});
|
||||
|
||||
export const slideOut = keyframes({
|
||||
"0%": { transform: `translateY(0)` },
|
||||
"100%": { transform: `translateY(${TOAST_HEIGHT + SPACING_UNIT * 2}px)` },
|
||||
});
|
||||
|
||||
export const toast = recipe({
|
||||
base: {
|
||||
animationDuration: "0.2s",
|
||||
animationTimingFunction: "ease-in-out",
|
||||
maxHeight: TOAST_HEIGHT,
|
||||
position: "fixed",
|
||||
backgroundColor: vars.color.background,
|
||||
borderRadius: "4px",
|
||||
border: `solid 1px ${vars.color.border}`,
|
||||
right: `${SPACING_UNIT * 2}px`,
|
||||
/* Bottom panel height + 16px */
|
||||
bottom: `${26 + SPACING_UNIT * 2}px`,
|
||||
overflow: "hidden",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
zIndex: vars.zIndex.toast,
|
||||
maxWidth: "500px",
|
||||
},
|
||||
variants: {
|
||||
closing: {
|
||||
true: {
|
||||
animationName: slideOut,
|
||||
transform: `translateY(${TOAST_HEIGHT + SPACING_UNIT * 2}px)`,
|
||||
},
|
||||
false: {
|
||||
animationName: slideIn,
|
||||
transform: `translateY(0)`,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const toastContent = style({
|
||||
display: "flex",
|
||||
gap: `${SPACING_UNIT * 2}px`,
|
||||
padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 2}px`,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
});
|
||||
|
||||
export const progress = style({
|
||||
width: "100%",
|
||||
height: "5px",
|
||||
"::-webkit-progress-bar": {
|
||||
backgroundColor: vars.color.darkBackground,
|
||||
},
|
||||
"::-webkit-progress-value": {
|
||||
backgroundColor: vars.color.muted,
|
||||
},
|
||||
});
|
||||
|
||||
export const closeButton = style({
|
||||
color: vars.color.body,
|
||||
cursor: "pointer",
|
||||
padding: "0",
|
||||
margin: "0",
|
||||
});
|
||||
|
||||
export const successIcon = style({
|
||||
color: vars.color.success,
|
||||
});
|
||||
|
||||
export const errorIcon = style({
|
||||
color: vars.color.danger,
|
||||
});
|
||||
|
||||
export const warningIcon = style({
|
||||
color: vars.color.warning,
|
||||
});
|
||||
87
src/renderer/src/components/toast/toast.scss
Normal file
87
src/renderer/src/components/toast/toast.scss
Normal file
@ -0,0 +1,87 @@
|
||||
@use "../../scss/globals.scss";
|
||||
|
||||
$toast-height: 80;
|
||||
|
||||
.toast {
|
||||
animation-duration: 0.2s;
|
||||
animation-timing-function: ease-in-out;
|
||||
max-height: $toast-height;
|
||||
position: fixed;
|
||||
background-color: globals.$background-color;
|
||||
border-radius: 4px;
|
||||
border: solid 1px globals.$border-color;
|
||||
right: calc(globals.$spacing-unit * 2);
|
||||
//bottom panel height + 16px
|
||||
bottom: calc(26 + #{globals.$spacing-unit * 2});
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
z-index: globals.$toast-z-index;
|
||||
max-width: 500px;
|
||||
animation-name: slide-in;
|
||||
transform: translateY(0);
|
||||
|
||||
&--closing {
|
||||
animation-name: slide-out;
|
||||
transform: translateY(calc($toast-height #{globals.$spacing-unit * 2}));
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
gap: calc(globals.$spacing-unit * 2);
|
||||
padding: calc(globals.$spacing-unit * 2) calc(globals.$spacing-unit * 2);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__progress {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
::-webkit-progress-bar {
|
||||
background-color: globals.$dark-background-color;
|
||||
}
|
||||
::-webkit-progress-value {
|
||||
background-color: globals.$muted-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__close-button {
|
||||
color: globals.$body-color;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__success-icon {
|
||||
color: globals.$success-color;
|
||||
}
|
||||
|
||||
&__error-icon {
|
||||
color: globals.$danger-color;
|
||||
}
|
||||
|
||||
&__warning-icon {
|
||||
color: globals.$warning-color;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in {
|
||||
0% {
|
||||
transform: translateY(calc($toast-height #{globals.$spacing-unit * 2}));
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(calc($toast-height #{globals.$spacing-unit * 2}));
|
||||
}
|
||||
}
|
||||
@ -6,8 +6,9 @@ import {
|
||||
XIcon,
|
||||
} from "@primer/octicons-react";
|
||||
|
||||
import * as styles from "./toast.css";
|
||||
import "./toast.scss";
|
||||
import { SPACING_UNIT } from "@renderer/theme.css";
|
||||
import cn from "classnames";
|
||||
|
||||
export interface ToastProps {
|
||||
visible: boolean;
|
||||
@ -77,22 +78,28 @@ export function Toast({ visible, message, type, onClose }: ToastProps) {
|
||||
if (!visible) return null;
|
||||
|
||||
return (
|
||||
<div className={styles.toast({ closing: isClosing })}>
|
||||
<div className={styles.toastContent}>
|
||||
<div
|
||||
className={cn("toast", {
|
||||
"toast--closing": isClosing,
|
||||
})}
|
||||
>
|
||||
<div className="toast__content">
|
||||
<div style={{ display: "flex", gap: `${SPACING_UNIT}px` }}>
|
||||
{type === "success" && (
|
||||
<CheckCircleFillIcon className={styles.successIcon} />
|
||||
<CheckCircleFillIcon className="toast__success-icon" />
|
||||
)}
|
||||
|
||||
{type === "error" && <XCircleFillIcon className={styles.errorIcon} />}
|
||||
{type === "error" && (
|
||||
<XCircleFillIcon className="toast__error-icon" />
|
||||
)}
|
||||
|
||||
{type === "warning" && <AlertIcon className={styles.warningIcon} />}
|
||||
{type === "warning" && <AlertIcon className="toast__warning-icon" />}
|
||||
<span style={{ fontWeight: "bold" }}>{message}</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className={styles.closeButton}
|
||||
className="toast__close-button"
|
||||
onClick={startAnimateClosing}
|
||||
aria-label="Close toast"
|
||||
>
|
||||
@ -100,7 +107,7 @@ export function Toast({ visible, message, type, onClose }: ToastProps) {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<progress className={styles.progress} value={progress} max={100} />
|
||||
<progress className="toast__progress" value={progress} max={100} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import { appContainer } from "../../../app.css";
|
||||
import { vars, SPACING_UNIT } from "../../../theme.css";
|
||||
import { globalStyle, style } from "@vanilla-extract/css";
|
||||
|
||||
@ -113,19 +112,19 @@ export const gamesGrid = style({
|
||||
gap: `${SPACING_UNIT * 2}px`,
|
||||
gridTemplateColumns: "repeat(2, 1fr)",
|
||||
"@container": {
|
||||
[`${appContainer} (min-width: 900px)`]: {
|
||||
[`app-container (min-width: 900px)`]: {
|
||||
gridTemplateColumns: "repeat(4, 1fr)",
|
||||
},
|
||||
[`${appContainer} (min-width: 1300px)`]: {
|
||||
[`app-container (min-width: 1300px)`]: {
|
||||
gridTemplateColumns: "repeat(5, 1fr)",
|
||||
},
|
||||
[`${appContainer} (min-width: 2000px)`]: {
|
||||
[`app-container (min-width: 2000px)`]: {
|
||||
gridTemplateColumns: "repeat(6, 1fr)",
|
||||
},
|
||||
[`${appContainer} (min-width: 2600px)`]: {
|
||||
[`app-container (min-width: 2600px)`]: {
|
||||
gridTemplateColumns: "repeat(8, 1fr)",
|
||||
},
|
||||
[`${appContainer} (min-width: 3000px)`]: {
|
||||
[`app-container (min-width: 3000px)`]: {
|
||||
gridTemplateColumns: "repeat(12, 1fr)",
|
||||
},
|
||||
},
|
||||
|
||||
@ -19,3 +19,8 @@ $bottom-panel-z-index: 3;
|
||||
$title-bar-z-index: 4;
|
||||
$backdrop-z-index: 4;
|
||||
$modal-z-index: 5;
|
||||
|
||||
$body-font-size: 14px;
|
||||
$small-font-size: 12px;
|
||||
|
||||
$app-container: app-container;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user