Replace carret with buffet icon

Signed-off-by: Virginie Ky <virginie.ky@gmail.com>
This commit is contained in:
Virginie Ky 2020-02-27 14:39:10 +01:00
parent 81cc30680a
commit 24c07727da
5 changed files with 18 additions and 36 deletions

View File

@ -63,7 +63,10 @@ function TableHeader({ headers, isBulkable }) {
{header.label}
{sortBy === header.name && (
<Arrow className={`${sortOrder === 'ASC' && 'isAsc'}`} />
<Arrow
fill="#212529"
isUp={sortOrder === 'ASC' && 'isAsc'}
/>
)}
</span>
</th>

View File

@ -1,6 +1,7 @@
/* eslint-disable */
import React from 'react';
import styled, { css } from 'styled-components';
import { Carret } from '@buffetjs/icons';
const Table = styled.table`
border-radius: 3px;
@ -94,21 +95,14 @@ const TableRow = styled.tr`
}
`;
const Arrow = styled.div`
&:after {
content: '\f0d8';
font-family: 'FontAwesome';
font-size: 13px;
font-weight: 600;
position: absolute;
top: 0px;
right: -12px;
}
&.isAsc {
&:after {
transform: rotateZ(180deg);
}
}
const Arrow = styled(props => <Carret {...props} />)`
margin-left: 5px;
${({ isUp }) =>
isUp &&
`
transform: rotateZ(180deg);
`}
`;
const Truncate = styled.div``;

View File

@ -1,12 +1,11 @@
import React, { forwardRef } from 'react';
import { FormattedMessage } from 'react-intl';
import PropTypes from 'prop-types';
import { Grab } from '@buffetjs/icons';
import { Carret, Grab } from '@buffetjs/icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import pluginId from '../../pluginId';
import PreviewCarret from '../PreviewCarret';
import BannerWrapper from './BannerWrapper';
import CarretTop from './CarretTop';
/* eslint-disable jsx-a11y/no-static-element-interactions */
@ -45,7 +44,7 @@ const Banner = forwardRef(
{isDragging && <PreviewCarret isComponent />}
<>
<span className="img-wrapper" style={{ display }}>
<CarretTop isOpen={isOpen} hasErrors={hasErrors} />
<Carret isOpen={isOpen} hasErrors={hasErrors} />
</span>
<FormattedMessage

View File

@ -2,10 +2,9 @@ import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import { Carret } from '@buffetjs/icons';
import getTrad from '../../utils/getTrad';
import Carret from '../../icons/Carret';
import DropdownButton from '../DropdownButton';
import DropdownSection from '../DropdownSection';
import SortList from '../SortList';
@ -37,7 +36,7 @@ const SortPicker = ({ onChange, value }) => {
<Wrapper>
<DropdownButton onClick={hangleToggle} isActive={isOpen}>
<FormattedMessage id={getTrad('sort.label')} />
<Carret isUp={!isOpen} />
<Carret fill={isOpen ? '#007EFF' : '#292b2c'} />
</DropdownButton>
<DropdownSection isOpen={isOpen}>
<SortList

View File

@ -1,13 +0,0 @@
import React from 'react';
const Carret = () => {
return (
<svg width="7" height="5" xmlns="http://www.w3.org/2000/svg">
<path
d="M0 .469c0 .127.043.237.13.33l3.062 3.28a.407.407 0 0 0 .616 0L6.87.8A.467.467 0 0 0 7 .468a.467.467 0 0 0-.13-.33A.407.407 0 0 0 6.563 0H.438A.407.407 0 0 0 .13.14.467.467 0 0 0 0 .468z"
fillRule="nonzero"
/>
</svg>
);
};
export default Carret;