Updated styles for smaller phone size

jamesalmeida · Oct 3, 2024 · cded5c2 · cded5c2
1 parent f1af4b2
commit cded5c2
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 4 deletions.
diff --git a/src/App.css b/src/App.css
@@ -368,10 +368,31 @@ html, body { width:100%;  overflow: hidden; }
   .small-screen-message {
     display: block;
   }
+
+  .batteryStatus span {
+    padding-right: 0px;
+  }
+
+  .topBarCarStatusIcons {
+    font-size: 12px;
+  }
+
+  .carModelStatus{
+    top: -65%;
+    left: 1%;
+  }
+  .navBtn input {
+    font-size: 10px;
+  }
 }
 
 /* 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; */
+  }
+
   #root {
     height: 100dvh;
     padding: 0px;

diff --git a/src/components/CarLock/CarLock.css b/src/components/CarLock/CarLock.css
@@ -31,4 +31,11 @@
 
 .carLock .unlocked {
     color: #343434;
+}
+
+@media (max-width: 768px) {
+    .carLock {
+        width: 20px;
+    height: 12px;
+    }
 }
diff --git a/src/components/CarLock/CarLock.js b/src/components/CarLock/CarLock.js
@@ -8,8 +8,8 @@ const CarLock = () => {
   return (
     <div className="carLock" onClick={toggleLock}>
       <svg
-        width="40"
-        height="24"
+        width="100%"
+        height="100%"
         viewBox="0 0 24 24"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"

diff --git a/src/components/MapNavigation/MapNavigation.css b/src/components/MapNavigation/MapNavigation.css
@@ -251,6 +251,29 @@ input:focus {
     background: none !important;
 }
 
+@media (max-width: 768px) {
+    .topMenuBar {
+        font-size: 9px;
+    }
+    .airbagStatusText{
+        width: auto;
+        font-size: 3px;
+    }
+    .airbagStatus img {
+        width: auto;
+        height: 6px;
+        margin-right: 2px;
+    }
+    .wifiStatus {
+        width: 15px;
+        margin-right: 4px;
+        margin-left: 4px;
+    }
+    .floatingBtn .icon {
+        /* width: 15px; */
+    }
+}
+
 /* Media query for mobile devices in landscape mode */
 @media only screen and (max-device-width: 896px) and (orientation: landscape) {
     .navBtn input {

diff --git a/src/components/MapNavigation/MapNavigation.js b/src/components/MapNavigation/MapNavigation.js
@@ -252,7 +252,7 @@ export function MapNavigation() {
         </div>
         <div className="airbagStatus no-select">
           <img src={getImagePath("icon-airbags.svg")} alt="Airbag Status" />
-          <div className="airbagStatusText">PASSENGER AIRBAG <span className="airbagStatusOff">OFF</span></div>
+          <div className="airbagStatusText">PASSENGER AIRBAG&nbsp;<span className="airbagStatusOff">OFF</span></div>
         </div>
       </div>
       <div className="mapOverlayWrapper">
@@ -261,7 +261,7 @@ export function MapNavigation() {
             onLoad={onAutocompleteLoad}
             onPlaceChanged={onPlaceChanged}
             options={{ fields: ['place_id', 'geometry', 'name', 'formatted_address'] }}
-            className="custom-autocomplete-container" // Add this line
+            className="custom-autocomplete-container"
           >
             <form className="floatingBtn navBtn" onSubmit={(e) => { e.preventDefault(); }}>
               <img className="searchIcon" src={getImagePath("icon-search.svg")} alt="Search Map" />

diff --git a/src/components/TemperatureControl/TemperatureControl.css b/src/components/TemperatureControl/TemperatureControl.css
@@ -23,6 +23,12 @@
     max-width: 70px;
 }
 
+@media (max-width: 768px) {
+    .navIcons.temperature-display {
+        font-size: 15px;
+    }
+}
+
 @media only screen and (max-device-width: 896px) and (orientation: landscape) {
     .navIcons.temperature-display {
         font-size: 20px;

diff --git a/src/components/UserProfile/UserProfile.css b/src/components/UserProfile/UserProfile.css
@@ -78,4 +78,14 @@
 
   .driver-profile-settings img {
     width: 9%;
+  }
+
+  @media (max-width: 768px) {
+    .userProfile img {
+      height: 14px;
+      margin-right: 4px;
+    }
+    .userProfile span { 
+      /* font-size: 10px; */
+    }
   }