Browse Source

fix(ui): Use Input component in Issue Index sidebar (#30345)

* fix(ui): Use Input component in Issue list sidebar

The current version does not adapt to dark mode.

* style: Lighter divider color for Issue Index sidebar
Vu Luong 3 years ago
parent
commit
a8733bda20

+ 3 - 2
static/app/views/issueList/sidebar.tsx

@@ -9,6 +9,7 @@ import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
 import {Tag, TagCollection} from 'sentry/types';
 import {objToQuery, QueryObj, queryToObj} from 'sentry/utils/stream';
+import Input from 'sentry/views/settings/components/forms/controls/input';
 
 import IssueListTagFilter from './tagFilter';
 import {TagValueLoader} from './types';
@@ -116,8 +117,7 @@ class IssueListSidebar extends React.Component<Props, State> {
             <StreamTagFilter>
               <StyledHeader>{t('Text')}</StyledHeader>
               <form onSubmit={this.onTextFilterSubmit}>
-                <input
-                  className="form-control"
+                <Input
                   placeholder={t('Search title and culprit text body')}
                   onChange={this.onTextChange}
                   value={this.state.textFilter}
@@ -176,4 +176,5 @@ const StreamTagFilter = styled('div')`
 
 const StyledHr = styled('hr')`
   margin: ${space(2)} 0 0;
+  border-top: solid 1px ${p => p.theme.innerBorder};
 `;

+ 2 - 6
static/app/views/issueList/tagFilter.tsx

@@ -8,6 +8,7 @@ import SelectControl from 'sentry/components/forms/selectControl';
 import {t, tct} from 'sentry/locale';
 import space from 'sentry/styles/space';
 import {Tag, TagValue} from 'sentry/types';
+import Input from 'sentry/views/settings/components/forms/controls/input';
 
 import {TagValueLoader} from './types';
 
@@ -160,12 +161,7 @@ class IssueListTagFilter extends React.Component<Props, State> {
         <StyledHeader>{tag.key}</StyledHeader>
 
         {!!tag.isInput && (
-          <input
-            className="form-control"
-            type="text"
-            value={this.state.textValue}
-            onChange={this.handleChangeInput}
-          />
+          <Input value={this.state.textValue} onChange={this.handleChangeInput} />
         )}
 
         {!tag.isInput && (