Change all px unit to rem in scss files

10 files changed, 27 insertions, 36 deletions

diff --git a/frontend/src/components/modals/ManualSearchModal.tsx b/frontend/src/components/modals/ManualSearchModal.tsx
index 49c95ea5c..f1739ff69 100644
--- a/frontend/src/components/modals/ManualSearchModal.tsx
+++ b/frontend/src/components/modals/ManualSearchModal.tsx
@@ -10,6 +10,7 @@ import {
   faTimes,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import clsx from "clsx";
 import { FunctionComponent, useCallback, useMemo, useState } from "react";
 import {
   Badge,
@@ -128,19 +129,14 @@ export function ManualSearchModal<T extends SupportType>(
             return <span className="text-muted">Cannot get release info</span>;
           }
 
-          const cls = [
-            "release-container",
-            "d-flex",
-            "justify-content-between",
-            "align-items-center",
-          ];
-
-          if (value.length > 1) {
-            cls.push("release-multi");
-          }
-
           return (
-            <div className={cls.join(" ")} onClick={() => setOpen((o) => !o)}>
+            <div
+              className={clsx(
+                "release-container d-flex justify-content-between align-items-center",
+                { "release-multi": value.length > 1 }
+              )}
+              onClick={() => setOpen((o) => !o)}
+            >
               <div className="text-container">
                 <span className="release-text">{value[0]}</span>
                 <Collapse in={open}>
diff --git a/frontend/src/styles/_custom-bootstrap.scss b/frontend/src/styles/_custom-bootstrap.scss
index 0c4335b9f..dc4fac3ef 100644
--- a/frontend/src/styles/_custom-bootstrap.scss
+++ b/frontend/src/styles/_custom-bootstrap.scss
@@ -7,8 +7,9 @@ $dark: #4f566f;
 
 .progress-bar {
   cursor: default;
-  text-shadow: -2px -2px 5px $primary, 2px -2px 5px $primary,
-    -2px 2px 5px $primary, 2px 2px 5px $primary;
+  text-shadow: -0.16rem -0.16rem 0.24rem $primary,
+    0.16rem -0.16rem 0.24rem $primary, -0.16rem 0.16rem 0.24rem $primary,
+    0.16rem 0.16rem 0.24rem $primary;
   overflow: visible;
 }
 
diff --git a/frontend/src/styles/_layout.scss b/frontend/src/styles/_layout.scss
index 9227aac35..c6a34f2c8 100644
--- a/frontend/src/styles/_layout.scss
+++ b/frontend/src/styles/_layout.scss
@@ -57,7 +57,7 @@
     #{$side}: {
       color: rgba(0, 0, 0, 0.125);
       style: solid;
-      width: 1px;
+      width: 0.08rem;
     }
   }
 }
@@ -92,13 +92,13 @@ $sidebar-active-color: #252833;
 
   span {
     font-size: 0.85rem;
-    letter-spacing: 0.5px;
+    letter-spacing: 0.04rem;
   }
 
   scrollbar-width: none;
   &::-webkit-scrollbar {
-    width: 0px;
-    height: 0px;
+    width: 0;
+    height: 0;
   }
 
   .title {
@@ -112,7 +112,7 @@ $sidebar-active-color: #252833;
     top: 0;
     bottom: 0;
     left: 0;
-    width: 3px;
+    width: 0.1rem;
     z-index: 10;
     background-color: bs.$primary;
   }
diff --git a/frontend/src/styles/_variables.scss b/frontend/src/styles/_variables.scss
index 9ffa2a0e7..d67450e97 100644
--- a/frontend/src/styles/_variables.scss
+++ b/frontend/src/styles/_variables.scss
@@ -1,2 +1,2 @@
-$sidebar-width: 190px;
-$header-height: 60px;
+$sidebar-width: 12.6rem;
+$header-height: 3.6rem;
diff --git a/frontend/src/styles/components/_chart.scss b/frontend/src/styles/components/_chart.scss
index e15f5d1f8..160e505b4 100644
--- a/frontend/src/styles/components/_chart.scss
+++ b/frontend/src/styles/components/_chart.scss
@@ -2,5 +2,5 @@
 
 .chart-container {
   height: calc(100vh - #{vars.$header-height});
-  padding-bottom: 12px;
+  padding-bottom: 0.6rem;
 }
diff --git a/frontend/src/styles/components/_flat-card.scss b/frontend/src/styles/components/_flat-card.scss
index 11b51257e..26f22743f 100644
--- a/frontend/src/styles/components/_flat-card.scss
+++ b/frontend/src/styles/components/_flat-card.scss
@@ -3,7 +3,7 @@
 .settings-card {
   cursor: pointer;
 
-  min-height: 85px;
+  min-height: 5.4rem;
 
   transition: {
     duration: 0.2s;
diff --git a/frontend/src/styles/components/_header.scss b/frontend/src/styles/components/_header.scss
index 8fc143f01..65e3f0274 100644
--- a/frontend/src/styles/components/_header.scss
+++ b/frontend/src/styles/components/_header.scss
@@ -13,7 +13,7 @@
       border: none;
       border-bottom: {
         color: white !important;
-        width: 1px !important;
+        width: 0.08rem !important;
         style: solid !important;
       }
       background-color: transparent;
diff --git a/frontend/src/styles/components/_notification.scss b/frontend/src/styles/components/_notification.scss
index 484f97d8d..4690f0b97 100644
--- a/frontend/src/styles/components/_notification.scss
+++ b/frontend/src/styles/components/_notification.scss
@@ -8,8 +8,8 @@
       background-color: red;
       content: "";
       border-radius: 50%;
-      height: 6px;
-      width: 6px;
+      height: 0.4rem;
+      width: 0.4rem;
       right: 10%;
       top: 10%;
     }
@@ -30,12 +30,6 @@
       word-wrap: break-word;
       white-space: normal;
     }
-
-    .progress .progress-bar {
-      text-shadow: -2px -2px 5px bs.$primary, 2px -2px 5px bs.$primary,
-        -2px 2px 5px bs.$primary, 2px 2px 5px bs.$primary;
-      overflow: visible;
-    }
   }
 
   .notification-center-notification {
diff --git a/frontend/src/styles/components/_search-modal.scss b/frontend/src/styles/components/_search-modal.scss
index 91c35b3d7..3c3c7409c 100644
--- a/frontend/src/styles/components/_search-modal.scss
+++ b/frontend/src/styles/components/_search-modal.scss
@@ -2,7 +2,7 @@
   flex-wrap: nowrap;
   overflow: hidden;
   .text-container {
-    max-width: 500px;
+    max-width: 36rem;
     .release-text {
       text-overflow: ellipsis;
       overflow-wrap: break-word;
diff --git a/frontend/src/styles/components/_slider.scss b/frontend/src/styles/components/_slider.scss
index 76c02d128..042a64787 100644
--- a/frontend/src/styles/components/_slider.scss
+++ b/frontend/src/styles/components/_slider.scss
@@ -8,12 +8,12 @@
     cursor: pointer;
   }
   .rc-slider-handle {
-    border: 3px solid bs.$primary;
+    border: 0.2rem solid bs.$primary;
     margin-top: 0;
     top: 50%;
     transform: translate(-50%, -50%) !important;
-    width: 18px;
-    height: 18px;
+    width: 1.2rem;
+    height: 1.2rem;
     cursor: pointer;
 
     .rc-slider-handle-tips-always {