feat(ui): ui improvements create template EE-3628 (#7352)

app/react/components/buttons/AddButton.tsx

@@ -18,6 +18,7 @@ export function AddButton({ label, onClick, className, disabled }: Props) {
         className,
         'label',
         'label-default',
+        'vertical-center',
         'interactive',
         'vertical-center',
         styles.addButton

app/react/components/form-components/FileUpload/FileUploadField.tsx

@@ -1,6 +1,7 @@
 import { ChangeEvent, createRef } from 'react';
 
 import { Button } from '@@/buttons';
+import { Icon } from '@@/Icon';
 
 import styles from './FileUploadField.module.css';
 
@@ -24,7 +25,7 @@ export function FileUploadField({
   const fileRef = createRef<HTMLInputElement>();
 
   return (
-    <div className="file-upload-field">
+    <div className="file-upload-field vertical-center">
       <input
         id={inputId}
         ref={fileRef}
@@ -44,12 +45,8 @@ export function FileUploadField({
         {title}
       </Button>
 
-      <span className="space-left">
-        {value ? (
-          value.name
-        ) : (
-          <i className="fa fa-times red-icon" aria-hidden="true" />
-        )}
+      <span className="vertical-center">
+        {value ? value.name : <Icon icon="x" feather mode="danger" />}
       </span>
     </div>
   );

app/react/components/form-components/InputList/InputList.tsx

@@ -94,7 +94,7 @@ export function InputList<T = DefaultType>({
       </div>
 
       {textTip && (
-        <div className="col-sm-12 my-5">
+        <div className="col-sm-12 mt-5">
           <TextTip color="blue">{textTip}</TextTip>
         </div>
       )}
@@ -131,6 +131,7 @@ export function InputList<T = DefaultType>({
                       size="small"
                       disabled={disabled || index === 0}
                       onClick={() => handleMoveUp(index)}
+                      className="vertical-center btn-only-icon"
                     >
                       <Icon icon="arrow-up" feather />
                     </Button>
@@ -139,6 +140,7 @@ export function InputList<T = DefaultType>({
                       type="button"
                       disabled={disabled || index === value.length - 1}
                       onClick={() => handleMoveDown(index)}
+                      className="vertical-center btn-only-icon"
                     >
                       <Icon icon="arrow-down" feather />
                     </Button>
@@ -146,12 +148,12 @@ export function InputList<T = DefaultType>({
                 )}
                 {!readOnly && (
                   <Button
-                    color="danger"
-                    size="medium"
+                    color="dangerlight"
+                    size="small"
                     onClick={() => handleRemoveItem(key, item)}
-                    disabled={disabled}
+                    className="vertical-center btn-only-icon"
                   >
-                    <Icon icon="trash-2" feather />
+                    <Icon icon="trash-2" feather size="md" />
                   </Button>
                 )}
               </div>