Skip to content

Commit

Permalink
fix: theme color on Lookup searchIcon (#2003)
Browse files Browse the repository at this point in the history 
* fix: theme color on Lookup searchIcon

* fix: svg
  • Loading branch information
@TahimiLeonBravo
TahimiLeonBravo committed Nov 22, 2020
1 parent 6f1c77b commit 038b8ac
Show file tree
Hide file tree
Showing 3 changed files with 53 additions and 36 deletions.
76 changes: 42 additions & 34 deletions src/components/Lookup/icons/searchIcon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,47 +2,53 @@ import React from 'react';
import PropTypes from 'prop-types';

const SearchIcon = props => {
const { className } = props;
const { className, style } = props;
return (
<svg
className={className}
width="16px"
height="16px"
viewBox="0 0 16 16"
style={style}
width="20px"
height="20px"
viewBox="0 0 20 20"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g id="re-design-layout" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g
id="re-design-layout-componentes-V2"
transform="translate(-393.000000, -173.000000)"
>
<g id="head" transform="translate(381.000000, 106.000000)">
<g
id="search"
transform="translate(20.000000, 75.000000) scale(-1, 1) translate(-20.000000, -75.000000) translate(12.000000, 67.000000)"
>
<path
d="M7.77636719,8.93103028 L7.06896972,8.22363281 C6.97131347,8.12597656 6.81286622,8.12597656 6.71520997,8.22363281 L5.08947753,9.84936525 C4.99182128,9.9470215 4.99182128,10.1053467 5.08947753,10.203125 L5.796875,10.9105225 C5.84582519,10.9593506 5.90979003,10.9837647 5.97375488,10.9837647 C6.03784181,10.9837647 6.10180663,10.9593506 6.15063475,10.9105225 L7.77648925,9.28479003 C7.8741455,9.18713378 7.8741455,9.02868653 7.77636719,8.93103028 Z"
fill="#E3E5ED"
/>
<path
d="M10.7474365,0 C7.85119628,0 5.49499513,2.35620119 5.49499513,5.25256347 C5.49499513,8.14880372 7.85119628,10.5050049 10.7474365,10.5050049 C13.6437988,10.5050049 16,8.14880372 16,5.25256347 C16,2.35620119 13.6437988,8.8817842e-16 10.7474365,0 Z"
fill="#A4A7B5"
/>
<path
d="M10.7474365,0.937988281 C8.36840819,0.937988281 6.43286131,2.87341309 6.43286131,5.25256347 C6.43286131,7.63159181 8.36840819,9.56713869 10.7474365,9.56713869 C13.1265869,9.56713869 15.0620117,7.63159181 15.0620117,5.25256347 C15.0620117,2.87341309 13.1265869,0.937988281 10.7474365,0.937988281 Z"
fill="#E3E5ED"
/>
<path
d="M6.67236328,10.5656738 L5.43432619,9.32763672 C5.33666994,9.22998047 5.17822266,9.22998047 5.08056641,9.32763672 L0.328369125,14.0799561 C-0.003662125,14.4118652 -0.0950927812,14.9312744 0.105712875,15.3562012 C0.16101075,15.4732666 0.236816406,15.5802002 0.328369125,15.6716309 C0.647460938,15.9908447 1.1501465,16.0886231 1.56555175,15.9118652 C1.69775391,15.8555908 1.81848144,15.7731934 1.92004394,15.6716309 L6.67236328,10.9194336 C6.77001953,10.8217773 6.77001953,10.6633301 6.67236328,10.5656738 Z"
fill="#01B6F5"
/>
<path
d="M6.67236328,10.5656738 L6.04699706,9.94042969 C6.14477538,10.0380859 6.14477538,10.1964111 6.04699706,10.2940674 L1.29479981,15.0463867 C1.19323731,15.1479492 1.07250975,15.2302246 0.940307625,15.286499 C0.664794937,15.4038086 0.351196281,15.3996582 0.0780029375,15.2908936 C0.0865478437,15.3128662 0.095459,15.3347168 0.105712875,15.3562012 C0.16101075,15.4732666 0.236816406,15.5802002 0.328369125,15.6716309 C0.647460938,15.9908447 1.1501465,16.0886231 1.56555175,15.9118653 C1.69775391,15.8555908 1.81848144,15.7731934 1.92004394,15.6716309 L6.67236328,10.9194336 C6.77001953,10.8217773 6.77001953,10.6633301 6.67236328,10.5656738 Z"
fill="#009ACF"
/>
<g id="layout" stroke="none" strokeWidth="1" fillRule="evenodd">
<g id="results" transform="translate(-1029.000000, -169.000000)" fillRule="nonzero">
<g id="Group-8" transform="translate(375.000000, 156.000000)">
<g id="Group-7" transform="translate(651.000000, 8.000000)">
<g id="search" transform="translate(3.000000, 5.000000)">
<path
d="M12.8283333,13.107963 C12.7423715,13.1080631 12.6599208,13.0738697 12.5992593,13.012963 L11.7562963,12.1703704 C11.629731,12.0438051 11.629731,11.8386023 11.7562963,11.712037 C11.8828616,11.5854718 12.0880644,11.5854718 12.2146296,11.712037 L13.0575926,12.5555556 C13.1502089,12.6482372 13.1779037,12.7875701 13.1277713,12.9086256 C13.0776388,13.029681 12.959544,13.1086383 12.8285185,13.1087037 L12.8283333,13.107963 Z"
id="Path"
fill="currentColor"
/>
<path
d="M7.03944444,-9.87146872e-14 C10.9026763,-9.87146872e-14 14.0344444,3.13176818 14.0344444,6.995 C14.0344444,10.8582318 10.9026763,13.99 7.03944444,13.99 C3.17621262,13.99 0.0444444444,10.8582318 0.0444444444,6.995 C0.0444444444,3.13176818 3.17621262,-9.87146872e-14 7.03944444,-9.87146872e-14 Z M7.03944444,1.20592593 C3.84222712,1.20592593 1.25037037,3.79778267 1.25037037,6.995 C1.25037037,10.1922173 3.84222712,12.7840741 7.03944444,12.7840741 C10.2366618,12.7840741 12.8285185,10.1922173 12.8285185,6.995 C12.8285185,3.79778267 10.2366618,1.20592593 7.03944444,1.20592593 Z"
id="Combined-Shape"
fill="#CCDBDB"
/>
<circle
id="Oval"
fill="#C6E4ED"
opacity="0.465076265"
cx="7.03944444"
cy="6.995"
r="5.78907407"
/>
<path
d="M15.9727677,11.4806198 C16.6595937,11.4806198 17.2163762,12.0374023 17.2163762,12.7242283 L17.2163762,19.1397408 C17.2163762,19.8265668 16.6595937,20.3833493 15.9727677,20.3833493 C15.2859417,20.3833493 14.7291592,19.8265668 14.7291592,19.1397408 L14.7291592,12.7242283 C14.7291592,12.0374023 15.2859417,11.4806198 15.9727677,11.4806198 Z"
id="Rectangle"
fill="currentColor"
transform="translate(15.972768, 15.931985) rotate(-45.000000) translate(-15.972768, -15.931985) "
/>
<path
d="M13.1814815,12.537037 C13.2314093,12.7704515 13.3478204,12.9844293 13.5166667,13.1531481 L18.0537037,17.6901852 C18.4238458,18.0599345 18.9858956,18.1583229 19.4596296,17.9362963 C19.4097118,17.7028781 19.2932992,17.4888977 19.1244444,17.3201852 L14.5874074,12.7831481 C14.2172389,12.4134496 13.6552231,12.3150673 13.1814815,12.537037 L13.1814815,12.537037 Z"
id="Path"
fill="currentColor"
/>
</g>
</g>
</g>
</g>
Expand All @@ -53,10 +59,12 @@ const SearchIcon = props => {

SearchIcon.propTypes = {
className: PropTypes.string,
style: PropTypes.object,
};

SearchIcon.defaultProps = {
className: undefined,
style: undefined,
};

export default SearchIcon;
4 changes: 2 additions & 2 deletions src/components/Lookup/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,13 @@ import {
import { uniqueId } from '../../libs/utils';
import { UP_KEY, DOWN_KEY, ENTER_KEY, ESCAPE_KEY } from '../../libs/constants';
import withReduxForm from '../../libs/hocs/withReduxForm';
import SearchIcon from './icons/searchIcon';
import Label from '../Input/label';
import StyledInput from './styled/input';
import StyledContainer from './styled/container';
import StyledInputContainer from './styled/inputContainer';
import StyledSpinner from './styled/spinner';
import StyledOptionsMenu from './styled/optionsMenu';
import StyledSearchIcon from './styled/searchIcon';
import StyledTextError from '../Input/styled/errorText';
import isScrollPositionAtMenuBottom from './helpers/isScrollPositionAtMenuBottom';
import MenuArrowButton from './menuArrowButton';
Expand Down Expand Up @@ -634,7 +634,7 @@ Lookup.defaultProps = {
error: null,
disabled: false,
readOnly: false,
icon: <SearchIcon />,
icon: <StyledSearchIcon />,
size: 'medium',
onChange: () => {},
tabIndex: undefined,
Expand Down
9 changes: 9 additions & 0 deletions src/components/Lookup/styled/searchIcon.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import styled from 'styled-components';
import SearchIcon from '../icons/searchIcon';
import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs';

const StyledSearchIcon = attachThemeAttrs(styled(SearchIcon))`
color: ${props => props.palette.text.main};
`;

export default StyledSearchIcon;

0 comments on commit 038b8ac

Please sign in to comment.