Make filteredQueryResultsSelector async :)

src/components/App/App.css

@@ -1,9 +1,14 @@
+html {
+  background-color: #FAFAFA;
+}
+
 body {
   margin: 0px;
   font-family: monospace;
 }
 
-button, select {
+button,
+select {
   margin: 4px;
   padding: 8px;
   border: 1px solid black;
@@ -11,41 +16,63 @@ button, select {
   background-color: white;
 }
 
-button:focus, select:focus {
+button > * {
+  vertical-align: middle;
+}
+
+button:focus,
+select:focus {
   outline: none;
   border: 1px solid violet;
   border-radius: 24px;
 }
 
+button:hover {
+  color: white;
+  background-color: black;
+}
 button:active {
-  background-color: lightblue;
+  background-color: darkmagenta;
 }
 
 input[type="color"] {
   border: 1px solid black;
-  border-radius: 24px;
+  border-radius: 50%;
+  background-color: white;
 }
 
 input[type="color" i] {
   -webkit-appearance: square-button;
-  width: 32px;
-  height: 32px;
+  padding: 4px;
+  width: 25px;
+  height: 25px;
 }
 
-#color-picker {
+input[type="color"]:focus {
+  outline: none;
+  border: 1px solid violet;
+}
+
+pre {
+  padding: 4px;
+  background-color: gainsboro;
+}
+
+/* .color-picker {
   padding: 0px;
-  border-radius: 100%;
-    height: 32px;
-    width: 32px;
-    border: none;
-    outline: none;
-    -webkit-appearance: none;
+  background-color: white;
+  height: 32px;
+  width: 32px;
+  border: none;
+  outline: none;
+  -webkit-appearance: none;
 }
 
-#color-picker::-webkit-color-swatch {
+.color-picker::-webkit-color-swatch {
   border: none;
   border-radius: 50%;
-}
+  margin: 4px;
+} */
 
 /* input {
   margin: 4px;
@@ -59,4 +86,4 @@ input:focus {
   outline: none;
   border: 2px solid violet;
   border-radius: 24px;
-} */
+} */