ui updates

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

@@ -237,19 +237,22 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
 
   return (
     <div className="udapp_container" data-id="contractDropdownContainer">
-      <div className=''>
+      <div className='d-flex justify-content-between'>
-        <label className="udapp_settingsLabel">Contract</label>
+        <div className="d-flex justify-content-between align-items-end">
-        { Object.keys(props.contracts.contractList).length > 0 && compilationSource !== '' && <label className='ml-1' data-id="udappCompiledBy">Compiled by {compilationSource}</label>  }
+          <label className="udapp_settingsLabel pr-1">Contract</label>
-          { compilationSource !== '' && compilationSource !== 'remix' && <OverlayTrigger placement={'right'} overlay={
+          <div className="d-flex">{ Object.keys(props.contracts.contractList).length > 0 && compilationSource !== '' && <label data-id="udappCompiledBy">(Compiled by {compilationSource.toUpperCase()})</label>}</div>
-            <Tooltip className="text-nowrap" id="info-sync-compiled-contract">
+        </div>
-              <div>Click here to import contracts compiled from an external framework.</div>
+        <OverlayTrigger placement={'right'} overlay={
-              <div>This action is enabled when Remix is connected to an external framework (hardhat, truffle, foundry) through remixd.</div>                  
+          <Tooltip className="text-nowrap" id="info-sync-compiled-contract">
-            </Tooltip>
+            <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>                  
-            <button className="btn" onClick={_ => props.syncContracts()}>
+          </Tooltip>
-              <i style={{ cursor: 'pointer' }} className="fa fa-refresh" aria-hidden="true"></i>
+        }>
-            </button>
+          <button className="btn d-flex py-0" onClick={_ => props.syncContracts()}>
-          </OverlayTrigger> }
+            <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>
       </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' }}>