style to handle span. remove custom colors. css var

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;

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">
+          <div className="d-flex flex-row justify-content-between align-items-center pb-2" data-id="instanceContractBal">
-            <span className="runtab-text">
+            <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
+                  <i
-                    className="fas fa-edit btn btn-sm p-2 mr-1 runtab-text"
+                    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>

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

@@ -525,10 +525,8 @@
   width: 100%;
 }
 
-.runtab-text {
+.remixui_runtabBalancelabel {
-    color: #8A93B0;
+  font-size: 0.688rem;
-}
+  line-height: 0.75rem;
-
+  color: var(--runtab);
-.runtab-text:hover {
-    color: #8A93B0;
 }