FileWrapper wip

This commit is contained in:
ronronscelestes 2021-09-21 12:23:06 +02:00
parent 2fc117b11e
commit d3f0015ea9

View File

@ -2,8 +2,9 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styled from 'styled-components'; import styled from 'styled-components';
import { Avatar } from '@strapi/parts/Avatar'; import { Avatar } from '@strapi/parts/Avatar';
import { Text } from '@strapi/parts/Text'; import { TableLabel } from '@strapi/parts/Text';
import { Row } from '@strapi/parts/Row'; import { Row } from '@strapi/parts/Row';
import { getFileExtension, prefixFileUrlWithBackendUrl } from '@strapi/helper-plugin'; import { getFileExtension, prefixFileUrlWithBackendUrl } from '@strapi/helper-plugin';
// TODO: this is very temporary until we get a design // TODO: this is very temporary until we get a design
@ -12,7 +13,12 @@ const FileWrapper = styled(Row)`
border-radius: 50%; border-radius: 50%;
width: 26px; width: 26px;
height: 26px; height: 26px;
background: ${({ theme }) => theme.colors.neutral100}; border: 1px solid ${({ theme }) => theme.colors.neutral200};
background: ${({ theme }) => theme.colors.neutral150};
span {
line-height: 0;
}
`; `;
const Media = ({ url, mime, alternativeText, name, ext, formats }) => { const Media = ({ url, mime, alternativeText, name, ext, formats }) => {
@ -28,8 +34,8 @@ const Media = ({ url, mime, alternativeText, name, ext, formats }) => {
const fileExtension = getFileExtension(ext); const fileExtension = getFileExtension(ext);
return ( return (
<FileWrapper> <FileWrapper justifyContent="center" alignItems="center">
<Text textColor="neutral800">{fileExtension}</Text> <TableLabel textColor="neutral600">{fileExtension}</TableLabel>
</FileWrapper> </FileWrapper>
); );
}; };