From ddada7afe6c3badedd6ec3753dc7c08f958ab3f2 Mon Sep 17 00:00:00 2001
From: lianahus <liana@ethereum.org>
Date: Tue, 2 Aug 2022 22:04:40 +0200
Subject: [PATCH] UI inprovements

---
 .../src/lib/components/contractGUI.tsx        | 24 ++++++++++++-------
 .../src/lib/components/multiDeployInput.tsx   |  8 +++----
 libs/remix-ui/run-tab/src/lib/css/run-tab.css |  2 +-
 3 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx b/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx
index fb16d4a49f..20965b644f 100644
--- a/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx
+++ b/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">
-           <button type="button" onClick={handleExpandMultiClick} title={buttonOptions.title} data-id={buttonOptions.dataId} className={`btn udapp_instanceButton ${buttonOptions.classList}`}>{ buttonOptions.content }</button>
-          </div>
-          <CopyToClipboard tip='Copy call data to clipboard' icon='fa-clipboard' direction={'bottom'} getContent={getEncodedCall} >
+          <div className="d-flex udapp_group udapp_multiArg">
+            <CopyToClipboard tip='Copy calldata 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>
-                <span>Calldata</span>
+                <i id="copyCalldata" className="m-0 remixui_copyIcon far fa-copy" aria-hidden="true"></i>
+                <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>
-              <span>Parameters</span>
+                <i id="copyParameters" className="m-0 remixui_copyIcon far fa-copy" aria-hidden="true"></i>
+                <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 ?
diff --git a/libs/remix-ui/run-tab/src/lib/components/multiDeployInput.tsx b/libs/remix-ui/run-tab/src/lib/components/multiDeployInput.tsx
index cec20b223c..6f3d355852 100644
--- a/libs/remix-ui/run-tab/src/lib/components/multiDeployInput.tsx
+++ b/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 ( 
+
+  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>
diff --git a/libs/remix-ui/run-tab/src/lib/css/run-tab.css b/libs/remix-ui/run-tab/src/lib/css/run-tab.css
index 2921381007..1c9cd7fe5b 100644
--- a/libs/remix-ui/run-tab/src/lib/css/run-tab.css
+++ b/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;