diff --git a/components/SearchModal/index.scss b/components/SearchModal/index.scss index a9cdb744..6882a290 100644 --- a/components/SearchModal/index.scss +++ b/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; } diff --git a/components/SearchModal/index.tsx b/components/SearchModal/index.tsx index 05b83eeb..3deb3b77 100644 --- a/components/SearchModal/index.tsx +++ b/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 { return ( createPortal(
- -
- -
+
+
+
+ + +
- {content} - + {content} +
+
, document.body