From 6b7a5941918bf91d58037037a38f91b334313e25 Mon Sep 17 00:00:00 2001
From: rektdeckard <friedtm@gmail.com>
Date: Fri, 21 Aug 2020 03:21:04 -0400
Subject: [PATCH] Toolbar: better handle breakpoint styling

---
 src/components/ColorInput/ColorInput.css   | 3 +--
 src/components/SearchInput/SearchInput.css | 1 -
 src/components/SearchInput/SearchInput.tsx | 2 +-
 src/components/SizeInput/SizeInput.css     | 1 -
 src/components/StyleInput/StyleInput.css   | 7 ++++++-
 src/components/Toolbar/Toolbar.css         | 6 +++++-
 6 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/ColorInput/ColorInput.css b/src/components/ColorInput/ColorInput.css
index a0adcbf..d519989 100644
--- a/src/components/ColorInput/ColorInput.css
+++ b/src/components/ColorInput/ColorInput.css
@@ -23,11 +23,10 @@
 input.color-input {
   position: relative;
   height: 100%;
-  width: 96%;
+  width: 100%;
   box-sizing: border-box;
   border: none;
   border-radius: 8px;
-  margin: 0 0 0 4px;
   padding: 0;
   cursor: pointer;
 }
diff --git a/src/components/SearchInput/SearchInput.css b/src/components/SearchInput/SearchInput.css
index 83e64f7..ba8f981 100644
--- a/src/components/SearchInput/SearchInput.css
+++ b/src/components/SearchInput/SearchInput.css
@@ -3,7 +3,6 @@
   flex: 2;
   align-items: center;
   height: 48px;
-  margin: 0 4px;
   padding: 0 24px;
   border-radius: 8px;
   color: white;
diff --git a/src/components/SearchInput/SearchInput.tsx b/src/components/SearchInput/SearchInput.tsx
index 7da8b6b..e652cef 100644
--- a/src/components/SearchInput/SearchInput.tsx
+++ b/src/components/SearchInput/SearchInput.tsx
@@ -31,7 +31,7 @@ const SearchInput: React.FC<SearchInputProps> = () => {
         type="text"
         autoComplete="off"
         value={value}
-        placeholder="Search for an icon"
+        placeholder="Search"
         onChange={({ currentTarget }) => setValue(currentTarget.value)}
       />
       {value ? (
diff --git a/src/components/SizeInput/SizeInput.css b/src/components/SizeInput/SizeInput.css
index f8c7b4b..d47e2a5 100644
--- a/src/components/SizeInput/SizeInput.css
+++ b/src/components/SizeInput/SizeInput.css
@@ -4,7 +4,6 @@
   flex: 2;
   align-items: center;
   height: 48px;
-  margin: 0 4px;
   padding: 0 24px;
   color: white;
   border-radius: 8px;
diff --git a/src/components/StyleInput/StyleInput.css b/src/components/StyleInput/StyleInput.css
index 4f56e92..88c4497 100644
--- a/src/components/StyleInput/StyleInput.css
+++ b/src/components/StyleInput/StyleInput.css
@@ -19,7 +19,6 @@
   width: 176px !important;
   height: 48px !important;
   justify-content: flex-start;
-  margin: 0 4px;
   padding: 0 24px !important;
   color: white;
   border-radius: 8px !important;
@@ -28,6 +27,12 @@
   border: none !important;
 }
 
+@media screen and (max-width: 558px) {
+  .react-dropdown-select {
+    width: 100% !important;
+  }
+}
+
 .react-dropdown-select-content {
   display: flex;
   align-items: center;
diff --git a/src/components/Toolbar/Toolbar.css b/src/components/Toolbar/Toolbar.css
index fbe4ef6..b115718 100644
--- a/src/components/Toolbar/Toolbar.css
+++ b/src/components/Toolbar/Toolbar.css
@@ -14,9 +14,13 @@ menu.toolbar {
 .toolbar-contents {
   width: 83.33%;
   max-width: 1120px;
-  padding: 8px 0;
+  padding: 0 0 8px;
   display: flex;
   flex-flow: wrap;
   align-items: center;
   justify-content: space-between;
 }
+
+.toolbar-contents > * {
+  margin: 8px 4px 0;
+}