General code cleanup.

src/App.css

@@ -1,12 +1,3 @@
-/* .open-sans {
-  font-family: "Open Sans", sans-serif;
-  font-optical-sizing: auto;
-  font-weight: <weight>;
-  font-style: normal;
-  font-variation-settings:
-    "wdth" 100;
-} */
-
 html, body { width:100%;  overflow: hidden; }
 
 #root {
@@ -22,13 +13,11 @@ html, body { width:100%;  overflow: hidden; }
   background-color: #000000;
   box-sizing: border-box;
   padding: 2%;
-  /* padding: 30px; */
   aspect-ratio: 16 / 9;
   max-height: 748px;
   max-width: 1366px;
   margin: 0 auto 20px;
   border-radius: 3.5% / 5%;
-  /* border-radius: 35px; */
   border: 2px solid grey;
   position: relative;
   -webkit-box-shadow: 0 5.5px 15px 3px rgba(0, 0, 0, 0.26);
@@ -56,7 +45,6 @@ html, body { width:100%;  overflow: hidden; }
 
 .horizontalPanelGroup {
   height: 87% !important;
-  /* border-radius: 15px 15px 0px 0px; */
   border-radius: 1.5% / 3%;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
@@ -66,7 +54,6 @@ html, body { width:100%;  overflow: hidden; }
   background-color: #f1f1f1;
   width: 100%;
   height: 100%;
-  /* height: calc(68vh - 0px); */
   display: flex;
   flex-direction: column;
   z-index: 4;
@@ -75,9 +62,7 @@ html, body { width:100%;  overflow: hidden; }
 }
 
 .panelResizeHandle {
-  /* background-color: rgb(210, 210, 210); */
   background-color: #f1f1f1;
-  /* width: 5px; */
   z-index: 4;
   width: 0.3%;
 }
@@ -100,7 +85,6 @@ html, body { width:100%;  overflow: hidden; }
 .rightPanel {
   background-color: #f1f1f1;
   position: relative;
-  /* box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; */
 }
 
 .carStatusIcons {
@@ -111,10 +95,6 @@ html, body { width:100%;  overflow: hidden; }
   padding: 0.5% 1% 0.5% 3%;
   display: flex;
   flex-direction: column;
-  /* flex-wrap: wrap;
-  align-content: center;
-  justify-content: space-between;
-  align-items: center; */
 }
 
 .topBarCarStatusIcons {
@@ -140,8 +120,6 @@ html, body { width:100%;  overflow: hidden; }
 }
 
 .drivingGearIcons {
-  /* display: flex; */
-  /* justify-content: space-around; */
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   margin-top: 10px;
@@ -223,7 +201,6 @@ html, body { width:100%;  overflow: hidden; }
   width: 40px;
   position: relative;
   top: 15px;
-  /* opacity: 0; */
 }
 
 .speedLimit {
@@ -270,7 +247,6 @@ html, body { width:100%;  overflow: hidden; }
 .toggleLocks {
   position: relative;
   left: 34%;
-  /* top: -50%; */
   z-index: 2;
   width: 40px;
   display: flex;
@@ -338,7 +314,7 @@ html, body { width:100%;  overflow: hidden; }
   text-align: center;
   color: #d0d0d0;
   font-size: 20px;
-  position: relative; /* Add this */
+  position: relative;
 }
 
 .small-screen-message span {
@@ -350,7 +326,8 @@ html, body { width:100%;  overflow: hidden; }
 }
 
 
-/* For smaller screens but larger than mobile */
+/* -------------------- MEDIA QUERIES -------------------- */
+
 @media screen and (max-width: 768px) {
   #root {
     padding: 120px 5px;
@@ -378,12 +355,9 @@ html, body { width:100%;  overflow: hidden; }
   }
 }
 
-/* Media query for mobile devices in landscape mode */
+/* -------------------- Media query for mobile devices in LANDSCAPE MODE --------------------  */
 @media only screen and (max-device-width: 896px) and (orientation: landscape) {
-  body {
-    /* margin-left: 30px; */
-    /* background-color: #000000; */
-  }
+  /* body {} */
 
   #root {
     height: 100dvh;
@@ -405,7 +379,6 @@ html, body { width:100%;  overflow: hidden; }
     max-height: unset !important;
     max-width: unset !important;
     padding: 0px !important;
-    /* position: relative; */
   }
 
   .displayWrapper {
@@ -463,7 +436,6 @@ html, body { width:100%;  overflow: hidden; }
 }
 
 
-
 /* -------------------- UTILITY CSS -------------------- */
 
 .no-select { 

src/App.js

@@ -315,8 +315,7 @@ function App() {
     return () => {
       window.removeEventListener('keydown', handleKeyDown);
     };
-  }, [leftTurnSignal, rightTurnSignal]);  // Add dependencies
-
+  }, [leftTurnSignal, rightTurnSignal]);
   return (
     <CarLockProvider>
       <UserProfileProvider>

src/components/Apps/AppleMusic/AppleMusic.js

@@ -5,7 +5,7 @@ export const AppleMusic = () => {
   return (
     <div className="apple-music">
       <h2>Apple Music</h2>
-      {/* Add your component-specific content here */}
+      {/* Add component-specific content here */}
     </div>
   );
 };

src/components/Apps/Arcade/Arcade.css

@@ -46,7 +46,6 @@
     position: absolute;
     top: 74%;
     left: 3%;
-    /* transform: translate(-50%, -50%); */
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -93,7 +92,6 @@
 }
 
 .game-carousel img.active {
-    /* border-color: #007bff; */
     opacity: 1;
 }
 

src/components/Apps/BackupCam/BackupCam.css

@@ -2,12 +2,6 @@
     margin: 0 auto;
     padding: 1.5%;
     height: 100%;
