migration to scss

src/renderer/src/app.scss

@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@import "./scss/variables";
 
 * {
   box-sizing: border-box;

src/renderer/src/components/modal/modal.scss

@@ -14,12 +14,12 @@
   display: flex;
   flex-direction: column;
 
-  &--closing {
+  &__closing {
     animation-name: scale-fade-out;
     opacity: 0;
   }
 
-  &--large {
+  &__large {
     width: 800px;
     max-width: 800px;
   }

src/renderer/src/components/modal/modal.tsx

@@ -110,8 +110,8 @@ export function Modal({
     <Backdrop isClosing={isClosing}>
       <div
         className={cn("modal", {
-          "modal--closing": isClosing,
+          "modal__closing": isClosing,
-          "modal--large": large,
+          "modal__large": large,
         })}
         role="dialog"
         aria-labelledby={title}

src/renderer/src/components/select-field/select-field.scss

@@ -13,15 +13,15 @@
     border-color: rgba(255, 255, 255, 0.5);
   }
 
-  &--focused {
+  &__focused {
     border-color: #dadbe1;
   }
 
-  &--primary {
+  &__primary {
     background-color: $dark-background-color;
   }
 
-  &--dark {
+  &__dark {
     background-color: $background-color;
   }
 

src/renderer/src/components/select-field/select-field.tsx

@@ -32,7 +32,7 @@ export function SelectField({
 
       <div
         className={cn("select-field", `select-field--${theme}`, {
-          "select-field--focused": isFocused,
+          "select-field__focused": isFocused,
         })}
       >
         <select

src/renderer/src/components/sidebar/sidebar.scss

@@ -11,12 +11,12 @@
   overflow: hidden;
   padding-top: globals.$spacing-unit;
 
-  &--resizing {
+  &__resizing {
     opacity: globals.$active-opacity;
     pointer-events: none;
   }
 
-  &--darwin {
+  &__darwin {
     padding-top: calc(globals.$spacing-unit * 6);
   }
 

src/renderer/src/components/sidebar/sidebar.tsx

@@ -171,8 +171,8 @@ export function Sidebar() {
     <aside
       ref={sidebarRef}
       className={cn("sidebar", {
-        "sidebar--resizing": isResizing,
+        "sidebar__resizing": isResizing,
-        "sidebar--darwin": window.electron.platform === "darwin",
+        "sidebar__darwin": window.electron.platform === "darwin",
       })}
       style={{
         width: sidebarWidth,

src/renderer/src/components/text-field/text-field.scss

@@ -17,19 +17,19 @@
   height: 40px;
   min-height: 40px;
 
-  &--primary {
+  &__primary {
     background-color: $dark-background-color;
   }
 
-  &--dark {
+  &__dark {
     background-color: $background-color;
   }
 
-  &--has-error {
+  &__has-error {
     border-color: $danger-color;
   }
 
-  &--focused {
+  &__focused {
     border-color: $search-border-color-focused;
   }
 
@@ -54,7 +54,7 @@
     cursor: text;
   }
 
-  &--read-only {
+  &__read-only {
     text-overflow: inherit;
   }
 }

src/renderer/src/components/text-field/text-field.tsx

@@ -88,8 +88,8 @@ export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
               "text-field-container__text-field",
               `text-field-container__text-field--${theme}`,
               {
-                "text-field-container__text-field--has-error": hasError,
+                "text-field-container__text-field__has-error": hasError,
-                "text-field-container__text-field--focused": isFocused,
+                "text-field-container__text-field__focused": isFocused,
               }
             )}
             {...textFieldProps}
@@ -98,7 +98,7 @@ export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
               ref={ref}
               id={id}
               className={cn("text-field-container__text-field-input", {
-                "text-field-container__text-field-input--read-only":
+                "text-field-container__text-field-input__read-only":
                   props.readOnly,
               })}
               {...props}

src/renderer/src/components/toast/toast.scss

@@ -35,12 +35,12 @@
   z-index: $toast-z-index;
   max-width: 500px;
 
-  &--closing {
+  &__closing {
     animation-name: slideOut;
     transform: translateY(96px);
   }
 
-  &--opening {
+  &__opening {
     animation-name: slideIn;
     transform: translateY(0);
   }

src/renderer/src/components/toast/toast.tsx

@@ -7,7 +7,6 @@ import {
 } from "@primer/octicons-react";
 
 import "./toast.scss";
-import { SPACING_UNIT } from "@renderer/theme.css";
 import cn from "classnames";
 
 export interface ToastProps {
@@ -80,7 +79,7 @@ export function Toast({ visible, message, type, onClose }: ToastProps) {
   return (
     <div
       className={cn("toast", {
-        "toast--closing": isClosing,
+        "toast__closing": isClosing,
       })}
     >
       <div className="toast__content">

src/renderer/src/pages/achievements/achievement-list.tsx

@@ -1,11 +1,11 @@
 import { useDate } from "@renderer/hooks";
 import type { UserAchievement } from "@types";
 import { useTranslation } from "react-i18next";
-import * as styles from "./achievements.css";
 import { EyeClosedIcon } from "@primer/octicons-react";
 import HydraIcon from "@renderer/assets/icons/hydra.svg?react";
 import { useSubscription } from "@renderer/hooks/use-subscription";
-import { vars } from "@renderer/theme.css";
+import "./achievements.scss";
+import "../../scss/_variables.scss"
 
 interface AchievementListProps {
   achievements: UserAchievement[];
@@ -17,16 +17,16 @@ export function AchievementList({ achievements }: AchievementListProps) {
   const { formatDateTime } = useDate();
 
   return (
-    <ul className={styles.list}>
+    <ul className="achievements__list">
       {achievements.map((achievement) => (
         <li
           key={achievement.name}
-          className={styles.listItem}
+          className="achievements__list-item"
           style={{ display: "flex" }}
         >
           <img
-            className={styles.listItemImage({
+            className={classNames("achievements__list-item-image", {
-              unlocked: achievement.unlocked,
+              "achievements__list-item-image--unlocked": achievement.unlocked,
             })}
             src={achievement.icon}
             alt={achievement.displayName}
@@ -66,7 +66,7 @@ export function AchievementList({ achievements }: AchievementListProps) {
                   alignItems: "center",
                   gap: "4px",
                   cursor: "pointer",
-                  color: vars.color.warning,
+                  color: "var(--warning-color)",
                 }}
                 title={t("achievement_earn_points", {
                   points: "???",

src/renderer/src/pages/achievements/achievement-panel.scss

@@ -49,7 +49,7 @@
       background-color: $color-muted;
     }
 
-    &--disabled {
+    &__disabled {
       opacity: $opacity-disabled;
     }
   }

src/renderer/src/pages/achievements/achievement-panel.tsx

@@ -3,8 +3,9 @@ import HydraIcon from "@renderer/assets/icons/hydra.svg?react";
 import { UserAchievement } from "@types";
 import { useSubscription } from "@renderer/hooks/use-subscription";
 import { useUserDetails } from "@renderer/hooks";
-import { vars } from "@renderer/theme.css";
+
-import * as styles from "./achievement-panel.css";
+
+import "./achievement-panel.sccs";
 
 export interface AchievementPanelProps {
   achievements: UserAchievement[];
@@ -28,8 +29,8 @@ export function AchievementPanel({ achievements }: AchievementPanelProps) {
 
   if (!hasActiveSubscription) {
     return (
-      <div className={styles.panel}>
+      <div className="achievement-panel">
-        <div className={styles.content}>
+        <div className="achievement-panel__content">
           {t("earned_points")} <HydraIcon width={20} height={20} />
           ??? / ???
         </div>
@@ -38,7 +39,7 @@ export function AchievementPanel({ achievements }: AchievementPanelProps) {
           onClick={() => showHydraCloudModal("achievements-points")}
           className={styles.link}
         >
-          <small style={{ color: vars.color.warning }}>
+          <small style={{ color: "#ffc107" }}>
             {t("how_to_earn_achievements_points")}
           </small>
         </button>
@@ -47,8 +48,8 @@ export function AchievementPanel({ achievements }: AchievementPanelProps) {
   }
 
   return (
-    <div className={styles.panel}>
+    <div className="achievement-panel">
-      <div className={styles.content}>
+      <div className="achievement-panel__content">
         {t("earned_points")} <HydraIcon width={20} height={20} />
         {achievementsPointsEarnedSum} / {achievementsPointsTotal}
       </div>

src/renderer/src/pages/achievements/achievements-content.tsx

@@ -139,7 +139,7 @@ function AchievementSummary({ user, isComparison }: AchievementSummaryProps) {
             display: "flex",
             justifyContent: "space-between",
             marginBottom: 8,
-            color: vars.color.muted,
+            color: "#c0c1c7",
           }}
         >
           <div
@@ -253,7 +253,7 @@ export function AchievementsContent({
           style={{
             display: "flex",
             flexDirection: "column",
-            background: `linear-gradient(0deg, ${vars.color.darkBackground} 0%, ${gameColor} 100%)`,
+            background: `linear-gradient(0deg, #1c1c1c 0%, ${gameColor} 100%)`,
           }}
         >
           <div ref={heroRef} className={styles.hero}>

src/renderer/src/pages/achievements/achievements-skeleton.tsx

@@ -1,13 +1,13 @@
 import Skeleton from "react-loading-skeleton";
-import * as styles from "./achievements.css";
+import "./achievements.scss";
 
 export function AchievementsSkeleton() {
   return (
-    <div className={styles.container}>
+    <div className="achievements__container">
-      <div className={styles.hero}>
+      <div className="achievements__hero">
-        <Skeleton className={styles.heroImageSkeleton} />
+        <Skeleton className="achievements__hero-image-skeleton" />
       </div>
-      <div className={styles.heroPanelSkeleton}></div>
+      <div className="achievements__hero-panel-skeleton"></div>
     </div>
   );
 }

src/renderer/src/pages/achievements/achievements.tsx

@@ -3,7 +3,8 @@ import { useAppDispatch, useUserDetails } from "@renderer/hooks";
 import type { ComparedAchievements, GameShop } from "@types";
 import { useEffect, useMemo, useState } from "react";
 import { useSearchParams } from "react-router-dom";
-import { vars } from "@renderer/theme.css";
+
+import "./achievements.scss";
 import {
   GameDetailsContextConsumer,
   GameDetailsContextProvider,
@@ -76,7 +77,7 @@ export default function Achievements() {
 
           return (
             <SkeletonTheme
-              baseColor={vars.color.background}
+              baseColor="#1c1c1c"
               highlightColor="#444"
             >
               {showSkeleton ? (

src/renderer/src/pages/achievements/compared-achievement-list.tsx

@@ -1,13 +1,13 @@
 import type { ComparedAchievements } from "@types";
-import * as styles from "./achievements.css";
 import {
   CheckCircleIcon,
   EyeClosedIcon,
   LockIcon,
 } from "@primer/octicons-react";
 import { useDate } from "@renderer/hooks";
-import { SPACING_UNIT } from "@renderer/theme.css";
 import { useTranslation } from "react-i18next";
+import "./achievements.scss";
+import "../../scss/_variables.scss";
 
 export interface ComparedAchievementListProps {
   achievements: ComparedAchievements;
@@ -20,11 +20,11 @@ export function ComparedAchievementList({
   const { formatDateTime } = useDate();
 
   return (
-    <ul className={styles.list}>
+    <ul className="achievements__list">
       {achievements.achievements.map((achievement, index) => (
         <li
           key={index}
-          className={styles.listItem}
+          className="achievements__list-item"
           style={{
             display: "grid",
             gridTemplateColumns: achievement.ownerStat
@@ -37,12 +37,14 @@ export function ComparedAchievementList({
               display: "flex",
               flexDirection: "row",
               alignItems: "center",
-              gap: `${SPACING_UNIT}px`,
+              gap: `var(--spacing-unit)`,
             }}
           >
             <img
-              className={styles.listItemImage({
+              className={classNames("achievements__list-item-image", {
-                unlocked: true,
+                "achievements__list-item-image--unlocked":
+                  achievement.ownerStat?.unlocked ||
+                  achievement.targetStat.unlocked,
               })}
               src={achievement.icon}
               alt={achievement.displayName}
@@ -71,7 +73,7 @@ export function ComparedAchievementList({
                   whiteSpace: "nowrap",
                   display: "flex",
                   flexDirection: "row",
-                  gap: `${SPACING_UNIT}px`,
+                  gap: `var(--spacing-unit)`,
                   justifyContent: "center",
                 }}
                 title={formatDateTime(achievement.ownerStat.unlockTime!)}
@@ -82,7 +84,7 @@ export function ComparedAchievementList({
               <div
                 style={{
                   display: "flex",
-                  padding: `${SPACING_UNIT}px`,
+                  padding: `var(--spacing-unit)`,
                   justifyContent: "center",
                 }}
               >
@@ -97,7 +99,7 @@ export function ComparedAchievementList({
                 whiteSpace: "nowrap",
                 display: "flex",
                 flexDirection: "row",
-                gap: `${SPACING_UNIT}px`,
+                gap: `var(--spacing-unit)`,
                 justifyContent: "center",
               }}
               title={formatDateTime(achievement.targetStat.unlockTime!)}
@@ -108,7 +110,7 @@ export function ComparedAchievementList({
             <div
               style={{
                 display: "flex",
-                padding: `${SPACING_UNIT}px`,
+                padding: `var(--spacing-unit)`,
                 justifyContent: "center",
               }}
             >

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

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

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

@@ -12,7 +12,9 @@ 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";
@@ -238,7 +240,7 @@ export function DownloadGroup({
   if (!library.length) return null;
 
   return (
-    <div className={styles.downloadGroup}>
+    <div className="download-group">
       <div
         style={{
           display: "flex",
@@ -259,33 +261,33 @@ export function DownloadGroup({
         <h3 style={{ fontWeight: "400" }}>{library.length}</h3>
       </div>
 
-      <ul className={styles.downloads}>
+      <ul className="download-group__downloads">
         {library.map((game) => {
           return (
             <li
               key={game.id}
-              className={styles.download}
+              className="download-group__download"
               style={{ position: "relative" }}
             >
-              <div className={styles.downloadCover}>
+              <div className="download-group__cover">
-                <div className={styles.downloadCoverBackdrop}>
+                <div className="download-group__cover-backdrop">
                   <img
                     src={steamUrlBuilder.library(game.objectID)}
                     className={styles.downloadCoverImage}
                     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({

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

@@ -4,13 +4,15 @@ 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 { DeleteGameModal } from "./delete-game-modal";
 import { DownloadGroup } from "./download-group";
 import type { LibraryGame, SeedingStatus } from "@types";
 import { orderBy } from "lodash-es";
 import { ArrowDownIcon } from "@primer/octicons-react";
 
+import "./downloads.scss";
+
 export default function Downloads() {
   const { library, updateLibrary } = useLibrary();
 
@@ -121,8 +123,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 +138,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>

src/renderer/src/pages/editor/editor.scss

@@ -14,18 +14,5 @@
 .editor-header-title {
   font-size: 7px;
   font-weight: 500;
-  color: globals.$body-color;
+  color: $body-color;
-  display: flex;
-  align-items: center;
-  gap: globals.$spacing-unit;
-  height: 100%;
-}
-
-.editor-header-status {
-  width: globals.$spacing-unit;
-  height: globals.$spacing-unit;
-  background-color: globals.$body-color;
-  border-radius: 50%;
-  display: inline-flex;
-  align-self: center;
 }

src/renderer/src/pages/editor/editor.tsx

@@ -1,44 +1,18 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { SkeletonTheme } from "react-loading-skeleton";
-import "../../scss/_variables.scss";
+import { vars } from "@renderer/theme.css";
 import "./editor.scss";
-import { Editor as Monaco } from "@monaco-editor/react";
 
 export default function Editor() {
-  const [code, setCode] = useState("");
-  const [currentCode, setCurrentCode] = useState("");
-  const [updated, setUpdated] = useState(true);
-
   useEffect(() => {
     console.log("spectre");
   }, []);
 
-  useEffect(() => {
-    setUpdated(currentCode === code);
-  }, [code, currentCode]);
-
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.ctrlKey && e.key === "s") {
-        e.preventDefault();
-        setCode(currentCode);
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [currentCode]);
-
-  const handleEditorChange = (value: string | undefined) => {
-    setCurrentCode(value || "");
-  };
-
   return (
-    <SkeletonTheme baseColor="var(--background-color)" highlightColor="#444">
+    <SkeletonTheme baseColor={vars.color.background} highlightColor="#444">
       <div className="editor-header">
         <div className="editor-header-title">
           <h1>CSS Editor</h1>
-          {!updated && <div className="editor-header-status" />}
         </div>
       </div>
 
@@ -53,16 +27,7 @@ export default function Editor() {
           justifyContent: "center",
         }}
       >
-        <Monaco
+        <p>spectre</p>
-          height="100%"
-          width="100%"
-          defaultLanguage="css"
-          theme="vs-dark"
-          value={currentCode}
-          onChange={handleEditorChange}
-          defaultValue={code}
-          className="editor-monaco"
-        />
       </div>
     </SkeletonTheme>
   );

src/renderer/src/pages/game-details/cloud-sync-files-modal/cloud-sync-files-modal.tsx

@@ -4,7 +4,6 @@ import { cloudSyncContext, gameDetailsContext } from "@renderer/context";
 import { useTranslation } from "react-i18next";
 import { CheckCircleFillIcon, FileDirectoryIcon } from "@primer/octicons-react";
 
-import * as styles from "./cloud-sync-files-modal.css";
 import { formatBytes } from "@shared";
 import { useToast } from "@renderer/hooks";
 import { useForm } from "react-hook-form";
@@ -99,7 +98,7 @@ export function CloudSyncFilesModal({
       <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
         <span style={{ marginBottom: 8 }}>{t("mapping_method_label")}</span>
 
-        <div className={styles.mappingMethods}>
+        <div className="clound-sync-files-modal__mapping-methods">
           {Object.values(FileMappingMethod).map((mappingMethod) => (
             <Button
               key={mappingMethod}
@@ -142,11 +141,11 @@ export function CloudSyncFilesModal({
           />
         )}
 
-        <ul className={styles.fileList}>
+        <ul className="cloud-sync-files-modal__files-list">
           {files.map((file) => (
             <li key={file.path} style={{ display: "flex" }}>
               <button
-                className={styles.fileItem}
+                className="cloud-sync-files-modal__file-item"
                 onClick={() => window.electron.showItemInFolder(file.path)}
               >
                 {file.path.split("/").at(-1)}

src/renderer/src/pages/game-details/cloud-sync-modal/cloud-sync-modal.tsx

@@ -2,7 +2,6 @@ import { Button, Modal, ModalProps } from "@renderer/components";
 import { useContext, useEffect, useMemo, useState } from "react";
 import { cloudSyncContext, gameDetailsContext } from "@renderer/context";
 
-import * as styles from "./cloud-sync-modal.css";
 import { formatBytes } from "@shared";
 import { format } from "date-fns";
 import {
@@ -18,7 +17,9 @@ import { useAppSelector, useToast } from "@renderer/hooks";
 import { useTranslation } from "react-i18next";
 import { AxiosProgressEvent } from "axios";
 import { formatDownloadProgress } from "@renderer/helpers";
-import { SPACING_UNIT } from "@renderer/theme.css";
+
+import "./cloud-sync-modal.scss"
+import "../../../scss/_variables.scss"
 
 export interface CloudSyncModalProps
   extends Omit<ModalProps, "children" | "title"> {}
@@ -95,7 +96,7 @@ export function CloudSyncModal({ visible, onClose }: CloudSyncModalProps) {
     if (uploadingBackup) {
       return (
         <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
-          <SyncIcon className={styles.syncIcon} />
+          <SyncIcon className="clound-sync-modal__sync-icon" />
           {t("uploading_backup")}
         </span>
       );
@@ -104,7 +105,7 @@ export function CloudSyncModal({ visible, onClose }: CloudSyncModalProps) {
     if (restoringBackup) {
       return (
         <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
-          <SyncIcon className={styles.syncIcon} />
+          <SyncIcon className="clound-sync-modal__sync-icon" />
           {t("restoring_backup", {
             progress: formatDownloadProgress(
               backupDownloadProgress?.progress ?? 0
@@ -117,7 +118,7 @@ export function CloudSyncModal({ visible, onClose }: CloudSyncModalProps) {
     if (loadingPreview) {
       return (
         <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
-          <SyncIcon className={styles.syncIcon} />
+          <SyncIcon className="clound-sync-modal__sync-icon" />
           {t("loading_save_preview")}
         </span>
       );
@@ -171,7 +172,7 @@ export function CloudSyncModal({ visible, onClose }: CloudSyncModalProps) {
 
           <button
             type="button"
-            className={styles.manageFilesButton}
+            className="clound-sync-modal__manage-files-button"
             onClick={() => setShowCloudSyncFilesModal(true)}
             disabled={disableActions}
           >
@@ -199,7 +200,7 @@ export function CloudSyncModal({ visible, onClose }: CloudSyncModalProps) {
             marginBottom: 16,
             display: "flex",
             alignItems: "center",
-            gap: SPACING_UNIT,
+            gap: "var(--spacing-unit)",
           }}
         >
           <h2>{t("backups")}</h2>
@@ -210,9 +211,9 @@ export function CloudSyncModal({ visible, onClose }: CloudSyncModalProps) {
       </div>
 
       {artifacts.length > 0 ? (
-        <ul className={styles.artifacts}>
+        <ul className="clound-sync-modal__artifacts">
           {artifacts.map((artifact) => (
-            <li key={artifact.id} className={styles.artifactButton}>
+            <li key={artifact.id} className="cloud-sync-modal__artifact-button">
               <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                 <div
                   style={{

src/renderer/src/pages/game-details/gallery-slider/gallery-slider.scss

@@ -93,6 +93,7 @@
     color: $muted-color;
     width: 48px;
     height: 48px;
+    opacity: 0;
 
     &:hover {
       background-color: rgba(0, 0, 0, 0.6);
@@ -118,9 +119,5 @@
       transform: translateX(0);
       opacity: 1;
     }
-
-    &--hidden {
-      opacity: 0;
-    }
   }
 }

src/renderer/src/pages/game-details/gallery-slider/gallery-slider.tsx

@@ -2,9 +2,22 @@ import { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { ChevronRightIcon, ChevronLeftIcon } from "@primer/octicons-react";
 
-import * as styles from "./gallery-slider.css";
+import "./gallery-slider.scss"
 import { gameDetailsContext } from "@renderer/context";
 
+const getButtonClasses = (visible: boolean, direction: "left" | "right") => {
+  return classNames("gallery-slider__button", {
+    "gallery-slider__button--visible": visible,
+    [`gallery-slider__button--${direction}`]: direction,
+  });
+};
+
+const getPreviewClasses = (isActive: boolean) => {
+  return classNames("gallery-slider__media-preview-button", {
+    "gallery-slider__media-preview-button--active": isActive,
+  });
+};
+
 export function GallerySlider() {
   const { shopDetails } = useContext(gameDetailsContext);
 
@@ -97,11 +110,11 @@ export function GallerySlider() {
   return (
     <>
       {hasScreenshots && (
-        <div className={styles.gallerySliderContainer}>
+        <div className="gallery-slider__container">
           <div
             onMouseEnter={() => setShowArrows(true)}
             onMouseLeave={() => setShowArrows(false)}
-            className={styles.gallerySliderAnimationContainer}
+            className="gallery-slider__animation-container"
             ref={mediaContainerRef}
           >
             {shopDetails.movies &&
@@ -109,7 +122,7 @@ export function GallerySlider() {
                 <video
                   key={video.id}
                   controls
-                  className={styles.gallerySliderMedia}
+                  className="gallery-slider__media"
                   poster={video.thumbnail}
                   style={{ translate: `${-100 * mediaIndex}%` }}
                   loop
@@ -124,7 +137,7 @@ export function GallerySlider() {
               shopDetails.screenshots?.map((image, i) => (
                 <img
                   key={image.id}
-                  className={styles.gallerySliderMedia}
+                  className="gallery-slider__media"
                   src={image.path_full}
                   style={{ translate: `${-100 * mediaIndex}%` }}
                   alt={t("screenshot", { number: i + 1 })}
@@ -135,10 +148,7 @@ export function GallerySlider() {
             <button
               onClick={showPrevImage}
               type="button"
-              className={styles.gallerySliderButton({
+              className={getButtonClasses(showArrows, "left")}
-                visible: showArrows,
-                direction: "left",
-              })}
               aria-label={t("previous_screenshot")}
               tabIndex={0}
             >
@@ -148,10 +158,7 @@ export function GallerySlider() {
             <button
               onClick={showNextImage}
               type="button"
-              className={styles.gallerySliderButton({
+              className={getButtonClasses(showArrows, "right")}
-                visible: showArrows,
-                direction: "right",
-              })}
               aria-label={t("next_screenshot")}
               tabIndex={0}
             >
@@ -159,20 +166,18 @@ export function GallerySlider() {
             </button>
           </div>
 
-          <div className={styles.gallerySliderPreview} ref={scrollContainerRef}>
+          <div className="gallery-slider__preview" ref={scrollContainerRef}>
             {previews.map((media, i) => (
               <button
                 key={media.id}
                 type="button"
-                className={styles.mediaPreviewButton({
+                className={getPreviewClasses(mediaIndex === i)}
-                  active: mediaIndex === i,
-                })}
                 onClick={() => setMediaIndex(i)}
                 aria-label={t("open_screenshot", { number: i + 1 })}
               >
                 <img
                   src={media.thumbnail}
-                  className={styles.mediaPreview}
+                  className="gallery-slider__media-preview"
                   alt={t("screenshot", { number: i + 1 })}
                 />
               </button>

src/renderer/src/pages/game-details/game-details-content.tsx

@@ -7,7 +7,7 @@ import { DescriptionHeader } from "./description-header/description-header";
 import { GallerySlider } from "./gallery-slider/gallery-slider";
 import { Sidebar } from "./sidebar/sidebar";
 
-import * as styles from "./game-details.css";
+import "./game-details.scss";
 import { useTranslation } from "react-i18next";
 import { cloudSyncContext, gameDetailsContext } from "@renderer/context";
 import { AuthPage, steamUrlBuilder } from "@shared";
@@ -118,10 +118,10 @@ export function GameDetailsContent() {
   }, [getGameArtifacts]);
 
   return (
-    <div className={styles.wrapper({ blurredContent: hasNSFWContentBlocked })}>
+    <div className="game-details__blurred-content">
       <img
         src={steamUrlBuilder.libraryHero(objectId!)}
-        className={styles.heroImage}
+        className="game-details__hero-image"
         alt={game?.title}
         onLoad={handleHeroLoad}
       />
@@ -129,9 +129,9 @@ export function GameDetailsContent() {
       <section
         ref={containerRef}
         onScroll={onScroll}
-        className={styles.container}
+        className="game-details__container"
       >
-        <div ref={heroRef} className={styles.hero}>
+        <div ref={heroRef} className="game-details__hero">
           <div
             style={{
               backgroundColor: gameColor,
@@ -141,19 +141,19 @@ export function GameDetailsContent() {
           />
 
           <div
-            className={styles.heroLogoBackdrop}
+            className="game-details__hero-logo-backdrop"
             style={{ opacity: backdropOpactiy }}
           >
-            <div className={styles.heroContent}>
+            <div className="game-details__hero-content">
               <img
                 src={steamUrlBuilder.logo(objectId!)}
-                className={styles.gameLogo}
+                className="game-details__game-logo"
                 alt={game?.title}
               />
 
               <button
                 type="button"
-                className={styles.cloudSyncButton}
+                className="game-details__cloud-sync-button"
                 onClick={handleCloudSaveButtonClick}
               >
                 <div
@@ -180,8 +180,8 @@ export function GameDetailsContent() {
 
         <HeroPanel isHeaderStuck={isHeaderStuck} />
 
-        <div className={styles.descriptionContainer}>
+        <div className="game-details__description-container">
-          <div className={styles.descriptionContent}>
+          <div className="game-details__description-content">
             <DescriptionHeader />
             <GallerySlider />
 
@@ -189,7 +189,7 @@ export function GameDetailsContent() {
               dangerouslySetInnerHTML={{
                 __html: aboutTheGame,
               }}
-              className={styles.description}
+              className="game-details__description"
             />
           </div>
 

src/renderer/src/pages/game-details/game-details-skeleton.tsx

@@ -2,9 +2,11 @@ import Skeleton from "react-loading-skeleton";
 
 import { Button } from "@renderer/components";
 
-import * as styles from "./game-details.css";
+import "./game-details.scss";
-import * as sidebarStyles from "./sidebar/sidebar.css";
+
-import * as descriptionHeaderStyles from "./description-header/description-header.css";
+import "./sidebar/sidebar.scss";
+
+import "./description-header/description-header.scss";
 
 import { useTranslation } from "react-i18next";
 
@@ -12,54 +14,54 @@ export function GameDetailsSkeleton() {
   const { t } = useTranslation("game_details");
 
   return (
-    <div className={styles.container}>
+    <div className="game-details_container">
-      <div className={styles.hero}>
+      <div className="game-details_hero">
-        <Skeleton className={styles.heroImageSkeleton} />
+        <Skeleton className="game-details__hero-image-skeleton" />
       </div>
-      <div className={styles.heroPanelSkeleton}>
+      <div className="game-details__hero-panel-skeleton">
-        <section className={descriptionHeaderStyles.descriptionHeaderInfo}>
+        <section className="description-header">
           <Skeleton width={155} />
           <Skeleton width={135} />
         </section>
       </div>
-      <div className={styles.descriptionContainer}>
+      <div className="game-details__description-container">
-        <div className={styles.descriptionContent}>
+        <div className="game-details__description-content">
-          <div className={descriptionHeaderStyles.descriptionHeader}>
+          <div className="description-header">
-            <section className={descriptionHeaderStyles.descriptionHeaderInfo}>
+            <section className="description-header__info">
               <Skeleton width={145} />
               <Skeleton width={150} />
             </section>
           </div>
-          <div className={styles.descriptionSkeleton}>
+          <div className="game-details__description-skeleton">
             {Array.from({ length: 3 }).map((_, index) => (
               <Skeleton key={index} />
             ))}
-            <Skeleton className={styles.heroImageSkeleton} />
+            <Skeleton className="game-details__hero-image-skeleton" />
             {Array.from({ length: 2 }).map((_, index) => (
               <Skeleton key={index} />
             ))}
-            <Skeleton className={styles.heroImageSkeleton} />
+            <Skeleton className="game-details__hero-image-skeleton" />
             <Skeleton />
           </div>
         </div>
-        <div className={sidebarStyles.contentSidebar}>
+        <div className="sidebar__content-sidebar">
-          <div className={sidebarStyles.requirementButtonContainer}>
+          <div className="sidebar__requirements-button-container">
             <Button
-              className={sidebarStyles.requirementButton}
+              className="sidebar__requirement-button"
               theme="primary"
               disabled
             >
               {t("minimum")}
             </Button>
             <Button
-              className={sidebarStyles.requirementButton}
+              className="sidebar__requirement-button"
               theme="outline"
               disabled
             >
               {t("recommended")}
             </Button>
           </div>
-          <div className={sidebarStyles.requirementsDetailsSkeleton}>
+          <div className="sidebar__requirements-details-skeleton">
             {Array.from({ length: 6 }).map((_, index) => (
               <Skeleton key={index} height={20} />
             ))}

src/renderer/src/pages/game-details/game-details.scss

@@ -22,8 +22,9 @@ $hero-height: 300px;
     height: 100%;
     transition: all ease 0.3s;
 
-    &--blurred-content {
+    &__blurred-content {
       filter: blur(20px);
+      
     }
   }
 

src/renderer/src/pages/game-details/game-details.tsx

@@ -11,9 +11,10 @@ import starsIconAnimated from "@renderer/assets/icons/stars-animated.gif";
 import { useTranslation } from "react-i18next";
 import { SkeletonTheme } from "react-loading-skeleton";
 import { GameDetailsSkeleton } from "./game-details-skeleton";
-import * as styles from "./game-details.css";
 
-import { vars } from "@renderer/theme.css";
+
+import "./game-details.scss";
+
 
 import { GameDetailsContent } from "./game-details-content";
 import {
@@ -149,7 +150,7 @@ export default function GameDetails() {
               </CloudSyncContextConsumer>
 
               <SkeletonTheme
-                baseColor={vars.color.background}
+                baseColor="#1c1c1c"
                 highlightColor="#444"
               >
                 {isLoading ? <GameDetailsSkeleton /> : <GameDetailsContent />}
@@ -185,7 +186,7 @@ export default function GameDetails() {
 
                 {fromRandomizer && (
                   <Button
-                    className={styles.randomizerButton}
+                    className="game-details__randomizer-button"
                     onClick={handleRandomizerClick}
                     theme="outline"
                     disabled={!randomGame || randomizerLocked}

src/renderer/src/pages/game-details/hero/hero-panel-actions.scss

@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@import "../../../scss/variables";
 
 .hero-panel-actions {
   &__action {

src/renderer/src/pages/game-details/hero/hero-panel-actions.tsx

@@ -8,7 +8,7 @@ import { Button } from "@renderer/components";
 import { useDownload, useLibrary } from "@renderer/hooks";
 import { useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
-import * as styles from "./hero-panel-actions.css";
+import "./hero-panel-actions.scss"
 
 import { gameDetailsContext } from "@renderer/context";
 
@@ -84,7 +84,7 @@ export function HeroPanelActions() {
       theme="outline"
       disabled={toggleLibraryGameDisabled}
       onClick={addGameToLibrary}
-      className={styles.heroPanelAction}
+      className="hero-panel-actions__action"
     >
       <PlusCircleIcon />
       {t("add_to_library")}
@@ -96,7 +96,7 @@ export function HeroPanelActions() {
       onClick={() => setShowRepacksModal(true)}
       theme="outline"
       disabled={deleting}
-      className={styles.heroPanelAction}
+      className="hero-panel-actions__action"
     >
       {t("open_download_options")}
     </Button>
@@ -109,7 +109,7 @@ export function HeroPanelActions() {
           onClick={closeGame}
           theme="outline"
           disabled={deleting}
-          className={styles.heroPanelAction}
+          className="hero-panel-actions__action"
         >
           {t("close")}
         </Button>
@@ -122,7 +122,7 @@ export function HeroPanelActions() {
           onClick={openGame}
           theme="outline"
           disabled={deleting || isGameRunning}
-          className={styles.heroPanelAction}
+          className="hero-panel-actions__action"
         >
           <PlayIcon />
           {t("play")}
@@ -135,7 +135,7 @@ export function HeroPanelActions() {
         onClick={() => setShowRepacksModal(true)}
         theme="outline"
         disabled={isGameDownloading || !repacks.length}
-        className={styles.heroPanelAction}
+        className="hero-panel-actions__action"
       >
         <DownloadIcon />
         {t("download")}
@@ -154,16 +154,16 @@ export function HeroPanelActions() {
 
   if (game) {
     return (
-      <div className={styles.actions}>
+      <div className="hero-panel-actions__actions">
         {gameActionButton()}
 
-        <div className={styles.separator} />
+        <div className="hero-panel-actions__separator" />
 
         <Button
           onClick={() => setShowGameOptionsModal(true)}
           theme="outline"
           disabled={deleting}
-          className={styles.heroPanelAction}
+          className="hero-panel-actions__action"
         >
           <GearIcon />
           {t("options")}

src/renderer/src/pages/game-details/hero/hero-panel-playtime.tsx

@@ -1,6 +1,6 @@
 import { useContext, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import * as styles from "./hero-panel.css";
+import "./hero-panel.scss"
 import { formatDownloadProgress } from "@renderer/helpers";
 import { useDate, useDownload, useFormat } from "@renderer/hooks";
 import { Link } from "@renderer/components";
@@ -55,8 +55,8 @@ export function HeroPanelPlaytime() {
     game.status === "active" && lastPacket?.game.id === game.id;
 
   const downloadInProgressInfo = (
-    <div className={styles.downloadDetailsRow}>
+    <div className="hero-panel__download-details-row">
-      <Link to="/downloads" className={styles.downloadsLink}>
+      <Link to="/downloads" className="hero-panel__downloads-link">
         {game.status === "active"
           ? t("download_in_progress")
           : t("download_paused")}

src/renderer/src/pages/game-details/hero/hero-panel.scss

@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@import "../../../scss/variables";
 
 .hero-panel {
   width: 100%;

src/renderer/src/pages/game-details/hero/hero-panel.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import { useDate, useDownload } from "@renderer/hooks";
 
 import { HeroPanelActions } from "./hero-panel-actions";
-import * as styles from "./hero-panel.css";
+import "./hero-panel.scss"
 import { HeroPanelPlaytime } from "./hero-panel-playtime";
 
 import { gameDetailsContext } from "@renderer/context";
@@ -13,6 +13,18 @@ export interface HeroPanelProps {
   isHeaderStuck: boolean;
 }
 
+const getPanelClasses = (stuck: boolean) => {
+  return classNames("hero-panel", {
+    "hero-panel--stuck": stuck,
+  });
+};
+
+const getProgressBarClasses = (disabled: boolean) => {
+  return classNames("hero-panel__progress-bar", {
+    "hero-panel__progress-bar--disabled": disabled,
+  });
+};
+
 export function HeroPanel({ isHeaderStuck }: HeroPanelProps) {
   const { t } = useTranslation("game_details");
 
@@ -57,10 +69,10 @@ export function HeroPanel({ isHeaderStuck }: HeroPanelProps) {
     <>
       <div
         style={{ backgroundColor: gameColor }}
-        className={styles.panel({ stuck: isHeaderStuck })}
+        className={getPanelClasses(isHeaderStuck)}
       >
-        <div className={styles.content}>{getInfo()}</div>
+        <div className="hero-panel__content">{getInfo()}</div>
-        <div className={styles.actions}>
+        <div className="hero-panel__actions">
           <HeroPanelActions />
         </div>
 
@@ -70,12 +82,10 @@ export function HeroPanel({ isHeaderStuck }: HeroPanelProps) {
             value={
               isGameDownloading ? lastPacket?.game.progress : game?.progress
             }
-            className={styles.progressBar({
+            className={getProgressBarClasses(game?.status === "paused")}
-              disabled: game?.status === "paused",
-            })}
           />
         )}
       </div>
     </>
   );
-}
+}

src/renderer/src/pages/game-details/modals/download-settings-modal.tsx

@@ -1,15 +1,15 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 
-import * as styles from "./download-settings-modal.css";
 import { Button, Link, Modal, TextField } from "@renderer/components";
 import { CheckCircleFillIcon, DownloadIcon } from "@primer/octicons-react";
 import { Downloader, formatBytes, getDownloadersForUris } from "@shared";
 
 import type { GameRepack } from "@types";
-import { SPACING_UNIT } from "@renderer/theme.css";
 import { DOWNLOADER_NAME } from "@renderer/constants";
 import { useAppSelector, useFeature, useToast } from "@renderer/hooks";
+import "./download-settings-modal.scss";
+import "../../../scss/_variables.scss"
 
 export interface DownloadSettingsModalProps {
   visible: boolean;
@@ -145,21 +145,21 @@ export function DownloadSettingsModal({
       })}
       onClose={onClose}
     >
-      <div className={styles.container}>
+      <div className="download-settings-modal__container">
         <div
           style={{
             display: "flex",
             flexDirection: "column",
-            gap: `${SPACING_UNIT}px`,
+            gap: "var(--spacing-unit)",
           }}
         >
           <span>{t("downloader")}</span>
 
-          <div className={styles.downloaders}>
+          <div className="download-settings-modal__downloaders">
             {downloaders.map((downloader) => (
               <Button
                 key={downloader}
-                className={styles.downloaderOption}
+                className="download-settings-modal__downloader-option"
                 theme={
                   selectedDownloader === downloader ? "primary" : "outline"
                 }
@@ -170,7 +170,7 @@ export function DownloadSettingsModal({
                 onClick={() => setSelectedDownloader(downloader)}
               >
                 {selectedDownloader === downloader && (
-                  <CheckCircleFillIcon className={styles.downloaderIcon} />
+                  <CheckCircleFillIcon className="download-settings-modal__downloader-icon" />
                 )}
                 {DOWNLOADER_NAME[downloader]}
               </Button>
@@ -182,7 +182,7 @@ export function DownloadSettingsModal({
           style={{
             display: "flex",
             flexDirection: "column",
-            gap: `${SPACING_UNIT}px`,
+            gap: "var(--spacing-unit)",
           }}
         >
           <TextField
@@ -193,7 +193,7 @@ export function DownloadSettingsModal({
             error={
               hasWritePermission === false ? (
                 <span
-                  className={styles.pathError}
+                  className="download-settings-modal__path-error"
                   data-open-article="cannot-write-directory"
                 >
                   {t("no_write_permission")}
@@ -212,7 +212,7 @@ export function DownloadSettingsModal({
             }
           />
 
-          <p className={styles.hintText}>
+          <p className="download-settings-modal__hint-text">
             <Trans i18nKey="select_folder_hint" ns="game_details">
               <Link to="/settings" />
             </Trans>

src/renderer/src/pages/game-details/modals/game-options-modal.tsx

@@ -2,7 +2,6 @@ import { useContext, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Button, Modal, TextField } from "@renderer/components";
 import type { Game } from "@types";
-import * as styles from "./game-options-modal.css";
 import { gameDetailsContext } from "@renderer/context";
 import { DeleteGameModal } from "@renderer/pages/downloads/delete-game-modal";
 import { useDownload, useToast, useUserDetails } from "@renderer/hooks";
@@ -10,6 +9,7 @@ import { RemoveGameFromLibraryModal } from "./remove-from-library-modal";
 import { ResetAchievementsModal } from "./reset-achievements-modal";
 import { FileDirectoryIcon, FileIcon } from "@primer/octicons-react";
 import { debounce } from "lodash-es";
+import "./game-options-modal.scss";
 
 export interface GameOptionsModalProps {
   visible: boolean;
@@ -199,10 +199,10 @@ export function GameOptionsModal({
         onClose={onClose}
         large={true}
       >
-        <div className={styles.optionsContainer}>
+        <div className="game-options-modal__options-container">
-          <div className={styles.gameOptionHeader}>
+          <div className="game-options-modal__game-option-header">
             <h2>{t("executable_section_title")}</h2>
-            <h4 className={styles.gameOptionHeaderDescription}>
+            <h4 className="game-options-modal__game-option-header-description">
               {t("executable_section_description")}
             </h4>
           </div>
@@ -233,7 +233,7 @@ export function GameOptionsModal({
           />
 
           {game.executablePath && (
-            <div className={styles.gameOptionRow}>
+            <div className="game-options-modal__game-option-row">
               <Button
                 type="button"
                 theme="outline"
@@ -248,10 +248,10 @@ export function GameOptionsModal({
           )}
 
           {shouldShowWinePrefixConfiguration && (
-            <div className={styles.optionsContainer}>
+            <div className="game-options-modal__options-container">
-              <div className={styles.gameOptionHeader}>
+              <div className="game-options-modal__game-option-header">
                 <h2>{t("wine_prefix")}</h2>
-                <h4 className={styles.gameOptionHeaderDescription}>
+                <h4 className="game-options-modal__game-option-header-description">
                   {t("wine_prefix_description")}
                 </h4>
               </div>
@@ -286,9 +286,9 @@ export function GameOptionsModal({
           )}
 
           {shouldShowLaunchOptionsConfiguration && (
-            <div className={styles.gameOptionHeader}>
+            <div className="game-options-modal__game-option-header">
               <h2>{t("launch_options")}</h2>
-              <h4 className={styles.gameOptionHeaderDescription}>
+              <h4 className="game-options-modal__game-option-description">
                 {t("launch_options_description")}
               </h4>
               <TextField
@@ -307,14 +307,14 @@ export function GameOptionsModal({
             </div>
           )}
 
-          <div className={styles.gameOptionHeader}>
+          <div className="game-options-modal__game-option-header">
             <h2>{t("downloads_secion_title")}</h2>
-            <h4 className={styles.gameOptionHeaderDescription}>
+            <h4 className="game-options-modal__game-option-description">
               {t("downloads_section_description")}
             </h4>
           </div>
 
-          <div className={styles.gameOptionRow}>
+          <div className="game-options-modal__game-option-row">
             <Button
               onClick={() => setShowRepacksModal(true)}
               theme="outline"
@@ -333,14 +333,14 @@ export function GameOptionsModal({
             )}
           </div>
 
-          <div className={styles.gameOptionHeader}>
+          <div className="game-options-modal__game-option-header">
             <h2>{t("danger_zone_section_title")}</h2>
-            <h4 className={styles.gameOptionHeaderDescription}>
+            <h4 className="game-options-modal__game-option-description">
               {t("danger_zone_section_description")}
             </h4>
           </div>
 
-          <div className={styles.gameOptionRow}>
+          <div className="game-options-modal__game-option-row">
             <Button
               onClick={() => setShowRemoveGameModal(true)}
               theme="danger"

src/renderer/src/pages/game-details/modals/remove-from-library-modal.tsx

@@ -30,7 +30,7 @@ export function RemoveGameFromLibraryModal({
       description={t("remove_from_library_description", { game: game.title })}
       onClose={onClose}
     >
-      <div className={styles.deleteActionsButtonsCtn}>
+      <div className="remove-from-library-modal__delete-actions-buttons-ctn">
         <Button onClick={handleRemoveGame} theme="outline">
           {t("remove")}
         </Button>

src/renderer/src/pages/game-details/modals/repacks-modal.tsx

@@ -4,15 +4,15 @@ import { useTranslation } from "react-i18next";
 import { Badge, Button, Modal, TextField } from "@renderer/components";
 import type { GameRepack } from "@types";
 
-import * as styles from "./repacks-modal.css";
-
-import { SPACING_UNIT } from "@renderer/theme.css";
 import { DownloadSettingsModal } from "./download-settings-modal";
 import { gameDetailsContext } from "@renderer/context";
 import { Downloader } from "@shared";
 import { orderBy } from "lodash-es";
 import { useDate } from "@renderer/hooks";
 
+import "./repacks-modal.scss";
+import "../../../scss/_variables.scss";
+
 export interface RepacksModalProps {
   visible: boolean;
   startDownload: (
@@ -86,11 +86,11 @@ export function RepacksModal({
         description={t("repacks_modal_description")}
         onClose={onClose}
       >
-        <div style={{ marginBottom: `${SPACING_UNIT * 2}px` }}>
+        <div className="repacks-modal__filter">
           <TextField placeholder={t("filter")} onChange={handleFilter} />
         </div>
 
-        <div className={styles.repacks}>
+        <div className="repacks-modal__repacks">
           {filteredRepacks.map((repack) => {
             const isLastDownloadedOption = checkIfLastDownloadedOption(repack);
 
@@ -99,7 +99,7 @@ export function RepacksModal({
                 key={repack.id}
                 theme="dark"
                 onClick={() => handleRepackClick(repack)}
-                className={styles.repackButton}
+                className="repacks-modal__button"
               >
                 <p style={{ color: "#DADBE1", wordBreak: "break-word" }}>
                   {repack.title}

src/renderer/src/pages/game-details/modals/reset-achievements-modal.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from "react-i18next";
 import { Button, Modal } from "@renderer/components";
-import * as styles from "./remove-from-library-modal.css";
 import type { Game } from "@types";
+import "./remove-from-library-modal.scss"
 type ResetAchievementsModalProps = Readonly<{
   visible: boolean;
   game: Game;
@@ -34,7 +34,7 @@ export function ResetAchievementsModal({
         game: game.title,
       })}
     >
-      <div className={styles.deleteActionsButtonsCtn}>
+      <div className="remove-from-library-modal__delete-actions-buttons-ctn">
         <Button onClick={handleResetAchievements} theme="outline">
           {t("reset_achievements")}
         </Button>

src/renderer/src/pages/game-details/sidebar-section/sidebar-section.tsx

@@ -1,7 +1,7 @@
 import { ChevronDownIcon } from "@primer/octicons-react";
 import { useRef, useState } from "react";
 
-import * as styles from "./sidebar-section.css";
+import "./sidebar-section.scss";
 
 export interface SidebarSectionProps {
   title: string;
@@ -17,9 +17,13 @@ export function SidebarSection({ title, children }: SidebarSectionProps) {
       <button
         type="button"
         onClick={() => setIsOpen(!isOpen)}
-        className={styles.sidebarSectionButton}
+        className="sidebar-section__button"
       >
-        <ChevronDownIcon className={styles.chevron({ open: isOpen })} />
+        <ChevronDownIcon
+          className={classNames("chevron", {
+            "chevron--open": isOpen,
+          })}
+        />
         <span>{title}</span>
       </button>
 

src/renderer/src/pages/game-details/sidebar/how-long-to-beat-section.tsx

@@ -1,11 +1,11 @@
 import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
 import { useTranslation } from "react-i18next";
 import type { HowLongToBeatCategory } from "@types";
-import { vars } from "@renderer/theme.css";
-
-import * as styles from "./sidebar.css";
 import { SidebarSection } from "../sidebar-section/sidebar-section";
 
+import "./sidebar.scss"
+import "../../../scss/_variables.scss"
+
 const durationTranslation: Record<string, string> = {
   Hours: "hours",
   Mins: "minutes",
@@ -30,17 +30,17 @@ export function HowLongToBeatSection({
   if (!howLongToBeatData && !isLoading) return null;
 
   return (
-    <SkeletonTheme baseColor={vars.color.background} highlightColor="#444">
+    <SkeletonTheme baseColor="var(--background-color)" highlightColor="#444">
       <SidebarSection title="HowLongToBeat">
-        <ul className={styles.howLongToBeatCategoriesList}>
+        <ul className="sidebar__how-long-to-beat-categories-list">
           {howLongToBeatData
             ? howLongToBeatData.map((category) => (
                 <li
                   key={category.title}
-                  className={styles.howLongToBeatCategory}
+                  className="sidebar__how-long-to-beat-category"
                 >
                   <p
-                    className={styles.howLongToBeatCategoryLabel}
+                    className="sidebar__how-long-to-beat-category"
                     style={{
                       fontWeight: "bold",
                     }}
@@ -48,7 +48,7 @@ export function HowLongToBeatSection({
                     {category.title}
                   </p>
 
-                  <p className={styles.howLongToBeatCategoryLabel}>
+                  <p className="sidebar__how-long-to-beat-category">
                     {getDuration(category.duration)}
                   </p>
 
@@ -62,7 +62,7 @@ export function HowLongToBeatSection({
             : Array.from({ length: 4 }).map((_, index) => (
                 <Skeleton
                   key={index}
-                  className={styles.howLongToBeatCategorySkeleton}
+                  className="sidebar__how-long-to-beat-category-skeleton"
                 />
               ))}
         </ul>

src/renderer/src/pages/game-details/sidebar/sidebar.tsx

@@ -7,7 +7,6 @@ import type {
 import { useTranslation } from "react-i18next";
 import { Button, Link } from "@renderer/components";
 
-import * as styles from "./sidebar.css";
 import { gameDetailsContext } from "@renderer/context";
 import { useDate, useFormat, useUserDetails } from "@renderer/hooks";
 import {
@@ -20,8 +19,9 @@ import { HowLongToBeatSection } from "./how-long-to-beat-section";
 import { howLongToBeatEntriesTable } from "@renderer/dexie";
 import { SidebarSection } from "../sidebar-section/sidebar-section";
 import { buildGameAchievementPath } from "@renderer/helpers";
-import { SPACING_UNIT } from "@renderer/theme.css";
 import { useSubscription } from "@renderer/hooks/use-subscription";
+import "./sidebar.scss";
+import "../../../scss/_variables.scss";
 
 const fakeAchievements: UserAchievement[] = [
   {
@@ -117,171 +117,158 @@ export function Sidebar() {
     }
   }, [objectId, shop, gameTitle]);
 
-  return (
+return (
-    <aside className={styles.contentSidebar}>
+  <aside className="sidebar__content">
-      {userDetails === null && (
+    {userDetails === null && (
-        <SidebarSection title={t("achievements")}>
+      <SidebarSection title={t("achievements")}>
-          <div
+        <div className="sidebar__overlay">
-            style={{
+          <LockIcon size={36} />
-              position: "absolute",
+          <h3>{t("sign_in_to_see_achievements")}</h3>
-              zIndex: 1,
-              inset: 0,
-              width: "100%",
-              height: "100%",
-              background: "rgba(0, 0, 0, 0.7)",
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              flexDirection: "column",
-              gap: `${SPACING_UNIT}px`,
-            }}
-          >
-            <LockIcon size={36} />
-            <h3>{t("sign_in_to_see_achievements")}</h3>
-          </div>
-          <ul className={styles.list} style={{ filter: "blur(4px)" }}>
-            {fakeAchievements.map((achievement, index) => (
-              <li key={index}>
-                <div className={styles.listItem}>
-                  <img
-                    style={{ filter: "blur(8px)" }}
-                    className={styles.listItemImage({
-                      unlocked: achievement.unlocked,
-                    })}
-                    src={achievement.icon}
-                    alt={achievement.displayName}
-                  />
-                  <div>
-                    <p>{achievement.displayName}</p>
-                    <small>
-                      {achievement.unlockTime != null &&
-                        formatDateTime(achievement.unlockTime)}
-                    </small>
-                  </div>
-                </div>
-              </li>
-            ))}
-          </ul>
-        </SidebarSection>
-      )}
-      {userDetails && achievements && achievements.length > 0 && (
-        <SidebarSection
-          title={t("achievements_count", {
-            unlockedCount: achievements.filter((a) => a.unlocked).length,
-            achievementsCount: achievements.length,
-          })}
-        >
-          <ul className={styles.list}>
-            {!hasActiveSubscription && (
-              <button
-                className={styles.subscriptionRequiredButton}
-                onClick={() => showHydraCloudModal("achievements")}
-              >
-                <CloudOfflineIcon size={16} />
-                <span>{t("achievements_not_sync")}</span>
-              </button>
-            )}
-
-            {achievements.slice(0, 4).map((achievement, index) => (
-              <li key={index}>
-                <Link
-                  to={buildGameAchievementPath({
-                    shop: shop,
-                    objectId: objectId!,
-                    title: gameTitle,
-                  })}
-                  className={styles.listItem}
-                  title={achievement.description}
-                >
-                  <img
-                    className={styles.listItemImage({
-                      unlocked: achievement.unlocked,
-                    })}
-                    src={achievement.icon}
-                    alt={achievement.displayName}
-                  />
-                  <div>
-                    <p>{achievement.displayName}</p>
-                    <small>
-                      {achievement.unlockTime != null &&
-                        formatDateTime(achievement.unlockTime)}
-                    </small>
-                  </div>
-                </Link>
-              </li>
-            ))}
-
-            <Link
-              style={{ textAlign: "center" }}
-              to={buildGameAchievementPath({
-                shop: shop,
-                objectId: objectId!,
-                title: gameTitle,
-              })}
-            >
-              {t("see_all_achievements")}
-            </Link>
-          </ul>
-        </SidebarSection>
-      )}
-
-      {stats && (
-        <SidebarSection title={t("stats")}>
-          <div className={styles.statsSection}>
-            <div className={styles.statsCategory}>
-              <p className={styles.statsCategoryTitle}>
-                <DownloadIcon size={18} />
-                {t("download_count")}
-              </p>
-              <p>{numberFormatter.format(stats?.downloadCount)}</p>
-            </div>
-
-            <div className={styles.statsCategory}>
-              <p className={styles.statsCategoryTitle}>
-                <PeopleIcon size={18} />
-                {t("player_count")}
-              </p>
-              <p>{numberFormatter.format(stats?.playerCount)}</p>
-            </div>
-          </div>
-        </SidebarSection>
-      )}
-
-      <HowLongToBeatSection
-        howLongToBeatData={howLongToBeat.data}
-        isLoading={howLongToBeat.isLoading}
-      />
-
-      <SidebarSection title={t("requirements")}>
-        <div className={styles.requirementButtonContainer}>
-          <Button
-            className={styles.requirementButton}
-            onClick={() => setActiveRequirement("minimum")}
-            theme={activeRequirement === "minimum" ? "primary" : "outline"}
-          >
-            {t("minimum")}
-          </Button>
-
-          <Button
-            className={styles.requirementButton}
-            onClick={() => setActiveRequirement("recommended")}
-            theme={activeRequirement === "recommended" ? "primary" : "outline"}
-          >
-            {t("recommended")}
-          </Button>
         </div>
-
+        <ul className="sidebar__list sidebar__list--blurred">
-        <div
+          {fakeAchievements.map((achievement, index) => (
-          className={styles.requirementsDetails}
+            <li key={index}>
-          dangerouslySetInnerHTML={{
+              <div className="sidebar__list-item">
-            __html:
+                <img
-              shopDetails?.pc_requirements?.[activeRequirement] ??
+                  className={classNames("sidebar__list-item-image", {
-              t(`no_${activeRequirement}_requirements`, {
+                    "sidebar__list-item-image--unlocked": achievement.unlocked,
-                gameTitle,
+                    "sidebar__list-item-image--blurred": true,
-              }),
+                  })}
-          }}
+                  src={achievement.icon}
-        />
+                  alt={achievement.displayName}
+                />
+                <div>
+                  <p>{achievement.displayName}</p>
+                  <small>
+                    {achievement.unlockTime != null &&
+                      formatDateTime(achievement.unlockTime)}
+                  </small>
+                </div>
+              </div>
+            </li>
+          ))}
+        </ul>
       </SidebarSection>
-    </aside>
+    )}
-  );
+    {userDetails && achievements && achievements.length > 0 && (
+      <SidebarSection
+        title={t("achievements_count", {
+          unlockedCount: achievements.filter((a) => a.unlocked).length,
+          achievementsCount: achievements.length,
+        })}
+      >
+        <ul className="sidebar__list">
+          {!hasActiveSubscription && (
+            <button
+              className="sidebar__subscription-required-button"
+              onClick={() => showHydraCloudModal("achievements")}
+            >
+              <CloudOfflineIcon size={16} />
+              <span>{t("achievements_not_sync")}</span>
+            </button>
+          )}
+
+          {achievements.slice(0, 4).map((achievement, index) => (
+            <li key={index}>
+              <Link
+                to={buildGameAchievementPath({
+                  shop: shop,
+                  objectId: objectId!,
+                  title: gameTitle,
+                })}
+                className="sidebar__list-item"
+                title={achievement.description}
+              >
+                <img
+                  className={classNames("achievements__list-item-image", {
+                    "achievements__list-item-image--unlocked":
+                      achievement.unlocked,
+                  })}
+                  src={achievement.icon}
+                  alt={achievement.displayName}
+                />
+                <div>
+                  <p>{achievement.displayName}</p>
+                  <small>
+                    {achievement.unlockTime != null &&
+                      formatDateTime(achievement.unlockTime)}
+                  </small>
+                </div>
+              </Link>
+            </li>
+          ))}
+
+          <Link
+            style={{ textAlign: "center" }}
+            to={buildGameAchievementPath({
+              shop: shop,
+              objectId: objectId!,
+              title: gameTitle,
+            })}
+          >
+            {t("see_all_achievements")}
+          </Link>
+        </ul>
+      </SidebarSection>
+    )}
+
+    {stats && (
+      <SidebarSection title={t("stats")}>
+        <div className="sidebar__stats-section">
+          <div className="sidebar__stats-category">
+            <p className="sidebar__stats-category-title">
+              <DownloadIcon size={18} />
+              {t("download_count")}
+            </p>
+            <p>{numberFormatter.format(stats?.downloadCount)}</p>
+          </div>
+
+          <div className="sidebar__stats-category">
+            <p className="sidebar__stats-category-title">
+              <PeopleIcon size={18} />
+              {t("player_count")}
+            </p>
+            <p>{numberFormatter.format(stats?.playerCount)}</p>
+          </div>
+        </div>
+      </SidebarSection>
+    )}
+
+    <HowLongToBeatSection
+      howLongToBeatData={howLongToBeat.data}
+      isLoading={howLongToBeat.isLoading}
+    />
+
+    <SidebarSection title={t("requirements")}>
+      <div className="sidebar__requirement-button-container">
+        <Button
+          className="sidebar__requirement-button"
+          onClick={() => setActiveRequirement("minimum")}
+          theme={activeRequirement === "minimum" ? "primary" : "outline"}
+        >
+          {t("minimum")}
+        </Button>
+
+        <Button
+          className="sidebar__requirement-button"
+          onClick={() => setActiveRequirement("recommended")}
+          theme={activeRequirement === "recommended" ? "primary" : "outline"}
+        >
+          {t("recommended")}
+        </Button>
+      </div>
+
+      <div
+        className="sidebar__requirements-details"
+        dangerouslySetInnerHTML={{
+          __html:
+            shopDetails?.pc_requirements?.[activeRequirement] ??
+            t(`no_${activeRequirement}_requirements`, {
+              gameTitle,
+            }),
+        }}
+      />
+    </SidebarSection>
+  </aside>
+);
 }

src/renderer/src/pages/home/home.tsx

@@ -11,10 +11,10 @@ import flameIconStatic from "@renderer/assets/icons/flame-static.png";
 import flameIconAnimated from "@renderer/assets/icons/flame-animated.gif";
 import starsIconAnimated from "@renderer/assets/icons/stars-animated.gif";
 
-import * as styles from "./home.css";
-import { SPACING_UNIT, vars } from "@renderer/theme.css";
 import { buildGameDetailsPath } from "@renderer/helpers";
 import { CatalogueCategory } from "@shared";
+import "./home.scss";
+import "../../scss/_variables.scss";
 
 export default function Home() {
   const { t } = useTranslation("home");
@@ -94,14 +94,14 @@ export default function Home() {
   };
 
   return (
-    <SkeletonTheme baseColor={vars.color.background} highlightColor="#444">
+    <SkeletonTheme baseColor="var(--background-color)" highlightColor="#444">
-      <section className={styles.content}>
+      <section className="home__content">
         <h2>{t("featured")}</h2>
 
         <Hero />
 
-        <section className={styles.homeHeader}>
+        <section className="home__header">
-          <ul className={styles.buttonsList}>
+          <ul className="home__buttons-list">
             {categories.map((category) => (
               <li key={category}>
                 <Button
@@ -121,13 +121,13 @@ export default function Home() {
                       <img
                         src={flameIconStatic}
                         alt="Flame icon"
-                        className={styles.flameIcon}
+                        className="home__flame-icon"
                         style={{ display: animateFlame ? "none" : "block" }}
                       />
                       <img
                         src={flameIconAnimated}
                         alt="Flame animation"
-                        className={styles.flameIcon}
+                        className="home__flame-icon"
                         style={{ display: animateFlame ? "block" : "none" }}
                       />
                     </div>
@@ -155,7 +155,7 @@ export default function Home() {
           </Button>
         </section>
 
-        <h2 style={{ display: "flex", gap: SPACING_UNIT }}>
+        <h2 style={{ display: "flex", gap: 8 }}>
           {currentCatalogueCategory === CatalogueCategory.Hot && (
             <div style={{ width: 24, height: 24, position: "relative" }}>
               <img
@@ -174,10 +174,10 @@ export default function Home() {
           {t(currentCatalogueCategory)}
         </h2>
 
-        <section className={styles.cards}>
+        <section className="home__cards">
           {isLoading
             ? Array.from({ length: 12 }).map((_, index) => (
-                <Skeleton key={index} className={styles.cardSkeleton} />
+                <Skeleton key={index} className="home__card-skeleton" />
               ))
             : catalogue[currentCatalogueCategory].map((result) => (
                 <GameCard

src/renderer/src/pages/profile/edit-profile-modal/edit-profile-modal.scss

@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@import "../../../scss/variables";
 
 .edit-profile-modal {
   &__profile-avatar-edit-container {
@@ -31,4 +31,10 @@
   &__profile-avatar-edit-container:hover &__profile-avatar-edit-overlay {
     opacity: 1;
   }
+
+  &__profile-avatar-container {
+    gap: #{$spacing-unit * 3};
+    display: flex;
+    flex-direction: column;
+  }
 }

src/renderer/src/pages/profile/edit-profile-modal/edit-profile-modal.tsx

@@ -13,14 +13,14 @@ import {
 } from "@renderer/components";
 import { useToast, useUserDetails } from "@renderer/hooks";
 
-import { SPACING_UNIT } from "@renderer/theme.css";
 import { yupResolver } from "@hookform/resolvers/yup";
 
 import * as yup from "yup";
 
-import * as styles from "./edit-profile-modal.css";
 import { userProfileContext } from "@renderer/context";
 
+import "./edit-profile-modal.scss";
+
 interface FormValues {
   profileImageUrl?: string;
   displayName: string;
@@ -87,13 +87,7 @@ export function EditProfileModal(
           width: "350px",
         }}
       >
-        <div
+        <div className="edit-profile-modal__profile-avatar-container">
-          style={{
-            gap: `${SPACING_UNIT * 3}px`,
-            display: "flex",
-            flexDirection: "column",
-          }}
-        >
           <Controller
             control={control}
             name="profileImageUrl"
@@ -140,7 +134,7 @@ export function EditProfileModal(
               return (
                 <button
                   type="button"
-                  className={styles.profileAvatarEditContainer}
+                  className="edit-profile-modal__profile-avatar-edit-container"
                   onClick={handleChangeProfileAvatar}
                 >
                   <Avatar
@@ -149,7 +143,7 @@ export function EditProfileModal(
                     alt={userDetails?.displayName}
                   />
 
-                  <div className={styles.profileAvatarEditOverlay}>
+                  <div className="edit-profile-modal__profile-avatar-edit-overlay">
                     <DeviceCameraIcon size={38} />
                   </div>
                 </button>
@@ -166,8 +160,7 @@ export function EditProfileModal(
             error={errors.displayName?.message}
           />
         </div>
-
+        <small style={{ marginTop: `${8 * 2}px` }}>
-        <small style={{ marginTop: `${SPACING_UNIT * 2}px` }}>
           <Trans i18nKey="privacy_hint" ns="user_profile">
             <Link to="/settings" />
           </Trans>
@@ -175,7 +168,7 @@ export function EditProfileModal(
 
         <Button
           disabled={isSubmitting}
-          style={{ alignSelf: "end", marginTop: `${SPACING_UNIT * 3}px` }}
+          style={{ alignSelf: "end", marginTop: `${8 * 3}px` }}
           type="submit"
         >
           {isSubmitting ? t("saving") : t("save")}

src/renderer/src/pages/profile/profile-content/friends-box.tsx

@@ -3,8 +3,8 @@ import { useFormat } from "@renderer/hooks";
 import { useContext } from "react";
 import { useTranslation } from "react-i18next";
 import SteamLogo from "@renderer/assets/steam-logo.svg?react";
-import * as styles from "./profile-content.css";
 import { Avatar, Link } from "@renderer/components";
+import "./profile-content.scss";
 
 export function FriendsBox() {
   const { userProfile, userStats } = useContext(userProfileContext);
@@ -32,15 +32,15 @@ export function FriendsBox() {
 
   return (
     <div>
-      <div className={styles.sectionHeader}>
+      <div className="profile-content__section-header">
         <h2>{t("friends")}</h2>
         {userStats && (
           <span>{numberFormatter.format(userStats.friendsCount)}</span>
         )}
       </div>
 
-      <div className={styles.box}>
+      <div className="profile-content__box">
-        <ul className={styles.list}>
+        <ul className="profile-content__list">
           {userProfile?.friends.map((friend) => (
             <li
               key={friend.id}
@@ -50,7 +50,10 @@ export function FriendsBox() {
                   : undefined
               }
             >
-              <Link to={`/profile/${friend.id}`} className={styles.listItem}>
+              <Link
+                to={`/profile/${friend.id}`}
+                className="profile-content__list-item"
+              >
                 <Avatar
                   size={32}
                   src={friend.profileImageUrl}
@@ -60,7 +63,7 @@ export function FriendsBox() {
                 <div
                   style={{ display: "flex", flexDirection: "column", gap: 4 }}
                 >
-                  <span className={styles.friendName}>
+                  <span className="profile-content__friend-name">
                     {friend.displayName}
                   </span>
                   {friend.currentGame && (

src/renderer/src/pages/profile/profile-content/locked-profile.scss

@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@import "../../../scss/variables";
 
 .locked-profile {
   &__container {

src/renderer/src/pages/profile/profile-content/locked-profile.tsx

@@ -1,14 +1,14 @@
 import { LockIcon } from "@primer/octicons-react";
 import { useTranslation } from "react-i18next";
 
-import * as styles from "./locked-profile.css";
+import "./locked-profile.scss"
 
 export function LockedProfile() {
   const { t } = useTranslation("user_profile");
 
   return (
-    <div className={styles.container}>
+    <div className="locked-profile__container">
-      <div className={styles.lockIcon}>
+      <div className="locked-profile__lock-icon">
         <LockIcon size={24} />
       </div>
 

src/renderer/src/pages/profile/profile-content/profile-content.scss

@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@import "../../../scss/variables";
 
 .profile-content {
   &__game-cover {
@@ -250,4 +250,43 @@
     flex-shrink: 0;
     flex-grow: 0;
   }
+
+  &__game-card-style {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-end;
+    height: 100%;
+    width: 100%;
+    background:
+      linear-gradient(0deg, rgba(0,0,0 0.70) 20%, transparent 100%);
+    padding: 8;
+  }
+
+  &__game-playtime {
+    background-color: $background-color;
+    color: $muted-color;
+    border: solid 1px $border-color;
+    border-radius: 4;
+    display: flex;
+    align-items: center;
+    gap: 4;
+    padding: 4px,
+  }
+
+  &__game-card-stats-container {
+    display: flex;
+    justify-content: space-between; 
+    margin-bottom: 8;
+    color: $muted-color;
+    overflow: hidden;
+    height: 18;
+  }
+
+  &__container {
+    display: flex;
+    gap: #{$spacing-unit * 3};
+    padding: #{$spacing-unit * 3};
+  }
 }

src/renderer/src/pages/profile/profile-content/profile-content.tsx

@@ -3,8 +3,6 @@ import { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { ProfileHero } from "../profile-hero/profile-hero";
 import { useAppDispatch, useFormat } from "@renderer/hooks";
 import { setHeaderTitle } from "@renderer/features";
-import { SPACING_UNIT } from "@renderer/theme.css";
-import * as styles from "./profile-content.css";
 import { TelescopeIcon } from "@primer/octicons-react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
@@ -14,6 +12,7 @@ import { FriendsBox } from "./friends-box";
 import { RecentGamesBox } from "./recent-games-box";
 import { UserStatsBox } from "./user-stats-box";
 import { UserLibraryGameCard } from "./user-library-game-card";
+import "./profile-content.scss";
 
 const GAME_STATS_ANIMATION_DURATION_IN_MS = 3500;
 
@@ -89,16 +88,12 @@ export function ProfileContent() {
 
     return (
       <section
-        style={{
+        className="profile-content__container"
-          display: "flex",
-          gap: `${SPACING_UNIT * 3}px`,
-          padding: `${SPACING_UNIT * 3}px`,
-        }}
       >
         <div style={{ flex: 1 }}>
           {!hasGames && (
-            <div className={styles.noGames}>
+            <div className="profile-content__no-games">
-              <div className={styles.telescopeIcon}>
+              <div className="profile-content__telescope-icon">
                 <TelescopeIcon size={24} />
               </div>
               <h2>{t("no_recent_activity_title")}</h2>
@@ -108,7 +103,7 @@ export function ProfileContent() {
 
           {hasGames && (
             <>
-              <div className={styles.sectionHeader}>
+              <div className="profile-content__section-header">
                 <h2>{t("library")}</h2>
 
                 {userStats && (
@@ -116,7 +111,7 @@ export function ProfileContent() {
                 )}
               </div>
 
-              <ul className={styles.gamesGrid}>
+              <ul className="profile-content__games-grid">
                 {userProfile?.libraryGames?.map((game) => (
                   <UserLibraryGameCard
                     game={game}
@@ -132,7 +127,7 @@ export function ProfileContent() {
         </div>
 
         {shouldShowRightContent && (
-          <div className={styles.rightContent}>
+          <div className="profile-content__right-content">
             <UserStatsBox />
             <RecentGamesBox />
             <FriendsBox />

src/renderer/src/pages/profile/profile-content/recent-games-box.tsx

@@ -1,6 +1,6 @@
 import { buildGameDetailsPath } from "@renderer/helpers";
 
-import * as styles from "./profile-content.css";
+import "./profile-content.scss";
 import { Link } from "@renderer/components";
 import { useCallback, useContext } from "react";
 import { userProfileContext } from "@renderer/context";
@@ -44,28 +44,28 @@ export function RecentGamesBox() {
 
   return (
     <div>
-      <div className={styles.sectionHeader}>
+      <div className="profile-content__section-header">
         <h2>{t("activity")}</h2>
       </div>
 
-      <div className={styles.box}>
+      <div className="profile-content__box">
-        <ul className={styles.list}>
+        <ul className="profile-content__list">
           {userProfile?.recentGames.map((game) => (
             <li key={`${game.shop}-${game.objectId}`}>
               <Link
                 to={buildUserGameDetailsPath(game)}
-                className={styles.listItem}
+                className="profile-content__list-item"
               >
                 <img
                   src={game.iconUrl!}
                   alt={game.title}
-                  className={styles.listItemImage}
+                  className="profile-content__list-item-image"
                 />
 
-                <div className={styles.listItemDetails}>
+                <div className="profile-content__list-item-details">
-                  <span className={styles.listItemTitle}>{game.title}</span>
+                  <span className="profile-content__list-item-title">{game.title}</span>
 
-                  <div className={styles.listItemDescription}>
+                  <div className="profile-content__list-item-description">
                     <ClockIcon />
                     <small>{formatPlayTime(game)}</small>
                   </div>

src/renderer/src/pages/profile/profile-content/user-library-game-card.tsx

@@ -1,5 +1,4 @@
 import { UserGame } from "@types";
-import * as styles from "./profile-content.css";
 import HydraIcon from "@renderer/assets/icons/hydra.svg?react";
 import { useFormat } from "@renderer/hooks";
 import { useNavigate } from "react-router-dom";
@@ -10,12 +9,13 @@ import {
   formatDownloadProgress,
 } from "@renderer/helpers";
 import { userProfileContext } from "@renderer/context";
-import { vars } from "@renderer/theme.css";
 import { ClockIcon, TrophyIcon } from "@primer/octicons-react";
 import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants";
 import { useTranslation } from "react-i18next";
 import { steamUrlBuilder } from "@shared";
 
+import "./profile-content.scss";
+
 interface UserLibraryGameCardProps {
   game: UserGame;
   statIndex: number;
@@ -95,42 +95,18 @@ export function UserLibraryGameCard({
         display: "flex",
       }}
       title={game.title}
-      className={styles.game}
+      className="profile-content__game"
     >
       <button
         type="button"
         style={{
           cursor: "pointer",
         }}
-        className={styles.gameCover}
+        className="profile-content__game-cover"
         onClick={() => navigate(buildUserGameDetailsPath(game))}
       >
-        <div
+        <div className="profile-content__game-card-style">
-          style={{
+          <small className="profile-content__game-playtime">
-            position: "absolute",
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "flex-start",
-            justifyContent: "space-between",
-            height: "100%",
-            width: "100%",
-            background:
-              "linear-gradient(0deg, rgba(0, 0, 0, 0.70) 20%, transparent 100%)",
-            padding: 8,
-          }}
-        >
-          <small
-            style={{
-              backgroundColor: vars.color.background,
-              color: vars.color.muted,
-              border: `solid 1px ${vars.color.border}`,
-              borderRadius: 4,
-              display: "flex",
-              alignItems: "center",
-              gap: 4,
-              padding: "4px",
-            }}
-          >
             <ClockIcon size={11} />
             {formatPlayTime(game.playTimeInSeconds)}
           </small>
@@ -143,16 +119,7 @@ export function UserLibraryGameCard({
                 flexDirection: "column",
               }}
             >
-              <div
+              <div className="profile-content__game-card-stats-container">
-                style={{
-                  display: "flex",
-                  justifyContent: "space-between",
-                  marginBottom: 8,
-                  color: vars.color.muted,
-                  overflow: "hidden",
-                  height: 18,
-                }}
-              >
                 <div
                   style={{
                     display: "flex",
@@ -160,7 +127,7 @@ export function UserLibraryGameCard({
                   }}
                 >
                   <div
-                    className={styles.gameCardStats}
+                    className="profile-content__game-card-stats"
                     style={{
                       display: "flex",
                       alignItems: "center",
@@ -176,7 +143,7 @@ export function UserLibraryGameCard({
 
                   {game.achievementsPointsEarnedSum > 0 && (
                     <div
-                      className={styles.gameCardStats}
+                      className="profile-content__game-card-stats"
                       style={{
                         display: "flex",
                         gap: 5,
@@ -203,7 +170,7 @@ export function UserLibraryGameCard({
               <progress
                 max={1}
                 value={game.unlockedAchievementCount / game.achievementCount}
-                className={styles.achievementsProgressBar}
+                className="profile-content__achievements-progress-bar"
               />
             </div>
           )}

src/renderer/src/pages/profile/profile-content/user-stats-box.tsx

@@ -1,4 +1,3 @@
-import * as styles from "./profile-content.css";
 import { useCallback, useContext } from "react";
 import { userProfileContext } from "@renderer/context";
 import { useTranslation } from "react-i18next";
@@ -7,7 +6,8 @@ import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants";
 import HydraIcon from "@renderer/assets/icons/hydra.svg?react";
 import { useSubscription } from "@renderer/hooks/use-subscription";
 import { ClockIcon, TrophyIcon } from "@primer/octicons-react";
-import { vars } from "@renderer/theme.css";
+
+import "./profile-content.scss";
 
 export function UserStatsBox() {
   const { showHydraCloudModal } = useSubscription();
@@ -36,22 +36,22 @@ export function UserStatsBox() {
 
   return (
     <div>
-      <div className={styles.sectionHeader}>
+      <div className="profile-content__section-header">
         <h2>{t("stats")}</h2>
       </div>
 
-      <div className={styles.box}>
+      <div className="profile-content__box">
-        <ul className={styles.list}>
+        <ul className="profile-content__list">
           {(isMe || userStats.unlockedAchievementSum !== undefined) && (
-            <li className={styles.statsListItem}>
+            <li className="profile-content__list-item">
-              <h3 className={styles.listItemTitle}>
+              <h3 className="profile-content__list-item-title">
                 {t("achievements_unlocked")}
               </h3>
               {userStats.unlockedAchievementSum !== undefined ? (
                 <div
                   style={{ display: "flex", justifyContent: "space-between" }}
                 >
-                  <p className={styles.listItemDescription}>
+                  <p className="profile-content__list-item-description">
                     <TrophyIcon /> {userStats.unlockedAchievementSum}{" "}
                     {t("achievements")}
                   </p>
@@ -60,9 +60,9 @@ export function UserStatsBox() {
                 <button
                   type="button"
                   onClick={() => showHydraCloudModal("achievements")}
-                  className={styles.link}
+                  className="profile-content__link"
                 >
-                  <small style={{ color: vars.color.warning }}>
+                  <small style={{ color: "#ffc107" }}>
                     {t("show_achievements_on_profile")}
                   </small>
                 </button>
@@ -71,13 +71,15 @@ export function UserStatsBox() {
           )}
 
           {(isMe || userStats.achievementsPointsEarnedSum !== undefined) && (
-            <li className={styles.statsListItem}>
+            <li className="profile-content__stats-list-item">
-              <h3 className={styles.listItemTitle}>{t("earned_points")}</h3>
+              <h3 className="profile-content__list-item-title">
+                {t("earned_points")}
+              </h3>
               {userStats.achievementsPointsEarnedSum !== undefined ? (
                 <div
                   style={{ display: "flex", justifyContent: "space-between" }}
                 >
-                  <p className={styles.listItemDescription}>
+                  <p className="profile-content__list-item-description">
                     <HydraIcon width={20} height={20} />
                     {numberFormatter.format(
                       userStats.achievementsPointsEarnedSum.value
@@ -94,9 +96,9 @@ export function UserStatsBox() {
                 <button
                   type="button"
                   onClick={() => showHydraCloudModal("achievements-points")}
-                  className={styles.link}
+                  className="profile-content__link"
                 >
-                  <small style={{ color: vars.color.warning }}>
+                  <small style={{ color: "#ffc107" }}>
                     {t("show_points_on_profile")}
                   </small>
                 </button>
@@ -104,10 +106,12 @@ export function UserStatsBox() {
             </li>
           )}
 
-          <li className={styles.statsListItem}>
+          <li className="profile-content__list-item">
-            <h3 className={styles.listItemTitle}>{t("total_play_time")}</h3>
+            <h3 className="profile-content__list-item-title">
+              {t("total_play_time")}
+            </h3>
             <div style={{ display: "flex", justifyContent: "space-between" }}>
-              <p className={styles.listItemDescription}>
+              <p className="profile-content__list-item-description">
                 <ClockIcon />
                 {formatPlayTime(userStats.totalPlayTimeInSeconds.value)}
               </p>

src/renderer/src/pages/profile/profile-hero/profile-hero.scss

@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@import "../../../scss/variables";
 
 .profile-hero {
   &__content-box {
@@ -89,4 +89,11 @@
     gap: $spacing-unit;
     align-items: center;
   }
+
+  &__actions {
+    display: flex;
+    gap: #{$spacing-unit};
+    justify-content: flex-end;
+    flex: 1;
+  }
 }

src/renderer/src/pages/profile/profile-hero/profile-hero.tsx

@@ -1,6 +1,5 @@
-import { SPACING_UNIT, vars } from "@renderer/theme.css";
+import "./profile-hero.scss"
 
-import * as styles from "./profile-hero.css";
 import { useCallback, useContext, useMemo, useState } from "react";
 import { userProfileContext } from "@renderer/context";
 import {
@@ -127,7 +126,7 @@ export function ProfileHero() {
             theme="outline"
             onClick={() => setShowEditProfileModal(true)}
             disabled={isPerformingAction}
-            style={{ borderColor: vars.color.body }}
+            style={{ borderColor: "#8e919b" }}
           >
             <PencilIcon />
             {t("edit_profile")}
@@ -152,7 +151,7 @@ export function ProfileHero() {
             theme="outline"
             onClick={() => handleFriendAction(userProfile.id, "SEND")}
             disabled={isPerformingAction}
-            style={{ borderColor: vars.color.body }}
+            style={{ borderColor: "#8e919b" }}
           >
             <PersonAddIcon />
             {t("add_friend")}
@@ -187,7 +186,7 @@ export function ProfileHero() {
               handleFriendAction(userProfile.id, "UNDO_FRIENDSHIP")
             }
             disabled={isPerformingAction}
-            style={{ borderColor: vars.color.body }}
+            style={{ borderColor: "#8e919b" }}
           >
             <XCircleFillIcon />
             {t("undo_friendship")}
@@ -204,7 +203,7 @@ export function ProfileHero() {
             handleFriendAction(userProfile.relation!.BId, "CANCEL")
           }
           disabled={isPerformingAction}
-          style={{ borderColor: vars.color.body }}
+          style={{ borderColor: "#8e919b" }}
         >
           <XCircleFillIcon /> {t("cancel_request")}
         </Button>
@@ -219,7 +218,7 @@ export function ProfileHero() {
             handleFriendAction(userProfile.relation!.AId, "ACCEPTED")
           }
           disabled={isPerformingAction}
-          style={{ borderColor: vars.color.body }}
+          style={{ borderColor: "#8e919b" }}
         >
           <CheckCircleFillIcon /> {t("accept_request")}
         </Button>
@@ -279,7 +278,7 @@ export function ProfileHero() {
       />
 
       <section
-        className={styles.profileContentBox}
+        className="profile-hero__content-box"
         style={{ background: heroBackground }}
       >
         {backgroundImage && (
@@ -303,10 +302,10 @@ export function ProfileHero() {
             zIndex: 1,
           }}
         >
-          <div className={styles.userInformation}>
+          <div className="profile-hero__user-information">
             <button
               type="button"
-              className={styles.profileAvatarButton}
+              className="profile-hero__avatar-button"
               onClick={handleAvatarClick}
             >
               <Avatar
@@ -316,9 +315,9 @@ export function ProfileHero() {
               />
             </button>
 
-            <div className={styles.profileInformation}>
+            <div className="profile-hero__information">
               {userProfile ? (
-                <h2 className={styles.profileDisplayName}>
+                <h2 className="profile-hero__display-name">
                   {userProfile?.displayName}
                 </h2>
               ) : (
@@ -326,8 +325,8 @@ export function ProfileHero() {
               )}
 
               {currentGame && (
-                <div className={styles.currentGameWrapper}>
+                <div className="profile-hero__current-game-wrapper">
-                  <div className={styles.currentGameDetails}>
+                  <div className="profile-hero__current-game-details">
                     <Link
                       to={buildGameDetailsPath({
                         ...currentGame,
@@ -358,18 +357,13 @@ export function ProfileHero() {
         </div>
 
         <div
-          className={styles.heroPanel}
+          className="profile-hero__hero-panel"
           style={{
             background: backgroundImage ? backgroundImageLayer : heroBackground,
           }}
         >
           <div
-            style={{
+            className="profile-hero__actions"
-              display: "flex",
-              gap: `${SPACING_UNIT}px`,
-              justifyContent: "flex-end",
-              flex: 1,
-            }}
           >
             {profileActions}
           </div>

src/renderer/src/pages/profile/profile.tsx

@@ -1,8 +1,9 @@
 import { ProfileContent } from "./profile-content/profile-content";
 import { SkeletonTheme } from "react-loading-skeleton";
-import { vars } from "@renderer/theme.css";
 
-import * as styles from "./profile.css";
+import "../../_theme.scss"
+import "./profile.scss";
+
 import { UserProfileContextProvider } from "@renderer/context";
 import { useParams } from "react-router-dom";
 
@@ -11,8 +12,8 @@ export default function Profile() {
 
   return (
     <UserProfileContextProvider userId={userId!}>
-      <SkeletonTheme baseColor={vars.color.background} highlightColor="#444">
+      <SkeletonTheme baseColor="#1c1c1c" highlightColor="#444">
-        <div className={styles.wrapper}>
+        <div className="profile__wrapper">
           <ProfileContent />
         </div>
       </SkeletonTheme>

src/renderer/src/pages/profile/report-profile/report-profile.scss

@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@import "../../../scss/variables";
 
 .report-profile {
   &__report-button {
@@ -10,4 +10,14 @@
     align-items: center;
     font-size: 12px;
   }
+  &__button {
+    margin-top: $spacing-unit;
+    align-self: flex-end;
+  }
+
+  &__report-modal {
+    display: flex;
+    flex-direction: column;
+    gap: #{$spacing-unit * 2};
+  }
 }

src/renderer/src/pages/profile/report-profile/report-profile.tsx

@@ -1,16 +1,16 @@
 import { ReportIcon } from "@primer/octicons-react";
 
-import * as styles from "./report-profile.css";
 import { Button, Modal, SelectField, TextField } from "@renderer/components";
 import { useCallback, useContext, useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import * as yup from "yup";
-import { SPACING_UNIT } from "@renderer/theme.css";
 import { userProfileContext } from "@renderer/context";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { useToast } from "@renderer/hooks";
 
+import "./report-profile.scss";
+
 const reportReasons = ["hate", "sexual_content", "violence", "spam", "other"];
 
 interface FormValues {
@@ -76,11 +76,7 @@ export function ReportProfile() {
         clickOutsideToClose={false}
       >
         <form
-          style={{
+          className="report-profile__report-modal"
-            display: "flex",
-            flexDirection: "column",
-            gap: `${SPACING_UNIT * 2}px`,
-          }}
         >
           <Controller
             control={control}
@@ -109,7 +105,7 @@ export function ReportProfile() {
           />
 
           <Button
-            style={{ marginTop: `${SPACING_UNIT}px`, alignSelf: "flex-end" }}
+            className="report-profile__button"
             onClick={handleSubmit(onSubmit)}
           >
             {t("report")}
@@ -119,7 +115,7 @@ export function ReportProfile() {
 
       <button
         type="button"
-        className={styles.reportButton}
+        className="report-profile__report-button"
         onClick={() => setShowReportProfileModal(true)}
         disabled={isSubmitting}
       >

src/renderer/src/pages/profile/upload-background-image-button/upload-background-image-button.scss

@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@import "../../../scss/variables";
 
 .upload-background-image-button {
   position: absolute;

src/renderer/src/pages/profile/upload-background-image-button/upload-background-image-button.tsx

@@ -3,10 +3,11 @@ import { Button } from "@renderer/components";
 import { useContext, useState } from "react";
 import { userProfileContext } from "@renderer/context";
 
-import * as styles from "./upload-background-image-button.css";
 import { useToast, useUserDetails } from "@renderer/hooks";
 import { useTranslation } from "react-i18next";
 
+import "./upload-background-image-button.scss";
+
 export function UploadBackgroundImageButton() {
   const [isUploadingBackgroundImage, setIsUploadingBackgorundImage] =
     useState(false);
@@ -52,7 +53,7 @@ export function UploadBackgroundImageButton() {
   return (
     <Button
       theme="outline"
-      className={styles.uploadBackgroundImageButton}
+      className="upload-background-image-button"
       onClick={handleChangeCoverClick}
       disabled={isUploadingBackgroundImage}
     >

src/renderer/src/pages/settings/add-download-source-modal.scss

@@ -0,0 +1,23 @@
+@import "../../scss/variables";
+
+.download-source {
+    &__add-source {
+        display: flex;
+        flex-direction: column;
+        gap: #{$spacing-unit};
+        min-width: 500px,
+    }
+
+    &__validation-result {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: #{$spacing-unit * 3};
+    }
+
+    &__input {
+        display: flex;
+        flex-direction: column;
+        gap: #{$spacing-unit / 2};
+    }
+}

src/renderer/src/pages/settings/add-download-source-modal.tsx

@@ -2,7 +2,6 @@ import { useCallback, useContext, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { Button, Modal, TextField } from "@renderer/components";
-import { SPACING_UNIT } from "@renderer/theme.css";
 import { settingsContext } from "@renderer/context";
 import { useForm } from "react-hook-form";
 
@@ -139,12 +138,7 @@ export function AddDownloadSourceModal({
       onClose={onClose}
     >
       <div
-        style={{
+        className="download-source__add-source"
-          display: "flex",
-          flexDirection: "column",
-          gap: `${SPACING_UNIT}px`,
-          minWidth: "500px",
-        }}
       >
         <TextField
           {...register("url")}
@@ -166,19 +160,10 @@ export function AddDownloadSourceModal({
 
         {validationResult && (
           <div
-            style={{
+            className="download-source__validation-result"
-              display: "flex",
-              justifyContent: "space-between",
-              alignItems: "center",
-              marginTop: `${SPACING_UNIT * 3}px`,
-            }}
           >
             <div
-              style={{
+              className="download-source__input"
-                display: "flex",
-                flexDirection: "column",
-                gap: `${SPACING_UNIT / 2}px`,
-              }}
             >
               <h4>{validationResult?.name}</h4>
               <small>

src/renderer/src/pages/settings/appearance.tsx

@@ -5,7 +5,7 @@ import { AddThemeModal } from "./add-theme-modal";
 import { settingsContext } from "@renderer/context";
 import { PlusCircleIcon, GlobeIcon, PencilIcon } from "@primer/octicons-react";
 
-import * as styles from "./settings-download-sources.css";
+import "./settings-download-sources";
 
 export function SettingsAppearance() {
   const { t } = useTranslation("settings");
@@ -32,7 +32,7 @@ export function SettingsAppearance() {
 
       <p>{t("themes_description")}</p>
 
-      <div className={styles.downloadSourcesHeader}>
+      <div className="settings-download-sources__download-source-item-header">
         <div style={{ display: "flex", gap: "8px" }}>
           <Button type="button" theme="outline">
             <GlobeIcon />

src/renderer/src/pages/settings/settings-account.scss

@@ -37,4 +37,24 @@
     align-items: flex-start;
     gap: $spacing-unit;
   }
+
+  &__actions {
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    gap: #{$spacing-unit};
+    margin-top: #{$spacing-unit * 2};
+  }
+
+  &__subscription-description {
+    display: flex;
+    flex-direction: column;
+    gap: #{$spacing-unit};
+  }
+
+  &__subscription {
+    display: flex;
+    flex-direction: column;
+    gap: #{$spacing-unit * 2};
+  }
 }

src/renderer/src/pages/settings/settings-account.tsx

@@ -1,9 +1,7 @@
 import { Avatar, Button, SelectField } from "@renderer/components";
-import { SPACING_UNIT } from "@renderer/theme.css";
 import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
-import * as styles from "./settings-account.css";
 import { useDate, useToast, useUserDetails } from "@renderer/hooks";
 import { useCallback, useContext, useEffect, useState } from "react";
 import {
@@ -15,6 +13,8 @@ import {
 import { settingsContext } from "@renderer/context";
 import { AuthPage } from "@shared";
 
+import "./settings-account.scss";
+
 interface FormValues {
   profileVisibility: "PUBLIC" | "FRIENDS" | "PRIVATE";
 }
@@ -145,7 +145,7 @@ export function SettingsAccount() {
   if (!userDetails) return null;
 
   return (
-    <form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
+    <form className="settings-account__form" onSubmit={handleSubmit(onSubmit)}>
       <Controller
         control={control}
         name="profileVisibility"
@@ -181,15 +181,7 @@ export function SettingsAccount() {
         <h4>{t("current_email")}</h4>
         <p>{userDetails?.email ?? t("no_email_account")}</p>
 
-        <div
+        <div className="settings-account__actions">
-          style={{
-            display: "flex",
-            justifyContent: "start",
-            alignItems: "center",
-            gap: `${SPACING_UNIT}px`,
-            marginTop: `${SPACING_UNIT * 2}px`,
-          }}
-        >
           <Button
             theme="outline"
             onClick={() => window.electron.openAuthWindow(AuthPage.UpdateEmail)}
@@ -210,21 +202,9 @@ export function SettingsAccount() {
         </div>
       </section>
 
-      <section
+      <section className="settings-account__subscription">
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: `${SPACING_UNIT * 2}px`,
-        }}
-      >
         <h3>Hydra Cloud</h3>
-        <div
+        <div className="settings-account__subscription-description">
-          style={{
-            display: "flex",
-            flexDirection: "column",
-            gap: `${SPACING_UNIT}px`,
-          }}
-        >
           {getHydraCloudSectionContent().description}
         </div>
 
@@ -240,27 +220,15 @@ export function SettingsAccount() {
         </Button>
       </section>
 
-      <section
+      <section className="settings-account__subscription-description">
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: `${SPACING_UNIT * 2}px`,
-        }}
-      >
         <h3>{t("blocked_users")}</h3>
 
         {blockedUsers.length > 0 ? (
-          <ul className={styles.blockedUsersList}>
+          <ul className="settings-account__blocked-users-list">
             {blockedUsers.map((user) => {
               return (
-                <li key={user.id} className={styles.blockedUser}>
+                <li key={user.id} className="settings-account__blocked-user">
-                  <div
+                  <div className="settings-account__subscription">
-                    style={{
-                      display: "flex",
-                      gap: `${SPACING_UNIT}px`,
-                      alignItems: "center",
-                    }}
-                  >
                     <Avatar
                       style={{ filter: "grayscale(100%)" }}
                       size={32}
@@ -272,7 +240,7 @@ export function SettingsAccount() {
 
                   <button
                     type="button"
-                    className={styles.unblockButton}
+                    className="settings-account__unblock-button"
                     onClick={() => handleUnblockClick(user.id)}
                     disabled={isUnblocking}
                   >

src/renderer/src/pages/settings/settings-download-sources.tsx

@@ -3,7 +3,6 @@ import { useContext, useEffect, useState } from "react";
 import { TextField, Button, Badge } from "@renderer/components";
 import { useTranslation } from "react-i18next";
 
-import * as styles from "./settings-download-sources.css";
 import type { DownloadSource } from "@types";
 import { NoEntryIcon, PlusCircleIcon, SyncIcon } from "@primer/octicons-react";
 import { AddDownloadSourceModal } from "./add-download-source-modal";
@@ -14,6 +13,7 @@ import { downloadSourcesTable } from "@renderer/dexie";
 import { downloadSourcesWorker } from "@renderer/workers";
 import { useNavigate } from "react-router-dom";
 import { setFilters, clearFilters } from "@renderer/features";
+import "./settings-download-sources.scss";
 
 export function SettingsDownloadSources() {
   const [showAddDownloadSourceModal, setShowAddDownloadSourceModal] =
@@ -118,7 +118,7 @@ export function SettingsDownloadSources() {
 
       <p>{t("download_sources_description")}</p>
 
-      <div className={styles.downloadSourcesHeader}>
+      <div className="settings-download-sources__download-sources-header">
         <Button
           type="button"
           theme="outline"
@@ -144,15 +144,13 @@ export function SettingsDownloadSources() {
         </Button>
       </div>
 
-      <ul className={styles.downloadSources}>
+      <ul className="settings-download-sources__download-sources">
         {downloadSources.map((downloadSource) => (
           <li
             key={downloadSource.id}
-            className={styles.downloadSourceItem({
+            className="settings-download-sources__download-source-item"
-              isSyncing: isSyncingDownloadSources,
-            })}
           >
-            <div className={styles.downloadSourceItemHeader}>
+            <div className="settings-download-sources__download-source-item-header">
               <h2>{downloadSource.name}</h2>
 
               <div style={{ display: "flex" }}>
@@ -161,7 +159,7 @@ export function SettingsDownloadSources() {
 
               <button
                 type="button"
-                className={styles.navigateToCatalogueButton}
+                className="settings-download-sources__navigate-to-catalogue-button"
                 disabled={!downloadSource.fingerprint}
                 onClick={() => navigateToCatalogue(downloadSource.fingerprint)}
               >

src/renderer/src/pages/settings/settings-real-debrid.scss

@@ -10,4 +10,13 @@
   &__description {
     margin-bottom: #{$spacing-unit * 2};
   }
+
+  &__field-spacing {
+    margin-top: #{$spacing-unit}; 
+  }
+
+  &__submit-button {
+    align-self: flex-end;
+    margin-top: #{$spacing-unit * 2};
+  }
 }

src/renderer/src/pages/settings/settings-real-debrid.tsx

@@ -2,12 +2,11 @@ import { useContext, useEffect, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 
 import { Button, CheckboxField, Link, TextField } from "@renderer/components";
-import * as styles from "./settings-real-debrid.css";
 
 import { useAppSelector, useToast } from "@renderer/hooks";
 
-import { SPACING_UNIT } from "@renderer/theme.css";
 import { settingsContext } from "@renderer/context";
+import "./settings-real-debrid.scss"
 
 const REAL_DEBRID_API_TOKEN_URL = "https://real-debrid.com/apitoken";
 
@@ -78,8 +77,8 @@ export function SettingsRealDebrid() {
     (form.useRealDebrid && !form.realDebridApiToken) || isLoading;
 
   return (
-    <form className={styles.form} onSubmit={handleFormSubmit}>
+    <form className="settings-real-debrid__form" onSubmit={handleFormSubmit}>
-      <p className={styles.description}>{t("real_debrid_description")}</p>
+      <p className="settings-real-debrid__description">{t("real_debrid_description")}</p>
 
       <CheckboxField
         label={t("enable_real_debrid")}
@@ -101,7 +100,7 @@ export function SettingsRealDebrid() {
             setForm({ ...form, realDebridApiToken: event.target.value })
           }
           placeholder="API Token"
-          containerProps={{ style: { marginTop: `${SPACING_UNIT}px` } }}
+          containerProps={{ className: "settings-real-debrid__field-spacing" }}
           hint={
             <Trans i18nKey="real_debrid_api_token_hint" ns="settings">
               <Link to={REAL_DEBRID_API_TOKEN_URL} />
@@ -112,7 +111,7 @@ export function SettingsRealDebrid() {
 
       <Button
         type="submit"
-        style={{ alignSelf: "flex-end", marginTop: `${SPACING_UNIT * 2}px` }}
+        className="settings-real-debrid__submit-button"
         disabled={isButtonDisabled}
       >
         {t("save_changes")}

src/renderer/src/pages/settings/settings.tsx

@@ -1,6 +1,6 @@
 import { Button } from "@renderer/components";
 
-import * as styles from "./settings.css";
+import "./settings.scss"; 
 import { useTranslation } from "react-i18next";
 import { SettingsRealDebrid } from "./settings-real-debrid";
 import { SettingsGeneral } from "./settings-general";
@@ -63,9 +63,9 @@ export default function Settings() {
           };
 
           return (
-            <section className={styles.container}>
+            <section className="settings__container">
-              <div className={styles.content}>
+              <div className="settings__content">
-                <section className={styles.settingsCategories}>
+                <section className="settings__categories">
                   {categories.map((category, index) => (
                     <Button
                       key={category}

src/renderer/src/pages/shared-modals/hydra-cloud/hydra-cloud-modal.tsx

@@ -1,6 +1,6 @@
 import { Button, Modal } from "@renderer/components";
-import { SPACING_UNIT } from "@renderer/theme.css";
 import { useTranslation } from "react-i18next";
+import "./hydra-cloud.scss";
 
 export interface HydraCloudModalProps {
   feature: string;
@@ -23,12 +23,7 @@ export const HydraCloudModal = ({
     <Modal visible={visible} title={t("hydra_cloud")} onClose={onClose}>
       <div
         data-hydra-cloud-feature={feature}
-        style={{
+        className="hydra-cloud__on-close"
-          display: "flex",
-          width: "500px",
-          flexDirection: "column",
-          gap: `${SPACING_UNIT * 2}px`,
-        }}
       >
         {t("hydra_cloud_feature_found")}
         <Button onClick={handleClickOpenCheckout}>{t("learn_more")}</Button>

src/renderer/src/pages/shared-modals/hydra-cloud/hydra-cloud.scss

@@ -0,0 +1,10 @@
+@import "../../../scss/variables";
+
+.hydra-cloud {
+    &__on-close {
+        display: flex;
+        width: 500px;
+        flex-direction: "column";
+        gap: #{$spacing-unit * 2};
+    }
+}

src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-item.tsx

@@ -58,14 +58,14 @@ export const UserFriendItem = (props: UserFriendItemProps) => {
       return (
         <>
           <button
-            className={styles.acceptRequestButton}
+            className="user-friend-modal__accept-request-button"
             onClick={() => props.onClickAcceptRequest(userId)}
             title={t("accept_request")}
           >
             <CheckCircleIcon size={28} />
           </button>
           <button
-            className={styles.cancelRequestButton}
+            className="user-friend-modal__cancel-request-button"
             onClick={() => props.onClickRefuseRequest(userId)}
             title={t("ignore_request")}
           >
@@ -78,7 +78,7 @@ export const UserFriendItem = (props: UserFriendItemProps) => {
     if (type === "ACCEPTED") {
       return (
         <button
-          className={styles.cancelRequestButton}
+          className="user-friend-modal__cancel-request-button"
           onClick={() => props.onClickUndoFriendship(userId)}
           title={t("undo_friendship")}
         >
@@ -90,7 +90,7 @@ export const UserFriendItem = (props: UserFriendItemProps) => {
     if (type === "BLOCKED") {
       return (
         <button
-          className={styles.cancelRequestButton}
+          className="user-friend-modal__cancel-request-button"
           onClick={() => props.onClickUnblock(userId)}
           title={t("unblock")}
         >
@@ -104,8 +104,8 @@ export const UserFriendItem = (props: UserFriendItemProps) => {
 
   if (type === "BLOCKED") {
     return (
-      <div className={styles.friendListContainer}>
+      <div className="user-friend-modal__friend-list-container">
-        <div className={styles.friendListButton} style={{ cursor: "inherit" }}>
+        <div className="user-friend-modal__friend-list-button" style={{ cursor: "inherit" }}>
           <Avatar size={35} src={profileImageUrl} alt={displayName} />
 
           <div
@@ -117,18 +117,13 @@ export const UserFriendItem = (props: UserFriendItemProps) => {
               minWidth: 0,
             }}
           >
-            <p className={styles.friendListDisplayName}>{displayName}</p>
+            <p className="user-friend-modal__friend-list-display-name">
+              {displayName}
+            </p>
           </div>
         </div>
 
-        <div
+        <div className="user-friend-modal__friend-list-actions">
-          style={{
-            position: "absolute",
-            right: "8px",
-            display: "flex",
-            gap: `${SPACING_UNIT}px`,
-          }}
-        >
           {getRequestActions()}
         </div>
       </div>
@@ -136,10 +131,10 @@ export const UserFriendItem = (props: UserFriendItemProps) => {
   }
 
   return (
-    <div className={styles.friendListContainer}>
+    <div className="user-friend-modal__friend-list-container">
       <button
         type="button"
-        className={styles.friendListButton}
+        className="user-friend-modal__friend-list-button"
         onClick={() => props.onClickItem(userId)}
       >
         <Avatar size={35} src={profileImageUrl} alt={displayName} />
@@ -152,19 +147,14 @@ export const UserFriendItem = (props: UserFriendItemProps) => {
             minWidth: 0,
           }}
         >
-          <p className={styles.friendListDisplayName}>{displayName}</p>
+          <p className="user-friend-modal__friend-list-display-name">
+            {displayName}
+          </p>
           {getRequestDescription()}
         </div>
       </button>
 
-      <div
+      <div className="user-friend-modal__friend-list-actions">
-        style={{
-          position: "absolute",
-          right: "8px",
-          display: "flex",
-          gap: `${SPACING_UNIT}px`,
-        }}
-      >
         {getRequestActions()}
       </div>
     </div>

src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-add-friend.tsx

@@ -1,10 +1,10 @@
 import { Button, TextField } from "@renderer/components";
 import { useToast, useUserDetails } from "@renderer/hooks";
-import { SPACING_UNIT } from "@renderer/theme.css";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { UserFriendItem } from "./user-friend-item";
+import "./user-friend-modal.scss";
 
 export interface UserFriendModalAddFriendProps {
   closeModal: () => void;
@@ -76,26 +76,20 @@ export const UserFriendModalAddFriend = ({
 
   return (
     <>
-      <div
+      <div className="user-friend-modal__add-friend-controls">
-        style={{
-          display: "flex",
-          flexDirection: "row",
-          justifyContent: "center",
-          alignItems: "center",
-          gap: `${SPACING_UNIT}px`,
-        }}
-      >
         <TextField
           label={t("friend_code")}
           value={friendCode}
           minLength={8}
           maxLength={8}
-          containerProps={{ style: { width: "100%" } }}
+          containerProps={{
+            className: "user-friend-modal__text-field-container",
+          }}
           onChange={(e) => setFriendCode(e.target.value)}
         />
         <Button
           disabled={isAddingFriend}
-          style={{ alignSelf: "end" }}
+          className="user-friend-modal__button-align"
           type="button"
           onClick={handleClickAddFriend}
         >
@@ -105,20 +99,14 @@ export const UserFriendModalAddFriend = ({
         <Button
           onClick={handleClickSeeProfile}
           disabled={isAddingFriend}
-          style={{ alignSelf: "end" }}
+          className="user-friend-modal__button-align"
           type="button"
         >
           {t("see_profile")}
         </Button>
       </div>
 
-      <div
+      <div className="user-friend-modal__pending-container">
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: `${SPACING_UNIT * 2}px`,
-        }}
-      >
         <h3>{t("pending")}</h3>
         {friendRequests.length === 0 && <p>{t("no_pending_invites")}</p>}
         {friendRequests.map((request) => {
@@ -139,4 +127,4 @@ export const UserFriendModalAddFriend = ({
       </div>
     </>
   );
-};
+};

src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-list.tsx

@@ -1,4 +1,3 @@
-import { SPACING_UNIT, vars } from "@renderer/theme.css";
 import type { UserFriend } from "@types";
 import { useEffect, useRef, useState } from "react";
 import { UserFriendItem } from "./user-friend-item";
@@ -6,6 +5,7 @@ import { useNavigate } from "react-router-dom";
 import { useToast, useUserDetails } from "@renderer/hooks";
 import { useTranslation } from "react-i18next";
 import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
+import "./user-friend-modal.scss";
 
 export interface UserFriendModalListProps {
   userId: string;
@@ -94,18 +94,17 @@ export const UserFriendModalList = ({
   };
 
   return (
-    <SkeletonTheme baseColor={vars.color.background} highlightColor="#444">
+    <SkeletonTheme baseColor="var(--color-background)" highlightColor="#444">
       <div
         ref={listContainer}
+        className="user-friend-modal__friend-list-container"
         style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: `${SPACING_UNIT * 2}px`,
           maxHeight: "400px",
           overflowY: "scroll",
         }}
       >
-        {!isLoading && friends.length === 0 && <p>{t("no_friends_added")}</p>}
+        {!isLoading && friends.length === 0 &&
+          <p className="user-friend-modal__friend-list-display-name">{t("no_friends_added")}</p>}
         {friends.map((friend) => {
           return (
             <UserFriendItem

src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.scss

@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@import "../../../scss/variables";
 
 .user-friend-modal {
   &__friend-list-display-name {
@@ -40,6 +40,13 @@
     padding: 0 $spacing-unit;
   }
 
+  &__friend-list-actions {
+    position: "absolute";
+    right: "8px";
+    display: "flex";
+    gap: #{$spacing-unit}
+  }
+
   &__friend-request-item {
     color: $body-color;
 
@@ -82,4 +89,25 @@
       color: $muted-color;
     }
   }
+    &__add-friend-controls {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: #{$spacing-unit};
+  }
+
+  &__text-field-container {
+    width: 100%;
+  }
+
+  &__button-align {
+    align-self: end;
+  }
+
+  &__pending-container {
+    display: flex;
+    flex-direction: column;
+    gap: #{$spacing-unit * 2};
+  }
 }

src/renderer/src/scss/_variables.scss

@@ -36,3 +36,8 @@ $body-font-size: 14px;
 $small-font-size: 12px;
 
 $app-container: app-container;
+
+:root {
+    --background-color: #{$background-color};
+    --spacing-unit: #{$spacing-unit};
+}