From 339a8a94024e0c27c22ca6f3a966fa3132dd22d8 Mon Sep 17 00:00:00 2001
From: Zef Hemel <zef@zef.me>
Date: Mon, 1 Aug 2022 13:05:30 +0200
Subject: [PATCH] Filter box styling fixes

---
 packages/web/components/filter.tsx  | 160 ++++++++++++++--------------
 packages/web/styles/filter_box.scss |  11 +-
 2 files changed, 88 insertions(+), 83 deletions(-)

diff --git a/packages/web/components/filter.tsx b/packages/web/components/filter.tsx
index 8a5de0dc..c0ab4149 100644
--- a/packages/web/components/filter.tsx
+++ b/packages/web/components/filter.tsx
@@ -122,87 +122,89 @@ export function FilterList({
   }, []);
 
   const returnEl = (
-    <div className="filter-box">
-      <div className="header">
-        <label>{label}</label>
-        <input
-          type="text"
-          value={text}
-          placeholder={placeholder}
-          ref={searchBoxRef}
-          onChange={filterUpdate}
-          onBlur={(e) => {
-            searchBoxRef.current!.focus();
-          }}
-          onKeyDown={(e: React.KeyboardEvent) => {
-            // console.log("Key up", e);
-            if (onKeyPress) {
-              onKeyPress(e.key, text);
-            }
-            switch (e.key) {
-              case "ArrowUp":
-                setSelectionOption(Math.max(0, selectedOption - 1));
-                break;
-              case "ArrowDown":
-                setSelectionOption(
-                  Math.min(matchingOptions.length - 1, selectedOption + 1)
-                );
-                break;
-              case "Enter":
-                onSelect(matchingOptions[selectedOption]);
-                e.preventDefault();
-                break;
-              case "Escape":
-                onSelect(undefined);
-                break;
-              case " ":
-                if (completePrefix && !text) {
-                  updateFilter(completePrefix);
+    <div className="filter-wrapper">
+      <div className="filter-box">
+        <div className="header">
+          <label>{label}</label>
+          <input
+            type="text"
+            value={text}
+            placeholder={placeholder}
+            ref={searchBoxRef}
+            onChange={filterUpdate}
+            onBlur={(e) => {
+              searchBoxRef.current!.focus();
+            }}
+            onKeyDown={(e: React.KeyboardEvent) => {
+              // console.log("Key up", e);
+              if (onKeyPress) {
+                onKeyPress(e.key, text);
+              }
+              switch (e.key) {
+                case "ArrowUp":
+                  setSelectionOption(Math.max(0, selectedOption - 1));
+                  break;
+                case "ArrowDown":
+                  setSelectionOption(
+                    Math.min(matchingOptions.length - 1, selectedOption + 1)
+                  );
+                  break;
+                case "Enter":
+                  onSelect(matchingOptions[selectedOption]);
                   e.preventDefault();
-                }
-                break;
-            }
-            e.stopPropagation();
-          }}
-          onClick={(e) => e.stopPropagation()}
-        />
-      </div>
-      <div
-        className="help-text"
-        dangerouslySetInnerHTML={{ __html: helpText }}
-      ></div>
-      <div className="result-list">
-        {matchingOptions && matchingOptions.length > 0
-          ? matchingOptions.map((option, idx) => (
-              <div
-                key={"" + idx}
-                ref={selectedOption === idx ? selectedElementRef : undefined}
-                className={
-                  selectedOption === idx ? "selected-option" : "option"
-                }
-                onMouseOver={(e) => {
-                  setSelectionOption(idx);
-                }}
-                onClick={(e) => {
-                  e.preventDefault();
-                  onSelect(option);
-                }}
-              >
-                <span className="icon">
-                  {icon && <FontAwesomeIcon icon={icon} />}
-                </span>
-                <span
-                  className="name"
-                  dangerouslySetInnerHTML={{
-                    __html: option?.result?.indexes
-                      ? fuzzysort.highlight(option.result, "<b>", "</b>")!
-                      : escapeHtml(option.name),
+                  break;
+                case "Escape":
+                  onSelect(undefined);
+                  break;
+                case " ":
+                  if (completePrefix && !text) {
+                    updateFilter(completePrefix);
+                    e.preventDefault();
+                  }
+                  break;
+              }
+              e.stopPropagation();
+            }}
+            onClick={(e) => e.stopPropagation()}
+          />
+        </div>
+        <div
+          className="help-text"
+          dangerouslySetInnerHTML={{ __html: helpText }}
+        ></div>
+        <div className="result-list">
+          {matchingOptions && matchingOptions.length > 0
+            ? matchingOptions.map((option, idx) => (
+                <div
+                  key={"" + idx}
+                  ref={selectedOption === idx ? selectedElementRef : undefined}
+                  className={
+                    selectedOption === idx ? "selected-option" : "option"
+                  }
+                  onMouseOver={(e) => {
+                    setSelectionOption(idx);
                   }}
-                ></span>
-                {option.hint && <span className="hint">{option.hint}</span>}
-              </div>
-            ))
-          : null}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    onSelect(option);
+                  }}
+                >
+                  <span className="icon">
+                    {icon && <FontAwesomeIcon icon={icon} />}
+                  </span>
+                  <span
+                    className="name"
+                    dangerouslySetInnerHTML={{
+                      __html: option?.result?.indexes
+                        ? fuzzysort.highlight(option.result, "<b>", "</b>")!
+                        : escapeHtml(option.name),
+                    }}
+                  ></span>
+                  {option.hint && <span className="hint">{option.hint}</span>}
+                </div>
+              ))
+            : null}
+        </div>
       </div>
     </div>
   );
diff --git a/packages/web/styles/filter_box.scss b/packages/web/styles/filter_box.scss
index afd30c98..9e16e1e7 100644
--- a/packages/web/styles/filter_box.scss
+++ b/packages/web/styles/filter_box.scss
@@ -1,12 +1,10 @@
 @import "constants";
 
-.filter-box {
+.filter-wrapper {
   position: absolute;
-  font-family: $ui-font;
   margin: auto;
   max-width: 500px;
   height: 600px;
-  background-color: #fff;
   left: 0;
   right: 0;
   top: 0;
@@ -14,9 +12,15 @@
   max-height: 290px;
   overflow: hide;
   z-index: 100;
+}
+
+.filter-box {
+  font-family: $ui-font;
+  background-color: #fff;
   border: rgb(103, 103, 103) 1px solid;
   border-radius: 8px;
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+  margin: 10px;
 
   .header {
     border-bottom: 1px rgb(108, 108, 108) solid;
@@ -53,7 +57,6 @@
   .result-list {
     max-height: 200px;
     overflow-y: scroll;
-    background-color: white;
 
     .icon {
       padding: 0 8px 0 5px;