IBX-8647: MFU UI improvements

src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_drop.area.scss

@@ -9,7 +9,7 @@
 
     &__message {
         color: $ibexa-color-dark;
-        margin-bottom: calculateRem(16px);
+        margin-bottom: calculateRem(12px);
     }
 
     &__message--main {

src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload.item.scss

@@ -3,7 +3,7 @@
     flex-wrap: wrap;
     background: $ibexa-color-white;
     padding: 0;
-    margin: calculateRem(12px) 0;
+    margin: calculateRem(4px) 0;
     height: calculateRem(48px);
 
     &--errored {

src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload.list.scss

@@ -1,5 +1,5 @@
 .c-upload-list {
-    height: 100%;
+    flex-grow: 1;
     overflow: auto;
-    margin-top: calculateRem(16px);
+    margin: calculateRem(16px) 0;
 }

src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload.popup.scss

@@ -17,7 +17,7 @@
 
     .c-tooltip-popup {
         width: 100%;
-        max-height: 100vh;
+        max-height: 90vh;
         max-width: calculateRem(800px);
         position: absolute;
         z-index: 2;
@@ -30,8 +30,8 @@
             @include modal-header();
 
             height: calculateRem(92px);
-            padding: calculateRem(32px) calculateRem(32px) 0;
-            margin-bottom: calculateRem(36px);
+            padding: calculateRem(24px) calculateRem(32px) 0;
+            margin-bottom: calculateRem(24px);
         }
 
         &__title {
@@ -42,20 +42,29 @@
             top: 0;
         }
 
-        &__subtitle {
-            margin-top: calculateRem(8px);
-        }
-
         &__content {
             @include modal-body();
 
+            display: flex;
+            flex-direction: column;
             padding: 0 calculateRem(32px);
-            max-height: calc(100vh - calculateRem(208px));
-            overflow: auto;
+            max-height: calc(90vh - calculateRem(212px));
         }
 
         &__footer {
-            padding: calculateRem(16px) calculateRem(32px) calculateRem(32px) calculateRem(32px);
+            padding: calculateRem(24px);
+        }
+
+        .c-drop-area {
+            padding: calculateRem(24px);
+        }
+
+        &--with-uploaded-items {
+            .c-tooltip-popup {
+                &__footer {
+                    box-shadow: 0 0 calculateRem(16px) 0 rgba($ibexa-color-dark, 0.16);
+                }
+            }
         }
     }
 }

src/bundle/ui-dev/src/modules/common/tooltip-popup/tooltip.popup.component.js

@@ -1,6 +1,8 @@
 import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 
+import { createCssClassNames } from '../helpers/css.class.names';
+
 const TooltipPopupComponent = ({
     title,
     subtitle,
@@ -12,10 +14,15 @@ const TooltipPopupComponent = ({
     closeBtnAttrs,
     closeLabel,
     visible,
+    extraClasses,
 }) => {
     const contentRef = useRef();
+    const className = createCssClassNames({
+        'c-tooltip-popup': true,
+        [extraClasses]: true,
+    });
     const attrs = {
-        className: 'c-tooltip-popup',
+        className,
         hidden: !visible,
     };
 
@@ -55,6 +62,7 @@ TooltipPopupComponent.propTypes = {
     closeLabel: PropTypes.string,
     confirmBtnAttrs: PropTypes.object,
     closeBtnAttrs: PropTypes.object,
+    extraClasses: PropTypes.string,
 };
 
 TooltipPopupComponent.defaultProps = {
@@ -65,6 +73,7 @@ TooltipPopupComponent.defaultProps = {
     closeLabel: '',
     confirmBtnAttrs: {},
     closeBtnAttrs: {},
+    extraClasses: '',
 };
 
 export default TooltipPopupComponent;

src/bundle/ui-dev/src/modules/multi-file-upload/components/upload-popup/upload.popup.component.js

@@ -115,6 +115,10 @@ export default class UploadPopupModule extends Component {
             enableUploadedItemEdit,
         };
 
+        if (hasAnyUploadedItems || hasAnyItemsToUpload) {
+            tooltipAttrs.extraClasses = 'c-tooltip-popup--with-uploaded-items';
+        }
+
         return (
             <div className="c-upload-popup" ref={this.refTooltip}>
                 <TooltipPopup {...tooltipAttrs}>