fix: fixing css issues

2026-01-22 10:23:56 +00:00 · 2025-02-01 19:11:58 +00:00
parent 7c87e121bc 732a00c388
commit d5a3e3fae5
58 changed files with 1307 additions and 639 deletions
--- a/src/renderer/src/app.css.ts
+++ b/src/renderer/src/app.css.ts
@@ -123,7 +123,7 @@ export const titleBar = style({
  alignItems: "center",
  padding: `0 ${SPACING_UNIT * 2}px`,
  WebkitAppRegion: "drag",
-  zIndex: "4",
+  zIndex: vars.zIndex.titleBar,
  borderBottom: `1px solid ${vars.color.border}`,
 } as ComplexStyleRule);

--- a/src/renderer/src/app.tsx
+++ b/src/renderer/src/app.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef } from "react";
-
+import achievementSound from "@renderer/assets/audio/achievement.wav";
 import { Sidebar, BottomPanel, Header, Toast } from "@renderer/components";

 import {
@@ -234,6 +234,22 @@ export function App() {
    downloadSourcesWorker.postMessage(["SYNC_DOWNLOAD_SOURCES", id]);
  }, [updateRepacks]);

+  const playAudio = useCallback(() => {
+    const audio = new Audio(achievementSound);
+    audio.volume = 0.2;
+    audio.play();
+  }, []);
+
+  useEffect(() => {
+    const unsubscribe = window.electron.onAchievementUnlocked(() => {
+      playAudio();
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [playAudio]);
+
  const handleToastClose = useCallback(() => {
    dispatch(closeToast());
  }, [dispatch]);
@@ -262,6 +278,7 @@ export function App() {
      >
        <Toast
          visible={toast.visible}
+          title={toast.title}
          message={toast.message}
          type={toast.type}
          onClose={handleToastClose}
--- a/src/renderer/src/assets/audio/achievement.wav
+++ b/src/renderer/src/assets/audio/achievement.wav
--- a/src/renderer/src/components/bottom-panel/bottom-panel.scss
+++ b/src/renderer/src/components/bottom-panel/bottom-panel.scss
@@ -21,4 +21,14 @@
      cursor: pointer;
    }
  }
+
+  &__version-button {
+    color: globals.$body-color;
+    border-bottom: solid 1px transparent;
+
+    &:hover {
+      border-bottom: solid 1px globals.$body-color;
+      cursor: pointer;
+    }
+  }
 }
--- a/src/renderer/src/components/bottom-panel/bottom-panel.tsx
+++ b/src/renderer/src/components/bottom-panel/bottom-panel.tsx
@@ -76,10 +76,15 @@ export function BottomPanel() {
        <small>{status}</small>
      </button>

-      <small>
-        {sessionHash ? `${sessionHash} -` : ""} v{version} &quot;
-        {VERSION_CODENAME}&quot;
-      </small>
+      <button
+        data-featurebase-changelog
+        className="bottom-panel__version-button"
+      >
+        <small data-featurebase-changelog>
+          {sessionHash ? `${sessionHash} -` : ""} v{version} &quot;
+          {VERSION_CODENAME}&quot;
+        </small>
+      </button>
    </footer>
  );
 }
