From 33c2bbb83212a36a62bd014f9746bb6773333696 Mon Sep 17 00:00:00 2001
From: J-Lennox10 <jacklennox1@gmail.com>
Date: Thu, 16 Mar 2023 17:58:55 +0000
Subject: [PATCH] Fixed sizing of image at sidebar top, changed sidebar colour
 to white. Dropdown menu not included

---
 src/components/StationSidebar.vue |  4 ++--
 src/components/TrainSidebar.vue   | 38 ++++++++++++++++++-------------
 src/pages/MapPage.vue             |  6 ++---
 3 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/src/components/StationSidebar.vue b/src/components/StationSidebar.vue
index cb9db7c..29b12d7 100644
--- a/src/components/StationSidebar.vue
+++ b/src/components/StationSidebar.vue
@@ -40,7 +40,7 @@ export default {
     position: absolute;
     height: 80%;
     width: 100%;
-    color: white;
+    color: rgb(0, 0, 0);
 }
 
 #headerImage{
@@ -54,7 +54,7 @@ export default {
 #xButton{
     font-size: 80%;
     font-family: Georgia;
-    color: white;
+    color: rgb(0, 0, 0);
     position: absolute;
     top:10px;
     right:10px;
diff --git a/src/components/TrainSidebar.vue b/src/components/TrainSidebar.vue
index 57de4ed..984f015 100644
--- a/src/components/TrainSidebar.vue
+++ b/src/components/TrainSidebar.vue
@@ -1,15 +1,16 @@
 <template>
 <div id="sidebarDiv">
     <div id="sidebarHeader">
-        <div v-if="getTrainType() === 'DART'">
-          <img v-if="isTrainRunning() && isTrainLate()" src="../assets/red-train-tram-solid.png" class="trainMapIcon" alt="Late DART Icon">
-          <img v-else-if="isTrainRunning() && !isTrainLate()" src="../assets/green-train-tram-solid.png" class="trainMapIcon" alt="On-Time DART Icon">
-          <img v-else src="../assets/train-tram-solid.svg" class="trainMapIcon" alt="Not Running DART Icon">
+
+        <div id = "imageDiv" v-if="getTrainType() === 'DART'">
+          <img v-if="isTrainRunning() && isTrainLate()" src="../assets/red-train-tram-solid.png" class="headerImage" alt="Late DART Icon">
+          <img v-else-if="isTrainRunning() && !isTrainLate()" src="../assets/green-train-tram-solid.png" class="headerImage" alt="On-Time DART Icon">
+          <img v-else src="../assets/train-tram-solid.svg" class="headerImage" alt="Not Running DART Icon">
         </div>
-        <div v-else>
-          <img v-if="isTrainRunning() && isTrainLate()" src="../assets/red-train-solid.png" class="trainMapIcon" alt="Late Train Icon">
-          <img v-else-if="isTrainRunning() && !isTrainLate()" src="../assets/green-train-solid.png" class="trainMapIcon" alt="On-Time Train Icon">
-          <img v-else src="../assets/train-solid.svg" class="trainMapIcon" alt="Not Running Train Icon">
+        <div id = "imageDiv" v-else>
+          <img v-if="isTrainRunning() && isTrainLate()" src="../assets/red-train-solid.png" class="headerImage" alt="Late Train Icon">
+          <img v-else-if="isTrainRunning() && !isTrainLate()" src="../assets/green-train-solid.png" class="headerImage" alt="On-Time Train Icon">
+          <img v-else src="../assets/train-solid.svg" class="headerImage" alt="Not Running Train Icon">
         </div>
         <div v-on:click="store.setDisplaySelectedTrain(false)" id="xButton">X</div>
     </div>
@@ -84,21 +85,26 @@ export default {
   position: absolute;
   height: 80%;
   width: 100%;
-  color: white;
+  color: rgb(0, 0, 0);
 }
 
-#headerImage{
-  height: 80%;
-  width: auto;
-  overflow: hidden;
-  position: relative;
-  top: 10px;
+
+.headerImage{
+  height: 100%;
+  width: 40px;
+  padding-top: 10px;
+  
+}
+
+.imageDiv{
+  display: flex;
+  justify-content: center;
 }
 
 #xButton{
   font-size: 80%;
   font-family: Georgia;
-  color: white;
+  color: rgb(0, 0, 0);
   position: absolute;
   top:10px;
   right:10px;
diff --git a/src/pages/MapPage.vue b/src/pages/MapPage.vue
index 75fa544..7c33e45 100644
--- a/src/pages/MapPage.vue
+++ b/src/pages/MapPage.vue
@@ -422,9 +422,9 @@ export default {
   z-index: 2;
   text-align: center;
   animation: gradient 15s ease infinite;
-  background: linear-gradient(45deg, #000000, #111111, #222222, #333333, #444444, #555555);
-  background-size: 400%, 400%;
-  box-shadow: 0 0 4px 2px #333333;
+  background: linear-gradient(45deg, #ffffff, #fef3f3, #ffffff, #f2f2f2);
+  background-size: 100%, 100%;
+  box-shadow: 0 0 4px 2px #cccccc;
   overflow: hidden;
   font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
 }