From 4dd3bddc7f891c9db857475f097a05071b5f9916 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Thu, 6 Jun 2024 22:06:54 +0100
Subject: [PATCH] fix icon spacing

---
 .../src/lib/components/universalDappUI.tsx    | 33 ++++++++++---------
 libs/remix-ui/run-tab/src/lib/css/run-tab.css |  7 ++++
 2 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx b/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
index abc3a95c20..e56dffe7aa 100644
--- a/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
@@ -390,23 +390,26 @@ export function UniversalDappUI(props: UdappProps) {
       </div>
       <div className="udapp_cActionsWrapper" data-id="universalDappUiContractActionWrapper">
         <div className="udapp_contractActionsContainer">
-          <div className="d-flex justify-content-between" data-id="instanceContractBal">
-            <label>
+          <div className="d-flex flex-row justify-content-between align-items-center" data-id="instanceContractBal">
+            <span className="runtab-text">
               <b><FormattedMessage id="udapp.balance" />:</b> {instanceBalance} ETH
-            </label>
-            {props.exEnvironment && props.exEnvironment.startsWith('injected') && (
-              <CustomTooltip placement="top" tooltipClasses="text-nowrap" tooltipId="udapp_udappEditTooltip" tooltipText={<FormattedMessage id="udapp.tooltipTextEdit" />}>
-                <i
-                  className="fas fa-edit btn btn-sm p-0"
-                  onClick={() => {
-                    props.editInstance(props.instance)
-                  }}
-                ></i>
+            </span>
+            <div></div>
+            <div>
+              {props.exEnvironment && props.exEnvironment.startsWith('injected') && (
+                <CustomTooltip placement="top" tooltipClasses="text-nowrap" tooltipId="udapp_udappEditTooltip" tooltipText={<FormattedMessage id="udapp.tooltipTextEdit" />}>
+                  <span
+                    className="fas fa-edit btn btn-sm p-2 mr-1 runtab-text"
+                    onClick={() => {
+                      props.editInstance(props.instance)
+                    }}
+                  ></span>
+                </CustomTooltip>
+              )}
+              <CustomTooltip placement="top" tooltipClasses="text-nowrap" tooltipId="udapp_udappSolScanTooltip" tooltipText={<FormattedMessage id="udapp.solScan.iconTooltip" />}>
+                <span className="fas fa-qrcode btn btn-sm p-0 runtab-text" onClick={askPermissionToScan}></span>
               </CustomTooltip>
-            )}
-            <CustomTooltip placement="top" tooltipClasses="text-nowrap" tooltipId="udapp_udappSolScanTooltip" tooltipText={<FormattedMessage id="udapp.solScan.iconTooltip" />}>
-              <i className="fas fa-qrcode btn btn-sm p-0" onClick={askPermissionToScan}></i>
-            </CustomTooltip>
+            </div>
           </div>
           { props.isPinnedContract && props.instance.pinnedAt ? (
             <div className="d-flex" data-id="instanceContractPinnedAt">
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 e6cd4ec491..6724cdca03 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
@@ -525,3 +525,10 @@
   width: 100%;
 }
 
+.runtab-text {
+    color: #8A93B0;
+}
+
+.runtab-text:hover {
+    color: #8A93B0;
+}