From 7a07003600b1396a2a119465abb8a4646f95df42 Mon Sep 17 00:00:00 2001
From: Singa-pirate <luojiale@u.nus.edu>
Date: Fri, 27 Sep 2024 17:24:58 +0800
Subject: [PATCH] Fix style

---
 .../ConfirmationDialog.scss                   | 20 ++---
 frontend/src/components/Footer/Footer.scss    | 79 ++++++++---------
 .../src/components/MainDialog/MainDialog.scss | 20 ++---
 frontend/src/components/Navbar/Navbar.scss    | 42 ++++-----
 .../QuestionDialog/QuestionDialog.scss        | 88 +++++++++----------
 .../QuestionList/QuestionList.module.scss     | 38 ++++----
 frontend/src/pages/Home/Home.scss             |  5 +-
 7 files changed, 142 insertions(+), 150 deletions(-)

diff --git a/frontend/src/components/ConfirmationDialog/ConfirmationDialog.scss b/frontend/src/components/ConfirmationDialog/ConfirmationDialog.scss
index 76c31611f7..844096f971 100644
--- a/frontend/src/components/ConfirmationDialog/ConfirmationDialog.scss
+++ b/frontend/src/components/ConfirmationDialog/ConfirmationDialog.scss
@@ -1,13 +1,11 @@
 .ConfirmationDialog {
+  &-title {
+    word-wrap: break-word;
+    font-size: 1.5rem !important;
+    font-weight: 700 !important;
+  }
 
-    &-title {
-        word-wrap: break-word;
-        font-size: 1.5rem !important;
-        font-weight: 700 !important;
-    }
-
-    &-content {
-        word-wrap: break-word;
-    }
-
-}
\ No newline at end of file
+  &-content {
+    word-wrap: break-word;
+  }
+}
diff --git a/frontend/src/components/Footer/Footer.scss b/frontend/src/components/Footer/Footer.scss
index b3d3a54917..7303ac89fe 100644
--- a/frontend/src/components/Footer/Footer.scss
+++ b/frontend/src/components/Footer/Footer.scss
@@ -1,47 +1,46 @@
 .Footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding-block: 60px 20px;
