feat(ui): EE-3718 css portainer environments edit (#7318)

app/react/components/TagSelector/TagSelector.tsx

@@ -2,6 +2,7 @@ import clsx from 'clsx';
 import _ from 'lodash';
 
 import { TagId } from '@/portainer/tags/types';
+import { Icon } from '@/react/components/Icon';
 import { useCreateTagMutation, useTags } from '@/portainer/tags/queries';
 
 import { Creatable, Select } from '@@/form-components/ReactSelect';
@@ -63,15 +64,17 @@ export function TagSelector({ value, allowCreate = false, onChange }: Props) {
             <button
               type="button"
               title="Remove tag"
-              className={clsx(styles.removeTagBtn, 'space-left', 'tag')}
+              className={clsx(
+                styles.removeTagBtn,
+                'space-left',
+                'tag',
+                'vertical-center'
+              )}
               onClick={() => handleRemove(tag.value)}
               key={tag.value}
             >
               {tag.label}
-              <i
-                className="fa fa-trash-alt white-icon space-left"
-                aria-hidden="true"
-              />
+              <Icon icon="trash-2" feather />
             </button>
           ))}
         </FormControl>

app/react/components/buttons/AddButton.tsx

@@ -27,7 +27,7 @@ export function AddButton({ label, onClick, className, disabled }: Props) {
       onClick={onClick}
       disabled={disabled}
     >
-      <Icon icon="plus" feather className="space-right" />
+      <Icon icon="plus-circle" feather />
       {label}
     </button>
   );

app/react/components/buttons/CopyButton/CopyButton.tsx

@@ -33,14 +33,16 @@ export function CopyButton({
         title="Copy Value"
         type="button"
       >
-        <Icon icon="copy" feather /> {children}
+        <Icon icon="copy" feather />
+        {children}
       </Button>
 
       <span
         className={clsx(
           copiedSuccessfully && styles.fadeout,
           styles.displayText,
-          'space-left'
+          'space-left',
+          'vertical-center'
         )}
       >
         <Icon icon="check" feather />

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

@@ -107,7 +107,11 @@ export function InputList<T = DefaultType>({
           return (
             <div
               key={key}
-              className={clsx(styles.itemLine, { [styles.hasError]: !!error })}
+              className={clsx(
+                styles.itemLine,
+                { [styles.hasError]: !!error },
+                'vertical-center'
+              )}
             >
               {Item ? (
                 <Item
@@ -128,7 +132,7 @@ export function InputList<T = DefaultType>({
                 {!readOnly && movable && (
                   <>
                     <Button
-                      size="small"
+                      size="medium"
                       disabled={disabled || index === 0}
                       onClick={() => handleMoveUp(index)}
                       className="vertical-center btn-only-icon"
@@ -136,7 +140,7 @@ export function InputList<T = DefaultType>({
                       <Icon icon="arrow-up" feather />
                     </Button>
                     <Button
-                      size="small"
+                      size="medium"
                       type="button"
                       disabled={disabled || index === value.length - 1}
                       onClick={() => handleMoveDown(index)}
@@ -149,7 +153,7 @@ export function InputList<T = DefaultType>({
                 {!readOnly && (
                   <Button
                     color="dangerlight"
-                    size="small"
+                    size="medium"
                     onClick={() => handleRemoveItem(key, item)}
                     className="vertical-center btn-only-icon"
                   >