From 038b8acc8c88256b36838b2e36ac68a91fbcca6d Mon Sep 17 00:00:00 2001
From: Tahimi <tahimileon@gmail.com>
Date: Sun, 22 Nov 2020 14:48:50 -0600
Subject: [PATCH] fix: theme color on Lookup searchIcon (#2003)

* fix: theme color on Lookup searchIcon

* fix: svg
---
 src/components/Lookup/icons/searchIcon.js  | 76 ++++++++++++----------
 src/components/Lookup/index.js             |  4 +-
 src/components/Lookup/styled/searchIcon.js |  9 +++
 3 files changed, 53 insertions(+), 36 deletions(-)
 create mode 100644 src/components/Lookup/styled/searchIcon.js

diff --git a/src/components/Lookup/icons/searchIcon.js b/src/components/Lookup/icons/searchIcon.js
index 66f100837..552e9c24c 100644
--- a/src/components/Lookup/icons/searchIcon.js
+++ b/src/components/Lookup/icons/searchIcon.js
@@ -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>
@@ -53,10 +59,12 @@ const SearchIcon = props => {
 
 SearchIcon.propTypes = {
     className: PropTypes.string,
+    style: PropTypes.object,
 };
 
 SearchIcon.defaultProps = {
     className: undefined,
+    style: undefined,
 };
 
 export default SearchIcon;
diff --git a/src/components/Lookup/index.js b/src/components/Lookup/index.js
index bb58b9cb2..ba190b601 100644
--- a/src/components/Lookup/index.js
+++ b/src/components/Lookup/index.js
@@ -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';
@@ -634,7 +634,7 @@ Lookup.defaultProps = {
     error: null,
     disabled: false,
     readOnly: false,
-    icon: <SearchIcon />,
+    icon: <StyledSearchIcon />,
     size: 'medium',
     onChange: () => {},
     tabIndex: undefined,
diff --git a/src/components/Lookup/styled/searchIcon.js b/src/components/Lookup/styled/searchIcon.js
new file mode 100644
index 000000000..a321785be
--- /dev/null
+++ b/src/components/Lookup/styled/searchIcon.js
@@ -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;