full migration to scss

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

@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
 import { EyeClosedIcon } from "@primer/octicons-react";
 import HydraIcon from "@renderer/assets/icons/hydra.svg?react";
 import { useSubscription } from "@renderer/hooks/use-subscription";
+import classNames from "classnames";
 import "./achievements.scss";
 import "../../scss/_variables.scss";
 

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

@@ -18,6 +18,7 @@ import { AchievementList } from "./achievement-list";
 import { AchievementPanel } from "./achievement-panel";
 import { ComparedAchievementPanel } from "./compared-achievement-panel";
 import { useSubscription } from "@renderer/hooks/use-subscription";
+import classNames from "classnames";
 import "./achievements.scss";
 import "../../scss/_variables.scss";
 

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

@@ -6,6 +6,7 @@ import {
 } from "@primer/octicons-react";
 import { useDate } from "@renderer/hooks";
 import { useTranslation } from "react-i18next";
+import classNames from "classnames";
 import "./achievements.scss";
 import "../../scss/_variables.scss";
 

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

@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 import HydraIcon from "@renderer/assets/icons/hydra.svg?react";
 import { ComparedAchievements } from "@types";
 import { useUserDetails } from "@renderer/hooks";
+import classNames from "classnames";
 
 import "./achievement-panel.scss";
 import "../../scss/_variables.scss";

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

@@ -1,6 +1,7 @@
 import { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { ChevronRightIcon, ChevronLeftIcon } from "@primer/octicons-react";
+import classNames from "classnames";
 
 import "./gallery-slider.scss";
 import { gameDetailsContext } from "@renderer/context";

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

@@ -8,6 +8,7 @@ import "./hero-panel.scss";
 import { HeroPanelPlaytime } from "./hero-panel-playtime";
 
 import { gameDetailsContext } from "@renderer/context";
+import classNames from "classnames";
 
 export interface HeroPanelProps {
   isHeaderStuck: boolean;

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

@@ -1,5 +1,6 @@
 import { ChevronDownIcon } from "@primer/octicons-react";
 import { useRef, useState } from "react";
+import classNames from "classnames";
 
 import "./sidebar-section.scss";
 

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

@@ -6,6 +6,7 @@ import type {
 } from "@types";
 import { useTranslation } from "react-i18next";
 import { Button, Link } from "@renderer/components";
+import classNames from "classnames";
 
 import { gameDetailsContext } from "@renderer/context";
 import { useDate, useFormat, useUserDetails } from "@renderer/hooks";