moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'styles' into 'develop' 

Improve search input styles on aliases/list editor pages

See merge request soapbox-pub/soapbox-fe!833
This commit is contained in:
Alex Gleason 2021-10-31 21:06:54 +00:00
parent beb0e6edae 2bf24ef038
commit 21a5c3215a
6 changed files with 14 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/soapbox/features/aliases/components/search.js
View File

@ -72,8 +72,7 @@ class Search extends React.PureComponent {
</label> </label>
<div role='button' tabIndex='0' className='search__icon' onClick={this.handleClear}> <div role='button' tabIndex='0' className='search__icon' onClick={this.handleClear}>
<Icon id='search' className={classNames({ active: !hasValue })} /> <Icon src={require('@tabler/icons/icons/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={classNames('svg-icon--backspace', { active: hasValue })} />
<Icon id='times-circle' aria-label={intl.formatMessage(messages.search)} className={classNames({ active: hasValue })} />
</div> </div>
<Button onClick={this.handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button> <Button onClick={this.handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button>
</div> </div>

3
app/soapbox/features/list_editor/components/search.js
View File

@ -72,8 +72,7 @@ class Search extends React.PureComponent {
</label> </label>
<div role='button' tabIndex='0' className='search__icon' onClick={this.handleClear}> <div role='button' tabIndex='0' className='search__icon' onClick={this.handleClear}>
<Icon id='search' className={classNames({ active: !hasValue })} /> <Icon src={require('@tabler/icons/icons/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={classNames('svg-icon--backspace', { active: hasValue })} />
<Icon id='times-circle' aria-label={intl.formatMessage(messages.search)} className={classNames({ active: hasValue })} />
</div> </div>
<Button onClick={this.handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button> <Button onClick={this.handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button>
</div> </div>

11
app/styles/components/aliases.scss
View File

@ -18,24 +18,21 @@
} }
} }
&_search { &_search.search {
display: flex; display: flex;
align-items: center;
flex-direction: row; flex-direction: row;
margin: 10px; border-bottom: none;
.search__input { .search__input {
padding: 7px 30px 6px 10px; padding: 7px 30px 6px 10px;
background: none;
} }
> label { > label {
flex: 1 1; flex: 1 1;
} }
> .search__icon .fa {
top: 8px;
right: 102px !important;
}
> .button { > .button {
width: 80px; width: 80px;
margin-left: 10px; margin-left: 10px;

4
app/styles/components/filters.scss
View File

@ -97,4 +97,8 @@
} }
} }
} }
.simple_form select {
margin-top: 0;
}
} }

4
app/styles/components/list-forms.scss
View File

@ -39,8 +39,8 @@
flex: 1 1; flex: 1 1;
} }
> .search__icon .fa { > .search__icon {
right: 102px !important; position: relative;
} }
> .button { > .button {

4
app/styles/components/search.scss
View File

@ -183,8 +183,8 @@
padding: 12px 36px 12px 16px; padding: 12px 36px 12px 16px;
} }
.search__icon .svg-icon { .search__icon {
right: 24px; position: relative;
} }
} }