chore: using tabler icon instead of fontawesome for caret

This commit is contained in:
Anoop M D 2022-03-16 02:18:38 +05:30
parent 6badca632b
commit dfa68561f6
4 changed files with 19 additions and 8 deletions

View File

@ -4,6 +4,12 @@ const Wrapper = styled.div`
.current-enviroment {
background: #efefef;
border-radius: 15px;
.caret {
margin-left: 0.25rem;
color: rgb(140, 140, 140);
fill: rgb(140, 140, 140);
}
}
`;

View File

@ -1,8 +1,6 @@
import React, { useRef, forwardRef } from 'react';
import Dropdown from 'components/Dropdown';
import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { IconAdjustmentsHorizontal } from '@tabler/icons';
import { IconAdjustmentsHorizontal, IconCaretDown } from '@tabler/icons';
import StyledWrapper from './StyledWrapper';
const EnvironmentSelector = () => {
@ -11,7 +9,8 @@ const EnvironmentSelector = () => {
const Icon = forwardRef((props, ref) => {
return (
<div ref={ref} className="current-enviroment flex items-center justify-center px-3 py-1 select-none">
No Environment <FontAwesomeIcon className="ml-2 text-gray-500" icon={faCaretDown} style={{fontSize: 13}}/>
No Environment
<IconCaretDown className="caret" size={14} strokeWidth={2}/>
</div>
);
});

View File

@ -28,6 +28,13 @@ const Wrapper = styled.div`
}
}
}
.caret {
color: rgb(140, 140, 140);
fill: rgb(140 140 140);
position: relative;
top: 1px;
}
`;
export default Wrapper;

View File

@ -1,7 +1,6 @@
import React, { useRef, forwardRef } from 'react';
import PropTypes from 'prop-types';
import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { IconCaretDown } from '@tabler/icons';
import Dropdown from '../Dropdown';
import StyledWrapper from './StyledWrapper';
import SaveRequestButton from '../SaveRequest';
@ -12,8 +11,8 @@ const QueryUrl = ({value, onChange, handleRun, collections}) => {
const Icon = forwardRef((props, ref) => {
return (
<div ref={ref} className="user-icon items-center justify-center pl-3 py-2 select-none">
GET <FontAwesomeIcon className="ml-4 mr-1 text-gray-500" icon={faCaretDown} style={{fontSize: 13}}/>
<div ref={ref} className="flex items-center justify-center pl-3 py-2 select-none">
GET <IconCaretDown className="caret ml-2 mr-1" size={14} strokeWidth={2}/>
</div>
);
});