Fix LeftMenu bug with fontawesome

This commit is contained in:
soupette 2019-12-03 16:04:41 +01:00
parent 5b4e1cf661
commit d4b4e09c27
2 changed files with 9 additions and 6 deletions

View File

@ -38,7 +38,8 @@ const Wrapper = styled.div`
right: 0; right: 0;
padding: 2px 0 0px 5px; padding: 2px 0 0px 5px;
line-height: 11px; line-height: 11px;
i { i,
svg {
font-size: 11px; font-size: 11px;
} }
} }
@ -53,7 +54,7 @@ const Wrapper = styled.div`
width: calc(100% - 20px); width: calc(100% - 20px);
background: ${colors.leftMenu.lightGrey}; background: ${colors.leftMenu.lightGrey};
} }
> i { > svg {
position: absolute; position: absolute;
bottom: 6px; bottom: 6px;
left: 0; left: 0;
@ -65,7 +66,8 @@ const Wrapper = styled.div`
right: 0; right: 0;
padding: 5px 0 0px 5px; padding: 5px 0 0px 5px;
line-height: 11px; line-height: 11px;
i { i,
svg {
font-size: 11px; font-size: 11px;
} }
} }

View File

@ -2,6 +2,7 @@ import React, { createRef, isValidElement, useEffect, useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { isEmpty } from 'lodash'; import { isEmpty } from 'lodash';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import matchSorter from 'match-sorter'; import matchSorter from 'match-sorter';
import Wrapper from './Wrapper'; import Wrapper from './Wrapper';
@ -101,12 +102,12 @@ function LeftMenuList({ customLink, links, title }) {
&nbsp;&nbsp;<span>{getCount()}</span> &nbsp;&nbsp;<span>{getCount()}</span>
</h3> </h3>
<button onClick={toggleSearch}> <button onClick={toggleSearch}>
<i className="fa fa-search"></i> <FontAwesomeIcon icon="search" />
</button> </button>
</div> </div>
) : ( ) : (
<div className="search-wrapper"> <div className="search-wrapper">
<i className="fa fa-search"></i> <FontAwesomeIcon icon="search" />
<button onClick={toggleSearch}></button> <button onClick={toggleSearch}></button>
<Search <Search
ref={ref} ref={ref}
@ -115,7 +116,7 @@ function LeftMenuList({ customLink, links, title }) {
placeholder="search…" placeholder="search…"
/> />
<button onClick={handleClose}> <button onClick={handleClose}>
<i className="fa fa-close"></i> <FontAwesomeIcon icon="times" />
</button> </button>
</div> </div>
)} )}