search bar changes

src/components/SearchBar.vue

@@ -2,8 +2,8 @@
   <div class="mt-4">
     <input
       type="text" id="searchTerm"
-      class="bg-white shadow-md p-4 border border-gray-200 dark:bg-gray-800 dark:border-gray-600 rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-      placeholder="Search Stops by name or ID" required
+      :class="searchClasses + ' shadow-md border rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500'"
+      :placeholder="placeholder" required
       autocomplete="off"
       v-model="searchTerm"
       v-on:input="searchStops"
@@ -42,6 +42,14 @@ import ServiceIcon from "@/components/ServiceIcon.vue";
 import StopIcon from "@/components/StopIcon.vue";
 
 export default {
+  props: {
+    placeholder: {
+      default: ''
+    },
+    searchClasses: {
+      default: ''
+    }
+  },
   components: {StopIcon, ServiceIcon},
   computed: {
     search() {

src/views/Home.vue

@@ -1,5 +1,8 @@
 <template>
-  <SearchBar />
+  <SearchBar 
+    placeholder="Search Stops by name or ID" 
+    searchClasses="bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-600 p-4 "
+  />
   <Card class="m-4">
     <h1 class="text-3xl font-bold leading-tight text-gray-900 mb-4 dark:text-gray-200">
       Welcome

src/views/Planner/Home.vue

@@ -10,6 +10,10 @@
 
       <form>
         <div class="mb-6">
+          <SearchBar 
+            placeholder="Origin"
+            searchClasses="bg-gray-50 dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-sm p-2.5 text-gray-900"
+          />
           <input 
             type="text" id="origin" 
             class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
@@ -40,18 +44,20 @@
 import Card from '@/components/Card.vue'
 import PageTitle from '@/components/PageTitle.vue'
 import Alert from "@/components/Alert.vue"
+import SearchBar from '@/components/SearchBar.vue'
 
 export default {
   name: 'JourneyPlannerHome',
   components: {
     Card,
     PageTitle,
-    Alert
+    Alert,
+    SearchBar
   },
   data(){
     return {
-      originStop : "gb-atco-9100CAMBDGE",
-      destinationStop: "gb-atco-9100KNGX"
+      originStop : "tmr-stop-f2682658fb0233a2c24c460d6b97",
+      destinationStop: "tmr-stop-6d4a16c404d022a7e49dd47971e6"
     }
   },
   methods: {