From d3f0015ea99f23c6175a1999d6fa2fd6ae42ed9f Mon Sep 17 00:00:00 2001
From: ronronscelestes <julie.plantey@gmail.com>
Date: Tue, 21 Sep 2021 12:23:06 +0200
Subject: [PATCH] FileWrapper wip

---
 .../components/DynamicTable/CellContent/Media.js   | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/Media.js b/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/Media.js
index 76e676976c..1128cfb885 100644
--- a/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/Media.js
+++ b/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/Media.js
@@ -2,8 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 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 { getFileExtension, prefixFileUrlWithBackendUrl } from '@strapi/helper-plugin';
 
 // TODO: this is very temporary until we get a design
@@ -12,7 +13,12 @@ const FileWrapper = styled(Row)`
   border-radius: 50%;
   width: 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 }) => {
@@ -28,8 +34,8 @@ const Media = ({ url, mime, alternativeText, name, ext, formats }) => {
   const fileExtension = getFileExtension(ext);
 
   return (
-    <FileWrapper>
-      <Text textColor="neutral800">{fileExtension}</Text>
+    <FileWrapper justifyContent="center" alignItems="center">
+      <TableLabel textColor="neutral600">{fileExtension}</TableLabel>
     </FileWrapper>
   );
 };