From d50bb137e67881d322499a8b146b94f257c0b644 Mon Sep 17 00:00:00 2001
From: Nate <dylovsky160@gmail.com>
Date: Sat, 18 Jan 2025 15:17:52 -0300
Subject: [PATCH] fixed everything

---
 src/renderer/src/app.scss                     | 22 +++---
 .../components/sidebar/sidebar-profile.scss   |  2 +-
 src/renderer/src/components/toast/toast.scss  | 74 +++++++++----------
 .../pages/achievements/achievement-panel.scss | 14 ++--
 .../pages/achievements/achievement-panel.tsx  |  2 +-
 .../src/pages/achievements/achievements.scss  | 10 +--
 .../src/pages/downloads/download-group.scss   |  2 +-
 .../cloud-sync-modal/cloud-sync-modal.scss    |  2 +-
 .../description-header.scss                   |  2 +-
 .../gallery-slider/gallery-slider.scss        |  4 +-
 .../src/pages/game-details/game-details.scss  |  2 -
 .../modals/download-settings-modal.scss       |  2 +-
 .../modals/game-options-modal.scss            |  2 +-
 .../modals/remove-from-library-modal.scss     |  2 +-
 .../game-details/modals/repacks-modal.scss    |  2 +-
 .../sidebar-section/sidebar-section.scss      |  2 +-
 .../pages/game-details/sidebar/sidebar.scss   |  6 +-
 .../profile-content/profile-content.scss      |  6 +-
 .../profile/profile-hero/profile-hero.scss    |  2 +-
 .../user-friend-modal/user-friend-item.tsx    |  2 +-
 .../user-friend-modal/user-friend-modal.scss  |  6 +-
 src/renderer/src/scss/_variables.scss         |  5 ++
 22 files changed, 86 insertions(+), 87 deletions(-)

