Feature/migration to scss

src/renderer/src/app.scss

@@ -0,0 +1,136 @@
+@use "./scss/globals.scss";
+
+* {
+  box-sizing: border-box;
+}
+
+::-webkit-scrollbar {
+  width: 9px;
+  background-color: globals.$dark-background-color;
+}
+
+::-webkit-scrollbar-track {
+  background-color: rgba(255, 255, 255, 0.03);
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.08);
+  border-radius: 24px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(255, 255, 255, 0.16);
+}
+
+html,
+body,
+#root,
+main {
+  height: 100%;
+}
+
+body {
+  overflow: hidden;
+  user-select: none;
+  font-family:
+    Noto Sans,
+    sans-serif;
+  font-size: globals.$body-font-size;
+  color: globals.$body-color;
+  margin: 0;
+}
+
+button {
+  padding: 0;
+  background-color: transparent;
+  border: none;
+  font-family: inherit;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+  margin: 0;
+}
+
+p {
+  line-height: 20px;
+}
+
+#root,
+main {
+  display: flex;
+}
+
+#root {
+  flex-direction: column;
+}
+
+main {
+  overflow: hidden;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+label {
+  font-size: globals.$body-font-size;
+}
+
+img {
+  -webkit-user-drag: none;
+}
+
+progress[value] {
+  -webkit-appearance: none;
+}
+
+.container {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  container-name: globals.$app-container;
+  container-type: inline-size;
+
+  &__content {
+    overflow-y: auto;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    height: 100%;
+    background: linear-gradient(
+      0deg,
+      globals.$dark-background-color 50%,
+      globals.$background-color 100%
+    );
+  }
+}
+
+.title-bar {
+  display: flex;
+  width: 100%;
+  height: 35px;
+  min-height: 35px;
+  background-color: globals.$dark-background-color;
+  align-items: center;
+  padding: 0 calc(globals.$spacing-unit * 2);
+  -webkit-app-region: drag;
+  z-index: 4;
+  border-bottom: 1px solid globals.$border-color;
+
+  &__cloud-text {
+    background: linear-gradient(270deg, #16b195 50%, #3e62c0 100%);
+    background-clip: text;
+    color: transparent;
+  }
+}

src/renderer/src/app.tsx

@@ -11,8 +11,6 @@ import {
   useUserDetails,
 } from "@renderer/hooks";
 
-import * as styles from "./app.css";
-
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
 import {
   setSearch,
@@ -30,6 +28,8 @@ import { downloadSourcesWorker } from "./workers";
 import { repacksContext } from "./context";
 import { logger } from "./logger";
 
+import "./app.scss";
+
 export interface AppProps {
   children: React.ReactNode;
 }
@@ -283,11 +283,11 @@ export function App() {
   return (
     <>
       {window.electron.platform === "win32" && (
-        <div className={styles.titleBar}>
+        <div className="title-bar">
           <h4>
             Hydra
             {hasActiveSubscription && (
-              <span className={styles.cloudText}> Cloud</span>
+              <span className="title-bar__cloud-text"> Cloud</span>
             )}
           </h4>
         </div>
@@ -312,14 +312,14 @@ export function App() {
       <main>
         <Sidebar />
 
-        <article className={styles.container}>
+        <article className="container">
           <Header
             onSearch={handleSearch}
             search={search}
             onClear={handleClear}
           />
 
-          <section ref={contentRef} className={styles.content}>
+          <section ref={contentRef} className="container__content">
             <Outlet />
           </section>
         </article>

src/renderer/src/components/backdrop/backdrop.scss

@@ -0,0 +1,50 @@
+@use "../../scss/globals.scss";
+
+.backdrop {
+  animation-name: backdrop-fade-in;
+  animation-duration: 0.4s;
+  background-color: rgba(0, 0, 0, 0.7);
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: globals.$backdrop-z-index;
+  top: 0;
+  padding: calc(globals.$spacing-unit * 3);
+  backdrop-filter: blur(2px);
+  transition: all ease 0.2s;
+
+  &--closing {
+    animation-name: backdrop-fade-out;
+    backdrop-filter: blur(0px);
+    background-color: rgba(0, 0, 0, 0);
+  }
+
+  &--windows {
+    padding-top: calc(#{globals.$spacing-unit * 3} + 35);
+  }
+}
+
+@keyframes backdrop-fade-in {
+  0% {
+    backdrop-filter: blur(0px);
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  100% {
+    backdrop-filter: blur(2px);
+    background-color: rgba(0, 0, 0, 0.7);
+  }
+}
+
+@keyframes backdrop-fade-out {
+  0% {
+    backdrop-filter: blur(2px);
+    background-color: rgba(0, 0, 0, 0.7);
+  }
+  100% {
+    backdrop-filter: blur(0px);
+    background-color: rgba(0, 0, 0, 0);
+  }
+}

src/renderer/src/components/backdrop/backdrop.tsx

@@ -1,4 +1,5 @@
-import * as styles from "./backdrop.css";
+import "./backdrop.scss";
+import cn from "classnames";
 
 export interface BackdropProps {
   isClosing?: boolean;
@@ -8,9 +9,9 @@ export interface BackdropProps {
 export function Backdrop({ isClosing = false, children }: BackdropProps) {
   return (
     <div
-      className={styles.backdrop({
-        closing: isClosing,
-        windows: window.electron.platform === "win32",
+      className={cn("backdrop", {
+        "backdrop--closing": isClosing,
+        "backdrop--windows": window.electron.platform === "win32",
       })}
     >
       {children}

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

@@ -0,0 +1,39 @@
+@use "../../scss/globals.scss";
+
+.checkbox-field {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: globals.$spacing-unit;
+  cursor: pointer;
+
+  &__checkbox {
+    width: 20px;
+    height: 20px;
+    border-radius: 4px;
+    background-color: globals.$dark-background-color;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    transition: all ease 0.2s;
+    border: solid 1px globals.$border-color;
+    &:hover {
+      border-color: rgba(255, 255, 255, 0.5);
+    }
+  }
+
+  &__input {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    cursor: pointer;
+  }
+
+  &__label {
+    cursor: pointer;
+  }
+}