pdf icons & color

Signed-off-by: Virginie Ky <virginie.ky@gmail.com>
This commit is contained in:
Virginie Ky 2020-03-20 22:08:56 +01:00
parent dea642b907
commit ba57f2c801
4 changed files with 9 additions and 19 deletions

View File

@ -3,6 +3,7 @@ const colors = {
white: '#ffffff', white: '#ffffff',
red: '#ff203c', red: '#ff203c',
orange: '#ff5d00', orange: '#ff5d00',
lightOrange: '#f64d0a',
yellow: '#ffd500', yellow: '#ffd500',
green: '#27b70f', green: '#27b70f',
blue: '#0097f7', blue: '#0097f7',
@ -26,15 +27,6 @@ const colors = {
lightBlue: '#E6F0FB', lightBlue: '#E6F0FB',
mediumBlue: '#007EFF', mediumBlue: '#007EFF',
darkBlue: '#AED4FB', darkBlue: '#AED4FB',
// Specific to file icons
file: {
archive: '#715A31',
code: '#515A6D',
default: '#BDBFC2',
pdf: '#E26D6D',
},
content: { content: {
background: '#fafafb', background: '#fafafb',
'background-alpha': 'rgba(14, 22, 34, 0.02)', 'background-alpha': 'rgba(14, 22, 34, 0.02)',

View File

@ -4,15 +4,16 @@ import { themePropTypes } from 'strapi-helper-plugin';
const Wrapper = styled.div` const Wrapper = styled.div`
font-size: 54px; font-size: 54px;
color: ${({ theme, icon }) => theme.main.colors.file[icon]}; color: ${({ theme, colored }) =>
colored ? theme.main.colors.lightOrange : theme.main.colors.grey};
`; `;
Wrapper.defaultProps = { Wrapper.defaultProps = {
icon: 'default', colored: false,
}; };
Wrapper.propTypes = { Wrapper.propTypes = {
icon: PropTypes.string, colored: PropTypes.bool,
...themePropTypes, ...themePropTypes,
}; };

View File

@ -13,17 +13,17 @@ import extensions from './utils/extensions.json';
import Wrapper from './Wrapper'; import Wrapper from './Wrapper';
const FileIcon = ({ ext }) => { const FileIcon = ({ ext }) => {
const iconName = Object.keys(extensions).find(key => extensions[key].includes(ext)); const iconName = Object.keys(extensions).find(key => extensions[key].includes(ext)) || 'alt';
return ( return (
<Wrapper type="file" icon={iconName}> <Wrapper type="file" colored={iconName === 'pdf'}>
<FontAwesomeIcon icon={['far', `file-${iconName}`]} /> <FontAwesomeIcon icon={['far', `file-${iconName}`]} />
</Wrapper> </Wrapper>
); );
}; };
FileIcon.defaultProps = { FileIcon.defaultProps = {
ext: 'zip', ext: 'alt',
}; };
FileIcon.propTypes = { FileIcon.propTypes = {

View File

@ -1,7 +1,4 @@
{ {
"archive": ["rar", "tar", "zip"], "archive": ["rar", "tar", "zip"],
"code": ["js", "json", "rb", "erb", "txt", "css", "scss", "html", "jsx", "svg"], "pdf": ["pdf"]
"pdf": ["pdf"],
"powerpoint": ["ppt", "key", "xls"],
"word": ["doc", "docx", "pages"]
} }