--- a/src/renderer/src/components/sidebar/sidebar.css.ts
+++ b/src/renderer/src/components/sidebar/sidebar.css.ts
@@ -1,152 +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",
-    justifyContent: "space-between",
-  },
-  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`,
-});
-
-export const helpButton = style({
-  color: vars.color.muted,
-  padding: `${SPACING_UNIT}px ${SPACING_UNIT * 2}px`,
-  gap: "9px",
-  display: "flex",
-  alignItems: "center",
-  cursor: "pointer",
-  borderTop: `solid 1px ${vars.color.border}`,
-  transition: "background-color ease 0.1s",
-  ":hover": {
-    backgroundColor: "rgba(255, 255, 255, 0.15)",
-  },
-});
-
-export const helpButtonIcon = style({
-  background: "linear-gradient(0deg, #16B195 50%, #3E62C0 100%)",
-  width: "24px",
-  height: "24px",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  color: "#fff",
-  borderRadius: "50%",
-});
--- a/src/renderer/src/components/sidebar/sidebar.scss
+++ b/src/renderer/src/components/sidebar/sidebar.scss
@@ -0,0 +1,136 @@
+@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;
+  }
+
+  &__help-button {
+    color: globals.$muted-color;
+    padding: globals.$spacing-unit calc(globals.$spacing-unit * 2);
+    gap: 9px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    border-top: solid 1px globals.$border-color;
+    transition: background-color ease 0.1s;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.15);
+    }
+  }
+
+  &__help-button-icon {
+    background: linear-gradient(0deg, #16b195 50%, #3e62c0 100%);
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    border-radius: 50%;
+  }
+}
--- a/src/renderer/src/components/sidebar/sidebar.tsx
+++ b/src/renderer/src/components/sidebar/sidebar.tsx
@@ -181,7 +181,12 @@ export function Sidebar() {
      }}
    >
      <div
-        style={{ display: "flex", flexDirection: "column", overflow: "hidden" }}
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          overflow: "hidden",
+          flex: 1,
+        }}
      >
        <SidebarProfile />

--- a/src/renderer/src/components/toast/toast.scss
+++ b/src/renderer/src/components/toast/toast.scss
@@ -0,0 +1,85 @@
+@use "../../scss/globals.scss";
+
+.toast {
+  animation-duration: 0.2s;
+  animation-timing-function: ease-in-out;
+  position: absolute;
+  background-color: globals.$dark-background-color;
+  border-radius: 4px;
+  border: solid 1px globals.$border-color;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  z-index: globals.$toast-z-index;
+  max-width: 420px;
+  animation-name: enter;
+  transform: translateY(0);
+
+  &--closing {
+    animation-name: exit;
+    transform: translateY(100%);
+  }
+
+  &__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;
+    transition: color 0.2s ease-in-out;
+
+    &:hover {
+      color: globals.$muted-color;
+    }
+  }
+
+  &__icon {
+    &--success {
+      color: globals.$success-color;
+    }
+
+    &--error {
+      color: globals.$danger-color;
+    }
+
+    &--warning {
+      color: globals.$warning-color;
+    }
+  }
+}
+
+@keyframes enter {
+  0% {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+}
+
+@keyframes exit {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
--- a/src/renderer/src/declaration.d.ts
+++ b/src/renderer/src/declaration.d.ts
@@ -142,6 +142,7 @@ declare global {
      minimized: boolean;
    }) => Promise<void>;
    authenticateRealDebrid: (apiToken: string) => Promise<RealDebridUser>;
+    onAchievementUnlocked: (cb: () => void) => () => Electron.IpcRenderer;

    /* Download sources */
    putDownloadSource: (
--- a/src/renderer/src/features/toast-slice.ts
+++ b/src/renderer/src/features/toast-slice.ts
@@ -3,12 +3,14 @@ import type { PayloadAction } from "@reduxjs/toolkit";
 import { ToastProps } from "@renderer/components/toast/toast";

 export interface ToastState {
-  message: string;
+  title: string;
+  message?: string;
  type: ToastProps["type"];
  visible: boolean;
 }

 const initialState: ToastState = {
+  title: "",
  message: "",
  type: "success",
  visible: false,
@@ -19,6 +21,7 @@ export const toastSlice = createSlice({
  initialState,
  reducers: {
    showToast: (state, action: PayloadAction<Omit<ToastState, "visible">>) => {
+      state.title = action.payload.title;
      state.message = action.payload.message;
      state.type = action.payload.type;
      state.visible = true;
--- a/src/renderer/src/hooks/use-toast.ts
+++ b/src/renderer/src/hooks/use-toast.ts
@@ -6,9 +6,10 @@ export function useToast() {
  const dispatch = useAppDispatch();

  const showSuccessToast = useCallback(
-    (message: string) => {
+    (title: string, message?: string) => {
      dispatch(
        showToast({
+          title,
          message,
          type: "success",
        })
@@ -18,9 +19,10 @@ export function useToast() {
  );

  const showErrorToast = useCallback(
-    (message: string) => {
+    (title: string, message?: string) => {
      dispatch(
        showToast({
+          title,
          message,
          type: "error",
        })
@@ -30,9 +32,10 @@ export function useToast() {
  );

  const showWarningToast = useCallback(
-    (message: string) => {
+    (title: string, message?: string) => {
      dispatch(
        showToast({
+          title,
          message,
          type: "warning",
        })
--- a/src/renderer/src/hooks/use-user-details.ts
+++ b/src/renderer/src/hooks/use-user-details.ts
@@ -78,9 +78,15 @@ export function useUserDetails() {
        ...response,
        username: userDetails?.username || "",
        subscription: userDetails?.subscription || null,
+        featurebaseJwt: userDetails?.featurebaseJwt || "",
      });
    },
-    [updateUserDetails, userDetails?.username, userDetails?.subscription]
+    [
+      updateUserDetails,
+      userDetails?.username,
+      userDetails?.subscription,
+      userDetails?.featurebaseJwt,
+    ]
  );

  const syncFriendRequests = useCallback(async () => {
--- a/src/renderer/src/main.tsx
+++ b/src/renderer/src/main.tsx
@@ -45,6 +45,7 @@ Sentry.init({
  tracesSampleRate: 1.0,
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
+  release: await window.electron.getVersion(),
 });

 console.log = logger.log;
--- a/src/renderer/src/pages/achievements/achievements.scss
+++ b/src/renderer/src/pages/achievements/achievements.scss
@@ -0,0 +1,262 @@
+@use "../../scss/globals.scss";
+@use "sass:math";
+
+$hero-height: 150px;
+$logo-height: 100px;
+$logo-max-width: 200px;
+
+.achievements {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  transition: all ease 0.3s;
+
+  &__hero {
+    width: 100%;
+    height: $hero-height;
+    min-height: $hero-height;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    transition: all ease 0.2s;
+
+    &-content {
+      padding: globals.$spacing-unit * 2;
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    &-logo-backdrop {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+    }
+
+    &-image-skeleton {
+      height: 150px;
+    }
+  }
+
+  &__game-logo {
+    width: $logo-max-width;
+    height: $logo-height;
+    object-fit: contain;
+    transition: all ease 0.2s;
+
+    &:hover {
+      transform: scale(1.05);
+    }
+  }
+
+  &__container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    z-index: 1;
+  }
+
+  &__table-header {
+    width: 100%;
+    background-color: var(--color-dark-background);
+    transition: all ease 0.2s;
+    border-bottom: solid 1px var(--color-border);
+    position: sticky;
+    top: 0;
+    z-index: 1;
+
+    &--stuck {
+      box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.8);
+    }
+  }
+
+  &__list {
+    list-style: none;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: globals.$spacing-unit * 2;
+    padding: globals.$spacing-unit * 2;
+    width: 100%;
+    background-color: var(--color-background);
+  }
+
+  &__item {
+    display: flex;
+    transition: all ease 0.1s;
+    color: var(--color-muted);
+    width: 100%;
+    overflow: hidden;
+    border-radius: 4px;
+    padding: globals.$spacing-unit globals.$spacing-unit;
+    gap: globals.$spacing-unit * 2;
+    align-items: center;
+    text-align: left;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.15);
+      text-decoration: none;
+    }
+
+    &-image {
+      width: 54px;
+      height: 54px;
+      border-radius: 4px;
+      object-fit: cover;
+
+      &--locked {
+        filter: grayscale(100%);
+      }
+    }
+
+    &-content {
+      flex: 1;
+    }
+
+    &-title {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    &-hidden-icon {
+      display: flex;
+      color: var(--color-warning);
+      opacity: 0.8;
+
+      &:hover {
+        opacity: 1;
+      }
+
+      svg {
+        width: 12px;
+        height: 12px;
+      }
+    }
+
+    &-eye-closed {
+      width: 12px;
+      height: 12px;
+      color: globals.$warning-color;
+      scale: 4;
+    }
+
+    &-meta {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    &-points {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      margin-right: 4px;
+      font-weight: 600;
+
+      &--locked {
+        cursor: pointer;
+        color: var(--color-warning);
+      }
+
+      &-icon {
+        width: 18px;
+        height: 18px;
+      }
+
+      &-value {
+        font-size: 1.1em;
+      }
+    }
+
+    &-unlock-time {
+      white-space: nowrap;
+      gap: 4px;
+      display: flex;
+    }
+
+    &-compared {
+      display: grid;
+      grid-template-columns: 3fr 1fr 1fr;
+
+      &--no-owner {
+        grid-template-columns: 3fr 2fr;
+      }
+    }
+
+    &-main {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: globals.$spacing-unit;
+    }
+
+    &-status {
+      display: flex;
+      padding: globals.$spacing-unit;
+      justify-content: center;
+
+      &--unlocked {
+        white-space: nowrap;
+        flex-direction: row;
+        gap: globals.$spacing-unit;
+        padding: 0;
+      }
+    }
+  }
+
+  &__progress-bar {
+    width: 100%;
+    height: 8px;
+    transition: all ease 0.2s;
+
+    &::-webkit-progress-bar {
+      background-color: rgba(255, 255, 255, 0.15);
+      border-radius: 4px;
+    }
+
+    &::-webkit-progress-value {
+      background-color: var(--color-muted);
+      border-radius: 4px;
+    }
+  }
+
+  &__profile-avatar {
+    height: 54px;
+    width: 54px;
+    border-radius: 4px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--color-background);
+    position: relative;
+    object-fit: cover;
+
+    &--small {
+      height: 32px;
+      width: 32px;
+    }
+  }
+
+  &__subscription-button {
+    text-decoration: none;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    gap: math.div(globals.$spacing-unit, 2);
+    color: var(--color-body);
+    cursor: pointer;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
--- a/src/renderer/src/pages/downloads/download-group.css.ts
+++ b/src/renderer/src/pages/downloads/download-group.css.ts
@@ -1,109 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT, vars } from "../../theme.css";
-
-export const downloadTitleWrapper = style({
-  display: "flex",
-  alignItems: "center",
-  marginBottom: `${SPACING_UNIT}px`,
-  gap: `${SPACING_UNIT}px`,
-});
-
-export const downloadTitle = style({
-  fontWeight: "bold",
-  cursor: "pointer",
-  color: vars.color.body,
-  textAlign: "left",
-  fontSize: "16px",
-  display: "block",
-  ":hover": {
-    textDecoration: "underline",
-  },
-});
-
-export const downloads = style({
-  width: "100%",
-  gap: `${SPACING_UNIT * 2}px`,
-  display: "flex",
-  flexDirection: "column",
-  margin: "0",
-  padding: "0",
-  marginTop: `${SPACING_UNIT}px`,
-});
-
-export const downloadCover = style({
-  width: "280px",
-  minWidth: "280px",
-  height: "auto",
-  borderRight: `solid 1px ${vars.color.border}`,
-  position: "relative",
-  zIndex: "1",
-});
-
-export const downloadCoverContent = style({
-  width: "100%",
-  height: "100%",
-  padding: `${SPACING_UNIT}px`,
-  display: "flex",
-  alignItems: "flex-end",
-  justifyContent: "flex-end",
-});
-
-export const downloadCoverBackdrop = style({
-  width: "100%",
-  height: "100%",
-  background: "linear-gradient(0deg, rgba(0, 0, 0, 0.8) 5%, transparent 100%)",
-  display: "flex",
-  overflow: "hidden",
-  zIndex: "1",
-});
-
-export const downloadCoverImage = style({
-  width: "100%",
-  height: "100%",
-  position: "absolute",
-  zIndex: "-1",
-});
-
-export const download = style({
-  width: "100%",
-  backgroundColor: vars.color.background,
-  display: "flex",
-  borderRadius: "8px",
-  border: `solid 1px ${vars.color.border}`,
-  overflow: "hidden",
-  boxShadow: "0px 0px 5px 0px #000000",
-  transition: "all ease 0.2s",
-  height: "140px",
-  minHeight: "140px",
-  maxHeight: "140px",
-});
-
-export const downloadDetails = style({
-  display: "flex",
-  flexDirection: "column",
-  flex: "1",
-  justifyContent: "center",
-  gap: `${SPACING_UNIT / 2}px`,
-  fontSize: "14px",
-});
-
-export const downloadRightContent = style({
-  display: "flex",
-  padding: `${SPACING_UNIT * 2}px`,
-  flex: "1",
-  gap: `${SPACING_UNIT}px`,
-  background: "linear-gradient(90deg, transparent 20%, rgb(0 0 0 / 20%) 100%)",
-});
-
-export const downloadActions = style({
-  display: "flex",
-  alignItems: "center",
-  gap: `${SPACING_UNIT}px`,
-});
-
-export const downloadGroup = style({
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT * 2}px`,
-});
--- a/src/renderer/src/pages/downloads/download-group.scss
+++ b/src/renderer/src/pages/downloads/download-group.scss
@@ -0,0 +1,140 @@
+@use "../../scss/globals.scss";
+
+.download-group {
+  display: flex;
+  flex-direction: column;
+  gap: calc(globals.$spacing-unit * 2);
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: calc(globals.$spacing-unit * 2);
+
+    &-divider {
+      flex: 1;
+      background-color: globals.$border-color;
+      height: 1px;
+    }
+
+    &-count {
+      font-weight: 400;
+    }
+  }
+
+  &__title-wrapper {
+    display: flex;
+    align-items: center;
+    margin-bottom: globals.$spacing-unit;
+    gap: globals.$spacing-unit;
+  }
+
+  &__title {
+    font-weight: bold;
+    cursor: pointer;
+    color: globals.$body-color;
+    text-align: left;
+    font-size: 16px;
+    display: block;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  &__downloads {
+    width: 100%;
+    gap: calc(globals.$spacing-unit * 2);
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+    margin-top: globals.$spacing-unit;
+  }
+
+  &__item {
+    width: 100%;
+    background-color: globals.$background-color;
+    display: flex;
+    border-radius: 8px;
+    border: solid 1px globals.$border-color;
+    overflow: hidden;
+    box-shadow: 0px 0px 5px 0px #000000;
+    transition: all ease 0.2s;
+    height: 140px;
+    min-height: 140px;
+    max-height: 140px;
+    position: relative;
+  }
+
+  &__cover {
+    width: 280px;
+    min-width: 280px;
+    height: auto;
+    border-right: solid 1px globals.$border-color;
+    position: relative;
+    z-index: 1;
+
+    &-content {
+      width: 100%;
+      height: 100%;
+      padding: globals.$spacing-unit;
+      display: flex;
+      align-items: flex-end;
+      justify-content: flex-end;
+    }
+
+    &-backdrop {
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(
+        0deg,
+        rgba(0, 0, 0, 0.8) 5%,
+        transparent 100%
+      );
+      display: flex;
+      overflow: hidden;
+      z-index: 1;
+    }
+
+    &-image {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      z-index: -1;
+    }
+  }
+
+  &__right-content {
+    display: flex;
+    padding: calc(globals.$spacing-unit * 2);
+    flex: 1;
+    gap: globals.$spacing-unit;
+    background: linear-gradient(90deg, transparent 20%, rgb(0 0 0 / 20%) 100%);
+  }
+
+  &__details {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    justify-content: center;
+    gap: calc(globals.$spacing-unit / 2);
+    font-size: 14px;
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: globals.$spacing-unit;
+  }
+
+  &__menu-button {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    border-radius: 50%;
+    border: none;
+    padding: 8px;
+    min-height: unset;
+  }
+}
--- a/src/renderer/src/pages/game-details/hero/hero-panel-playtime.scss
+++ b/src/renderer/src/pages/game-details/hero/hero-panel-playtime.scss
@@ -0,0 +1,15 @@
+@use "../../../scss/globals.scss";
+
+.hero-panel-playtime {
+  &__download-details {
+    gap: globals.$spacing-unit;
+    display: flex;
+    color: globals.$body-color;
+    align-items: center;
+  }
+
+  &__downloads-link {
+    color: globals.$body-color;
+    text-decoration: underline;
+  }
+}
--- a/src/renderer/src/pages/game-details/hero/hero-panel.css.ts
+++ b/src/renderer/src/pages/game-details/hero/hero-panel.css.ts
@@ -1,77 +0,0 @@
-import { style } from "@vanilla-extract/css";
-import { recipe } from "@vanilla-extract/recipes";
-
-import { SPACING_UNIT, vars } from "../../../theme.css";
-
-export const panel = recipe({
-  base: {
-    width: "100%",
-    height: "72px",
-    minHeight: "72px",
-    padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 3}px`,
-    backgroundColor: vars.color.darkBackground,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    transition: "all ease 0.2s",
-    borderBottom: `solid 1px ${vars.color.border}`,
-    position: "sticky",
-    overflow: "hidden",
-    top: "0",
-    zIndex: "2",
-  },
-  variants: {
-    stuck: {
-      true: {
-        boxShadow: "0px 0px 15px 0px rgba(0, 0, 0, 0.8)",
-      },
-    },
-  },
-});
-
-export const content = style({
-  display: "flex",
-  flexDirection: "column",
-  gap: `${SPACING_UNIT}px`,
-});
-
-export const actions = style({
-  display: "flex",
-  gap: `${SPACING_UNIT}px`,
-});
-
-export const downloadDetailsRow = style({
-  gap: `${SPACING_UNIT}px`,
-  display: "flex",
-  color: vars.color.body,
-  alignItems: "center",
-});
-
-export const downloadsLink = style({
-  color: vars.color.body,
-  textDecoration: "underline",
-});
-
-export const progressBar = recipe({
-  base: {
-    position: "absolute",
-    bottom: "0",
-    left: "0",
-    width: "100%",
-    height: "3px",
-    transition: "all ease 0.2s",
-    "::-webkit-progress-bar": {
-      backgroundColor: "transparent",
-    },
-    "::-webkit-progress-value": {
-      backgroundColor: vars.color.muted,
-    },
-  },
-  variants: {
-    disabled: {
-      true: {
-        opacity: vars.opacity.disabled,
-      },
-    },
-  },
-});
--- a/src/renderer/src/pages/game-details/hero/hero-panel.scss
+++ b/src/renderer/src/pages/game-details/hero/hero-panel.scss
@@ -0,0 +1,66 @@
+@use "../../../scss/globals.scss";
+
+.hero-panel {
+  width: 100%;
+  height: 72px;
+  min-height: 72px;
+  padding: calc(globals.$spacing-unit * 2) calc(globals.$spacing-unit * 3);
+  background-color: globals.$dark-background-color;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  transition: all ease 0.2s;
+  border-bottom: solid 1px globals.$border-color;
+  position: sticky;
+  overflow: hidden;
+  top: 0;
+  z-index: 2;
+
+  &--stuck {
+    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.8);
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: globals.$spacing-unit;
+  }
+
+  &__actions {
+    display: flex;
+    gap: globals.$spacing-unit;
+  }
+
+  &__download-details {
+    gap: globals.$spacing-unit;
+    display: flex;
+    color: globals.$body-color;
+    align-items: center;
+  }
+
+  &__downloads-link {
+    color: globals.$body-color;
+    text-decoration: underline;
+  }
+
+  &__progress-bar {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 3px;
+    transition: all ease 0.2s;
+
+    &::-webkit-progress-bar {
+      background-color: transparent;
+    }
+
+    &::-webkit-progress-value {
+      background-color: globals.$muted-color;
+    }
+
+    &--disabled {
+      opacity: globals.$disabled-opacity;
+    }
+  }
+}
--- a/src/renderer/src/pages/game-details/modals/download-settings-modal.tsx
+++ b/src/renderer/src/pages/game-details/modals/download-settings-modal.tsx
@@ -98,9 +98,7 @@ export function DownloadSettingsModal({
      ? Downloader.RealDebrid
      : filteredDownloaders[0];

-    setSelectedDownloader(
-      selectedDownloader === undefined ? null : selectedDownloader
-    );
+    setSelectedDownloader(selectedDownloader ?? null);
  }, [
    userPreferences?.downloadsPath,
    downloaders,
@@ -127,8 +125,8 @@ export function DownloadSettingsModal({
        .then(() => {
          onClose();
        })
-        .catch(() => {
-          showErrorToast(t("download_error"));
+        .catch((error) => {
+          showErrorToast(t("download_error"), error.message);
        })
        .finally(() => {
          setDownloadStarting(false);
--- a/src/renderer/src/pages/game-details/modals/game-options-modal.tsx
+++ b/src/renderer/src/pages/game-details/modals/game-options-modal.tsx
@@ -2,6 +2,7 @@ import { useContext, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Button, Modal, TextField } from "@renderer/components";
 import type { LibraryGame } from "@types";
+import * as styles from "./game-options-modal.css";
 import { gameDetailsContext } from "@renderer/context";
 import { DeleteGameModal } from "@renderer/pages/downloads/delete-game-modal";
 import { useDownload, useToast, useUserDetails } from "@renderer/hooks";
@@ -9,7 +10,6 @@ import { RemoveGameFromLibraryModal } from "./remove-from-library-modal";
 import { ResetAchievementsModal } from "./reset-achievements-modal";
 import { FileDirectoryIcon, FileIcon } from "@primer/octicons-react";
 import { debounce } from "lodash-es";
-import "./game-options-modal.scss";

 export interface GameOptionsModalProps {
  visible: boolean;
@@ -183,8 +183,6 @@ export function GameOptionsModal({
    }
  };

-  const shouldShowLaunchOptionsConfiguration = false;
-
  return (
    <>
      <DeleteGameModal
@@ -192,12 +190,14 @@ export function GameOptionsModal({
        onClose={() => setShowDeleteModal(false)}
        deleteGame={handleDeleteGame}
      />
+
      <RemoveGameFromLibraryModal
        visible={showRemoveGameModal}
        onClose={() => setShowRemoveGameModal(false)}
        removeGameFromLibrary={handleRemoveGameFromLibrary}
        game={game}
      />
+
      <ResetAchievementsModal
        visible={showResetAchievementsModal}
        onClose={() => setShowResetAchievementsModal(false)}
@@ -211,66 +211,59 @@ export function GameOptionsModal({
        onClose={onClose}
        large={true}
      >
-        <div className="game-options-modal__container">
-          <div className="game-options-modal__section">
-            <div className="game-options-modal__header">
-              <h2>{t("executable_section_title")}</h2>
-              <h4 className="game-options-modal__header-description">
-                {t("executable_section_description")}
-              </h4>
-            </div>
-
-            <div className="game-options-modal__executable-field">
-              <TextField
-                value={game.executablePath || ""}
-                readOnly
-                theme="dark"
-                disabled
-                placeholder={t("no_executable_selected")}
-                rightContent={
-                  <>
-                    <Button
-                      type="button"
-                      theme="outline"
-                      onClick={handleChangeExecutableLocation}
-                    >
-                      <FileIcon />
-                      {t("select_executable")}
-                    </Button>
-                    {game.executablePath && (
-                      <Button
-                        onClick={handleClearExecutablePath}
-                        theme="outline"
-                      >
-                        {t("clear")}
-                      </Button>
-                    )}
-                  </>
-                }
-              />
-
-              {game.executablePath && (
-                <div className="game-options-modal__executable-field-buttons">
-                  <Button
-                    type="button"
-                    theme="outline"
-                    onClick={handleOpenGameExecutablePath}
-                  >
-                    {t("open_folder")}
-                  </Button>
-                  <Button onClick={handleCreateShortcut} theme="outline">
-                    {t("create_shortcut")}
-                  </Button>
-                </div>
-              )}
-            </div>
+        <div className={styles.optionsContainer}>
+          <div className={styles.gameOptionHeader}>
+            <h2>{t("executable_section_title")}</h2>
+            <h4 className={styles.gameOptionHeaderDescription}>
+              {t("executable_section_description")}
+            </h4>
          </div>

+          <TextField
+            value={game.executablePath || ""}
+            readOnly
+            theme="dark"
+            disabled
+            placeholder={t("no_executable_selected")}
+            rightContent={
+              <>
+                <Button
+                  type="button"
+                  theme="outline"
+                  onClick={handleChangeExecutableLocation}
+                >
+                  <FileIcon />
+                  {t("select_executable")}
+                </Button>
+                {game.executablePath && (
+                  <Button onClick={handleClearExecutablePath} theme="outline">
+                    {t("clear")}
+                  </Button>
+                )}
+              </>
+            }
+          />
+
+          {game.executablePath && (
+            <div className={styles.gameOptionRow}>
+              <Button
+                type="button"
+                theme="outline"
+                onClick={handleOpenGameExecutablePath}
+              >
+                {t("open_folder")}
+              </Button>
+              <Button onClick={handleCreateShortcut} theme="outline">
+                {t("create_shortcut")}
+              </Button>
+            </div>
+          )}
+
          {shouldShowWinePrefixConfiguration && (
-            <div className="game-options-modal__wine-prefix">
-              <div className="game-options-modal__header">
+            <div className={styles.optionsContainer}>
+              <div className={styles.gameOptionHeader}>
                <h2>{t("wine_prefix")}</h2>
-                <h4 className="game-options-modal__header-description">
+                <h4 className={styles.gameOptionHeaderDescription}>
                  {t("wine_prefix_description")}
                </h4>
              </div>
@@ -304,100 +297,95 @@ export function GameOptionsModal({
            </div>
          )}

-          {shouldShowLaunchOptionsConfiguration && (
-            <div className="game-options-modal__launch-options">
-              <div className="game-options-modal__header">
-                <h2>{t("launch_options")}</h2>
-                <h4 className="game-options-modal__header-description">
-                  {t("launch_options_description")}
-                </h4>
-              </div>
-              <TextField
-                value={launchOptions}
-                theme="dark"
-                placeholder={t("launch_options_placeholder")}
-                onChange={handleChangeLaunchOptions}
-                rightContent={
-                  game.launchOptions && (
-                    <Button onClick={handleClearLaunchOptions} theme="outline">
-                      {t("clear")}
-                    </Button>
-                  )
-                }
-              />
-            </div>
-          )}
-
-          <div className="game-options-modal__downloads">
-            <div className="game-options-modal__header">
-              <h2>{t("downloads_secion_title")}</h2>
-              <h4 className="game-options-modal__header-description">
-                {t("downloads_section_description")}
+          <div className={styles.optionsContainer}>
+            <div className={styles.gameOptionHeader}>
+              <h2>{t("launch_options")}</h2>
+              <h4 className={styles.gameOptionHeaderDescription}>
+                {t("launch_options_description")}
              </h4>
            </div>

-            <div className="game-options-modal__row">
-              <Button
-                onClick={() => setShowRepacksModal(true)}
-                theme="outline"
-                disabled={deleting || isGameDownloading || !repacks.length}
-              >
-                {t("open_download_options")}
-              </Button>
-              {game.download?.downloadPath && (
-                <Button
-                  onClick={handleOpenDownloadFolder}
-                  theme="outline"
-                  disabled={deleting}
-                >
-                  {t("open_download_location")}
-                </Button>
-              )}
-            </div>
+            <TextField
+              value={launchOptions}
+              theme="dark"
+              placeholder={t("launch_options_placeholder")}
+              onChange={handleChangeLaunchOptions}
+              rightContent={
+                game.launchOptions && (
+                  <Button onClick={handleClearLaunchOptions} theme="outline">
+                    {t("clear")}
+                  </Button>
+                )
+              }
+            />
          </div>

-          <div className="game-options-modal__danger-zone">
-            <div className="game-options-modal__header">
-              <h2>{t("danger_zone_section_title")}</h2>
-              <h4 className="game-options-modal__danger-zone-description">
-                {t("danger_zone_section_description")}
-              </h4>
-            </div>
+          <div className={styles.gameOptionHeader}>
+            <h2>{t("downloads_secion_title")}</h2>
+            <h4 className={styles.gameOptionHeaderDescription}>
+              {t("downloads_section_description")}
+            </h4>
+          </div>

-            <div className="game-options-modal__danger-zone-buttons">
+          <div className={styles.gameOptionRow}>
+            <Button
+              onClick={() => setShowRepacksModal(true)}
+              theme="outline"
+              disabled={deleting || isGameDownloading || !repacks.length}
+            >
+              {t("open_download_options")}
+            </Button>
+            {game.download?.downloadPath && (
              <Button
-                onClick={() => setShowRemoveGameModal(true)}
-                theme="danger"
+                onClick={handleOpenDownloadFolder}
+                theme="outline"
                disabled={deleting}
              >
-                {t("remove_from_library")}
+                {t("open_download_location")}
              </Button>
+            )}
+          </div>

-              <Button
-                onClick={() => setShowResetAchievementsModal(true)}
-                theme="danger"
-                disabled={
-                  deleting ||
-                  isDeletingAchievements ||
-                  !hasAchievements ||
-                  !userDetails
-                }
-              >
-                {t("reset_achievements")}
-              </Button>
+          <div className={styles.gameOptionHeader}>
+            <h2>{t("danger_zone_section_title")}</h2>
+            <h4 className={styles.gameOptionHeaderDescription}>
+              {t("danger_zone_section_description")}
+            </h4>
+          </div>

-              <Button
-                onClick={() => {
-                  setShowDeleteModal(true);
-                }}
-                theme="danger"
-                disabled={
-                  isGameDownloading || deleting || !game.download?.downloadPath
-                }
-              >
-                {t("remove_files")}
-              </Button>
-            </div>
+          <div className={styles.gameOptionRow}>
+            <Button
+              onClick={() => setShowRemoveGameModal(true)}
+              theme="danger"
+              disabled={deleting}
+            >
+              {t("remove_from_library")}
+            </Button>
+
+            <Button
+              onClick={() => setShowResetAchievementsModal(true)}
+              theme="danger"
+              disabled={
+                deleting ||
+                isDeletingAchievements ||
+                !hasAchievements ||
+                !userDetails
+              }
+            >
+              {t("reset_achievements")}
+            </Button>
+
+            <Button
+              onClick={() => {
+                setShowDeleteModal(true);
+              }}
+              theme="danger"
+              disabled={
+                isGameDownloading || deleting || !game.download?.downloadPath
+              }
+            >
+              {t("remove_files")}
+            </Button>
          </div>
        </div>
      </Modal>
--- a/src/renderer/src/pages/game-details/sidebar/sidebar.scss
+++ b/src/renderer/src/pages/game-details/sidebar/sidebar.scss
@@ -0,0 +1,174 @@
+@use "../../../scss/globals.scss";
+
+.content-sidebar {
+  border-left: solid 1px globals.$border-color;
+  background-color: globals.$dark-background-color;
+  width: 100%;
+  height: 100%;
+
+  @media (min-width: 1024px) {
+    max-width: 300px;
+    width: 100%;
+  }
+
+  @media (min-width: 1280px) {
+    width: 100%;
+    max-width: 400px;
+  }
+}
+
+.requirement {
+  &__button-container {
+    width: 100%;
+    display: flex;
+  }
+
+  &__button {
+    border: solid 1px globals.$border-color;
+    border-left: none;
+    border-right: none;
+    border-radius: 0;
+    width: 100%;
+  }
+
+  &__details {
+    padding: calc(globals.$spacing-unit * 2);
+    line-height: 22px;
+    font-size: globals.$body-font-size;
+
+    a {
+      display: flex;
+      color: globals.$body-color;
+    }
+  }
+
+  &__details-skeleton {
+    display: flex;
+    flex-direction: column;
+    gap: globals.$spacing-unit;
+    padding: calc(globals.$spacing-unit * 2);
+    font-size: globals.$body-font-size;
+  }
+}
+
+.how-long-to-beat {
+  &__categories-list {
+    margin: 0;
+    padding: calc(globals.$spacing-unit * 2);
+    display: flex;
+    flex-direction: column;
+    gap: calc(globals.$spacing-unit * 2);
+  }
+
+  &__category {
+    display: flex;
+    flex-direction: column;
+    gap: calc(globals.$spacing-unit / 2);
+    background: linear-gradient(
+      90deg,
+      transparent 20%,
+      rgb(255 255 255 / 2%) 100%
+    );
+    border-radius: 4px;
+    padding: globals.$spacing-unit calc(globals.$spacing-unit * 2);
+    border: solid 1px globals.$border-color;
+  }
+
+  &__category-label {
+    color: globals.$muted-color;
+  }
+
+  &__category-skeleton {
+    border: solid 1px globals.$border-color;
+    border-radius: 4px;
+    height: 76px;
+  }
+}
+
+.stats {
+  &__section {
+    display: flex;
+    gap: calc(globals.$spacing-unit * 2);
+    padding: calc(globals.$spacing-unit * 2);
+    justify-content: space-between;
+    transition: max-height ease 0.5s;
+    overflow: hidden;
+
+    @media (min-width: 1024px) {
+      flex-direction: column;
+    }
+
+    @media (min-width: 1280px) {
+      flex-direction: row;
+    }
+  }
+
+  &__category-title {
+    font-size: globals.$small-font-size;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    gap: globals.$spacing-unit;
+  }
+
+  &__category {
+    display: flex;
+    flex-direction: row;
+    gap: calc(globals.$spacing-unit / 2);
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+
+.list {
+  list-style: none;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: calc(globals.$spacing-unit * 2);
+  padding: calc(globals.$spacing-unit * 2);
+
+  &__item {
+    display: flex;
+    cursor: pointer;
+    transition: all ease 0.1s;
+    color: globals.$muted-color;
+    width: 100%;
+    overflow: hidden;
+    border-radius: 4px;
+    padding: globals.$spacing-unit;
+    gap: calc(globals.$spacing-unit * 2);
+    align-items: center;
+    text-align: left;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.15);
+      text-decoration: none;
+    }
+  }
+
+  &__item-image {
+    width: 54px;
+    height: 54px;
+    border-radius: 4px;
+    object-fit: cover;
+
+    &--locked {
+      filter: grayscale(100%);
+    }
+  }
+}
+
+.subscription-required-button {
+  text-decoration: none;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  gap: calc(globals.$spacing-unit / 2);
+  color: globals.$warning-color;
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
--- a/src/renderer/src/pages/settings/settings-account.tsx
+++ b/src/renderer/src/pages/settings/settings-account.tsx
@@ -65,7 +65,7 @@ export function SettingsAccount() {
    return () => {
      unsubscribe();
    };
-  }, [fetchUserDetails, updateUserDetails]);
+  }, [fetchUserDetails, updateUserDetails, showSuccessToast]);

  const visibilityOptions = [
    { value: "PUBLIC", label: t("public") },
--- a/src/renderer/src/scss/globals.scss
+++ b/src/renderer/src/scss/globals.scss
@@ -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;
--- a/src/renderer/src/theme.css.ts
+++ b/src/renderer/src/theme.css.ts
@@ -24,7 +24,7 @@ export const vars = createGlobalTheme(":root", {
  zIndex: {
    toast: "5",
    bottomPanel: "3",
-    titleBar: "4",
+    titleBar: "1900000001",
    backdrop: "4",
  },
 });