ref(ui) Replace icon-filter with SVG icon. (#19841)

* Don't switch from a slider icon to filtering. Stick with sliders. * Snapshots..
getsentry · Jul 14, 2020 · add1b08 · add1b08
1 parent d45fd64
commit add1b08
Show file tree

Hide file tree

Showing 4 changed files with 677 additions and 55 deletions.
diff --git a/.ignore b/.ignore
diff --git a/...try/static/sentry/app/components/events/interfaces/frameRegisters/frameRegistersValue.tsx b/...try/static/sentry/app/components/events/interfaces/frameRegisters/frameRegistersValue.tsx
@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import {Meta} from 'app/types';
 import Tooltip from 'app/components/tooltip';
 import AnnotatedText from 'app/components/events/meta/annotatedText';
+import {IconSliders} from 'app/icons';
 import {t} from 'app/locale';
 
 const REGISTER_VIEWS = [t('Hexadecimal'), t('Numeric')];
@@ -59,7 +60,7 @@ class frameRegistersValue extends React.Component<Props, State> {
           <AnnotatedText value={formattedValue} meta={meta} />
         </FixedWidth>
         <Tooltip title={this.tooltipTitle()}>
-          <Toggle className="icon-filter" onClick={this.toggleView} />
+          <Toggle onClick={this.toggleView} size="xs" />
         </Tooltip>
       </InlinePre>
     );
@@ -76,11 +77,11 @@ const FixedWidth = styled('span')`
   width: 11em;
   display: inline-block;
   text-align: right;
+  margin-right: 1ex;
 `;
 
-const Toggle = styled('span')`
+const Toggle = styled(IconSliders)`
   opacity: 0.33;
-  margin-left: 1ex;
   cursor: pointer;
 
   &:hover {

diff --git a/src/sentry/static/sentry/app/components/events/interfaces/togglableAddress.tsx b/src/sentry/static/sentry/app/components/events/interfaces/togglableAddress.tsx
@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import Tooltip from 'app/components/tooltip';
 import space from 'app/styles/space';
 import {t} from 'app/locale';
+import {IconFilter} from 'app/icons';
 import {formatAddress, parseAddress} from 'app/components/events/interfaces/utils';
 import overflowEllipsis from 'app/styles/overflowEllipsis';
 
@@ -67,7 +68,7 @@ class TogglableAddress extends React.Component<Props> {
       <Address>
         {canBeConverted && (
           <Tooltip title={isAbsolute ? t('Absolute') : t('Relative')}>
-            <Toggle className="icon-filter" onClick={onToggle} />
+            <Toggle onClick={onToggle} size="xs" />
           </Tooltip>
         )}
 
@@ -88,7 +89,7 @@ class TogglableAddress extends React.Component<Props> {
   }
 }
 
-const Toggle = styled('span')`
+const Toggle = styled(IconFilter)`
   opacity: 0.33;
   margin-right: 1ex;
   cursor: pointer;