-    /* background-color: red;
-    width: 500px;
-    height: 500px;
-    position: relative;
-    top: 0px;
-    left: 0px; */
 }
 
 .cameraWrapper video {
@@ -19,7 +13,6 @@
 .loadingPlaceholder {
     width: 100%;
     height: 100%;
-    /* min-height: 400px; */
     display: flex;
     justify-content: center;
     align-items: center;

src/components/Apps/Calendar/Calendar.js

@@ -5,7 +5,7 @@ export const Calendar = () => {
   return (
     <div className="calendar">
       <h2>Calendar</h2>
-      {/* Add your component-specific content here */}
+      {/* Add component-specific content here */}
     </div>
   );
 };

src/components/Apps/CarSettings/CarSettings.css

@@ -20,13 +20,11 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    /* padding: 0px 10px 5px; */
     border-bottom: 1px solid #ccc;
     grid-column: 1 / 3;
     grid-row: 1 / 2;
     max-height: 30px;
     padding: 5px 10px 10px;
-    /* position: fixed; */
 }
 
 .top-bar-item img {
@@ -155,14 +153,9 @@
     flex-wrap: nowrap;
     justify-content: space-between;
     align-items: center;
-    /* height: 40px; */
-    /* background-color: #f0f0f0; */
-    /* border: 1px solid #ccc; */
     width: 100%;
     text-align: center;
     border-radius: 5px;
-    /* border-top-left-radius: 10px;
-    border-top-right-radius: 10px; */
 }
 
 .btn:hover {
@@ -200,7 +193,6 @@
 .row-2 div,
 .row-3 div,
 .row-5 div {
-    /* margin: 0px; */
     padding: 5% 0%;
     background-color: #f0f0f0;
     flex: 1;

src/components/Apps/Dashcam/Dashcam.css

@@ -1,5 +1,4 @@
 .dashcam-container {
-    /* padding: 20px; */
     text-align: center;
     display: flex;
     flex-direction: column;

src/components/Apps/Dashcam/Dashcam.js

@@ -26,7 +26,7 @@ export function Dashcam() {
     };
 
     // YouTube video ID
-    const videoId = '5gFR3sMWSO0'; // Replace with your desired video ID
+    const videoId = '5gFR3sMWSO0'; // Video ID for speicific video to play on load.
 
     return (
         <div className="dashcam-container">

src/components/Apps/Podcasts/Podcasts.css

@@ -0,0 +1 @@
+/* .podcasts {} */

src/components/Apps/Podcasts/Podcasts.js

@@ -5,7 +5,7 @@ export const Podcasts = () => {
   return (
     <div className="podcasts">
       <h2>Podcasts</h2>
-      {/* Add your component-specific content here */}
+      {/* Add component-specific content here */}
     </div>
   );
 };

src/components/Apps/Theater/Theater.js

@@ -6,7 +6,7 @@ export const Theater = () => {
     <div className="theaterWrapper">
       <h2>Theater</h2>
       <p>Coming Soon...</p>
-      {/* Add your component-specific content here */}
+      {/* Add component-specific content here */}
     </div>
   );
 };

src/components/Apps/Toybox/Toybox.js

@@ -6,7 +6,7 @@ export const Toybox = () => {
     <div className="toyboxWrapper">
       <h2>Toybox</h2>
       <p>Coming Soon...</p>
-      {/* Add your component-specific content here */}
+      {/* Add component-specific content here */}
     </div>
   );
 };

src/components/BatteryStatus/BatteryStatus.css

@@ -2,6 +2,4 @@
     transition: width 0.3s ease-in-out;
   }
 
-  .batteryStatus {
-    /* Add any additional styles you need */
-  }
+  /* .batteryStatus {} */

src/components/BtmNavBar/BtmNavBar.css

@@ -3,8 +3,6 @@
     position: relative;
     height: 13%;
     width: 100%;
-    /* height: calc(10vh - 1px); */
-    /* width: calc(100vw - 64px); */
     /* need to account for the 1px border in the width and height */
     border-left: 1px solid #343434;
     border-right: 1px solid #343434;
@@ -18,11 +16,9 @@
     color: white;
     display: grid;
     grid-template-columns: 8% 19% 48% 25%;
-    /* grid-gap: 10px; */
     align-items: center;
     height: 100%;
     text-align: center;
-    /* padding: 0 20px; */
 }
 
 .navIconWrapper {
@@ -51,17 +47,13 @@
 .dockApps {
     display: flex;
     flex-direction: row;
-    /* justify-content: space-between; */
     justify-self: center;
     align-items: center;
-    /* height: 100%; */
-    /* width: 100%; */
 }
 
 .navIcons {
     height: 45%;
     width: 45%;
-    /* width: 40px; */
     padding: 0 15px;
     transition: transform 0.1s ease-in-out, filter 0.1s ease-in-out;
 }
@@ -84,7 +76,6 @@
 }
 
 .car-settings {
-    /* width: 18%; */
     justify-self: start;
 }
 

src/components/CarLock/CarLock.css

@@ -22,7 +22,7 @@
 }
 
 .carLock .unlocked .lock-shackle {
-    transform: translateX(10px) rotateY(-180deg); /* Adjusted transformation */
+    transform: translateX(10px) rotateY(-180deg);
 }
 
 .carLock .locked {

src/components/LoadingScreen/LoadingScreen.css

@@ -28,7 +28,6 @@
   width: 10%;
   height: auto;
   position: absolute;
-  /* top: 35px; */
   animation: spinY 3s infinite linear;
   transform-style: preserve-3d;
 }
@@ -43,7 +42,7 @@
 
 .dots {
   display: inline-block;
-  width: 20px;  /* Adjust as needed */
+  width: 20px;
   text-align: left;
 }