Disable deploy button, update error message and tooltip

libs/remix-ui/helper/src/lib/helper-components.tsx

@@ -119,7 +119,7 @@ export const upgradeWithProxyMsg = () => (
 
 export const unavailableProxyLayoutMsg = () => (
   <div>
-    <p>Previous contract implementation not available for upgrade comparison. <br /> A new storage layout will be saved for future upgrades.</p>
+    <p>Previous contract implementation is NOT available for upgrade comparison. <br /> A new storage layout will be saved for future upgrades.</p>
   </div>
 )
 

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

@@ -274,22 +274,23 @@ export function ContractGUI (props: ContractGUIProps) {
       <div
         className="udapp_contractActionsContainerSingle pt-2"
         style={{ display: toggleContainer ? "none" : "flex" }}
-      >
-        <CustomTooltip
-          placement={"right-start"}
-          tooltipClasses="text-wrap"
-          tooltipId="remixUdappInstanceButtonTooltip"
-          tooltipText={buttonOptions.title}
       >
           <button
             onClick={handleActionClick}
             className={`udapp_instanceButton ${props.widthClass} btn btn-sm ${buttonOptions.classList}`}
             data-id={buttonOptions.dataId}
             data-title={buttonOptions.title}
+            disabled={toggleUpgradeImp && !proxyAddress}
           >
-            {title}
-          </button>
+            <CustomTooltip
+              placement={"right-start"}
+              tooltipClasses="text-wrap"
+              tooltipId="remixUdappInstanceButtonTooltip"
+              tooltipText={toggleUpgradeImp && !proxyAddress ? 'Proxy address cannot be empty' : buttonOptions.title}
+            >
+              <div>{title}</div>
             </CustomTooltip>
+          </button>
         <CustomTooltip
           placement={"right"}
           tooltipClasses="text-nowrap"
@@ -553,9 +554,9 @@ export function ContractGUI (props: ContractGUIProps) {
                   }
                 </Dropdown>
             </div>
-            <div className={`flex-column 'd-flex'}`}>
+            <div className='d-flex'>
                 <div className="mb-2">
-                  { proxyAddressError && <span className='text-lowercase' data-id="errorMsgProxyAddress" style={{ fontSize: '.8em' }}>{ proxyAddressError }</span> }
+                  { proxyAddressError && <span className='text-lowercase text-danger' data-id="errorMsgProxyAddress" style={{ fontSize: '.8em' }}>{ proxyAddressError }</span> }
                 </div>
             </div>
           </div>

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

@@ -362,8 +362,6 @@
 }
 .udapp_contractProperty button:disabled {
   cursor: not-allowed;
-  background-color: white;
-  border-color: lightgray;
 }
 .udapp_contractProperty.udapp_constant button {
   min-width: 100px;