refactor: migrate download page styles from VE to SCSS + BEM

src/renderer/src/pages/downloads/delete-game-modal.scss

@@ -0,0 +1,11 @@
+@use "../../scss/globals.scss";
+
+.delete-game-modal {
+  &__actions {
+    display: flex;
+    width: 100%;
+    justify-content: flex-end;
+    align-items: center;
+    gap: globals.$spacing-unit;
+  }
+}

src/renderer/src/pages/downloads/delete-game-modal.tsx

@@ -1,8 +1,6 @@
 import { useTranslation } from "react-i18next";
-
 import { Button, Modal } from "@renderer/components";
-
+import "./delete-game-modal.scss";
-import * as styles from "./delete-game-modal.css";
 
 interface DeleteGameModalProps {
   visible: boolean;
@@ -29,7 +27,7 @@ export function DeleteGameModal({
       description={t("delete_modal_description")}
       onClose={onClose}
     >
-      <div className={styles.deleteActionsButtonsCtn}>
+      <div className="delete-game-modal__actions">
         <Button onClick={handleDeleteGame} theme="outline">
           {t("delete")}
         </Button>

src/renderer/src/pages/downloads/download-group.scss

@@ -0,0 +1,140 @@
+@use "../../scss/globals.scss";
+
+.download-group {
+  display: flex;
+  flex-direction: column;
+  gap: calc(globals.$spacing-unit * 2);
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: calc(globals.$spacing-unit * 2);
+
+    &-divider {
+      flex: 1;
+      background-color: globals.$color-border;
+      height: 1px;
+    }
+
+    &-count {
+      font-weight: 400;
+    }
+  }
+
+  &__title-wrapper {
+    display: flex;
+    align-items: center;
+    margin-bottom: globals.$spacing-unit;
+    gap: globals.$spacing-unit;
+  }
+
+  &__title {
+    font-weight: bold;
+    cursor: pointer;
+    color: globals.$color-body;
+    text-align: left;
+    font-size: 16px;
+    display: block;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  &__downloads {
+    width: 100%;
+    gap: calc(globals.$spacing-unit * 2);
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+    margin-top: globals.$spacing-unit;
+  }
+
+  &__item {
+    width: 100%;
+    background-color: globals.$color-background;
+    display: flex;
+    border-radius: 8px;
+    border: solid 1px globals.$color-border;
+    overflow: hidden;
+    box-shadow: 0px 0px 5px 0px #000000;
+    transition: all ease 0.2s;
+    height: 140px;
+    min-height: 140px;
+    max-height: 140px;
+    position: relative;
+  }
+
+  &__cover {
+    width: 280px;
+    min-width: 280px;
+    height: auto;
+    border-right: solid 1px globals.$color-border;
+    position: relative;
+    z-index: 1;
+
+    &-content {
+      width: 100%;
+      height: 100%;
+      padding: globals.$spacing-unit;
+      display: flex;
+      align-items: flex-end;
+      justify-content: flex-end;
+    }
+
+    &-backdrop {
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(
+        0deg,
+        rgba(0, 0, 0, 0.8) 5%,
+        transparent 100%
+      );
+      display: flex;
+      overflow: hidden;
+      z-index: 1;
+    }
+
+    &-image {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      z-index: -1;
+    }
+  }
+
+  &__right-content {
+    display: flex;
+    padding: calc(globals.$spacing-unit * 2);
+    flex: 1;
+    gap: globals.$spacing-unit;
+    background: linear-gradient(90deg, transparent 20%, rgb(0 0 0 / 20%) 100%);
+  }
+
+  &__details {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    justify-content: center;
+    gap: calc(globals.$spacing-unit / 2);
+    font-size: 14px;
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: globals.$spacing-unit;
+  }
+
+  &__menu-button {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    border-radius: 50%;
+    border: none;
+    padding: 8px;
+    min-height: unset;
+  }
+}

src/renderer/src/pages/downloads/download-group.tsx

@@ -12,9 +12,8 @@ import { Downloader, formatBytes, steamUrlBuilder } from "@shared";
 import { DOWNLOADER_NAME } from "@renderer/constants";
 import { useAppSelector, useDownload } from "@renderer/hooks";
 
-import * as styles from "./download-group.css";
+import "./download-group.scss";
 import { useTranslation } from "react-i18next";
-import { SPACING_UNIT, vars } from "@renderer/theme.css";
 import { useMemo } from "react";
 import {
   DropdownMenu,
@@ -238,54 +237,36 @@ export function DownloadGroup({
   if (!library.length) return null;
 
   return (
-    <div className={styles.downloadGroup}>
+    <div className="download-group">
-      <div
+      <div className="download-group__header">
-        style={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          gap: `${SPACING_UNIT * 2}px`,
-        }}
-      >
         <h2>{title}</h2>
-
+        <div className="download-group__header-divider" />
-        <div
+        <h3 className="download-group__header-count">{library.length}</h3>
-          style={{
-            flex: 1,
-            backgroundColor: vars.color.border,
-            height: "1px",
-          }}
-        />
-        <h3 style={{ fontWeight: "400" }}>{library.length}</h3>
       </div>
 
-      <ul className={styles.downloads}>
+      <ul className="download-group__downloads">
         {library.map((game) => {
           return (
-            <li
+            <li key={game.id} className="download-group__item">
-              key={game.id}
+              <div className="download-group__cover">
-              className={styles.download}
+                <div className="download-group__cover-backdrop">
-              style={{ position: "relative" }}
-            >
-              <div className={styles.downloadCover}>
-                <div className={styles.downloadCoverBackdrop}>
                   <img
                     src={steamUrlBuilder.library(game.objectID)}
-                    className={styles.downloadCoverImage}
+                    className="download-group__cover-image"
                     alt={game.title}
                   />
 
-                  <div className={styles.downloadCoverContent}>
+                  <div className="download-group__cover-content">
                     <Badge>{DOWNLOADER_NAME[game.downloader]}</Badge>
                   </div>
                 </div>
               </div>
-              <div className={styles.downloadRightContent}>
+              <div className="download-group__right-content">
-                <div className={styles.downloadDetails}>
+                <div className="download-group__details">
-                  <div className={styles.downloadTitleWrapper}>
+                  <div className="download-group__title-wrapper">
                     <button
                       type="button"
-                      className={styles.downloadTitle}
+                      className="download-group__title"
                       onClick={() =>
                         navigate(
                           buildGameDetailsPath({
@@ -309,15 +290,7 @@ export function DownloadGroup({
                     sideOffset={-75}
                   >
                     <Button
-                      style={{
+                      className="download-group__menu-button"
-                        position: "absolute",
-                        top: "12px",
-                        right: "12px",
-                        borderRadius: "50%",
-                        border: "none",
-                        padding: "8px",
-                        minHeight: "unset",
-                      }}
                       theme="outline"
                     >
                       <ThreeBarsIcon />

src/renderer/src/pages/downloads/downloads.scss

@@ -0,0 +1,37 @@
+@use "../../scss/globals.scss";
+
+.downloads {
+  &__container {
+    display: flex;
+    padding: calc(globals.$spacing-unit * 3);
+    flex-direction: column;
+    width: 100%;
+  }
+
+  &__groups {
+    display: flex;
+    gap: calc(globals.$spacing-unit * 3);
+    flex-direction: column;
+  }
+
+  &__arrow-icon {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.06);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: calc(globals.$spacing-unit * 2);
+  }
+
+  &__no-downloads {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: globals.$spacing-unit;
+  }
+}

src/renderer/src/pages/downloads/downloads.tsx

@@ -4,7 +4,7 @@ import { useDownload, useLibrary } from "@renderer/hooks";
 
 import { useEffect, useMemo, useRef, useState } from "react";
 import { BinaryNotFoundModal } from "../shared-modals/binary-not-found-modal";
-import * as styles from "./downloads.css";
+import "./downloads.scss";
 import { DeleteGameModal } from "./delete-game-modal";
 import { DownloadGroup } from "./download-group";
 import type { LibraryGame, SeedingStatus } from "@types";
@@ -121,8 +121,8 @@ export default function Downloads() {
       />
 
       {hasItemsInLibrary ? (
-        <section className={styles.downloadsContainer}>
+        <section className="downloads__container">
-          <div className={styles.downloadGroups}>
+          <div className="downloads__groups">
             {downloadGroups.map((group) => (
               <DownloadGroup
                 key={group.title}
@@ -136,8 +136,8 @@ export default function Downloads() {
           </div>
         </section>
       ) : (
-        <div className={styles.noDownloads}>
+        <div className="downloads__no-downloads">
-          <div className={styles.arrowIcon}>
+          <div className="downloads__arrow-icon">
             <ArrowDownIcon size={24} />
           </div>
           <h2>{t("no_downloads_title")}</h2>