From e746df8fc6b0f81f373305ed692b0502f4530c3d Mon Sep 17 00:00:00 2001
From: J-Lennox10 <jacklennox1@gmail.com>
Date: Thu, 23 Mar 2023 13:22:56 +0000
Subject: [PATCH 1/2] Added CSS to searchbar

---
 src/pages/MapPage.vue | 64 ++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 63 insertions(+), 1 deletion(-)

diff --git a/src/pages/MapPage.vue b/src/pages/MapPage.vue
index 7cfedcb..5255fa9 100644
--- a/src/pages/MapPage.vue
+++ b/src/pages/MapPage.vue
@@ -1,6 +1,11 @@
 <template>
-   <input type="text" v-model="searchinput" placeholder="Search Trains" />
+   
 <Navbar />
+<div id="mapCover">
+  <div id="searchContainer">
+    <input id="searchBar" type="text" v-model="searchinput" placeholder="Search Trains" />
+  </div>
+</div>
 
 <div id="preferenceDropdown" class="dropdown">
   <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
@@ -498,6 +503,13 @@ export default {
 </script>
 
 <style scoped>
+
+#mapCover{
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
 .overlay-content {
   width: 1%;
 }
@@ -533,6 +545,29 @@ export default {
   font-size: 14.6px;
 }
 
+#searchContainer{
+  position: absolute;
+  top: 11%;
+  background-color: #ffffff;
+  width: 190px;
+  height: 40px;
+  z-index: 4;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: black;
+  box-shadow: 0 0 5px 2px #6e757dbe;
+  border-radius: 6%;
+}
+
+#searchBar{
+  text-align: center;
+  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+  border: none;
+  border-bottom: 1px solid black;
+}
+
+
 #preferenceDropdown {
   position: absolute;
   z-index: 3;
@@ -611,5 +646,32 @@ export default {
   left:5%;
   top: 18%;
   }
+
+  #mapCover{
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: left;
+}
+
+  #searchBar{
+    width: 100px;
+  }
+
+  #searchContainer{
+  position: absolute;
+  top: 11%;
+  left: 10px;
+  background-color: #ffffff;
+  width: 120px;
+  height: 40px;
+  z-index: 4;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: black;
+  box-shadow: 0 0 5px 2px #6e757dbe;
+  border-radius: 6%;
+}
 }
 </style>

From 6f9c1aa2ad2750bb567145ef9f33e80f88292ab3 Mon Sep 17 00:00:00 2001
From: Conor McNamara <conormcnamara245@gmail.com>
Date: Thu, 23 Mar 2023 14:21:08 +0000
Subject: [PATCH 2/2] Fix search bar layer

---
 src/pages/MapPage.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/pages/MapPage.vue b/src/pages/MapPage.vue
index 5255fa9..a8cfc6e 100644
--- a/src/pages/MapPage.vue
+++ b/src/pages/MapPage.vue
@@ -551,7 +551,7 @@ export default {
   background-color: #ffffff;
   width: 190px;
   height: 40px;
-  z-index: 4;
+  z-index: 3;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -565,6 +565,7 @@ export default {
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   border: none;
   border-bottom: 1px solid black;
+  z-index: 3;
 }
 
 
@@ -652,6 +653,7 @@ export default {
   width: 100%;
   display: flex;
   justify-content: left;
+  z-index: 3;
 }
 
   #searchBar{
@@ -665,7 +667,7 @@ export default {
   background-color: #ffffff;
   width: 120px;
   height: 40px;
-  z-index: 4;
+  z-index: 3;
   display: flex;
   justify-content: center;
   align-items: center;