+  gap: 30px;
+  background: var(--Grey-11, #1c1c1c);
+
+  &-logo {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     align-items: center;
-    justify-content: space-between;
-    padding-block: 60px 20px;
-    gap: 30px;
-    background: var(--Grey-11, #1C1C1C);
-
+    justify-content: center;
+    gap: 10px;
+  }
 
-    &-logo {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-        gap: 10px;
-    }
-
-    &-bottom {
-        padding: 10px 20px;
-        width: 80vw;
-        border-radius: 100px;
-        border: 1px solid var(--Grey-15, #262626);
-        background: var(--Grey-10, #1A1A1A);
-        display: grid;
-        grid-template-columns: 1fr auto 1fr;
-        align-items: center;
-    }
+  &-bottom {
+    padding: 10px 20px;
+    width: 80vw;
+    border-radius: 100px;
+    border: 1px solid var(--Grey-15, #262626);
+    background: var(--Grey-10, #1a1a1a);
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+  }
 
-    &-github {
-        background: #caff33 !important;
-    }
+  &-github {
+    background: #caff33 !important;
+  }
 
-    &-trademark {
-        display: inline;
-        font-size: 0.8rem !important;
-        font-weight: 200 !important;
-        color: var(--Grey-Shades-70, var(--Text-Disabled-On-Disabled, #B3B3B3)) !important;
-        grid-column: 2;
-        justify-self: center;
-    }
+  &-trademark {
+    display: inline;
+    font-size: 0.8rem !important;
+    font-weight: 200 !important;
+    color: var(--Grey-Shades-70, var(--Text-Disabled-On-Disabled, #b3b3b3)) !important;
+    grid-column: 2;
+    justify-self: center;
+  }
 
-    &-terms {
-        grid-column: 3;
-        justify-self: end;
-    }
-}
\ No newline at end of file
+  &-terms {
+    grid-column: 3;
+    justify-self: end;
+  }
+}
diff --git a/frontend/src/components/MainDialog/MainDialog.scss b/frontend/src/components/MainDialog/MainDialog.scss
index 73563e6d9c..196cebce00 100644
--- a/frontend/src/components/MainDialog/MainDialog.scss
+++ b/frontend/src/components/MainDialog/MainDialog.scss
@@ -1,13 +1,11 @@
 .MainDialog {
+  &-title {
+    word-wrap: break-word;
+    font-size: 1.5rem !important;
+    font-weight: 700 !important;
+  }
 
-    &-title {
-        word-wrap: break-word;
-        font-size: 1.5rem !important;
-        font-weight: 700 !important;
-    }
-
-    &-content {
-        word-wrap: break-word;
-    }
-
-}
\ No newline at end of file
+  &-content {
+    word-wrap: break-word;
+  }
+}
diff --git a/frontend/src/components/Navbar/Navbar.scss b/frontend/src/components/Navbar/Navbar.scss
index 89d827a950..a1831e89bb 100644
--- a/frontend/src/components/Navbar/Navbar.scss
+++ b/frontend/src/components/Navbar/Navbar.scss
@@ -1,26 +1,26 @@
 .Navbar {
+  display: flex;
+  padding: 20px 34px;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 100px;
+  border: 1px solid var(--Grey-15, #262626);
+  background: var(--Grey-11, #1c1c1c);
+
+  &-logo {
     display: flex;
-    padding: 20px 34px;
-    justify-content: space-between;
+    flex-direction: row;
     align-items: center;
-    border-radius: 100px;
-    border: 1px solid var(--Grey-15, #262626);
-    background: var(--Grey-11, #1C1C1C);
-
-    &-logo {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        gap: 10px;
-    }
+    gap: 10px;
+  }
 
-    &-buttons {
-        display: flex;
-        gap: 20px;
-    }
+  &-buttons {
+    display: flex;
+    gap: 20px;
+  }
 
-    &-title {
-        font-size: 1.5rem !important;
-        font-weight: 700 !important;
-    }
-}
\ No newline at end of file
+  &-title {
+    font-size: 1.5rem !important;
+    font-weight: 700 !important;
+  }
+}
diff --git a/frontend/src/components/QuestionDialog/QuestionDialog.scss b/frontend/src/components/QuestionDialog/QuestionDialog.scss
index 8f80f7a45d..4c82cca08f 100644
--- a/frontend/src/components/QuestionDialog/QuestionDialog.scss
+++ b/frontend/src/components/QuestionDialog/QuestionDialog.scss
@@ -1,58 +1,56 @@
 .QuestionDialog {
-
-    &-title {
-        word-wrap: break-word;
-        font-size: 1.5rem !important;
-        font-weight: 700 !important;
+  &-title {
+    word-wrap: break-word;
+    font-size: 1.5rem !important;
+    font-weight: 700 !important;
+  }
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  &-line {
+    display: flex;
+    gap: 10px;
+  }
+
+  &-input {
+    background: #909090;
+    border-radius: 10px;
+
+    &-text {
+      color: white !important;
     }
 
-    &-content {
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
+    &-label {
+      color: white !important;
     }
 
-    &-line {
-        display: flex;
-        gap: 10px;
+    &-id {
+      flex: 1;
     }
 
-    &-input {
-        background: #909090;
-        border-radius: 10px;
-
-        &-text {
-            color: white !important;
-        }
-
-        &-label {
-            color: white !important;
-        }
-
-        &-id {
-            flex: 1;
-        }
-
-        &-title {
-            flex: 4;
-        }
+    &-title {
+      flex: 4;
+    }
 
-        &-complexity {
-            flex: 1;
-        }
+    &-complexity {
+      flex: 1;
+    }
 
-        &-categories {
-            flex: 4;
-        }
+    &-categories {
+      flex: 4;
     }
+  }
 
-    &-error {
-        margin-top: 10px;
-        border-radius: 10px;
+  &-error {
+    margin-top: 10px;
+    border-radius: 10px;
 
-        &-text {
-            color: white !important;
-        }
+    &-text {
+      color: white !important;
     }
-
-}
\ No newline at end of file
+  }
+}
diff --git a/frontend/src/components/QuestionList/QuestionList.module.scss b/frontend/src/components/QuestionList/QuestionList.module.scss
index 78926661a9..29bf3108d0 100644
--- a/frontend/src/components/QuestionList/QuestionList.module.scss
+++ b/frontend/src/components/QuestionList/QuestionList.module.scss
@@ -2,16 +2,16 @@
   width: 90%;
   margin: 0 auto;
   padding: 20px;
-  background-color: #1c1c1c; 
+  background-color: #1c1c1c;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   border-radius: 10px;
-  color: #f1f1f1; 
-  font-family: 'Lexend', 'Roboto', 'Arial', sans-serif; /* Ensuring the font is coherent */
+  color: #f1f1f1;
+  font-family: "Lexend", "Roboto", "Arial", sans-serif; /* Ensuring the font is coherent */
 }
 
 h1 {
   text-align: center;
-  color: #caff33; 
+  color: #caff33;
   font-size: 28px;
   margin-bottom: 20px;
 }
@@ -19,7 +19,7 @@ h1 {
 .table {
   width: 100%;
   border-collapse: collapse;
-  background-color: #282828; 
+  background-color: #282828;
   border-radius: 8px;
   overflow: hidden;
 }
@@ -28,13 +28,13 @@ h1 {
 .table td {
   padding: 10px;
   text-align: left;
-  border-bottom: 1px solid #333; 
+  border-bottom: 1px solid #333;
 }
 
 .table th {
   background-color: #333;
   font-weight: bold;
-  color: #caff33; 
+  color: #caff33;
   position: relative;
 }
 
@@ -74,19 +74,19 @@ h1 {
 
 .clickable::after {
   top: 60%;
-  border-top: 6px solid #456300; 
+  border-top: 6px solid #456300;
 }
 
 .asc::before {
-  border-bottom: 6px solid #caff33; 
+  border-bottom: 6px solid #caff33;
 }
 
 .desc::after {
-  border-top: 6px solid #caff33; 
+  border-top: 6px solid #caff33;
 }
 
 .table td {
-  color: #f1f1f1; 
+  color: #f1f1f1;
 }
 
 .tags {
@@ -95,7 +95,7 @@ h1 {
 }
 
 .tag {
-  background-color: #61dafb; 
+  background-color: #61dafb;
   color: white;
   padding: 5px 10px;
   border-radius: 5px;
@@ -104,20 +104,20 @@ h1 {
 }
 
 .tag:nth-child(2n) {
-  background-color: #ff6f61; 
+  background-color: #ff6f61;
 }
 
 .tag:nth-child(3n) {
-  background-color: #8e44ad; 
+  background-color: #8e44ad;
 }
 
 .tag:nth-child(4n) {
-  background-color: #2ecc71; 
+  background-color: #2ecc71;
 }
 
 .complexity {
   font-weight: bold;
-  color: #caff33; 
+  color: #caff33;
 }
 
 .table tr:hover {
@@ -138,11 +138,11 @@ h1 {
 
 .questionlinkicon {
   width: 80% !important;
-  color: #caff33 !important; 
+  color: #caff33 !important;
 }
 
 .questiontitle {
-  color: #f1f1f1 !important; 
+  color: #f1f1f1 !important;
   text-decoration: underline !important;
 }
 
@@ -152,4 +152,4 @@ h1 {
     padding: 10px;
     font-size: 14px;
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/pages/Home/Home.scss b/frontend/src/pages/Home/Home.scss
index 3f408ea0e4..cfdb6239f1 100644
--- a/frontend/src/pages/Home/Home.scss
+++ b/frontend/src/pages/Home/Home.scss
@@ -1,5 +1,5 @@
 .Home {
-  background: var(--Grey-10, #1A1A1A);
+  background: var(--Grey-10, #1a1a1a);
   padding: 40px 80px;
   display: flex;
   flex-direction: column;
@@ -25,7 +25,7 @@
       padding-block: 30px;
       font-size: 0.8rem !important;
       font-weight: 200;
-      color: var(--White-90, #E4E4E7) !important;
+      color: var(--White-90, #e4e4e7) !important;
     }
 
     &-image {
@@ -35,7 +35,6 @@
       object-fit: contain;
     }
   }
-
 }
 
 .Home-button {