Refactor SearchModal

components/SearchModal/index.scss

@@ -1,31 +1,34 @@
-.SearchModal {
+.ModalContainer .Modal.SearchModal {
+    display: flex;
+    flex-direction: column;
     min-height: 420px;
     min-width: 600px;
-}
+    padding: 0;
 
-.SearchModal .Input {
-    padding: 12px 8px;
-    text-align: left;
-}
+    #ModalTop {
+        background: $grey-90;
+        gap: $unit;
+        margin: 0;
+        padding: ($unit * 3) ($unit * 3) ($unit * 1.5) ($unit * 3);
+        position: sticky;
+        top: 0;
 
-.SearchModal label {
-    width: 100%;
-}
+        label {
+            width: 100%;
 
-.SearchModal label .Input {
-    width: 100%;
-}
-
-.SearchModal #input_container {
-    background: #f5f5f5;
-    padding: 24px 24px 12px 24px;
-    position: sticky;
-    top: 0;
+            .Input {
+                box-sizing: border-box;
+                padding: 12px 8px;
+                text-align: left;
+                width: 100%;
+            }
+        }
+    }
 }
 
 .SearchModal #results_container {
     margin: 0;
-    max-height: 320px;
+    max-height: 330px;
     padding: 0 12px 12px 12px;
 }
 

components/SearchModal/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import { createPortal } from 'react-dom'
 import api from '~utils/api'
 
@@ -9,6 +10,7 @@ import WeaponResult from '~components/WeaponResult'
 import SummonResult from '~components/SummonResult'
 
 import './index.scss'
+import PlusIcon from '~public/icons/plus.svg'
 
 interface Props {
     close: () => void
@@ -155,25 +157,28 @@ class SearchModal extends React.Component<Props, State> {
         return (
             createPortal(
                 <div>
-                    <Modal styleName="SearchModal" key="search_modal">
-                        <div id="input_container">
-                            <label className="search_label" htmlFor="search_input">
-                                <input 
-                                    autoComplete="off"
-                                    type="text"
-                                    name="query" 
-                                    className="Input" 
-                                    id="search_input"
-                                    ref={this.searchInput}
-                                    value={query}
-                                    placeholder={this.props.placeholderText}
-                                    onChange={this.inputChanged}
-                                />
-                            </label>
-                        </div>
+                    <div className="ModalContainer">
+                        <div className="Modal SearchModal" key="search_modal">
+                            <div id="ModalTop">
+                                <label className="search_label" htmlFor="search_input">
+                                    <input 
+                                        autoComplete="off"
+                                        type="text"
+                                        name="query" 
+                                        className="Input" 
+                                        id="search_input"
+                                        ref={this.searchInput}
+                                        value={query}
+                                        placeholder={this.props.placeholderText}
+                                        onChange={this.inputChanged}
+                                    />
+                                </label>
+                                <PlusIcon onClick={this.props.close} />
+                            </div>
 
-                        {content}
-                    </Modal>
+                            {content}
+                        </div>
+                    </div>
                     <Overlay onClick={this.props.close} />
                 </div>,
                 document.body