[REF]: Refactor ActionButotns container to recive extra prop to determ,ine...

[REF]: Refactor ActionButotns container to recive extra prop to determ,ine whether is a top otr bottom padding that is required

src/files-ui/components/dropzone/components/DropzoneButtons/DropzoneButtons.scss

@@ -7,6 +7,13 @@
   align-items: center;
   justify-content: flex-end;
   box-sizing: border-box;
-  padding: 10px 0;
+  //padding: 10px 0;
   gap: 10px;
+
+  &.top {
+    padding-bottom: 10px;
+  }
+  &.bottom {
+    padding-top: 10px;
+  }
 }

src/files-ui/components/dropzone/components/DropzoneButtons/DropzoneButtons.tsx

@@ -6,12 +6,14 @@ import {
   DropzoneActions,
 } from "../dropzone/DropzoneProps";
 import "./DropzoneButtons.scss";
+
 interface DropzoneButtonsProps extends DropzoneActions {
   localization?: Localization;
   onAbort?: Function;
   onDelete?: Function;
   onUpload?: Function;
   onClean?: Function;
+  top?: boolean;
 }
 
 const DropzoneButtons: React.FC<DropzoneButtonsProps> = (
@@ -29,6 +31,7 @@ const DropzoneButtons: React.FC<DropzoneButtonsProps> = (
     onClean,
     onDelete,
     onUpload,
+    top
   } = props;
 
   const actionButtonsList: DropzoneActionButton[] = [
@@ -49,11 +52,10 @@ const DropzoneButtons: React.FC<DropzoneButtonsProps> = (
   ) as DropzoneActionButton[];
 
   const finalClassName = addClassName(
-    "files-ui-buttons-container",
+    "files-ui-buttons-container" + `${top ? " top" : " bottom"}`,
     containerClassName
   );
 
-  
   return (
     <div className={finalClassName} style={containerStyle}>
       {actionButtonsList.map(

src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx

@@ -611,28 +611,6 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
     }
   };
 
-  const DropzoneActionButtons = ({ visible = true }) => {
-    if (!visible) return <></>;
-    else
-      return (
-        <DropzoneButtons
-          abortButton={isUploading ? abortButton : undefined}
-          onAbort={handleAbortUpload}
-          deleteButton={deleteButton}
-          onDelete={!isUploading ? handleReset : undefined}
-          uploadButton={!isUploading && !autoUpload ? uploadButton : undefined}
-          onUpload={!autoUpload ? () => uploadfiles(localFiles) : undefined}
-          cleanButton={
-            validateFilesFlag && !isUploading && !autoClean
-              ? cleanButton
-              : undefined
-          }
-          onClean={handleClean}
-          style={containerStyle}
-          className={containerClassName}
-        />
-      );
-  };
   if (!dropzoneClassName) return <></>;
   return (
     <React.Fragment>
@@ -652,6 +630,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
           onClean={handleClean}
           style={containerStyle}
           className={containerClassName}
+          top={true}
         />
       )}
       <div
@@ -746,6 +725,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
           onClean={handleClean}
           style={containerStyle}
           className={containerClassName}
+          top={false}
         />
       )}
     </React.Fragment>