From 2f07402cd8b93fe256469cad0fc1e69e0b53af44 Mon Sep 17 00:00:00 2001
From: lianahus <liana@ethereum.org>
Date: Thu, 29 Sep 2022 13:39:35 +0200
Subject: [PATCH] UI changes

---
 .../src/lib/components/contractDropdownUI.tsx | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
index 0f9f1d9cab..934d1ce50a 100644
--- a/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx
@@ -239,16 +239,19 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
     <div className="udapp_container" data-id="contractDropdownContainer">
       <div className='d-flex justify-content-between'>
         <label className="udapp_settingsLabel">Contract</label>
-        <label>{ Object.keys(props.contracts.contractList).length > 0 && compilationSource !== '' && <span data-id="udappCompiledBy">Compiled by {compilationSource} </span>  }
+        <div className="d-flex justify-content-between">{ Object.keys(props.contracts.contractList).length > 0 && compilationSource !== '' && <label data-id="udappCompiledBy">Compiled by {compilationSource} </label>  }
           <OverlayTrigger placement={'right'} overlay={
-                <Tooltip className="text-nowrap" id="info-sync-compiled-contract">
-                  <div>Click here to import contracts compiled from an external framework.</div>
-                  <div>This action is enabled when Remix is connected to an external framework (hardhat, truffle, foundry) through remixd.</div>                  
-                </Tooltip>
-              }>
-              <i role="button" style={{ cursor: 'pointer' }} className="fa fa-refresh ml-2" aria-hidden="true" onClick={_ => props.syncContracts()}></i>
+            <Tooltip className="text-nowrap" id="info-sync-compiled-contract">
+              <div>Click here to import contracts compiled from an external framework.</div>
+              <div>This action is enabled when Remix is connected to an external framework (hardhat, truffle, foundry) through remixd.</div>                  
+            </Tooltip>
+          }>
+            <button className="btn d-flex p-3" onClick={_ => props.syncContracts()}>
+              <i style={{ cursor: 'pointer' }} className="fa fa-refresh mr-2 mt-2" aria-hidden="true"></i>
+              <label data-id="" className="mt-2">HardHat</label>
+            </button>
           </OverlayTrigger>
-        </label>
+        </div>
       </div>
       <div className="udapp_subcontainer">
        <select ref={contractsRef} value={currentContract} onChange={handleContractChange} className="udapp_contractNames custom-select" disabled={contractOptions.disabled} title={contractOptions.title} style={{ display: loadType === 'abi' && !isContractFile(currentFile) ? 'none' : 'block' }}>