From 92b169bbff28c35ac87b7395d77769b794fef01d Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Fri, 7 Jun 2024 11:05:24 +0100
Subject: [PATCH] style to handle span. remove custom colors. css var

---
 .../src/assets/css/themes/remix-dark_tvx1s2.css    |  1 +
 .../run-tab/src/lib/components/universalDappUI.tsx | 14 +++++++-------
 libs/remix-ui/run-tab/src/lib/css/run-tab.css      | 10 ++++------
 3 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css b/apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css
index 249a430f6c..84f61e9658 100644
--- a/apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css
+++ b/apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css
@@ -25,6 +25,7 @@
   --text-background: #222336;
   --text-bg-mark: #8388b2;
   --custom-select: #35384c;
+  --runtab: #8A93B0;
   --body-bg: #222336;
   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;
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 e56dffe7aa..3a22192ad3 100644
--- a/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx
@@ -390,24 +390,24 @@ export function UniversalDappUI(props: UdappProps) {
       </div>
       <div className="udapp_cActionsWrapper" data-id="universalDappUiContractActionWrapper">
         <div className="udapp_contractActionsContainer">
-          <div className="d-flex flex-row justify-content-between align-items-center" data-id="instanceContractBal">
-            <span className="runtab-text">
+          <div className="d-flex flex-row justify-content-between align-items-center pb-2" data-id="instanceContractBal">
+            <span className="remixui_runtabBalancelabel run-tab">
               <b><FormattedMessage id="udapp.balance" />:</b> {instanceBalance} ETH
             </span>
             <div></div>
-            <div>
+            <div className="d-flex align-self-center">
               {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"
+                  <i
+                    className="fas fa-edit pr-3"
                     onClick={() => {
                       props.editInstance(props.instance)
                     }}
-                  ></span>
+                  ></i>
                 </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>
+                <i className="fas fa-qrcode p-0" onClick={askPermissionToScan}></i>
               </CustomTooltip>
             </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 6724cdca03..2314161472 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,10 +525,8 @@
   width: 100%;
 }
 
-.runtab-text {
-    color: #8A93B0;
-}
-
-.runtab-text:hover {
-    color: #8A93B0;
+.remixui_runtabBalancelabel {
+  font-size: 0.688rem;
+  line-height: 0.75rem;
+  color: var(--runtab);
 }