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

src/renderer/src/pages/home/home.scss

@@ -0,0 +1,103 @@
+@use "../../scss/globals.scss";
+
+.home {
+  &__content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: calc(globals.$spacing-unit * 3);
+    padding: calc(globals.$spacing-unit * 3);
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  &__header {
+    display: flex;
+    gap: globals.$spacing-unit;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &__buttons-list {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    gap: globals.$spacing-unit;
+  }
+
+  &__cards {
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    gap: calc(globals.$spacing-unit * 2);
+    transition: all ease 0.2s;
+
+    @media (min-width: 768px) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media (min-width: 1250px) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    @media (min-width: 1600px) {
+      grid-template-columns: repeat(4, 1fr);
+    }
+  }
+
+  &__card-skeleton {
+    width: 100%;
+    height: 180px;
+    box-shadow: 0px 0px 15px 0px #000000;
+    overflow: hidden;
+    border-radius: 4px;
+    transition: all ease 0.2s;
+    z-index: 1;
+
+    &:active {
+      opacity: globals.$active-opacity;
+    }
+  }
+
+  &__no-results {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 16px;
+    grid-column: 1 / -1;
+  }
+
+  &__flame-icon {
+    width: 30px;
+    top: -10px;
+    left: -5px;
+    position: absolute;
+  }
+
+  &__stars-icon {
+    width: 70px;
+    position: absolute;
+    top: -28px;
+    left: -27px;
+  }
+
+  &__icon-wrapper {
+    width: 16px;
+    height: 16px;
+    position: relative;
+  }
+
+  &__title-icon {
+    width: 24px;
+    height: 24px;
+    position: relative;
+  }
+
+  &__title {
+    display: flex;
+    gap: globals.$spacing-unit;
+  }
+}

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 { vars } from "@renderer/theme.css";
-import { SPACING_UNIT, vars } from "@renderer/theme.css";
 import { buildGameDetailsPath } from "@renderer/helpers";
 import { CatalogueCategory } from "@shared";
+import "./home.scss";
 
 export default function Home() {
   const { t } = useTranslation("home");
@@ -95,13 +95,13 @@ export default function Home() {
 
   return (
     <SkeletonTheme baseColor={vars.color.background} 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
@@ -115,19 +115,17 @@ export default function Home() {
                   onMouseLeave={() => handleMouseLeaveCategory(category)}
                 >
                   {category === CatalogueCategory.Hot && (
-                    <div
+                    <div className="home__icon-wrapper">
-                      style={{ width: 16, height: 16, position: "relative" }}
-                    >
                       <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>
@@ -144,29 +142,24 @@ export default function Home() {
             theme="outline"
             disabled={!randomGame}
           >
-            <div style={{ width: 16, height: 16, position: "relative" }}>
+            <div className="home__icon-wrapper">
               <img
                 src={starsIconAnimated}
                 alt="Stars animation"
-                style={{ width: 70, position: "absolute", top: -28, left: -27 }}
+                className="home__stars-icon"
               />
             </div>
             {t("surprise_me")}
           </Button>
         </section>
 
-        <h2 style={{ display: "flex", gap: SPACING_UNIT }}>
+        <h2 className="home__title">
           {currentCatalogueCategory === CatalogueCategory.Hot && (
-            <div style={{ width: 24, height: 24, position: "relative" }}>
+            <div className="home__title-icon">
               <img
                 src={flameIconAnimated}
                 alt="Flame animation"
-                style={{
+                className="home__flame-icon"
-                  width: 40,
-                  top: -10,
-                  left: -5,
-                  position: "absolute",
-                }}
               />
             </div>
           )}
@@ -174,10 +167,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