From 7671a0fb45cfce97024f5e95529d565c2013e584 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Sat, 1 Dec 2018 18:12:13 -0800
Subject: [PATCH] Add some dubious style

---
 src/App.css | 52 ++++++++++++++++++++++++++++++++++++++++++++--------
 src/App.js  |  1 +
 2 files changed, 45 insertions(+), 8 deletions(-)

diff --git a/src/App.css b/src/App.css
index 603e40b2..b8e6411b 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,30 +1,66 @@
+/* Coolors Exported Palette - coolors.co/ed4b6c-f7b54c-06d6a0-4c84b2-684b3a
+
+HSL
+$color1: hsla(348%, 82%, 61%, 1);
+$color2: hsla(37%, 91%, 63%, 1);
+$color3: hsla(164%, 95%, 43%, 1);
+$color4: hsla(207%, 40%, 50%, 1);
+$color5: hsla(22%, 28%, 32%, 1);
+
+RGB
+$color1: rgba(237, 75, 108, 1);
+$color2: rgba(247, 181, 76, 1);
+$color3: rgba(6, 214, 160, 1);
+$color4: rgba(76, 132, 178, 1);
+$color5: rgba(104, 75, 58, 1);
+*/
+
 body {
   margin: 0;
-  background-color: grey;
+  background-color: rgba(59, 83, 90, 0.9);
 }
 
 #search {
   width: 100%;
   position: fixed;
   top: 0;
-  background: black;
-  padding: 5px;
-  text-align: center;
-  height: 50px; /* This matches the margin-top for #infinite-skins */
+  background: #4c84b2;
+  text-align: left;
+  height: 40px; /* This matches the margin-top for #infinite-skins */
   z-index: 5;
+  padding: 10px 0;
   /* A little shadow below the search bar */
-  -webkit-box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.15);
+  -webkit-box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.35);
   -moz-box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.35);
   box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.35);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+#search h1 {
+  margin: 0 20px 0 15px;
 }
 
 #search input {
+  margin-right: 25px;
+  max-width: 400px;
   border: none;
-  font-size: 40px;
+  font-size: 100%;
+  box-sizing: border-box;
+  border-width: 0.125rem;
+  line-height: 1.15;
+  height: 100%;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  border-radius: 9999px;
+  outline: none;
+  flex-grow: 1;
+  color: rgba(59, 83, 90, 0.9);
 }
 
 #infinite-skins {
-  margin-top: 50px; /* This matches the height of #search */
+  margin-top: 60px; /* This matches the height of #search */
 }
 
 body.overlay-open {
diff --git a/src/App.js b/src/App.js
index b887b35e..389d8716 100644
--- a/src/App.js
+++ b/src/App.js
@@ -129,6 +129,7 @@ class App extends React.Component {
     return (
       <div>
         <div id="search">
+          <h1>{"🌩️"}</h1>
           <input
             type="text"
             onChange={e => this.props.setSearchQuery(e.target.value)}