fix: fix build errors and adjust flashlight control styling

.github/workflows/ci.yml

@@ -1,9 +1,9 @@
-name: Linting and Styling Check
+name: CI Checks
 
 on: [push, pull_request]
 
 jobs:
-  lint:
+  quality:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
@@ -22,5 +22,22 @@ jobs:
       - name: Install Dependencies
         run: pnpm install
 
-      - name: Run Linting and Styling Check
+      - name: Run Linting/Style Check
         run: pnpm lint-check
+
+      - name: Type Check
+        run: pnpm type-check
+
+      - name: Build Check
+        run: pnpm build
+
+      - name: Cache build output
+        uses: actions/cache@v3
+        with:
+          path: |
+            .next
+            dist
+            build
+          key: ${{ runner.os }}-build-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-build-

src/app/page.tsx

@@ -438,7 +438,7 @@ export default function Page() {
     <div style={{ minHeight: '100vh', height: '100vh' }}>
       <Flashlight isOn={isOn} size={size} />
       {folderOpenned && (
-        <Controls isOn={isOn} size={size} setIsOn={setIsOn} setSize={setSize} />
+        <Controls isOn={isOn} setIsOn={setIsOn} setSize={setSize} />
       )}
 
       <div

src/components/About/RegisterButton/RegisterButton.tsx

@@ -33,7 +33,7 @@ export default function RegisterButton() {
             >
               <h2>Register Now</h2>
             </foreignObject>
-            <g clip-path="url(#clip0_1_4)">
+            <g clipPath="url(#clip0_1_4)">
               <path
                 d="M149.282 46.7858C149.457 45.9323 149.539 45.0898 149.51 44.2738C149.62 38.596 147.111 33.6963 147.111 33.6963C145.511 30.5807 140.731 29.7329 135.715 31.3931C135.715 31.3931 135.625 31.4237 135.456 31.4812C134.8 31.711 134.139 31.98 133.478 32.2961C130.529 33.6284 124.934 36.6054 118.419 42.3239C111.922 47.6308 108.887 54.6255 111.485 59.6906C114.757 66.0674 125.715 66.9628 135.963 61.6952C143.187 57.9788 148.124 52.1922 149.265 46.868L149.269 46.8681C149.273 46.8406 149.277 46.8171 149.282 46.7897L149.282 46.7858Z"
                 fill="#553618"

src/components/Flashlight/Flashlight.scss

@@ -8,11 +8,11 @@
 }
 
 .flashlight {
-  z-index: 1000;
+  z-index: 15;
 }
 
 .flashlight-ring {
-  z-index: 1000;
+  z-index: 15;
   scale: var(--flashlight-scale, 1);
   transform-origin: center;
   transform: translate(-50%, -50%) scale(var(--flashlight-scale, 1));

src/components/flashlight_controls/Controls.scss

@@ -0,0 +1,152 @@
+#flashlight-controls {
+  background-color: white;
+  display: flex;
+  flex-direction: row;
+  width: 330px;
+  height: 70px;
+  border: #000 2px solid;
+  border-radius: 100px;
+  position: fixed;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+  z-index: 20;
+  justify-content: space-evenly;
+  cursor: url('../Icons/Cursor.svg'), auto;
+
+  .label {
+    color: #000;
+    align-content: center;
+    font-size: 20px;
+  }
+
+  /* =============== Slider =============== */
+  .slider-track {
+    height: 6px;
+    border: #000 2px solid;
+    border-radius: 2px;
+    width: 100%;
+  }
+
+  .slider-thumb::before,
+  .slider-thumb::after {
+    content: '';
+    width: 2px;
+    height: 70%;
+    background: white;
+    position: absolute;
+  }
+
+  .slider-thumb::before {
+    left: 5px;
+  }
+
+  .slider-thumb::after {
+    right: 5px;
+  }
+
+  .slider-thumb {
+    width: 16px;
+    height: 24px;
+    background: #000;
+    border-radius: 4px;
+    transform: translate(-50%, -50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: url('../Icons/Cursor-hover.svg'), auto;
+  }
+
+  .slider-output {
+    display: none;
+  }
+
+  #slider {
+    width: 30%;
+    align-content: center;
+    height: 50%;
+    cursor: url('../Icons/Cursor-hover.svg'), auto;
+  }
+
+  /* =============== Switch =============== */
+  .switch {
+    width: 100px;
+    height: 44px;
+    border: #000 2px solid;
+    border-radius: 40px;
+    position: relative;
+    align-content: center;
+    align-items: center;
+    background: #68dea3;
+  }
+
+  .switch-background.selected {
+    width: 100%;
+    height: 100%;
+    border-radius: 40px;
+    background: #ffffff;
+    position: relative;
+  }
+
+  .switch-thumb {
+    width: 48px;
+    height: 36px;
+    background: #000;
+    border-radius: 40px;
+    position: relative;
+    left: 4px;
+    transition: left 0.2s;
+    align-content: center;
+    justify-items: center;
+  }
+
+  .switch-thumb.selected {
+    left: 46px;
+    top: 2px;
+    background: #000000;
+    position: absolute;
+  }
+
+  .On-Text,
+  .Off-Text {
+    position: absolute;
+    color: #000;
+    font-size: 20px;
+    font-weight: bold;
+    text-align: center;
+    align-self: center;
+    top: 10px;
+  }
+
+  .On-Text {
+    display: inline;
+    left: 58px;
+  }
+
+  .Off-Text {
+    display: none;
+    left: 8px;
+  }
+
+  .On-Text.selected {
+    display: none;
+  }
+
+  .Off-Text.selected {
+    display: inline;
+  }
+
+  .icon-off {
+    width: 100%;
+    height: 100%;
+  }
+
+  .icon-light {
+    position: relative;
+
+    svg {
+      margin-inline: auto;
+    }
+  }
+}

src/components/flashlight_controls/controls.tsx → src/components/flashlight_controls/Controls.tsx

@@ -1,5 +1,5 @@
 import React, { Dispatch, SetStateAction } from 'react';
-import './controls.scss';
+import './Controls.scss';
 import {
   Slider,
   SliderOutput,
@@ -18,7 +18,7 @@ type ControlsProps = {
 
 function Controls({ isOn, setIsOn, setSize }: ControlsProps) {
   return (
-    <div className="controls">
+    <div id="flashlight-controls">
       <div>
         <svg
           width="32"