diff --git a/src/renderer/src/app.scss b/src/renderer/src/app.scss
index b8e92509..36f6b57a 100644
--- a/src/renderer/src/app.scss
+++ b/src/renderer/src/app.scss
@@ -1,4 +1,4 @@
-@use "./scss/variables";
+@use "./scss/variables" as vars;
 
 * {
   box-sizing: border-box;
@@ -6,7 +6,7 @@
 
 ::-webkit-scrollbar {
   width: 9px;
-  background-color: $dark-background-color;
+  background-color: vars.$dark-background-color;
 }
 
 ::-webkit-scrollbar-track {
@@ -33,8 +33,8 @@ body {
   overflow: hidden;
   user-select: none;
   font-family: "Noto Sans", sans-serif;
-  font-size: $body-font-size;
-  color: $body-color;
+  font-size: vars.$body-font-size;
+  color: vars.$body-color;
   margin: 0;
 }
 
@@ -79,7 +79,7 @@ input::-webkit-inner-spin-button {
 }
 
 label {
-  font-size: $body-font-size;
+  font-size: vars.$body-font-size;
 }
 
 input[type="number"] {
@@ -111,8 +111,8 @@ progress[value] {
   height: 100%;
   background: linear-gradient(
     0deg,
-    $dark-background-color 50%,
-    $background-color 100%
+    vars.$dark-background-color 50%,
+    vars.$background-color 100%
   );
 }
 
@@ -121,12 +121,12 @@ progress[value] {
   width: 100%;
   height: 35px;
   min-height: 35px;
-  background-color: $dark-background-color;
+  background-color: vars.$dark-background-color;
   align-items: center;
-  padding: 0 $spacing-unit * 2;
+  padding: 0 vars.$spacing-unit * 2;
   -webkit-app-region: drag;
-  z-index: $title-bar-z-index;
-  border-bottom: 1px solid $border-color;
+  z-index: vars.$title-bar-z-index;
+  border-bottom: 1px solid vars.$border-color;
 }
 
 .app-container__cloud-text {
diff --git a/src/renderer/src/components/sidebar/sidebar-profile.scss b/src/renderer/src/components/sidebar/sidebar-profile.scss
index 67a702be..c3b97896 100644
--- a/src/renderer/src/components/sidebar/sidebar-profile.scss
+++ b/src/renderer/src/components/sidebar/sidebar-profile.scss
@@ -25,7 +25,7 @@
   &__button-content {
     display: flex;
     align-items: center;
-    gap: vars.$spacing-unit + vars.$spacing-unit / 2;
+    gap: calc(vars.$spacing-unit + vars.$spacing-unit / 2);
     width: 100%;
   }
 
diff --git a/src/renderer/src/components/toast/toast.scss b/src/renderer/src/components/toast/toast.scss
index 0007c64f..4c7bed57 100644
--- a/src/renderer/src/components/toast/toast.scss
+++ b/src/renderer/src/components/toast/toast.scss
@@ -44,49 +44,49 @@
     animation-name: slideIn;
     transform: translateY(0);
   }
-}
 
-&__content {
-  display: flex;
-  gap: vars.$spacing-unit * 2;
-  padding: vars.$spacing-unit * 2;
-  justify-content: center;
-  align-items: center;
-}
-
-&__progress {
-  width: 100%;
-  height: 5px;
-
-  &::-webkit-progress-bar {
-    background-color: vars.$dark-background-color;
+  &__content {
+    display: flex;
+    gap: vars.$spacing-unit * 2;
+    padding: vars.$spacing-unit * 2;
+    justify-content: center;
+    align-items: center;
   }
 
-  &::-webkit-progress-value {
-    background-color: vars.$muted-color;
+  &__progress {
+    width: 100%;
+    height: 5px;
+
+    &::-webkit-progress-bar {
+      background-color: vars.$dark-background-color;
+    }
+
+    &::-webkit-progress-value {
+      background-color: vars.$muted-color;
+    }
   }
-}
 
-&__close-button {
-  color: vars.$body-color;
-  cursor: pointer;
-  padding: 0;
-  margin: 0;
-}
+  &__close-button {
+    color: vars.$body-color;
+    cursor: pointer;
+    padding: 0;
+    margin: 0;
+  }
 
-&__icon-container {
-  display: flex;
-  gap: var(--spacing-unit);
-}
+  &__icon-container {
+    display: flex;
+    gap: var(--spacing-unit);
+  }
 
-&__success-icon {
-  color: vars.$success-color;
-}
+  &__success-icon {
+    color: vars.$success-color;
+  }
 
-&__error-icon {
-  color: vars.$danger-color;
-}
+  &__error-icon {
+    color: vars.$danger-color;
+  }
 
-&__warning-icon {
-  color: vars.$warning-color;
-}
+  &__warning-icon {
+    color: vars.$warning-color;
+  }
+}
\ No newline at end of file
diff --git a/src/renderer/src/pages/achievements/achievement-panel.scss b/src/renderer/src/pages/achievements/achievement-panel.scss
index 7caa2944..e12f730d 100644
--- a/src/renderer/src/pages/achievements/achievement-panel.scss
+++ b/src/renderer/src/pages/achievements/achievement-panel.scss
@@ -3,12 +3,12 @@
 .achievement-panel {
   width: 100%;
   padding: #{vars.$spacing-unit * 2} #{vars.$spacing-unit * 3};
-  background-color: vars.$color-background;
+  background-color: vars.$background-color;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: space-between;
-  border-bottom: solid 1px vars.$color-border;
+  border-bottom: solid 1px vars.$border-color;
 
   &__content {
     display: flex;
@@ -24,12 +24,12 @@
   &__download-details-row {
     gap: vars.$spacing-unit;
     display: flex;
-    color: vars.$color-body;
+    color: vars.$body-color;
     align-items: center;
   }
 
   &__downloads-link {
-    color: vars.$color-body;
+    color: vars.$body-color;
     text-decoration: underline;
   }
 
@@ -46,17 +46,17 @@
     }
 
     &::-webkit-progress-value {
-      background-color: vars.$color-muted;
+      background-color: vars.$muted-color;
     }
 
     &--disabled {
-      opacity: vars.$opacity-disabled;
+      opacity: vars.$disabled-opacity;
     }
   }
 
   &__link {
     text-align: start;
-    color: vars.$color-body;
+    color: vars.$body-color;
 
     &:hover {
       text-decoration: underline;
diff --git a/src/renderer/src/pages/achievements/achievement-panel.tsx b/src/renderer/src/pages/achievements/achievement-panel.tsx
index 56623cfd..f2d8fb5a 100644
--- a/src/renderer/src/pages/achievements/achievement-panel.tsx
+++ b/src/renderer/src/pages/achievements/achievement-panel.tsx
@@ -4,7 +4,7 @@ import { UserAchievement } from "@types";
 import { useSubscription } from "@renderer/hooks/use-subscription";
 import { useUserDetails } from "@renderer/hooks";
 
-import "./achievement-panel.sccs";
+import "./achievement-panel.scss";
 
 export interface AchievementPanelProps {
   achievements: UserAchievement[];
diff --git a/src/renderer/src/pages/achievements/achievements.scss b/src/renderer/src/pages/achievements/achievements.scss
index 8c076b13..1fc93c0f 100644
--- a/src/renderer/src/pages/achievements/achievements.scss
+++ b/src/renderer/src/pages/achievements/achievements.scss
@@ -1,9 +1,5 @@
 @use "../../scss/variables" as vars;
 
-$hero-height: 150px;
-$logo-height: 100px;
-$logo-max-width: 200px;
-
 .achievements {
   &__wrapper {
     display: flex;
@@ -16,8 +12,8 @@ $logo-max-width: 200px;
 
   &__hero {
     width: 100%;
-    height: vars.$hero-height;
-    min-height: vars.$hero-height;
+    height: vars.$hero-sub-height;
+    min-height: vars.$hero-sub-height;
     display: flex;
     flex-direction: column;
     position: relative;
@@ -181,7 +177,7 @@ $logo-max-width: 200px;
     display: flex;
     justify-content: center;
     width: 100%;
-    gap: #{vars.$spacing-unit / 2};
+    gap: calc(vars.$spacing-unit / 2);
     color: vars.$body-color;
     cursor: pointer;
 
diff --git a/src/renderer/src/pages/downloads/download-group.scss b/src/renderer/src/pages/downloads/download-group.scss
index eef9901d..eeb19230 100644
--- a/src/renderer/src/pages/downloads/download-group.scss
+++ b/src/renderer/src/pages/downloads/download-group.scss
@@ -91,7 +91,7 @@
     flex-direction: column;
     flex: 1;
     justify-content: center;
-    gap: #{vars.$spacing-unit / 2};
+    gap: calc(vars.$spacing-unit / 2);
     font-size: 14px;
   }
 
diff --git a/src/renderer/src/pages/game-details/cloud-sync-modal/cloud-sync-modal.scss b/src/renderer/src/pages/game-details/cloud-sync-modal/cloud-sync-modal.scss
index 2f0a8c8d..b7a4d67b 100644
--- a/src/renderer/src/pages/game-details/cloud-sync-modal/cloud-sync-modal.scss
+++ b/src/renderer/src/pages/game-details/cloud-sync-modal/cloud-sync-modal.scss
@@ -1,4 +1,4 @@
-@use "../../scss/variables" as vars;
+@use "../../../scss/variables" as vars;
 
 @keyframes rotate {
   0% {
diff --git a/src/renderer/src/pages/game-details/description-header/description-header.scss b/src/renderer/src/pages/game-details/description-header/description-header.scss
index 34a4f055..7d3e2271 100644
--- a/src/renderer/src/pages/game-details/description-header/description-header.scss
+++ b/src/renderer/src/pages/game-details/description-header/description-header.scss
@@ -1,4 +1,4 @@
-@use "../../scss/variables" as vars;
+@use "../../../scss/variables" as vars;
 
 .description-header {
   width: 100%;
diff --git a/src/renderer/src/pages/game-details/gallery-slider/gallery-slider.scss b/src/renderer/src/pages/game-details/gallery-slider/gallery-slider.scss
index 3930c9e4..c3f5f634 100644
--- a/src/renderer/src/pages/game-details/gallery-slider/gallery-slider.scss
+++ b/src/renderer/src/pages/game-details/gallery-slider/gallery-slider.scss
@@ -1,4 +1,4 @@
-@use "../../scss/variables" as vars;
+@use "../../../scss/variables" as vars;
 
 .gallery-slider {
   &__container {
@@ -40,7 +40,7 @@
     position: relative;
     overflow-x: auto;
     overflow-y: hidden;
-    gap: #{vars.$spacing-unit / 2};
+    gap: calc(vars.$spacing-unit / 2);
 
     @media (min-width: 1280px) {
       width: 60%;
diff --git a/src/renderer/src/pages/game-details/game-details.scss b/src/renderer/src/pages/game-details/game-details.scss
index 6aa69797..cce1dc77 100644
--- a/src/renderer/src/pages/game-details/game-details.scss
+++ b/src/renderer/src/pages/game-details/game-details.scss
@@ -1,7 +1,5 @@
 @use "../../scss/variables" as vars;
 
-$hero-height: 300px;
-
 @keyframes slide-in {
   0% {
     transform: translateY(#{40 + vars.$spacing-unit * 2}px);
diff --git a/src/renderer/src/pages/game-details/modals/download-settings-modal.scss b/src/renderer/src/pages/game-details/modals/download-settings-modal.scss
index 184ff0a8..df08d2a5 100644
--- a/src/renderer/src/pages/game-details/modals/download-settings-modal.scss
+++ b/src/renderer/src/pages/game-details/modals/download-settings-modal.scss
@@ -1,4 +1,4 @@
-@use "../../scss/variables" as vars;
+@use "../../../scss/variables" as vars;
 
 .download-settings-modal {
   &__container {
diff --git a/src/renderer/src/pages/game-details/modals/game-options-modal.scss b/src/renderer/src/pages/game-details/modals/game-options-modal.scss
index 23fa3bdf..044ccc61 100644
--- a/src/renderer/src/pages/game-details/modals/game-options-modal.scss
+++ b/src/renderer/src/pages/game-details/modals/game-options-modal.scss
@@ -1,4 +1,4 @@
-@use "../../scss/variables" as vars;
+@use "../../../scss/variables" as vars;
 
 .game-options-modal {
   &__options-container {
diff --git a/src/renderer/src/pages/game-details/modals/remove-from-library-modal.scss b/src/renderer/src/pages/game-details/modals/remove-from-library-modal.scss
index 15be8103..2f5921eb 100644
--- a/src/renderer/src/pages/game-details/modals/remove-from-library-modal.scss
+++ b/src/renderer/src/pages/game-details/modals/remove-from-library-modal.scss
@@ -1,4 +1,4 @@
-@use "../../scss/variables" as vars;
+@use "../../../scss/variables" as vars;
 
 .remove-from-library-modal {
   &__delete-actions-buttons-ctn {
diff --git a/src/renderer/src/pages/game-details/modals/repacks-modal.scss b/src/renderer/src/pages/game-details/modals/repacks-modal.scss
index e3ff2a8b..7f34dc5d 100644
--- a/src/renderer/src/pages/game-details/modals/repacks-modal.scss
+++ b/src/renderer/src/pages/game-details/modals/repacks-modal.scss
@@ -1,4 +1,4 @@
-@use "../../scss/variables" as vars;
+@use "../../../scss/variables" as vars;
 
 .repacks-modal {
   &__repacks {
diff --git a/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.scss b/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.scss
index 11d72f0e..67883ab4 100644
--- a/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.scss
+++ b/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.scss
@@ -1,4 +1,4 @@
-@use "../../scss/variables" as vars;
+@use "../../../scss/variables" as vars;
 
 .sidebar-section {
   &__button {
diff --git a/src/renderer/src/pages/game-details/sidebar/sidebar.scss b/src/renderer/src/pages/game-details/sidebar/sidebar.scss
index 466e8a24..ee65660d 100644
--- a/src/renderer/src/pages/game-details/sidebar/sidebar.scss
+++ b/src/renderer/src/pages/game-details/sidebar/sidebar.scss
@@ -1,4 +1,4 @@
-@use "../../scss/variables" as vars;
+@use "../../../scss/variables" as vars;
 
 .sidebar {
   &__content {
@@ -110,7 +110,7 @@
   &__stats-category {
     display: flex;
     flex-direction: column;
-    gap: #{vars.$spacing-unit / 2};
+    gap: calc(vars.$spacing-unit / 2);
   }
 
   &__list {
@@ -157,7 +157,7 @@
     display: flex;
     justify-content: center;
     width: 100%;
-    gap: #{vars.$spacing-unit / 2};
+    gap: calc(vars.$spacing-unit / 2);
     color: vars.$warning-color;
     cursor: pointer;
 
diff --git a/src/renderer/src/pages/profile/profile-content/profile-content.scss b/src/renderer/src/pages/profile/profile-content/profile-content.scss
index 97df3809..729b20df 100644
--- a/src/renderer/src/pages/profile/profile-content/profile-content.scss
+++ b/src/renderer/src/pages/profile/profile-content/profile-content.scss
@@ -72,7 +72,7 @@
   &__friend-name {
     color: vars.$muted-color;
     font-weight: bold;
-    font-size: vars.$body-size;
+    font-size: vars.$body-font-size;
   }
 
   &__right-content {
@@ -189,7 +189,7 @@
   &__list-item-details {
     display: flex;
     flex-direction: column;
-    gap: vars.$spacing-unit / 2;
+    gap: calc(vars.$spacing-unit / 2);
     overflow: hidden;
   }
 
@@ -259,7 +259,7 @@
     justify-content: flex-end;
     height: 100%;
     width: 100%;
-    background: linear-gradient(0deg, rgba(0, 0, 0 0.7) 20%, transparent 100%);
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 20%, transparent 100%);
     padding: 8;
   }
 
diff --git a/src/renderer/src/pages/profile/profile-hero/profile-hero.scss b/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
index c2da9402..cb58c9c3 100644
--- a/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
+++ b/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
@@ -80,7 +80,7 @@
   &__current-game-wrapper {
     display: flex;
     flex-direction: column;
-    gap: #{vars.$spacing-unit / 2};
+    gap: calc(vars.$spacing-unit / 2);
   }
 
   &__current-game-details {
diff --git a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-item.tsx b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-item.tsx
index cac01904..cb1701db 100644
--- a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-item.tsx
+++ b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-item.tsx
@@ -2,7 +2,7 @@ import { CheckCircleIcon, XCircleIcon } from "@primer/octicons-react";
 import { useTranslation } from "react-i18next";
 import { Avatar } from "@renderer/components";
 import "./user-friend-modal.scss";
-import "@renderer/theme.scss";
+import "../../../_theme.scss";
 
 export type UserFriendItemProps = {
   userId: string;
diff --git a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.scss b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.scss
index b42162c5..816960de 100644
--- a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.scss
+++ b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.scss
@@ -3,7 +3,7 @@
 .user-friend-modal {
   &__friend-list-display-name {
     font-weight: bold;
-    font-size: vars.$body-size;
+    font-size: vars.$body-font-size;
     text-align: left;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -36,7 +36,7 @@
     width: 100%;
     flex-direction: row;
     color: vars.$body-color;
-    gap: #{vars.$spacing-unit + vars.$spacing-unit / 2};
+    gap: calc(vars.$spacing-unit + vars.$spacing-unit / 2);
     padding: 0 vars.$spacing-unit;
   }
 
@@ -81,7 +81,7 @@
     color: vars.$body-color;
     cursor: pointer;
     display: flex;
-    gap: vars.$spacing-unit / 2;
+    gap: calc(vars.$spacing-unit / 2);
     align-items: center;
     transition: all ease 0.2s;
 
diff --git a/src/renderer/src/scss/_variables.scss b/src/renderer/src/scss/_variables.scss
index def27a87..96c0befa 100644
--- a/src/renderer/src/scss/_variables.scss
+++ b/src/renderer/src/scss/_variables.scss
@@ -37,6 +37,11 @@ $small-font-size: 12px;
 
 $app-container: app-container;
 
+$hero-height: 300px;
+$hero-sub-height: 150px;
+$logo-height: 100px;
+$logo-max-width: 200px;
+
 :root {
   --warning-color: #{$warning-color};
   --dark-background-color: #{$dark-background-color};