added Open button for Vehicle Status widget. Adjusted sizing of other components in Status widget

src/components/VehicleStatus/EmergencyStop.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="outer_div">
+    <div class="emergency-stop-div">
-   
+        <button class="emergency-button"> EMERGENCY STOP </button>
     </div>
     
 </template>
@@ -11,53 +11,33 @@
         data() {
             return {};    
         },
-        props: {
+        // props: {
-            latency: { required: true, type: Number},
+        // },
-        },
+        // computed: {
-        computed: {
+        // }
-        }
     };
 </script>
     
     
 <style scoped>
-    .outer_div {
+    .emergency-stop-div {
-        display: flex;
         position: relative;
-        height: 25%;
-        width: 10%;  
-    }
-    .connection-container {
-        position: relative;
-        justify-content: center;
         display: flex;
-        gap: 0.05em;
+        height: 20%;
-        height: 100%;
+        width: 70%;  
-        width: 100%;
+        text-align: center;
-        border-radius: 12%;
-        /* background-color: white; */
-    }
-    .bar {
-        width:100%;
-        background-color: white;
-        border: 0.1em solid black;
-        margin-top: auto;
-        border-radius: 20%;
-    }
-    .grayed_bar {
-        width:100%;
-        background-color: rgb(136, 135, 135);
-        border: 0.1em solid black;
-        margin-top: auto;
-        opacity: 0.2;
-        border-radius: 20%;
-    }
-    .connection_number {
-        position: absolute;
-        left: 110%;
-        bottom: 0%;
-        width: 180%;
-        font-size:0.8em;
     }
 
+    .emergency-button {
+        position: relative;
+        display: inline-block;
+        width: 100%;
+        height: 100%;
+        background-color: rgb(255, 57, 57);
+        font-size: 1em;
+    } 
+
+    .emergency-button:hover {
+        background-color: rgb(192, 40, 40);
+    }
 </style> 

src/components/VehicleStatus/Open.vue

@@ -0,0 +1,50 @@
+<template>
+    <!-- <div class="open-button-div">
+        <button class="open-button">OPEN</button>
+    </div> -->
+    <button class="test-open-button">OPEN</button>
+</template>
+    
+<script lang="ts">
+
+    export default {
+        data() {
+            return {};    
+        },
+        // props: {
+        // },
+        // computed: {
+        // }
+    };
+</script>
+    
+    
+<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;
+        width: 30%;
+        height: 20%;
+        background-color: #011949;
+        font-size: 1em;
+    } 
+
+    .test-open-button:hover {
+        background-color: #03369b;
+    }
+</style> 

src/components/VehicleStatus/VehicleTitle.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="vehicle-title-container">
         <div class="vehicle-name-div"> {{ vehicleName }} </div>
+
         <div class="vehicle-status-div">Status: {{ vehicleStatus }}</div>
     </div>
     
@@ -11,7 +12,8 @@
     export default {
         props: {
             vehicleName: { required: true, type: String },
-            vehicleStatus: { required: true, type: String }
+            vehicleStatus: { required: true, type: String },
+            vehicleIcon: { type: Object }
         }
     };
 </script>
@@ -28,13 +30,20 @@
 
     .vehicle-name-div {
         position: relative;
-        font-size: 2.5em;
+        font-size: 2.3em;
     }
 
     .vehicle-status-div {
         position: relative;
-        font-size: 1.5em;  
+        font-size: 1.6em;  
-        margin-top: 5%;;
+        margin-top: 5%;
+    }
+
+    .vehicle-icon {
+        position: relative;
+        width: 12%;
+        height: 12%;
+        /* vertical-align: middle; */
     }
 
 </style> 

src/components/VehicleStatusComponent.vue

@@ -2,6 +2,8 @@
     import Battery from './VehicleStatus/Battery.vue';
     import Connection from './VehicleStatus/Connection.vue';
     import VehicleTitle from './VehicleStatus/VehicleTitle.vue';
+    import EmergencyStop from './VehicleStatus/EmergencyStop.vue';
+    import Open from './VehicleStatus/Open.vue';
 
     export default {
         props: {
@@ -12,7 +14,9 @@
         components: {
             VehicleTitle,
             Battery,
-            Connection
+            Connection,
+            EmergencyStop,
+            Open
         },
         // computed: {
         //     batteryPercentage(): number {
@@ -33,7 +37,8 @@
         </div>
 
         <div class="right-container">
-
+            <Open class="adjust-open-button"></Open>
+            <EmergencyStop class="adjust-emergency-button"/>
         </div>
     </div>
 </template>
@@ -70,19 +75,29 @@
     }
 
     .adjust-battery {
-        height: 19%;
+        height: 17%;
-        width: 36%;
+        width: 34.5%;
         margin-top: auto;
         margin-left: 8%;
     }
 
     .adjust-connection {
-        height: 30%;
+        height: 28%;
-        width: 28%; 
+        width: 26%; 
-        margin-top: 1%;
+        margin-top: 2%;
         margin-bottom: 4%;  
         margin-left: 10%; 
     }
 
+    .adjust-emergency-button {
+        margin-top: auto;
+        margin-bottom: 4%;  
+        margin-left: 20%;
+    }
+
+    .adjust-open-button {
+        margin-top: 4%;
+        margin-left: 60%;
+    }
  
 </style>