quine-global/hyper
1
0
Fork 0
mirror of https://github.com/quine-global/hyper.git synced 2026-01-13 04:28:41 -09:00
Code Issues Projects Releases Packages Wiki Activity Actions

searchbox ui touch up

Browse source
This commit is contained in:
Labhansh Agrawal 2021-02-21 19:13:50 +05:30 committed by Benjamin Staneck
parent 4848f4f1a4
commit 4e5bc85591
1 changed files with 9 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
lib/components/searchBox.tsx
View file

@ -7,7 +7,7 @@ const searchBoxStyling: React.CSSProperties = {
backgroundColor: 'white', backgroundColor: 'white',
position: 'absolute', position: 'absolute',
right: '10px', right: '10px',
top: '25px', top: '0px',
width: '224px', width: '224px',
zIndex: 9999 zIndex: 9999
}; };
@ -33,23 +33,20 @@ export default class SearchBox extends React.PureComponent<SearchBoxProps> {
<div style={searchBoxStyling}> <div style={searchBoxStyling}>
<input type="text" className="search-box" onKeyUp={this.handleChange} ref={(input) => input?.focus()} /> <input type="text" className="search-box" onKeyUp={this.handleChange} ref={(input) => input?.focus()} />
<span className="search-button" onClick={() => this.props.prev(this.searchTerm)}> <span className="search-button" onClick={() => this.props.prev(this.searchTerm)}>
{' '} {'←'}
&#x2190;{' '}
</span> </span>
<span className="search-button" onClick={() => this.props.next(this.searchTerm)}> <span className="search-button" onClick={() => this.props.next(this.searchTerm)}>
{' '} {'→'}
&#x2192;{' '}
</span> </span>
<span className="search-button" onClick={() => this.props.close()}> <span className="search-button" onClick={() => this.props.close()}>
{' '} {'✕'}
x{' '}
</span> </span>
<style jsx> <style jsx>
{` {`
.search-box { .search-box {
font-size: 18px; font-size: 18px;
padding: 6px; padding: 3px 6px;
width: 145px; width: 152px;
border: none; border: none;
} }
@ -60,13 +57,15 @@ export default class SearchBox extends React.PureComponent<SearchBoxProps> {
.search-button { .search-button {
background-color: #ffffff; background-color: #ffffff;
color: black; color: black;
padding: 7px; padding: 3px;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
font-size: 16px; font-size: 16px;
transition-duration: 0.4s; transition-duration: 0.4s;
cursor: pointer; cursor: pointer;
height: 27px;
width: 24px;
} }
.search-button:hover { .search-button:hover {
background-color: #e7e7e7; background-color: #e7e7e7;