granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix SearchModal styling

Browse source 
Brings it more in line with other modals
This commit is contained in:
Justin Edmund 2022-02-28 17:44:27 -08:00
parent 210b30ac2b
commit d66bdc07f6
2 changed files with 44 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
components/SearchModal/index.scss
View file

@ -1,15 +1,18 @@
.Modal.Search { .Search.Dialog {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 420px; min-height: 431px;
min-width: 600px; width: 600px;
gap: 0;
padding: 0; padding: 0;
#ModalHeader { #Header {
background: $grey-90; border-top-left-radius: $unit;
gap: $unit; border-top-right-radius: $unit;
display: flex;
gap: $unit * 2.5;
margin: 0; margin: 0;
padding: ($unit * 3) ($unit * 3) ($unit * 1.5) ($unit * 3); padding: ($unit * 3) ($unit * 3) ($unit * 2) ($unit * 3);
position: sticky; position: sticky;
top: 0; top: 0;
@ -18,12 +21,6 @@
border: none; border: none;
height: 42px; height: 42px;
padding: 0; padding: 0;
svg {
height: 24px;
width: 24px;
vertical-align: middle;
}
} }
label { label {
@ -40,15 +37,16 @@
} }
} }
} }
}
.Search.Modal #results_container { #Results {
margin: 0; margin: 0;
max-height: 330px; max-height: 330px;
padding: 0 12px 12px 12px; padding: $unit ($unit * 1.5);
overflow-y: scroll;
}
} }
.Search.Modal #NoResults { .Search.Dialog #NoResults {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -56,7 +54,7 @@
flex-grow: 1; flex-grow: 1;
} }
.Search.Modal #NoResults h2 { .Search.Dialog #NoResults h2 {
color: #ccc; color: #ccc;
font-size: $font-large; font-size: $font-large;
font-weight: 500; font-weight: 500;

18
components/SearchModal/index.tsx
View file

@ -11,7 +11,7 @@ import WeaponResult from '~components/WeaponResult'
import SummonResult from '~components/SummonResult' import SummonResult from '~components/SummonResult'
import './index.scss' import './index.scss'
import PlusIcon from '~public/icons/Add.svg' import CrossIcon from '~public/icons/Cross.svg'
interface Props { interface Props {
send: (object: Character | Weapon | Summon, position: number) => any 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 }) { 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 }) { 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() { function renderEmptyState() {
@ -172,9 +172,8 @@ const SearchModal = (props: Props) => {
{props.children} {props.children}
</Dialog.Trigger> </Dialog.Trigger>
<Dialog.Portal> <Dialog.Portal>
<div className="ModalContainer"> <Dialog.Content className="Search Dialog">
<Dialog.Content className="Search Modal"> <div id="Header">
<div id="ModalHeader">
<label className="search_label" htmlFor="search_input"> <label className="search_label" htmlFor="search_input">
<input <input
autoComplete="off" autoComplete="off"
@ -188,13 +187,12 @@ const SearchModal = (props: Props) => {
onChange={inputChanged} onChange={inputChanged}
/> />
</label> </label>
<Dialog.Close onClick={resetAndClose}> <Dialog.Close className="DialogClose" onClick={resetAndClose}>
<PlusIcon /> <CrossIcon />
</Dialog.Close> </Dialog.Close>
</div> </div>
{ ((Object.entries(results).length == 0) ? renderEmptyState() : renderResults()) } { ((Object.entries(results).length == 0) ? renderEmptyState() : renderResults()) }
</Dialog.Content> </Dialog.Content>
</div>
<Dialog.Overlay className="Overlay" /> <Dialog.Overlay className="Overlay" />
</Dialog.Portal> </Dialog.Portal>
</Dialog.Root> </Dialog.Root>