@ -1,13 +1,12 @@
|
||||
// @flow
|
||||
import * as React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import styled, { withTheme } from 'styled-components';
|
||||
import { SearchIcon } from 'outline-icons';
|
||||
|
||||
import Flex from 'shared/components/Flex';
|
||||
import { color } from 'shared/styles/constants';
|
||||
|
||||
type Props = {
|
||||
onChange: string => *,
|
||||
theme: Object,
|
||||
};
|
||||
|
||||
class SearchField extends React.Component<Props> {
|
||||
@ -31,7 +30,7 @@ class SearchField extends React.Component<Props> {
|
||||
<StyledIcon
|
||||
type="Search"
|
||||
size={46}
|
||||
color={color.slateLight}
|
||||
color={this.props.theme.slateLight}
|
||||
onClick={this.focusInput}
|
||||
/>
|
||||
<StyledInput
|
||||
@ -56,16 +55,16 @@ const StyledInput = styled.input`
|
||||
border: 0;
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: ${color.slateLight};
|
||||
color: ${props => props.theme.slateLight};
|
||||
}
|
||||
:-moz-placeholder {
|
||||
color: ${color.slateLight};
|
||||
color: ${props => props.theme.slateLight};
|
||||
}
|
||||
::-moz-placeholder {
|
||||
color: ${color.slateLight};
|
||||
color: ${props => props.theme.slateLight};
|
||||
}
|
||||
:-ms-input-placeholder {
|
||||
color: ${color.slateLight};
|
||||
color: ${props => props.theme.slateLight};
|
||||
}
|
||||
`;
|
||||
|
||||
@ -74,4 +73,4 @@ const StyledIcon = styled(SearchIcon)`
|
||||
top: 4px;
|
||||
`;
|
||||
|
||||
export default SearchField;
|
||||
export default withTheme(SearchField);
|
||||
|
Reference in New Issue
Block a user