r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Merge pull request #1291 from shakti97/redundant-search-button

Browse source 
fix redundant search button issue
This commit is contained in:
Cassie Tarakajian 2020-04-02 15:55:56 -04:00 committed by GitHub
commit 040543c078
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
client/modules/IDE/components/Searchbar/Searchbar.jsx
View file

@ -44,13 +44,9 @@ class Searchbar extends React.Component {
const { searchValue } = this.state; const { searchValue } = this.state;
return ( return (
<div className={`searchbar ${searchValue === '' ? 'searchbar--is-empty' : ''}`}> <div className={`searchbar ${searchValue === '' ? 'searchbar--is-empty' : ''}`}>
<button <div className="searchbar__button">
type="submit"
className="searchbar__button"
onClick={this.handleSearchEnter}
>
<InlineSVG className="searchbar__icon" src={searchIcon} /> <InlineSVG className="searchbar__icon" src={searchIcon} />
</button> </div>
<input <input
className="searchbar__input" className="searchbar__input"
type="text" type="text"

15
client/styles/components/_searchbar.scss
View file

@ -15,26 +15,20 @@
} }
} }
button[type="submit"].searchbar__button { div.searchbar__button {
background-color: unset; background-color: unset;
width: #{31 / $base-font-size}rem; width: #{31 / $base-font-size}rem;
height: #{36 / $base-font-size}rem; height: #{36 / $base-font-size}rem;
position: absolute; position: absolute;
display: flex;
justify-content: center;
align-items: center;
padding: 0; padding: 0;
border: 0; border: 0;
border-right: solid 1px; border-right: solid 1px;
@include themify() { @include themify() {
border-right-color: getThemifyVariable('input-border-color'); border-right-color: getThemifyVariable('input-border-color');
} }
&:enabled:hover {
background-color: unset;
@include themify() {
border-right-color: getThemifyVariable('input-border-color');
}
& g {
fill: unset;
}
}
} }
.searchbar__icon { .searchbar__icon {
@ -43,6 +37,7 @@ button[type="submit"].searchbar__button {
width: #{22 / $base-font-size}rem; width: #{22 / $base-font-size}rem;
height: #{27 / $base-font-size}rem; height: #{27 / $base-font-size}rem;
transform: scaleX(-1); transform: scaleX(-1);
padding-top: #{3 / $base-font-size}rem;
@include themify() { @include themify() {
fill: getThemifyVariable('input-text-color'); fill: getThemifyVariable('input-text-color');
} }