fixed everything

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;
+  font-size: vars.$body-font-size;
-  color: $body-color;
+  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%,
+    vars.$dark-background-color 50%,
-    $background-color 100%
+    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;
+  z-index: vars.$title-bar-z-index;
-  border-bottom: 1px solid $border-color;
+  border-bottom: 1px solid vars.$border-color;
 }
 
 .app-container__cloud-text {

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%;
   }
 

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

@@ -44,49 +44,49 @@
     animation-name: slideIn;
     transform: translateY(0);
   }
-}
 
-&__content {
+  &__content {
-  display: flex;
+    display: flex;
-  gap: vars.$spacing-unit * 2;
+    gap: vars.$spacing-unit * 2;
-  padding: vars.$spacing-unit * 2;
+    padding: vars.$spacing-unit * 2;
-  justify-content: center;
+    justify-content: center;
-  align-items: center;
+    align-items: center;
-}
-
-&__progress {
-  width: 100%;
-  height: 5px;
-
-  &::-webkit-progress-bar {
-    background-color: vars.$dark-background-color;
   }
 
-  &::-webkit-progress-value {
+  &__progress {
-    background-color: vars.$muted-color;
+    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;
+  }
+
+  &__icon-container {
+    display: flex;
+    gap: var(--spacing-unit);
+  }
+
+  &__success-icon {
+    color: vars.$success-color;
+  }
+
+  &__error-icon {
+    color: vars.$danger-color;
+  }
+
+  &__warning-icon {
+    color: vars.$warning-color;
   }
 }
-
-&__close-button {
-  color: vars.$body-color;
-  cursor: pointer;
-  padding: 0;
-  margin: 0;
-}
-
-&__icon-container {
-  display: flex;
-  gap: var(--spacing-unit);
-}
-
-&__success-icon {
-  color: vars.$success-color;
-}
-
-&__error-icon {
-  color: vars.$danger-color;
-}
-
-&__warning-icon {
-  color: vars.$warning-color;
-}

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;

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[];

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;
+    height: vars.$hero-sub-height;
-    min-height: vars.$hero-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;
 

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;
   }
 

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% {

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%;

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%;

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);

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 {

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 {

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 {

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 {

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 {

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;
 

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;
   }
 

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 {

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;

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;
 

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};