Fixed sidebar CSS issues for non running trains along with other small issues

src/components/StationSidebar.vue

@@ -86,6 +86,7 @@ export default {
 
 #xButton:hover{
     color:red;
+    cursor: pointer;
 }
 
 #typeDiv, #positionDiv, #descriptionDiv{

src/components/TrainSidebar.vue

@@ -49,19 +49,27 @@
           <p id="directionP"><span style="color:grey; font-size: 14px;">Direction:</span><br>{{ store.selectedTrain["Direction"][0] }}</p>
         </div>
 
-        <div v-if="store.selectedTrain['TrainStatus'][0] != 'N'" id="punctualityDiv">
+        <div v-if="isTrainRunning()" id="publicMessageDiv">
-          <div id="punctualityIcon">
-            <img id="punctualityImage" src="../assets/publicMessageIcon.png">
-          </div>
-          <p id="punctualityP"><span style="color:grey; font-size: 14px;">Punctuality:</span><br>{{ store.selectedTrain["Punctuality"][0] }}</p>
-        </div>
-
-        <div id="publicMessageDiv">
           <div id="publicMessageIcon">
             <img id="publicMessageImage" src="../assets/publicMessageIcon.png">
           </div>
           <p id="publicMessageP"><span style="color:grey; font-size: 14px;">Public Message:</span><br>Public Message: {{ store.selectedTrain["PublicMessage"][0] }}</p>
         </div>
+
+        <div v-else id="notRunningPublicMessageDiv">
+          <div id="publicMessageIcon">
+            <img id="publicMessageImage" src="../assets/publicMessageIcon.png">
+          </div>
+          <p id="publicMessageP"><span style="color:grey; font-size: 14px;">Public Message:</span><br>Public Message: {{ store.selectedTrain["PublicMessage"][0] }}</p>
+        </div>
+
+        <div v-if="store.selectedTrain['TrainStatus'][0] != 'N'" id="punctualityDiv">
+            <div id="punctualityIcon">
+              <img id="punctualityImage" src="../assets/punctualityIcon.png">
+            </div>
+            <p id="punctualityP"><span style="color:grey; font-size: 14px;">Punctuality:</span><br>{{ store.selectedTrain["Punctuality"][0] }}</p>
+        </div>
+
     </div>
   </div>
   </template>
@@ -157,6 +165,7 @@ export default {
 
 #xButton:hover{
   color:red;
+  cursor: pointer;
 }
 
 #originDiv, #destinationDiv{
@@ -177,12 +186,13 @@ export default {
 
 
 /* Sidebar Section Divs */
-#typeDiv, #dateDiv, #positionDiv, #directionDiv, #publicMessageDiv, #punctualityDiv{
+#typeDiv, #dateDiv, #positionDiv, #directionDiv, #publicMessageDiv, #notRunningPublicMessageDiv, #punctualityDiv{
   background-color: rgb(230, 230, 230);
   height: 12%;
   position: absolute;
   right:0px;
   width:100%;
+  
 }
 
 #typeIcon, #dateIcon, #positionIcon, #directionIcon, #publicMessageIcon, #punctualityIcon{
@@ -195,17 +205,13 @@ export default {
   justify-content: center;
 }
 
-#publicMessageIcon{
-  align-items: center;
-}
-
 #typeP, #dateP, #longP, #latP, #directionP, #publicMessageP, #punctualityP{
-  font-size: 16px;
+  font-size: 15px;
   position: relative;
-  bottom: 2px;
   width: 40%;
   left: 22%;
   text-align: left;
+  bottom:4px;
 }
 
 #positionParagraphDiv{
@@ -225,27 +231,24 @@ export default {
   width: 70%;
 }
 
-#dateImage, #positionImage, #directionImage{
+#dateImage, #positionImage, #directionImage, #punctualityImage, #publicMessageImage{
   padding-top: 2px; 
   padding-bottom: 2px;
 }
-
-#publicMessageImage{
-  height: 40%;
-  position: relative;
-  top:-10px;
-}
-
 /*Positioning rows*/
-#dateDiv{top: 60px;}
+#dateDiv{top: 16%;}
-#positionDiv{top: 110px;}
+#positionDiv{top: 29%;}
-#directionDiv{top: 160px;}
+#directionDiv{top: 42%;}
-#punctualityDiv{top: 210px;}
+#punctualityDiv{top: 55%;}
-#publicMessageDiv{
+#publicMessageDiv, #notRunningPublicMessageDiv{
-  top:260px;
+  top:68%;
-  height: 40%;
+  height: fit-content;
 }
 
+#notRunningPublicMessageDiv{top: 55%;}
+
+
+
 @media screen and (max-width: 850px) {
   .headerImage{
   height: 100%;
@@ -253,5 +256,9 @@ export default {
   padding: 10px;
   }
 
+  #typeImage{
+  width: 45%;
+  }
+
 }
 </style>

src/pages/AccountPage.vue

@@ -21,8 +21,8 @@
         <div id="newPassword">
             <img v-if="showNewPassword" id="eyeImg" src="../assets/314858_hidden_eye_icon.png" @click="this.showNewPassword = !this.showNewPassword" alt="show">
             <img v-else id = "eyeImg" src="../assets/315220_eye_icon.png" @click="this.showNewPassword = !this.showNewPassword">
-            <input v-if="showNewPassword" id="newPass" type="text" v-model="newPassword" placeholder="Enter existing password">
+            <input v-if="showNewPassword" id="newPass" type="text" v-model="newPassword" placeholder="Enter new password">
-            <input v-else type="password" id="newPass" v-model="newPassword" placeholder="Enter existing password">
+            <input v-else type="password" id="newPass" v-model="newPassword" placeholder="Enter new password">
             <button @click="updateUserPassword()" id="passUpdate" type="button" class="btn btn-primary">Update Password</button>
         </div>
         
@@ -276,9 +276,6 @@ input {
     align-items: center;
 }
 
-#imgDiv1:hover, #imgDiv2:hover{
-    transform: scale(1.1);
-}
 
 #eyeImg{
     width: 6%;
@@ -286,6 +283,9 @@ input {
     order: 2;
 }
 
+#eyeImg:hover{
+    transform: scale(1.1);
+}
 
 ::placeholder{
     font-size: 14px;;

src/pages/MapPage.vue

@@ -16,7 +16,7 @@
       <div class="container-fluid" @change="decideShowStations();">
         <div class="form-check form-switch">
           <input @change="selectAllStations();" class="form-check-input" type="checkbox" role="switch" id="showAllStations" v-model="showAllStations"/>
-          <label class="form-check-label" for="showAllStations">All Stations</label>
+          <label class="form-check-label" for="showAllStations">Show Stations</label>
         </div>
         <hr/>
         <div class="form-check form-switch">
@@ -33,7 +33,7 @@
       <div class="container-fluid" @change="decideShowTrains();">
         <div class="form-check form-switch">
           <input @change="selectAllTrains();" class="form-check-input" type="checkbox" role="switch" id="showAllTrains" v-model="showAllTrains"/>
-          <label class="form-check-label" for="showAllTrains">All Trains</label>
+          <label class="form-check-label" for="showAllTrains">Show Trains</label>
         </div>
         <hr/>
         <div class="form-check form-switch">
@@ -656,6 +656,7 @@ export default {
   z-index: 3;
   position: fixed;
   bottom: 0px;
+  padding: 2px;
   width:100%;
   background-color: rgb(255, 255, 125);
   color: black;