Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: theme color on Lookup searchIcon #2003

Merged
merged 4 commits into from
Nov 22, 2020
Merged

fix: theme color on Lookup searchIcon #2003

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3312769
fix: theme color on Lookup searchIcon
Nov 16, 2020
322c9d2
Merge branch 'master' into fix-search-icon-Lookup
TahimiLeonBravo Nov 22, 2020
5c1d2b2
fix: svg
Nov 22, 2020
03c9d45
Merge branch 'fix-search-icon-Lookup' of https://github.com/nexxtway/…
Nov 22, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 42 additions & 34 deletions src/components/Lookup/icons/searchIcon.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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;