diff --git a/src/ui/components/ToggleSwitch.tsx b/src/ui/components/ToggleSwitch.tsx index 5dcab6c9f..721157b32 100644 --- a/src/ui/components/ToggleSwitch.tsx +++ b/src/ui/components/ToggleSwitch.tsx @@ -9,9 +9,9 @@ import React from 'react'; import styled from 'react-emotion'; import {colors} from './colors'; import Text from './Text'; +import FlexRow from './FlexRow'; export const StyledButton = styled('div')((props: {toggled: boolean}) => ({ - cursor: 'pointer', width: '30px', height: '16px', background: props.toggled ? colors.green : colors.grey, @@ -33,6 +33,11 @@ export const StyledButton = styled('div')((props: {toggled: boolean}) => ({ }, })); +const Container = styled(FlexRow)({ + alignItems: 'center', + cursor: 'pointer', +}); + const Label = styled(Text)({ marginLeft: 7, marginRight: 7, @@ -64,14 +69,13 @@ type Props = { export default class ToggleButton extends React.Component { render() { return ( - <> + {this.props.label && } - + ); } } diff --git a/src/ui/components/searchable/Searchable.tsx b/src/ui/components/searchable/Searchable.tsx index 78406356a..fee81fd85 100644 --- a/src/ui/components/searchable/Searchable.tsx +++ b/src/ui/components/searchable/Searchable.tsx @@ -18,7 +18,7 @@ import Glyph from '../Glyph'; import FilterToken from './FilterToken'; import styled from 'react-emotion'; import debounce from 'lodash.debounce'; -import ToggleSwitch from '../ToggleSwitch'; +import ToggleButton from '../ToggleSwitch'; import React from 'react'; const SearchBar = styled(Toolbar)({ @@ -456,7 +456,7 @@ const Searchable = ( /> {this.props.allowRegexSearch ? ( -