clean up

src/styles/Generator.scss

@@ -3,6 +3,7 @@ $breakpoint-1: 1200px;
 $breakpoint-2: 790px;
 $breakpoint-3: 600px;
 
+// Tooltip animation keyframes
 @keyframes tooltipAnimation {
   0% {
     opacity: 0;
@@ -16,7 +17,7 @@ $breakpoint-3: 600px;
 
 .generator {
   background-color: #232528;
-  color: white;
+  color: #fff;
   width: 100%;
   display: flex;
   height: 100%;
@@ -39,25 +40,17 @@ $breakpoint-3: 600px;
     gap: 10px 50px;
     flex-wrap: wrap;
     padding-bottom: 10px;
+
     p,
     a {
       font-size: 0.8rem;
     }
+
     p {
       color: #b4b4b4;
     }
-
-    a {
-      color: #3abe78;
-      font-weight: bold;
-      text-decoration: none;
-      transition: all 100ms ease-in-out;
-
-      &:hover {
-        color: #31f399;
-      }
-    }
   }
+
   .output {
     display: flex;
     flex-direction: row;
@@ -142,6 +135,7 @@ $breakpoint-3: 600px;
           justify-content: left;
           column-gap: 10px;
           width: 100%;
+
           input {
             -webkit-appearance: none;
             -moz-appearance: none;
@@ -154,7 +148,7 @@ $breakpoint-3: 600px;
             outline: none;
             transition: all 200ms ease-in-out;
             position: relative;
-            color: white;
+            color: #fff;
             text-align: center;
 
             &::-webkit-outer-spin-button,
@@ -163,7 +157,7 @@ $breakpoint-3: 600px;
               margin: 0;
             }
 
-            // make it a cross when checked
+            // Cross when checked styles
             &:checked {
               &:after {
                 content: "";
@@ -193,7 +187,10 @@ $breakpoint-3: 600px;
 
           input[type="number"] {
             width: 50px;
+            height: 25px;
             cursor: text;
+            -moz-appearance: textfield;
+            appearance: textfield;
           }
 
           label {
@@ -202,9 +199,13 @@ $breakpoint-3: 600px;
         }
       }
     }
+
+    // Preview styles
     .preview {
       flex: 1;
       border: 2px solid #31f39973;
+
+      // Viewer styles (see src/styles/Viewer.scss)
       .viewer {
         background-image: url("/images/viewer_example_background.png");
         background-repeat: no-repeat;
@@ -214,6 +215,7 @@ $breakpoint-3: 600px;
     }
   }
 
+  // Responsive styles
   @media screen and (max-width: $breakpoint-1) {
     .generatorContent {
       flex-direction: column;
@@ -243,13 +245,13 @@ $breakpoint-3: 600px;
       .url {
         width: 200px;
       }
-    }
 
-    .generatorContent {
-      .configurations {
-        .options {
-          flex-direction: column;
-          gap: 30px;
+      .generatorContent {
+        .configurations {
+          .options {
+            flex-direction: column;
+            gap: 30px;
+          }
         }
       }
     }

src/styles/Viewer.scss

@@ -1,14 +1,14 @@
+//* Viewer styles
+// this file contains styles for the viewer component
+// styles for the viewer component should not be modified somewhere else
+
 .viewer {
   display: flex;
   flex-direction: column;
-  gap: 0 0;
-  font-size: 3rem;
-  color: white;
-  padding: 10px;
+  padding: 0.5rem;
 
   h1,
   p {
-    margin: 0;
     background-color: #2f313680;
     padding: 0.25rem 0.5rem;
     border-radius: 0.25rem;
@@ -18,6 +18,7 @@
     max-width: 20ch;
     user-select: none;
   }
+
   .channelNameContainer {
     display: flex;
     align-items: center;
@@ -31,12 +32,14 @@
     align-items: center;
     margin: 0.5rem 0;
 
+    // icon styles
     svg {
       width: 2.1rem;
       aspect-ratio: 1/1;
       margin-right: 0.5rem;
     }
 
+    // client name styles
     p {
       font-size: 1.4rem;
     }

src/styles/index.scss

@@ -1,3 +1,4 @@
+// Reset styles for all elements
 * {
   font-family: Arial, Helvetica, sans-serif;
   font-weight: bold;
@@ -7,19 +8,23 @@
   box-sizing: border-box;
 }
 
+// Set up basic styles for the entire page
 body,
 html {
   min-height: 100vh;
   min-width: 100%;
   display: flex;
   overflow-x: hidden;
+  color: #fff;
 }
 
+// Ensure the root element takes up the full viewport
 #root {
   height: 100%;
   min-width: 100%;
 }
 
+// Headline styles
 h1 {
   font-size: 1.8rem;
 }
@@ -36,6 +41,7 @@ h4 {
   font-size: 1.1rem;
 }
 
+// Common styles for heading elements
 h1,
 h2,
 h3,
@@ -45,6 +51,19 @@ h6 {
   font-weight: bold;
 }
 
+// Text styles
+a {
+  color: #3abe78;
+  font-weight: bold;
+  text-decoration: none;
+  transition: all 100ms ease-in-out;
+
+  &:hover {
+    color: #31f399;
+  }
+}
+
+// Button styles
 button {
   background-color: #202024;
   color: #fff;
@@ -54,13 +73,14 @@ button {
   padding: 10px 20px;
   cursor: pointer;
   transition: all 300ms ease-in-out;
+
   &:hover {
     background-color: #42d486;
     color: #202024;
   }
 }
 
-// custom dark themed scrollbar
+// Custom dark-themed scrollbar
 ::-webkit-scrollbar {
   width: 5px;
   height: 5px;
@@ -74,8 +94,8 @@ button {
 ::-webkit-scrollbar-thumb {
   background: #31f39973;
   border-radius: 10px;
-}
 
-::-webkit-scrollbar-thumb:hover {
-  background: #48ee95;
+  &:hover {
+    background: #48ee95;
+  }
 }