improve design upload list

Signed-off-by: soupette <cyril.lpz@gmail.com>

packages/strapi-admin/admin/src/themes/colors.js

@@ -16,6 +16,8 @@ const colors = {
   'gray-lightest': '#f7f7f9',
   brightGrey: '#f0f3f8',
   lightGrey: '#fafafa',
+  grey: '#9ea7b8',
+  greyDark: '#292b2c',
 
   content: {
     background: '#fafafb',

packages/strapi-plugin-upload/admin/src/components/ContainerFluid/index.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import { Container } from 'reactstrap';
+
+const ContainerFluid = styled(Container)`
+  padding: 0;
+`;
+
+ContainerFluid.defaultProps = {
+  fluid: true,
+};
+
+export default ContainerFluid;

packages/strapi-plugin-upload/admin/src/components/Text/index.js

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+const Text = styled.p`
+  margin: 0;
+  line-height: 18px;
+  color: ${({ theme, color }) => theme.main.colors[color]};
+  font-size: ${({ theme, fontSize }) => theme.main.fontSizes[fontSize]};
+  font-weight: ${({ theme, fontWeight }) => theme.main.fontWeights[fontWeight]};
+`;
+
+Text.defaultProps = {
+  color: 'greyDark',
+  fontSize: 'md',
+  fontWeight: 'regular',
+};
+
+export default Text;

packages/strapi-plugin-upload/admin/src/components/UploadList/ButtonWrapper.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const ButtonWrapper = styled.div`
+  padding-top: 28px;
+`;
+
+export default ButtonWrapper;

packages/strapi-plugin-upload/admin/src/components/UploadList/HeaderWrapper.js

@@ -1,17 +0,0 @@
-import styled from 'styled-components';
-import { HeaderNavWrapper } from 'strapi-helper-plugin';
-
-const Wrapper = styled(HeaderNavWrapper)`
-  padding-top: 27px;
-  font-size: 12px;
-
-  .assets-selected {
-    padding-top: 7px;
-    line-height: 18px;
-  }
-  .infos {
-    color: #9ea7b8;
-  }
-`;
-
-export default Wrapper;

packages/strapi-plugin-upload/admin/src/components/UploadList/ListWrapper.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+const ListWrapper = styled.div`
+  margin-bottom: 4px;
+  padding-top: 14px;
+  max-height: 350px;
+  overflow: auto;
+`;
+
+export default ListWrapper;

packages/strapi-plugin-upload/admin/src/components/UploadList/TextWrapper.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const TextWrapper = styled.div`
+  padding-top: 34px;
+`;
+
+export default TextWrapper;

packages/strapi-plugin-upload/admin/src/components/UploadList/index.js

@@ -1,13 +1,16 @@
-/* eslint-disable react/no-array-index-key */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
-import { ModalBody } from 'strapi-helper-plugin';
 import { Button } from '@buffetjs/core';
 import createMatrix from '../../utils/createMatrix';
 import getTrad from '../../utils/getTrad';
-import HeaderWrapper from './HeaderWrapper';
+import ContainerFluid from '../ContainerFluid';
+import ModalSection from '../ModalSection';
+import Text from '../Text';
+import ButtonWrapper from './ButtonWrapper';
+import TextWrapper from './TextWrapper';
 import RowItem from './RowItem';
+import ListWrapper from './ListWrapper';
 
 const UploadList = ({
   filesToUpload,
@@ -22,22 +25,23 @@ const UploadList = ({
 
   return (
     <>
-      <HeaderWrapper>
-        <div>
-          <div className="assets-selected">
+      <ModalSection justifyContent="space-between">
+        <TextWrapper>
+          <Text fontSize="md" fontWeight="bold">
             <FormattedMessage
               id={getTrad(titleId)}
               values={{ number: filesToUploadLength }}
             />
-          </div>
-          <div className="infos">
+          </Text>
+
+          <Text fontSize="sm" color="grey">
             <FormattedMessage
               id={getTrad('modal.upload-list.sub-header-subtitle')}
               values={{ number: filesToUploadLength }}
             />
-          </div>
-        </div>
-        <div>
+          </Text>
+        </TextWrapper>
+        <ButtonWrapper>
           <FormattedMessage id={getTrad('modal.upload-list.sub-header.button')}>
             {label => (
               <Button
@@ -48,33 +52,28 @@ const UploadList = ({
               />
             )}
           </FormattedMessage>
-        </div>
-      </HeaderWrapper>
-      <ModalBody>
-        <div
-          className="container"
-          style={{
-            marginTop: -4,
-            marginBottom: 4,
-            overflow: 'auto',
-            maxHeight: 350,
-          }}
-        >
-          {matrix.map(({ key, rowContent }) => {
-            return (
-              <div className="row" key={key}>
-                {rowContent.map(data => (
-                  <RowItem
-                    {...data}
-                    onClick={onClickCancelUpload}
-                    key={data.originalIndex}
-                  />
-                ))}
-              </div>
-            );
-          })}
-        </div>
-      </ModalBody>
+        </ButtonWrapper>
+      </ModalSection>
+
+      <ModalSection>
+        <ContainerFluid>
+          <ListWrapper>
+            {matrix.map(({ key, rowContent }) => {
+              return (
+                <div className="row" key={key}>
+                  {rowContent.map(data => (
+                    <RowItem
+                      {...data}
+                      onClick={onClickCancelUpload}
+                      key={data.originalIndex}
+                    />
+                  ))}
+                </div>
+              );
+            })}
+          </ListWrapper>
+        </ContainerFluid>
+      </ModalSection>
     </>
   );
 };

packages/strapi-plugin-upload/admin/src/containers/ModalStepper/index.js

@@ -2,8 +2,6 @@ import React, { useEffect, useReducer, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { get } from 'lodash';
 import {
-  // HeaderModal,
-  // HeaderModalTitle,
   Modal,
   ModalFooter,
   useGlobalContext,