Design

src/App.css

@@ -1,7 +1,6 @@
 body {
   padding: 0;
-  /* color: black;
-  background-color: white; */
+
 }
 
 .App {

src/components/About.css

@@ -4,6 +4,13 @@
   border-bottom: 3px dashed #000000;
 }
 
+@media (prefers-color-scheme: dark) {
+  .aboutSection {
+    border-top: 3px dashed #ffffff;
+    border-bottom: 3px dashed #ffffff;
+  }
+}
+
 .aboutContainer {
   width: 50%;
   margin: auto;

src/components/Header.css

@@ -3,6 +3,12 @@ header {
   border-bottom: 3px solid #000000;
 }
 
+@media (prefers-color-scheme: dark) {
+  header {
+    border-bottom: 3px solid #ffffff;
+  }
+}
+
 header.showLinks {
   background: rgba(185, 71, 167, 0.5);
 }

src/components/LocationCard.css

@@ -25,6 +25,24 @@
   color: #FFFFFF;
 }
 
+@media (prefers-color-scheme: dark) {
+  .locationCard {
+    background-color: #B947A7;
+    ;
+    border-color: #ffffff;
+  }
+
+  .locationCard.grey {
+    background-color: #541445;
+    ;
+  }
+
+  .locationCard.black {
+    background-color: #332A32;
+    color: #FFFFFF;
+  }
+}
+
 .locationCard.hideCard {
   height: 0;
   visibility: hidden;

src/components/SearchBar.css

@@ -16,6 +16,17 @@
   }
 }
 
+@media (prefers-color-scheme: dark) {
+  .searchBar {
+    border: 3px solid #ffffff;
+  }
+  .searchInputContainer input {
+    border: none;
+    background-color: #000000;
+    color: #ffffff;
+  }
+}
+
 .searchIconContainer {
   padding: 1em;
 }
@@ -26,6 +37,8 @@
 
 .searchInputContainer input {
   border: none;
+  height: 2.7em;
+  width: 20em;
 }
 .searchInputContainer input:focus {
   outline: none;

src/components/WaitTimes.js

@@ -38,7 +38,7 @@ class WaitTimes extends React.Component {
           }
         );
       }
-
+      
       let locationCards = [];
       locationTimeMap.forEach((value, key) => {
         locationCards.push(<LocationCard key={key} location={key} time={value['waitTime']} lastReported={value['reportedTime']} backgroundColor={value['backgroundColor']}/>)