From d66bdc07f66e5080f36e830fd48452785d769d0a Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 28 Feb 2022 17:44:27 -0800
Subject: [PATCH] Fix SearchModal styling

Brings it more in line with other modals
---
 components/SearchModal/index.scss | 40 +++++++++++-------------
 components/SearchModal/index.tsx  | 52 +++++++++++++++----------------
 2 files changed, 44 insertions(+), 48 deletions(-)

diff --git a/components/SearchModal/index.scss b/components/SearchModal/index.scss
index ce57bae8..05809b02 100644
--- a/components/SearchModal/index.scss
+++ b/components/SearchModal/index.scss
@@ -1,15 +1,18 @@
-.Modal.Search {
+.Search.Dialog {
     display: flex;
     flex-direction: column;
-    min-height: 420px;
-    min-width: 600px;
+    min-height: 431px;
+    width: 600px;
+    gap: 0;
     padding: 0;
 
-    #ModalHeader {
-        background: $grey-90;
-        gap: $unit;
+    #Header {
+        border-top-left-radius: $unit;
+        border-top-right-radius: $unit;
+        display: flex;
+        gap: $unit * 2.5;
         margin: 0;
-        padding: ($unit * 3) ($unit * 3) ($unit * 1.5) ($unit * 3);
+        padding: ($unit * 3) ($unit * 3) ($unit * 2) ($unit * 3);
         position: sticky;
         top: 0;
 
@@ -18,12 +21,6 @@
             border: none;
             height: 42px;
             padding: 0;
-
-            svg {
-                height: 24px;
-                width: 24px;
-                vertical-align: middle;
-            }
         }
 
         label {
@@ -40,15 +37,16 @@
             }
         }
     }
+
+    #Results {
+        margin: 0;
+        max-height: 330px;
+        padding: $unit ($unit * 1.5);
+        overflow-y: scroll;
+    }
 }
 
-.Search.Modal #results_container {
-    margin: 0;
-    max-height: 330px;
-    padding: 0 12px 12px 12px;
-}
-
-.Search.Modal #NoResults {
+.Search.Dialog #NoResults {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -56,7 +54,7 @@
     flex-grow: 1;
 }
 
-.Search.Modal #NoResults h2 {
+.Search.Dialog #NoResults h2 {
     color: #ccc;
     font-size: $font-large;
     font-weight: 500;
diff --git a/components/SearchModal/index.tsx b/components/SearchModal/index.tsx
index 4d470fc7..1ec39cb2 100644
--- a/components/SearchModal/index.tsx
+++ b/components/SearchModal/index.tsx
@@ -11,7 +11,7 @@ import WeaponResult from '~components/WeaponResult'
 import SummonResult from '~components/SummonResult'
 
 import './index.scss'
-import PlusIcon from '~public/icons/Add.svg'
+import CrossIcon from '~public/icons/Cross.svg'
 
 interface Props {
     send: (object: Character | Weapon | Summon, position: number) => any
@@ -115,7 +115,7 @@ const SearchModal = (props: Props) => {
             />
         })
 
-        return (<ul id="results_container">{elements}</ul>)
+        return (<ul id="Results">{elements}</ul>)
     }
 
     function renderSummonSearchResults(results: { [key: string]: any }) {
@@ -127,7 +127,7 @@ const SearchModal = (props: Props) => {
             />
         })
 
-        return (<ul id="results_container">{elements}</ul>)
+        return (<ul id="Results">{elements}</ul>)
     }
 
     function renderCharacterSearchResults(results: { [key: string]: any }) {
@@ -139,7 +139,7 @@ const SearchModal = (props: Props) => {
             />
         })
 
-        return (<ul id="results_container">{elements}</ul>)
+        return (<ul id="Results">{elements}</ul>)
     }
 
     function renderEmptyState() {
@@ -172,29 +172,27 @@ const SearchModal = (props: Props) => {
                 {props.children}
             </Dialog.Trigger>
             <Dialog.Portal>
-                <div className="ModalContainer">
-                    <Dialog.Content className="Search Modal">
-                        <div id="ModalHeader">
-                            <label className="search_label" htmlFor="search_input">
-                                <input 
-                                    autoComplete="off"
-                                    type="text"
-                                    name="query" 
-                                    className="Input" 
-                                    id="search_input"
-                                    ref={searchInput}
-                                    value={query}
-                                    placeholder={props.placeholderText}
-                                    onChange={inputChanged}
-                                />
-                            </label> 
-                            <Dialog.Close onClick={resetAndClose}>
-                                <PlusIcon />
-                            </Dialog.Close>
-                        </div>
-                        { ((Object.entries(results).length == 0) ? renderEmptyState() : renderResults()) }
-                    </Dialog.Content>
-                </div>
+                <Dialog.Content className="Search Dialog">
+                    <div id="Header">
+                        <label className="search_label" htmlFor="search_input">
+                            <input 
+                                autoComplete="off"
+                                type="text"
+                                name="query" 
+                                className="Input" 
+                                id="search_input"
+                                ref={searchInput}
+                                value={query}
+                                placeholder={props.placeholderText}
+                                onChange={inputChanged}
+                            />
+                        </label> 
+                        <Dialog.Close className="DialogClose" onClick={resetAndClose}>
+                            <CrossIcon />
+                        </Dialog.Close>
+                    </div>
+                    { ((Object.entries(results).length == 0) ? renderEmptyState() : renderResults()) }
+                </Dialog.Content>
                 <Dialog.Overlay className="Overlay" />
             </Dialog.Portal>
         </Dialog.Root>