readjust sizes of components in vehicle status component

src/components/VehicleStatus/Connection.vue

@@ -13,7 +13,7 @@
             <div v-if="latency >= 40 || latency == 0" class="grayed_bar" style='height: 80%'></div>
             <div v-else class="bar" style='height: 80%'></div>
         </div>
-        <span class="connection_number">{{ latency }} ms</span>
+        <!-- <span class="connection_number">{{ latency }} ms</span> -->
     </div>
     
     </template>

src/components/VehicleStatus/EmergencyStop.vue

@@ -34,7 +34,8 @@
         width: 100%;
         height: 100%;
         background-color: rgb(255, 57, 57);
-        font-size: 1em;
+        font-size: 0.96em;
+        transition: background-color 0.20s;
     } 
 
     .emergency-button:hover {

src/components/VehicleStatus/Open.vue

@@ -1,8 +1,5 @@
 <template>
-    <!-- <div class="open-button-div">
-        <button class="open-button">OPEN</button>
-    </div> -->
-    <button class="test-open-button">OPEN</button>
+    <button class="open-button">OPEN</button>
 </template>
     
 <script lang="ts">
@@ -20,31 +17,19 @@
     
     
 <style scoped>
-    .open-button-div {
-        position: relative;
-        height: 25%;
-        width: 35%;  
-    }
 
     .open-button {
         position: relative;
-        display: inline-block;
-        width: 100%;
-        height: 100%;
-        background-color: #011949;
-        font-size: 1.3em;
-    } 
-
-    .test-open-button {
-        position: relative;
-        display: inline-block;
+        display: flex;
+        justify-content: center;
         width: 30%;
         height: 20%;
         background-color: #011949;
         font-size: 1em;
+        transition: background-color 0.20s;
     } 
 
-    .test-open-button:hover {
-        background-color: #03369b;
+    .open-button:hover {
+        background-color: #194398;
     }
 </style> 

src/components/VehicleStatus/VehicleTitle.vue

@@ -1,7 +1,9 @@
 <template>
     <div class="vehicle-title-container">
-        <div class="vehicle-name-div"> {{ vehicleName }} </div>
-
+        <div class="vehicle-name-div"> 
+                {{ vehicleName }} 
+              <!--  <img src="../../assets/MEA.png" class="vehicle-icon"></img>--> 
+        </div>
         <div class="vehicle-status-div">Status: {{ vehicleStatus }}</div>
     </div>
     
@@ -28,22 +30,26 @@
         padding-left: 6%;
     }
 
+    /* .vehicle-name-div {
+        position: relative;
+        font-size: 2.3em;
+    } */
+
     .vehicle-name-div {
         position: relative;
+        display: flex;
         font-size: 2.3em;
     }
 
     .vehicle-status-div {
         position: relative;
-        font-size: 1.6em;  
+        font-size: 1.4em;  
         margin-top: 5%;
     }
 
     .vehicle-icon {
         position: relative;
-        width: 12%;
-        height: 12%;
-        /* vertical-align: middle; */
+        width: 22%;
     }
 
 </style> 

src/components/VehicleStatusComponent.vue

@@ -31,10 +31,15 @@
         <!-- Left side of container (Name, Status, Battery, Connection)-->
         <div class="left-container">
             <VehicleTitle :vehicleName="vehicleName" :vehicleStatus="vehicleStatus"/>
-            <Battery :percentage = "batteryPct" :charging="false" class="adjust-battery"/>
+            <!-- <Battery :percentage = "batteryPct" :charging="false" class="adjust-battery"/> -->
+            <div class="battery-status-container">
+                <Battery :percentage = "batteryPct" :charging="false" class="adjust-battery"/>
+                <span style="margin-top: 4%; font-size: 1.4em;">{{ batteryPct }}%</span>
+            </div>
             <Connection :latency="latency" class="adjust-connection"/> 
         </div>
 
+        <!-- Right side of container (Open button, Coordinates, Emergency Stop)-->
         <div class="right-container">
             <Open class="adjust-open-button"></Open>
             <Coordinate :coordinates="coordinates" class="adjust-coordinates"></Coordinate>
@@ -48,7 +53,7 @@
     .status_container {
         display: flex;
         position: relative;
-        height: 200px;
+        height: 100%;
 
         /* width: 25%;  */
         width: 100%; 
@@ -58,12 +63,21 @@
         color: black;
     }
 
+    .battery-status-container {
+        display: flex;
+        position: relative;
+        width: 100%; 
+        height: 20%;
+        gap: 6%;
+        margin-top: auto;
+    }
+
     .left-container {
         position: relative;
         display: flex;
         flex-direction: column;
         height: 100%;
-        width: 40%;
+        width: 37%;
     }
 
     .right-container {
@@ -71,14 +85,21 @@
         display: flex;
         flex-direction: column;
         height: 100%;   
-        width: 60%; 
+        width: 63%; 
     }
 
-    .adjust-battery {
+/* below is CSS adjustment for battery by itself */
+    /* .adjust-battery {
         height: 17%;
-        width: 34.5%;
+        width: 36%;
         margin-top: auto;
         margin-left: 8%;
+    } */
+
+    .adjust-battery {
+        height: 84%;
+        width: 38%;
+        margin-left: 8%;
     }
 
     .adjust-connection {

src/main.ts

@@ -2,5 +2,6 @@ import { createApp } from "vue";
 import "./styles.css";
 import App from "./App.vue";
 import router from "./router";
+import yuh from "./views/testMapScreen.vue"
 
-createApp(App).use(router).mount("#app");
+createApp(yuh).use(router).mount("#app");

src/views/testMapScreen.vue

@@ -7,16 +7,22 @@ let testCoordinateObject = {
         longitude: -177.9325790,
         latitude: 33.9325790
     }
+let testCoordinateObject2 = {
+    longitude: 40.748440,
+    latitude: -73.984559
+}
 
 </script>
 <template>
   <NavBar></NavBar>
   <div class="screen_div">
+    <!-- Map component will be placed below -->
     <div class="map_div"></div>
+
     <div class="status_rightside">
-        <Status :batteryPct=100 :latency=54 :coordinates="testCoordinateObject" :vehicleName="'ERU'" :vehicleStatus="'In Use'"/>
+        <Status :batteryPct=100 :latency=50 :coordinates="testCoordinateObject2" :vehicleName="'ERU'" :vehicleStatus="'In Use'"/>
         <Status :batteryPct=48 :latency=30 :coordinates="testCoordinateObject" :vehicleName="'MEA'" :vehicleStatus="'Standby'"/>
-        <Status :batteryPct=0 :latency=97 :coordinates="testCoordinateObject" :vehicleName="'MRA'" :vehicleStatus="'Offline'"/>
+        <Status :batteryPct=0 :latency=97 :coordinates="testCoordinateObject2" :vehicleName="'MRA'" :vehicleStatus="'Offline'"/>
         <Status :batteryPct=10 :latency=0 :coordinates="testCoordinateObject" :vehicleName="'FRA'" :vehicleStatus="'Offline'"/>
 
     </div>
@@ -41,7 +47,7 @@ let testCoordinateObject = {
     flex-direction: column;
     border: 0.003em solid black;
     height: 100%;
-    width: 25%;
+    width: 23%;
     margin-left: auto
 }