UI inprovements

libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx

@@ -265,21 +265,29 @@ export function ContractGUI (props: ContractGUIProps) {
                 </div>)
             })}
           </div>
-          <div className="udapp_group udapp_multiArg">
+          <div className="d-flex udapp_group udapp_multiArg">
-           <button type="button" onClick={handleExpandMultiClick} title={buttonOptions.title} data-id={buttonOptions.dataId} className={`btn udapp_instanceButton ${buttonOptions.classList}`}>{ buttonOptions.content }</button>
+            <CopyToClipboard tip='Copy calldata to clipboard' icon='fa-clipboard' direction={'bottom'} getContent={getEncodedCall} >
-          </div>
-          <CopyToClipboard tip='Copy call data to clipboard' icon='fa-clipboard' direction={'bottom'} getContent={getEncodedCall} >
               <button className="btn remixui_copyButton">
-                <i className="remixui_copyIcon far fa-copy" aria-hidden="true"></i>
+                <i id="copyCalldata" className="m-0 remixui_copyIcon far fa-copy" aria-hidden="true"></i>
-                <span>Calldata</span>
+                <label htmlFor="copyCalldata">Calldata</label>
               </button>
             </CopyToClipboard>
             <CopyToClipboard tip='Copy encoded input parameters to clipboard' icon='fa-clipboard' direction={'bottom'} getContent={getEncodedParams} >
               <button className="btn remixui_copyButton">
-                <i className="remixui_copyIcon far fa-copy" aria-hidden="true"></i>
+                <i id="copyParameters" className="m-0 remixui_copyIcon far fa-copy" aria-hidden="true"></i>
-              <span>Parameters</span>
+                <label htmlFor="copyParameters">Parameters</label>
               </button>
             </CopyToClipboard>
+            <button
+              type="button"
+              onClick={handleExpandMultiClick}
+              title={buttonOptions.title}
+              data-id={buttonOptions.dataId}
+              className={`btn udapp_instanceButton ${buttonOptions.classList}`}
+            >
+              { buttonOptions.content }
+            </button>
+          </div>
         </div>
       </div>
       { props.deployOption && (props.deployOption || []).length > 0 ?

libs/remix-ui/run-tab/src/lib/components/multiDeployInput.tsx

@@ -2,13 +2,13 @@ import React, { useRef, useState } from 'react'
 import { MultiDeployInputProps } from '../types'
 import { DeployButton } from './deployButton'
 
-export function MultiDeployInput (props: MultiDeployInputProps) {
+export function MultiDeployInput(props: MultiDeployInputProps) {
   const multiFields = useRef<Array<HTMLInputElement | null>>([])
 
   return (
     <div className="udapp_contractActionsContainerMulti" style={{ display: 'flex' }}>
       <div className="udapp_contractActionsContainerMultiInner text-dark">
-        <div className="udapp_multiHeader">
+        <div className="pt-2 udapp_multiHeader">
           <div className="udapp_multiTitle run-instance-multi-title">Deploy</div>
         </div>
         <div>

libs/remix-ui/run-tab/src/lib/css/run-tab.css

@@ -357,7 +357,7 @@
   border-bottom-left-radius: 0;
 }
 .udapp_contractProperty button {
-  min-width: 100px;
+  min-width: 80px;
   width: 100px;
   margin:0;
   word-break: inherit;