From 99b1722bea88963e3da48b2676f232095e02a2e7 Mon Sep 17 00:00:00 2001
From: lianahus <liana@ethereum.org>
Date: Thu, 16 Mar 2023 09:43:41 +0100
Subject: [PATCH] tooltips fixes

---
 .../src/app/components/HeaderWithSettings.tsx |   2 -
 apps/etherscan/src/app/views/VerifyView.tsx   |   2 -
 apps/remix-ide/src/app/panels/tab-proxy.js    |   7 +-
 .../src/app/tabs/locales/en/udapp.json        |   4 +-
 .../css/themes/bootstrap-cerulean.min.css     |   8 +-
 .../css/themes/bootstrap-cyborg.min.css       |   8 +-
 .../css/themes/bootstrap-flatly.min.css       |   8 +-
 .../css/themes/bootstrap-spacelab.min.css     |   9 +-
 .../assets/css/themes/remix-black_undtds.css  |   8 +-
 .../assets/css/themes/remix-candy_ikhg4m.css  |   8 +-
 .../assets/css/themes/remix-dark_tvx1s2.css   |   8 +-
 .../assets/css/themes/remix-hacker_owl.css    |   8 +-
 .../assets/css/themes/remix-light_powaqg.css  |   8 +-
 .../css/themes/remix-midcentury_hrzph3.css    |  10 +-
 .../debugger-ui/src/lib/debugger-ui.tsx       |  35 +++--
 .../src/lib/components/custom-tooltip.tsx     |  10 +-
 .../src/lib/components/pluginButton.tsx       |   2 +-
 .../src/lib/remix-ui-modal-dialog.tsx         |   2 +-
 .../panel/src/lib/plugins/panel-header.tsx    |   9 +-
 .../src/lib/components/ActivePluginCard.tsx   |  70 +++++++--
 .../src/lib/components/InactivePluginCard.tsx |  66 ++++++--
 .../src/lib/components/recorderCardUI.tsx     |  12 +-
 .../settings/src/lib/remix-ui-settings.tsx    |  41 +++--
 .../src/lib/api/compiler-api.ts               |  12 +-
 .../src/lib/compiler-container.tsx            |  28 ++--
 libs/remix-ui/tabs/src/lib/remix-ui-tabs.css  |  73 +++++----
 libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx  | 143 +++++++++++-------
 .../src/lib/components/Badge.tsx              |  22 ++-
 .../src/lib/css/remix-ui-workspace.css        |  12 --
 29 files changed, 375 insertions(+), 260 deletions(-)

diff --git a/apps/etherscan/src/app/components/HeaderWithSettings.tsx b/apps/etherscan/src/app/components/HeaderWithSettings.tsx
index 14e048d6cd..fb6fb0dab7 100644
--- a/apps/etherscan/src/app/components/HeaderWithSettings.tsx
+++ b/apps/etherscan/src/app/components/HeaderWithSettings.tsx
@@ -148,9 +148,7 @@ export const HeaderWithSettings: React.FC<Props> = ({
           <h6>{title}</h6>
           <div style={{ float: "right" }}>
             <HomeIcon from={from} themeType={themeType} />
-
             <ReceiptsIcon from={from} themeType={themeType} />
-
             <SettingsIcon from={from} themeType={themeType} />
           </div>
         </div>
diff --git a/apps/etherscan/src/app/views/VerifyView.tsx b/apps/etherscan/src/app/views/VerifyView.tsx
index f13fea1929..cc71a46418 100644
--- a/apps/etherscan/src/app/views/VerifyView.tsx
+++ b/apps/etherscan/src/app/views/VerifyView.tsx
@@ -23,8 +23,6 @@ interface FormValues {
   contractAddress: string
 }
 
-
-
 export const VerifyView: React.FC<Props> = ({
   apiKey,
   client,
diff --git a/apps/remix-ide/src/app/panels/tab-proxy.js b/apps/remix-ide/src/app/panels/tab-proxy.js
index d9b62256b4..269e48b51a 100644
--- a/apps/remix-ide/src/app/panels/tab-proxy.js
+++ b/apps/remix-ide/src/app/panels/tab-proxy.js
@@ -244,7 +244,7 @@ export class TabProxy extends Plugin {
             name,
             title,
             icon,
-            tooltip: name,
+            tooltip: title || name,
             iconClass: getPathIcon(name)
           })
           formatPath.shift()
@@ -252,6 +252,7 @@ export class TabProxy extends Plugin {
             const index = this.loadedTabs.findIndex(({ title }) => title === formatPath.join('/'))
             if (index > -1) {
               const duplicateTabName = this.loadedTabs[index].name
+              const duplicateTabTooltip = this.loadedTabs[index].tooltip
               const duplicateTabPath = duplicateTabName.split('/')
               const duplicateTabFormatPath = [...duplicateTabPath].reverse()
               const duplicateTabTitle = duplicateTabFormatPath.slice(0, titleLength).reverse().join('/')
@@ -260,7 +261,7 @@ export class TabProxy extends Plugin {
                 name: duplicateTabName,
                 title: duplicateTabTitle,
                 icon,
-                tooltip: duplicateTabName,
+                tooltip: duplicateTabTooltip,
                 iconClass: getPathIcon(duplicateTabName)
               }
             }
@@ -274,7 +275,7 @@ export class TabProxy extends Plugin {
         name,
         title,
         icon,
-        tooltip: name,
+        tooltip: title || name,
         iconClass: getPathIcon(name)
       })
     }
diff --git a/apps/remix-ide/src/app/tabs/locales/en/udapp.json b/apps/remix-ide/src/app/tabs/locales/en/udapp.json
index c2a864e32b..b820b73f8b 100644
--- a/apps/remix-ide/src/app/tabs/locales/en/udapp.json
+++ b/apps/remix-ide/src/app/tabs/locales/en/udapp.json
@@ -40,8 +40,8 @@
   "udapp.transactionSaveTooltip1": "No transactions to save",
   "udapp.transactionSaveTooltip2": "Save {count} transaction as scenario file",
   "udapp.transactionSaveTooltip3": "Save {count} transactions as scenario file",
-  "udapp.infoRecorderTooltip": "Save transactions (deployed contracts and function executions) {br}and replay them in another environment e.g Transactions created {br}in Remix VM can be replayed in the Injected Provider.",
-  "udapp.livemodeRecorderTooltip": "If contracts are updated after recording transactions,{br} checking this box will run recorded transactions {br}with the latest copy of the compiled contracts",
+  "udapp.infoRecorderTooltip": "Save transactions (deployed contracts and function executions) and replay them in another environment e.g Transactions created in Remix VM can be replayed in the Injected Provider.",
+  "udapp.livemodeRecorderTooltip": "If contracts are updated after recording transactions, checking this box will run recorded transactions with the latest copy of the compiled contracts",
   "udapp.livemodeRecorderLabel": "Run transactions using the latest compilation result",
   "udapp.runRecorderTooltip": "Run transaction(s) from the current scenario file",
   "udapp.save": "Save",
diff --git a/apps/remix-ide/src/assets/css/themes/bootstrap-cerulean.min.css b/apps/remix-ide/src/assets/css/themes/bootstrap-cerulean.min.css
index 17bdde289a..9542aa513a 100644
--- a/apps/remix-ide/src/assets/css/themes/bootstrap-cerulean.min.css
+++ b/apps/remix-ide/src/assets/css/themes/bootstrap-cerulean.min.css
@@ -5250,7 +5250,7 @@ a.close.disabled {
 .bs-popover-auto[x-placement^=top]>.arrow::after,.bs-popover-top>.arrow::after {
     bottom:1px;
     border-width:.5rem .5rem 0;
-    border-top-color:#fff
+    border-top-color: var(--secondary)
 }
 .bs-popover-auto[x-placement^=right],.bs-popover-right {
     margin-left:.5rem
@@ -5269,7 +5269,7 @@ a.close.disabled {
 .bs-popover-auto[x-placement^=right]>.arrow::after,.bs-popover-right>.arrow::after {
     left:1px;
     border-width:.5rem .5rem .5rem 0;
-    border-right-color:#fff
+    border-right-color: var(--secondary)
 }
 .bs-popover-auto[x-placement^=bottom],.bs-popover-bottom {
     margin-top:.5rem
@@ -5285,7 +5285,7 @@ a.close.disabled {
 .bs-popover-auto[x-placement^=bottom]>.arrow::after,.bs-popover-bottom>.arrow::after {
     top:1px;
     border-width:0 .5rem .5rem .5rem;
-    border-bottom-color:#fff
+    border-bottom-color: var(--secondary)
 }
 .bs-popover-auto[x-placement^=bottom] .popover-header::before,.bs-popover-bottom .popover-header::before {
     position:absolute;
@@ -5314,7 +5314,7 @@ a.close.disabled {
 .bs-popover-auto[x-placement^=left]>.arrow::after,.bs-popover-left>.arrow::after {
     right:1px;
     border-width:.5rem 0 .5rem .5rem;
-    border-left-color:#fff
+    border-left-color: var(--secondary)
 }
 .popover-header {
     padding:.5rem .75rem;
diff --git a/apps/remix-ide/src/assets/css/themes/bootstrap-cyborg.min.css b/apps/remix-ide/src/assets/css/themes/bootstrap-cyborg.min.css
index 918bbb71b7..5e813c6d42 100644
--- a/apps/remix-ide/src/assets/css/themes/bootstrap-cyborg.min.css
+++ b/apps/remix-ide/src/assets/css/themes/bootstrap-cyborg.min.css
@@ -5252,7 +5252,7 @@ a.close.disabled {
 .bs-popover-auto[x-placement^=top]>.arrow::after,.bs-popover-top>.arrow::after {
     bottom:1px;
     border-width:.5rem .5rem 0;
-    border-top-color:#282828
+    border-top-color: var(--secondary);
 }
 .bs-popover-auto[x-placement^=right],.bs-popover-right {
     margin-left:.5rem
@@ -5271,7 +5271,7 @@ a.close.disabled {
 .bs-popover-auto[x-placement^=right]>.arrow::after,.bs-popover-right>.arrow::after {
     left:1px;
     border-width:.5rem .5rem .5rem 0;
-    border-right-color:#282828
+    border-right-color: var(--secondary);
 }
 .bs-popover-auto[x-placement^=bottom],.bs-popover-bottom {
     margin-top:.5rem
@@ -5287,7 +5287,7 @@ a.close.disabled {
 .bs-popover-auto[x-placement^=bottom]>.arrow::after,.bs-popover-bottom>.arrow::after {
     top:1px;
     border-width:0 .5rem .5rem .5rem;
-    border-bottom-color:#282828
+    border-bottom-color: var(--secondary);
 }
 .bs-popover-auto[x-placement^=bottom] .popover-header::before,.bs-popover-bottom .popover-header::before {
     position:absolute;
@@ -5316,7 +5316,7 @@ a.close.disabled {
 .bs-popover-auto[x-placement^=left]>.arrow::after,.bs-popover-left>.arrow::after {
     right:1px;
     border-width:.5rem 0 .5rem .5rem;
-    border-left-color:#282828
+    border-left-color: var(--secondary);
 }
 .popover-header {
     padding:.5rem .75rem;
diff --git a/apps/remix-ide/src/assets/css/themes/bootstrap-flatly.min.css b/apps/remix-ide/src/assets/css/themes/bootstrap-flatly.min.css
index 5940867b25..648375ddc8 100644
--- a/apps/remix-ide/src/assets/css/themes/bootstrap-flatly.min.css
+++ b/apps/remix-ide/src/assets/css/themes/bootstrap-flatly.min.css
@@ -4253,7 +4253,7 @@ a.close.disabled {
 	bottom:0;	border-width:.5rem .5rem 0;	border-top-color:rgba(0,0,0,.25)
 }
 .bs-popover-auto[x-placement^=top]>.arrow::after,.bs-popover-top>.arrow::after {
-	bottom:1px;	border-width:.5rem .5rem 0;	border-top-color:#fff
+	bottom:1px;	border-width:.5rem .5rem 0;	border-top-color: var(--secondary)
 }
 .bs-popover-auto[x-placement^=right],.bs-popover-right {
 	margin-left:.5rem
@@ -4265,7 +4265,7 @@ a.close.disabled {
 	left:0;	border-width:.5rem .5rem .5rem 0;	border-right-color:rgba(0,0,0,.25)
 }
 .bs-popover-auto[x-placement^=right]>.arrow::after,.bs-popover-right>.arrow::after {
-	left:1px;	border-width:.5rem .5rem .5rem 0;	border-right-color:#fff
+	left:1px;	border-width:.5rem .5rem .5rem 0;	border-right-color: var(--secondary)
 }
 .bs-popover-auto[x-placement^=bottom],.bs-popover-bottom {
 	margin-top:.5rem
@@ -4277,7 +4277,7 @@ a.close.disabled {
 	top:0;	border-width:0 .5rem .5rem .5rem;	border-bottom-color:rgba(0,0,0,.25)
 }
 .bs-popover-auto[x-placement^=bottom]>.arrow::after,.bs-popover-bottom>.arrow::after {
-	top:1px;	border-width:0 .5rem .5rem .5rem;	border-bottom-color:#fff
+	top:1px;	border-width:0 .5rem .5rem .5rem;	border-bottom-color: var(--secondary)
 }
 .bs-popover-auto[x-placement^=bottom] .popover-header::before,.bs-popover-bottom .popover-header::before {
 	position:absolute;	top:0;	left:50%;	display:block;	width:1rem;	margin-left:-.5rem;	content:"";	border-bottom:1px solid #f7f7f7
@@ -4292,7 +4292,7 @@ a.close.disabled {
 	right:0;	border-width:.5rem 0 .5rem .5rem;	border-left-color:rgba(0,0,0,.25)
 }
 .bs-popover-auto[x-placement^=left]>.arrow::after,.bs-popover-left>.arrow::after {
-	right:1px;	border-width:.5rem 0 .5rem .5rem;	border-left-color:#fff
+	right:1px;	border-width:.5rem 0 .5rem .5rem;	border-left-color: var(--secondary)
 }
 .popover-header {
 	padding:.5rem .75rem;	margin-bottom:0;	font-size:.9375rem;	background-color:#f7f7f7;	border-bottom:1px solid #ebebeb;	border-top-left-radius:calc(.3rem - 1px);	border-top-right-radius:calc(.3rem - 1px)
diff --git a/apps/remix-ide/src/assets/css/themes/bootstrap-spacelab.min.css b/apps/remix-ide/src/assets/css/themes/bootstrap-spacelab.min.css
index b8e90b0107..4c792a1245 100644
--- a/apps/remix-ide/src/assets/css/themes/bootstrap-spacelab.min.css
+++ b/apps/remix-ide/src/assets/css/themes/bootstrap-spacelab.min.css
@@ -5253,7 +5253,7 @@ a.close.disabled {
 .bs-popover-auto[x-placement^=top]>.arrow::after,.bs-popover-top>.arrow::after {
     bottom:1px;
     border-width:.5rem .5rem 0;
-    border-top-color:#fff
+    border-top-color: var(--secondary)
 }
 .bs-popover-auto[x-placement^=right],.bs-popover-right {
     margin-left:.5rem
@@ -5272,7 +5272,7 @@ a.close.disabled {
 .bs-popover-auto[x-placement^=right]>.arrow::after,.bs-popover-right>.arrow::after {
     left:1px;
     border-width:.5rem .5rem .5rem 0;
-    border-right-color:#fff
+    border-right-color: var(--secondary)
 }
 .bs-popover-auto[x-placement^=bottom],.bs-popover-bottom {
     margin-top:.5rem
@@ -5288,7 +5288,7 @@ a.close.disabled {
 .bs-popover-auto[x-placement^=bottom]>.arrow::after,.bs-popover-bottom>.arrow::after {
     top:1px;
     border-width:0 .5rem .5rem .5rem;
-    border-bottom-color:#fff
+    border-bottom-color: var(--secondary)
 }
 .bs-popover-auto[x-placement^=bottom] .popover-header::before,.bs-popover-bottom .popover-header::before {
     position:absolute;
@@ -5317,7 +5317,7 @@ a.close.disabled {
 .bs-popover-auto[x-placement^=left]>.arrow::after,.bs-popover-left>.arrow::after {
     right:1px;
     border-width:.5rem 0 .5rem .5rem;
-    border-left-color:#fff
+    border-left-color: var(--secondary)
 }
 .popover-header {
     padding:.5rem .75rem;
@@ -5486,7 +5486,6 @@ a.close.disabled {
     .carousel-indicators li {
         transition:none
     }
-
 }
 .carousel-indicators .active {
     opacity:1
diff --git a/apps/remix-ide/src/assets/css/themes/remix-black_undtds.css b/apps/remix-ide/src/assets/css/themes/remix-black_undtds.css
index 36381f4163..61dbb692ce 100644
--- a/apps/remix-ide/src/assets/css/themes/remix-black_undtds.css
+++ b/apps/remix-ide/src/assets/css/themes/remix-black_undtds.css
@@ -5310,7 +5310,7 @@ a.close.disabled {
 .bs-popover-top > .arrow::after {
   bottom: 1px;
   border-width: 5px 5px 0;
-  border-top-color: #000;
+  border-top-color: var(--secondary);
 }
 .bs-popover-auto[x-placement^="right"],
 .bs-popover-right {
@@ -5333,7 +5333,7 @@ a.close.disabled {
 .bs-popover-right > .arrow::after {
   left: 1px;
   border-width: 5px 5px 5px 0;
-  border-right-color: #000;
+  border-right-color: var(--secondary);
 }
 .bs-popover-auto[x-placement^="bottom"],
 .bs-popover-bottom {
@@ -5353,7 +5353,7 @@ a.close.disabled {
 .bs-popover-bottom > .arrow::after {
   top: 1px;
   border-width: 0 5px 5px 5px;
-  border-bottom-color: #000;
+  border-bottom-color: var(--secondary);
 }
 .bs-popover-auto[x-placement^="bottom"] .popover-header::before,
 .bs-popover-bottom .popover-header::before {
@@ -5387,7 +5387,7 @@ a.close.disabled {
 .bs-popover-left > .arrow::after {
   right: 1px;
   border-width: 5px 0 5px 5px;
-  border-left-color: #000;
+  border-left-color: var(--secondary);
 }
 .popover-header {
   padding: 8px 14px;
diff --git a/apps/remix-ide/src/assets/css/themes/remix-candy_ikhg4m.css b/apps/remix-ide/src/assets/css/themes/remix-candy_ikhg4m.css
index 14764f2994..fd25e0642d 100644
--- a/apps/remix-ide/src/assets/css/themes/remix-candy_ikhg4m.css
+++ b/apps/remix-ide/src/assets/css/themes/remix-candy_ikhg4m.css
@@ -5773,7 +5773,7 @@ a.close.disabled {
 .bs-popover-auto[x-placement^="top"] > .arrow::after {
   bottom: 1px;
   border-width: 0.5rem 0.5rem 0;
-  border-top-color: #fff;
+  border-top-color: var(--secondary);
 }
 
 .bs-popover-right,
@@ -5797,7 +5797,7 @@ a.close.disabled {
 .bs-popover-auto[x-placement^="right"] > .arrow::after {
   left: 1px;
   border-width: 0.5rem 0.5rem 0.5rem 0;
-  border-right-color: #fff;
+  border-right-color: var(--secondary);
 }
 
 .bs-popover-bottom,
@@ -5818,7 +5818,7 @@ a.close.disabled {
 .bs-popover-auto[x-placement^="bottom"] > .arrow::after {
   top: 1px;
   border-width: 0 0.5rem 0.5rem 0.5rem;
-  border-bottom-color: #fff;
+  border-bottom-color: var(--secondary);
 }
 .bs-popover-bottom .popover-header::before,
 .bs-popover-auto[x-placement^="bottom"] .popover-header::before {
@@ -5853,7 +5853,7 @@ a.close.disabled {
 .bs-popover-auto[x-placement^="left"] > .arrow::after {
   right: 1px;
   border-width: 0.5rem 0 0.5rem 0.5rem;
-  border-left-color: #fff;
+  border-left-color: var(--secondary);
 }
 
 .popover-header {
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 a38163a92c..c53a7e7ac3 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
@@ -5312,7 +5312,7 @@ a.close.disabled {
 .bs-popover-top > .arrow::after {
   bottom: 1px;
   border-width: 5px 5px 0;
-  border-top-color: #000;
+  border-top-color: var(--secondary);
 }
 .bs-popover-auto[x-placement^="right"],
 .bs-popover-right {
@@ -5335,7 +5335,7 @@ a.close.disabled {
 .bs-popover-right > .arrow::after {
   left: 1px;
   border-width: 5px 5px 5px 0;
-  border-right-color: #000;
+  border-right-color: var(--secondary);
 }
 .bs-popover-auto[x-placement^="bottom"],
 .bs-popover-bottom {
@@ -5355,7 +5355,7 @@ a.close.disabled {
 .bs-popover-bottom > .arrow::after {
   top: 1px;
   border-width: 0 5px 5px 5px;
-  border-bottom-color: #000;
+  border-bottom-color: var(--secondary);
 }
 .bs-popover-auto[x-placement^="bottom"] .popover-header::before,
 .bs-popover-bottom .popover-header::before {
@@ -5389,7 +5389,7 @@ a.close.disabled {
 .bs-popover-left > .arrow::after {
   right: 1px;
   border-width: 5px 0 5px 5px;
-  border-left-color: #000;
+  border-left-color: var(--secondary);
 }
 .popover-header {
   padding: 8px 14px;
diff --git a/apps/remix-ide/src/assets/css/themes/remix-hacker_owl.css b/apps/remix-ide/src/assets/css/themes/remix-hacker_owl.css
index 3db8d66dec..58f3aa64fc 100644
--- a/apps/remix-ide/src/assets/css/themes/remix-hacker_owl.css
+++ b/apps/remix-ide/src/assets/css/themes/remix-hacker_owl.css
@@ -5323,7 +5323,7 @@ a.close.disabled {
 .bs-popover-top > .arrow::after {
   bottom: 1px;
   border-width: 5px 5px 0;
-  border-top-color: #000;
+  border-top-color: var(--secondary);
 }
 .bs-popover-auto[x-placement^="right"],
 .bs-popover-right {
@@ -5346,7 +5346,7 @@ a.close.disabled {
 .bs-popover-right > .arrow::after {
   left: 1px;
   border-width: 5px 5px 5px 0;
-  border-right-color: #000;
+  border-right-color: var(--secondary);
 }
 .bs-popover-auto[x-placement^="bottom"],
 .bs-popover-bottom {
@@ -5366,7 +5366,7 @@ a.close.disabled {
 .bs-popover-bottom > .arrow::after {
   top: 1px;
   border-width: 0 5px 5px 5px;
-  border-bottom-color: #000;
+  border-bottom-color: var(--secondary);
 }
 .bs-popover-auto[x-placement^="bottom"] .popover-header::before,
 .bs-popover-bottom .popover-header::before {
@@ -5400,7 +5400,7 @@ a.close.disabled {
 .bs-popover-left > .arrow::after {
   right: 1px;
   border-width: 5px 0 5px 5px;
-  border-left-color: #000;
+  border-left-color: var(--secondary);
 }
 .popover-header {
   padding: 8px 14px;
diff --git a/apps/remix-ide/src/assets/css/themes/remix-light_powaqg.css b/apps/remix-ide/src/assets/css/themes/remix-light_powaqg.css
index 66b438c4d6..800b7dc5a8 100644
--- a/apps/remix-ide/src/assets/css/themes/remix-light_powaqg.css
+++ b/apps/remix-ide/src/assets/css/themes/remix-light_powaqg.css
@@ -5769,7 +5769,7 @@ a.close.disabled {
 .bs-popover-auto[x-placement^="top"] > .arrow::after {
   bottom: 1px;
   border-width: 0.5rem 0.5rem 0;
-  border-top-color: #fff;
+  border-top-color: var(--secondary);
 }
 
 .bs-popover-right,
@@ -5793,7 +5793,7 @@ a.close.disabled {
 .bs-popover-auto[x-placement^="right"] > .arrow::after {
   left: 1px;
   border-width: 0.5rem 0.5rem 0.5rem 0;
-  border-right-color: #fff;
+  border-right-color: var(--secondary);
 }
 
 .bs-popover-bottom,
@@ -5814,7 +5814,7 @@ a.close.disabled {
 .bs-popover-auto[x-placement^="bottom"] > .arrow::after {
   top: 1px;
   border-width: 0 0.5rem 0.5rem 0.5rem;
-  border-bottom-color: #fff;
+  border-bottom-color: var(--secondary);
 }
 .bs-popover-bottom .popover-header::before,
 .bs-popover-auto[x-placement^="bottom"] .popover-header::before {
@@ -5849,7 +5849,7 @@ a.close.disabled {
 .bs-popover-auto[x-placement^="left"] > .arrow::after {
   right: 1px;
   border-width: 0.5rem 0 0.5rem 0.5rem;
-  border-left-color: #fff;
+  border-left-color: var(--secondary);
 }
 
 .popover-header {
diff --git a/apps/remix-ide/src/assets/css/themes/remix-midcentury_hrzph3.css b/apps/remix-ide/src/assets/css/themes/remix-midcentury_hrzph3.css
index c2501b8496..de6be478db 100644
--- a/apps/remix-ide/src/assets/css/themes/remix-midcentury_hrzph3.css
+++ b/apps/remix-ide/src/assets/css/themes/remix-midcentury_hrzph3.css
@@ -5775,7 +5775,7 @@ a.close.disabled {
 .bs-popover-auto[x-placement^="top"] > .arrow::after {
   bottom: 1px;
   border-width: 0.5rem 0.5rem 0;
-  border-top-color: #eeede9;
+  border-top-color: var(--secondary);
 }
 
 .bs-popover-right,
@@ -5799,7 +5799,7 @@ a.close.disabled {
 .bs-popover-auto[x-placement^="right"] > .arrow::after {
   left: 1px;
   border-width: 0.5rem 0.5rem 0.5rem 0;
-  border-right-color: #eeede9;
+  border-right-color: var(--secondary);
 }
 
 .bs-popover-bottom,
@@ -5820,7 +5820,7 @@ a.close.disabled {
 .bs-popover-auto[x-placement^="bottom"] > .arrow::after {
   top: 1px;
   border-width: 0 0.5rem 0.5rem 0.5rem;
-  border-bottom-color: #eeede9;
+  border-bottom-color: var(--secondary);
 }
 .bs-popover-bottom .popover-header::before,
 .bs-popover-auto[x-placement^="bottom"] .popover-header::before {
@@ -5855,7 +5855,7 @@ a.close.disabled {
 .bs-popover-auto[x-placement^="left"] > .arrow::after {
   right: 1px;
   border-width: 0.5rem 0 0.5rem 0.5rem;
-  border-left-color: #eeede9;
+  border-left-color: var(--secondary);
 }
 
 .popover-header {
@@ -6141,7 +6141,7 @@ button.bg-primary:focus {
 }
 
 .bg-secondary {
-  background-color: #EDC2A1 !important;
+  background-color: #f1f1f100 !important;
 }
 
 a.bg-secondary:hover,
diff --git a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
index 81e3624a00..1dc5f4bbfd 100644
--- a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
+++ b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
@@ -384,20 +384,31 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
       <div className="px-2" ref={debuggerTopRef}>
         <div>
           <div className="mt-2 mb-2 debuggerConfig custom-control custom-checkbox">
-          <CustomTooltip
-            tooltipId="debuggerGenSourceCheckbox"
-            tooltipText={<FormattedMessage id='debugger.debugWithGeneratedSources' />}
-            placement="top-start"
-          >
-            {customJSX}
-          </CustomTooltip>
+            <CustomTooltip
+              tooltipId="debuggerGenSourceCheckbox"
+              tooltipText={<FormattedMessage id='debugger.debugWithGeneratedSources' />}
+              placement="top-start"
+            >
+              {customJSX}
+            </CustomTooltip>
           </div>
           { state.isLocalNodeUsed && <div className="mb-2 debuggerConfig custom-control custom-checkbox">
-            <input className="custom-control-input" id="debugWithLocalNodeInput" onChange={({ target: { checked } }) => {
-              setState(prevState => {
-                return { ...prevState, opt: { ...prevState.opt, debugWithLocalNode: checked } }
-              })
-            }} type="checkbox" title="Force the debugger to use the current local node" />
+            <CustomTooltip
+              tooltipId="debuggerGenSourceInput"
+              tooltipText="Force the debugger to use the current local node"
+              placement='right'
+            >
+              <input
+                className="custom-control-input"
+                id="debugWithLocalNodeInput"
+                onChange={({ target: { checked } }) => {
+                  setState(prevState => {
+                    return { ...prevState, opt: { ...prevState.opt, debugWithLocalNode: checked } }
+                  })
+                }}
+                type="checkbox"
+              />
+            </CustomTooltip>
             <label data-id="debugLocaNodeLabel" className="form-check-label custom-control-label" htmlFor="debugWithLocalNodeInput"><FormattedMessage id='debugger.debugLocaNodeLabel' /></label>
           </div>
           }
diff --git a/libs/remix-ui/helper/src/lib/components/custom-tooltip.tsx b/libs/remix-ui/helper/src/lib/components/custom-tooltip.tsx
index 1f09b43f62..447edcf6dc 100644
--- a/libs/remix-ui/helper/src/lib/components/custom-tooltip.tsx
+++ b/libs/remix-ui/helper/src/lib/components/custom-tooltip.tsx
@@ -2,13 +2,12 @@ import React from 'react';
 import { Fragment } from 'react';
 import { OverlayTrigger, Popover } from 'react-bootstrap';
 import { CustomTooltipType } from '../../types/customtooltip'
-
-
+import './custom-tooltip.css'
 export function CustomTooltip({ children, placement, tooltipId, tooltipClasses, tooltipText, tooltipTextClasses, delay }: CustomTooltipType) {
 
   if (typeof tooltipText !== 'string') {
     const newTooltipText = React.cloneElement(tooltipText, {
-      className: " bg-secondary text-wrap p-1 "
+      className: " bg-secondary text-wrap p-1 px-2 "
     })
     tooltipText = newTooltipText
   }
@@ -19,12 +18,13 @@ export function CustomTooltip({ children, placement, tooltipId, tooltipClasses,
         placement={placement}
         overlay={
           <Popover id={`popover-positioned-${placement}`}>
-            <Popover.Content id={!tooltipId ? `${tooltipText}Tooltip` : tooltipId} style={{minWidth: "fit-content"}} className={"text-wrap p-1 bg-secondary w-100" + tooltipClasses}>
-              {typeof tooltipText === 'string' ? (<span className={"text-wrap p-1 bg-secondary " + {tooltipTextClasses}}>{tooltipText}</span>) : (tooltipText)}
+            <Popover.Content id={!tooltipId ? `${tooltipText}Tooltip` : tooltipId} style={{minWidth: "fit-content"}} className={"text-wrap p-1 px-2 bg-secondary w-100" + tooltipClasses}>
+              {typeof tooltipText === 'string' ? (<span className={"text-wrap p-1 px-2 bg-secondary " + {tooltipTextClasses}}>{tooltipText}</span>) : (tooltipText)}
             </Popover.Content>
           </Popover>
         }
         delay={delay}
+        show={true}
       >
         {children}
       </OverlayTrigger>
diff --git a/libs/remix-ui/home-tab/src/lib/components/pluginButton.tsx b/libs/remix-ui/home-tab/src/lib/components/pluginButton.tsx
index 1b6bb08092..426c84bf2f 100644
--- a/libs/remix-ui/home-tab/src/lib/components/pluginButton.tsx
+++ b/libs/remix-ui/home-tab/src/lib/components/pluginButton.tsx
@@ -32,7 +32,7 @@ function PluginButton ({ imgPath, envID, envText, callback, l2, description, rem
       { remixMaintained &&
         <CustomTooltip
           placement="bottom"
-          tooltipId="overlay-tooltip-run-script"
+          tooltipId="overlay-tooltip-by-remix"
           tooltipText={'Maintained by Remix'}
         >
           <i className="bg-light text-success mx-1 px-1 mb-0 mx-2 position-absolute remixui_home_maintainedLabel fas fa-check"></i>
diff --git a/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx b/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx
index 66330349b0..bb02249b82 100644
--- a/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx
+++ b/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx
@@ -87,7 +87,7 @@ export const ModalDialog = (props: ModalDialogProps) => {
             </h6>
             {!props.showCancelIcon &&
               <span className="modal-close" onClick={() => handleHide()}>
-                <i title="Close" className="fas fa-times" aria-hidden="true"></i>
+                <i className="fas fa-times" aria-hidden="true"></i>
               </span>
             }
           </div>
diff --git a/libs/remix-ui/panel/src/lib/plugins/panel-header.tsx b/libs/remix-ui/panel/src/lib/plugins/panel-header.tsx
index ece0798719..066d664f27 100644
--- a/libs/remix-ui/panel/src/lib/plugins/panel-header.tsx
+++ b/libs/remix-ui/panel/src/lib/plugins/panel-header.tsx
@@ -72,7 +72,14 @@ const RemixUIPanelHeader = (props: RemixPanelProps) => {
         {plugin?.profile?.documentation && <span className="d-flex flex-row align-items-center">
           <label className="mb-0 pr-2"><FormattedMessage id='panel.documentation' />:</label>
           <span>
-            <a href={plugin?.profile?.documentation} className="titleInfo p-0 mb-2" title="link to documentation" target="_blank" rel="noreferrer"><i aria-hidden="true" className="fas fa-book"></i></a>
+            <CustomTooltip
+              placement="right-end"
+              tooltipId="linkToDocsTooltip"
+              tooltipClasses=" text-nowrap "
+              tooltipText="Link to documentation"
+            >
+              <a href={plugin?.profile?.documentation} className="titleInfo p-0 mb-2" target="_blank" rel="noreferrer"><i aria-hidden="true" className="fas fa-book"></i></a>
+            </CustomTooltip>
           </span>
         </span>}
         {plugin?.profile?.description && <span className="d-flex flex-row align-items-baseline">
diff --git a/libs/remix-ui/plugin-manager/src/lib/components/ActivePluginCard.tsx b/libs/remix-ui/plugin-manager/src/lib/components/ActivePluginCard.tsx
index 47e35a55db..b5c31302c2 100644
--- a/libs/remix-ui/plugin-manager/src/lib/components/ActivePluginCard.tsx
+++ b/libs/remix-ui/plugin-manager/src/lib/components/ActivePluginCard.tsx
@@ -1,6 +1,7 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-use-before-define
 import React from 'react'
 import '../remix-ui-plugin-manager.css'
+import { CustomTooltip } from '@remix-ui/helper'
 interface PluginCardProps {
   profile: any
   buttonText: string
@@ -14,35 +15,72 @@ function ActivePluginCard ({
 }: PluginCardProps) {
   return (
     <div className="list-group list-group-flush plugins-list-group" data-id="pluginManagerComponentActiveTile">
-      <article className="list-group-item py-1 mb-1 plugins-list-group-item" title={profile.displayName || profile.name}>
+      <article className="list-group-item py-1 mb-1 plugins-list-group-item">
         <div className="remixui_row justify-content-between align-items-center mb-2">
           <h6 className="remixui_displayName plugin-name">
             <div>
               { profile.displayName || profile.name }
               { profile?.maintainedBy?.toLowerCase() == "remix" &&
-                <i aria-hidden="true" className="px-1 text-success fas fa-check" title="Maintained by Remix"></i>
+                <CustomTooltip
+                  placement="right-end"
+                  tooltipId="pluginManagerActiveTitleByRemix"
+                  tooltipClasses="text-nowrap"
+                  tooltipText="Maintained by Remix"
+                >
+                  <i aria-hidden="true" className="px-1 text-success fas fa-check"></i>
+                </CustomTooltip>
               }
               { profile.documentation &&
-                <a href={profile.documentation} className="px-1" title="link to documentation" target="_blank" rel="noreferrer">
-                  <i aria-hidden="true" className="fas fa-book"/>
-                </a>
+                <CustomTooltip
+                  placement="right-end"
+                  tooltipId="pluginManagerActiveLinkToDoc"
+                  tooltipClasses="text-nowrap"
+                  tooltipText="Link to documentation"
+                >
+                  <a href={profile.documentation} className="px-1" target="_blank" rel="noreferrer">
+                    <i aria-hidden="true" className="fas fa-book"/>
+                  </a>
+                </CustomTooltip>
               }
               { profile.version && profile.version.match(/\b(\w*alpha\w*)\b/g)
-                ? <small title="Version Alpha" className="remixui_versionWarning plugin-version">alpha</small>
+                ? <CustomTooltip
+                  placement="right-end"
+                  tooltipId="pluginManagerActiveVersionAlpha"
+                  tooltipClasses="text-nowrap"
+                  tooltipText="Version Alpha"
+                >
+                  <small className="remixui_versionWarning plugin-version">alpha</small>
+                </CustomTooltip>
                 : profile.version && profile.version.match(/\b(\w*beta\w*)\b/g)
-                  ? <small title="Version Beta" className="remixui_versionWarning plugin-version">beta</small>
+                  ? <CustomTooltip
+                    placement="right-end"
+                    tooltipId="pluginManagerActiveVersionBeta"
+                    tooltipClasses="text-nowrap"
+                    tooltipText="Version Beta"
+                  >
+                    <small className="remixui_versionWarning plugin-version">beta</small>
+                  </CustomTooltip>
                   : null
               }
             </div>
-            {<button
-              onClick={() => {
-                deactivatePlugin(profile.name)
-              } }
-              className="btn btn-secondary btn-sm"
-              data-id={`pluginManagerComponentDeactivateButton${profile.name}`}
-            >
-              {buttonText}
-            </button>}
+            {
+              <CustomTooltip
+                placement="right-end"
+                tooltipId={`pluginManagerInactiveActiveBtn${profile.name}`}
+                tooltipClasses="text-nowrap"
+                tooltipText={`Dectivate ${profile.displayName || profile.name}`}
+              >
+                <button
+                  onClick={() => {
+                    deactivatePlugin(profile.name)
+                  } }
+                  className="btn btn-secondary btn-sm"
+                  data-id={`pluginManagerComponentDeactivateButton${profile.name}`}
+                >
+                  {buttonText}
+                </button>
+              </CustomTooltip>
+            }
           </h6>
         </div>
         <div className="remixui_description d-flex text-body plugin-text mb-2">
diff --git a/libs/remix-ui/plugin-manager/src/lib/components/InactivePluginCard.tsx b/libs/remix-ui/plugin-manager/src/lib/components/InactivePluginCard.tsx
index 35272cb5d3..35cd056697 100644
--- a/libs/remix-ui/plugin-manager/src/lib/components/InactivePluginCard.tsx
+++ b/libs/remix-ui/plugin-manager/src/lib/components/InactivePluginCard.tsx
@@ -2,6 +2,7 @@ import { Profile } from '@remixproject/plugin-utils'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-use-before-define
 import React from 'react'
 import '../remix-ui-plugin-manager.css'
+import { CustomTooltip } from '@remix-ui/helper'
 interface PluginCardProps {
   profile: Profile & {
     icon?: string
@@ -17,36 +18,71 @@ function InactivePluginCard ({
 }: PluginCardProps) {
   return (
     <div className="list-group list-group-flush plugins-list-group" data-id="pluginManagerComponentActiveTile">
-      <article className="list-group-item py-1 mb-1 plugins-list-group-item" title={profile.displayName || profile.name}>
+      <article className="list-group-item py-1 mb-1 plugins-list-group-item">
         <div className="remixui_row justify-content-between align-items-center mb-2">
           <h6 className="remixui_displayName plugin-name">
             <div>
               { profile.displayName || profile.name }
               { profile?.maintainedBy?.toLowerCase() == "remix" &&
-                <i aria-hidden="true" className="px-1 text-success fas fa-check" title="Verified by Remix"></i>
+                <CustomTooltip
+                  placement="right-end"
+                  tooltipId="pluginManagerInactiveTitleByRemix"
+                  tooltipClasses="text-nowrap"
+                  tooltipText="Maintained by Remix"
+                >
+                  <i aria-hidden="true" className="px-1 text-success fas fa-check"></i>
+                </CustomTooltip>
               }
               { profile.documentation &&
-                <a href={profile.documentation} className="px-1" title="link to documentation" target="_blank" rel="noreferrer">
-                  <i aria-hidden="true" className="fas fa-book"/>
-                </a>
+                <CustomTooltip
+                  placement="right-end"
+                  tooltipId="pluginManagerInactiveTitleLinkToDoc"
+                  tooltipClasses="text-nowrap"
+                  tooltipText="Link to documentation"
+                >
+                  <a href={profile.documentation} className="px-1" target="_blank" rel="noreferrer">
+                    <i aria-hidden="true" className="fas fa-book"/>
+                  </a>
+                </CustomTooltip>
               }
               { profile.version && profile.version.match(/\b(\w*alpha\w*)\b/g)
-                ? <small title="Version Alpha" className="remixui_versionWarning plugin-version">alpha</small>
+                ? <CustomTooltip
+                  placement="right-end"
+                  tooltipId="pluginManagerActiveVersionAlpha"
+                  tooltipClasses="text-nowrap"
+                  tooltipText="Version Alpha"
+                >
+                  <small className="remixui_versionWarning plugin-version">alpha</small>
+                </CustomTooltip>
                 : profile.version && profile.version.match(/\b(\w*beta\w*)\b/g)
-                  ? <small title="Version Beta" className="remixui_versionWarning plugin-version">beta</small>
+                  ? <CustomTooltip
+                    placement="right-end"
+                    tooltipId="pluginManagerActiveVersionBeta"
+                    tooltipClasses="text-nowrap"
+                    tooltipText="Version Beta"
+                  >
+                    <small className="remixui_versionWarning plugin-version">beta</small>
+                  </CustomTooltip>
                   : null
               }
             </div>
             {
-              <button
-                onClick={() => {
-                  activatePlugin(profile.name)
-                }}
-                className="btn btn-success btn-sm"
-                data-id={`pluginManagerComponentActivateButton${profile.name}`}
+              <CustomTooltip
+                placement="right-end"
+                tooltipId={`pluginManagerInactiveActiveBtn${profile.name}`}
+                tooltipClasses="text-nowrap"
+                tooltipText={`Activate ${profile.displayName || profile.name}`}
               >
-                {buttonText}
-              </button>
+                <button
+                  onClick={() => {
+                    activatePlugin(profile.name)
+                  }}
+                  className="btn btn-success btn-sm"
+                  data-id={`pluginManagerComponentActivateButton${profile.name}`}
+                >
+                  {buttonText}
+                </button>
+              </CustomTooltip>
             }
           </h6>
         </div>
diff --git a/libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx b/libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx
index 6ce1ac3009..e7e7b43609 100644
--- a/libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx
@@ -43,12 +43,12 @@ export function RecorderUI (props: RecorderProps) {
             tooltipText={<FormattedMessage id='udapp.transactionsCountTooltip' />}
           >
           <div className="ml-2 badge badge-pill badge-primary text-center" data-title="The number of recorded transactions">{props.count}</div>
-        </CustomTooltip>
-        <CustomTooltip
-          placement={'right'}
-          tooltipClasses="text-wrap"
-          tooltipId="info-recorder"
-          tooltipText={<span><FormattedMessage id='udapp.infoRecorderTooltip' values={{ br: <br /> }} /></span>}
+          </CustomTooltip>
+          <CustomTooltip
+            placement={'right'}
+            tooltipClasses="text-wrap"
+            tooltipId="info-recorder"
+            tooltipText={<span><FormattedMessage id='udapp.infoRecorderTooltip' values={{ br: <br /> }} /></span>}
           >
           <i style={{ fontSize: 'medium' }} className={'ml-2 fal fa-info-circle align-self-center'} aria-hidden="true"></i>
         </CustomTooltip>
diff --git a/libs/remix-ui/settings/src/lib/remix-ui-settings.tsx b/libs/remix-ui/settings/src/lib/remix-ui-settings.tsx
index 90cd1682be..8ac7db82dc 100644
--- a/libs/remix-ui/settings/src/lib/remix-ui-settings.tsx
+++ b/libs/remix-ui/settings/src/lib/remix-ui-settings.tsx
@@ -150,32 +150,25 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
     const displayErrorsChecked = props.config.get('settings/display-errors') || false
     return (
       <div className="$border-top">
-        <CustomTooltip
-          tooltipText="Reset to Default settings"
-          tooltipId="resetDefaultTooltip"
-          tooltipClasses="text-nowrap"
-          placement="top-start"
-        >
-          <div className='d-flex justify-content-end pr-4'>
-            <button className="btn btn-sm btn-secondary ml-2" onClick={() => {
-              try {
-                if ((window as any).remixFileSystem.name === 'indexedDB') {
-                  props.config.clear()
-                  try {
-                    localStorage.clear() // remove the whole storage
-                  } catch (e) {
-                    console.log(e)
-                  }
-                } else {
-                  props.config.clear() // remove only the remix settings
+        <div className='d-flex justify-content-end pr-4'>
+          <button className="btn btn-sm btn-secondary ml-2" onClick={() => {
+            try {
+              if ((window as any).remixFileSystem.name === 'indexedDB') {
+                props.config.clear()
+                try {
+                  localStorage.clear() // remove the whole storage
+                } catch (e) {
+                  console.log(e)
                 }
-                refresh(resetState + 1)
-              } catch (e) {
-                console.log(e)
+              } else {
+                props.config.clear() // remove only the remix settings
               }
-            }}><FormattedMessage id='settings.reset' /></button>
-          </div>
-        </CustomTooltip>
+              refresh(resetState + 1)
+            } catch (e) {
+              console.log(e)
+            }
+          }}><FormattedMessage id='settings.reset' /></button>
+        </div>
         <div className="card-body pt-3 pb-2">
           <h6 className="card-title"><FormattedMessage id='settings.general' /></h6>
           <div className="mt-2 custom-control custom-checkbox mb-1">
diff --git a/libs/remix-ui/solidity-compiler/src/lib/api/compiler-api.ts b/libs/remix-ui/solidity-compiler/src/lib/api/compiler-api.ts
index 745c4ec8f0..e27cc7aa55 100644
--- a/libs/remix-ui/solidity-compiler/src/lib/api/compiler-api.ts
+++ b/libs/remix-ui/solidity-compiler/src/lib/api/compiler-api.ts
@@ -212,14 +212,14 @@ export const CompilerApiMixin = (Base) => class extends Base {
 
   listenToEvents () {
     this.on('editor', 'contentChanged', () => {
-      this.statusChanged({ key: 'edited', title: 'the content has changed, needs recompilation', type: 'info' })
+      this.statusChanged({ key: 'edited', title: 'The content has changed, needs recompilation', type: 'info' })
       if (this.onContentChanged) this.onContentChanged()
     })
 
     this.data.eventHandlers.onLoadingCompiler = (url) => {
       this.data.loading = true
       this.data.loadingUrl = url
-      this.statusChanged({ key: 'loading', title: 'loading compiler...', type: 'info' })
+      this.statusChanged({ key: 'loading', title: 'Loading compiler...', type: 'info' })
       this.emit('loadingCompiler', url)
     }
     this.compiler.event.register('loadingCompiler', this.data.eventHandlers.onLoadingCompiler)
@@ -232,7 +232,7 @@ export const CompilerApiMixin = (Base) => class extends Base {
     this.compiler.event.register('compilerLoaded', this.data.eventHandlers.onCompilerLoaded)
 
     this.data.eventHandlers.onStartingCompilation = () => {
-      this.statusChanged({ key: 'loading', title: 'compiling...', type: 'info' })
+      this.statusChanged({ key: 'loading', title: 'Compiling...', type: 'info' })
     }
 
     this.data.eventHandlers.onRemoveAnnotations = () => {
@@ -288,13 +288,13 @@ export const CompilerApiMixin = (Base) => class extends Base {
           const warningsCount = data.errors.length
           this.statusChanged({
             key: warningsCount,
-            title: `compilation successful with ${warningsCount} warning${warningsCount > 1 ? 's' : ''}`,
+            title: `Compilation successful with ${warningsCount} warning${warningsCount > 1 ? 's' : ''}`,
             type: 'warning'
           })
-        } else this.statusChanged({ key: 'succeed', title: 'compilation successful', type: 'success' })
+        } else this.statusChanged({ key: 'succeed', title: 'Compilation successful', type: 'success' })
       } else {
         const count = (data.errors ? data.errors.filter(error => error.severity === 'error').length : 0 + (data.error ? 1 : 0))
-        this.statusChanged({ key: count, title: `compilation failed with ${count} error${count > 1 ? 's' : ''}`, type: 'error' })
+        this.statusChanged({ key: count, title: `Compilation failed with ${count} error${count > 1 ? 's' : ''}`, type: 'error' })
       }
       // Store the contracts and Update contract Selection
       if (success) {
diff --git a/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx b/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
index 5ac1527627..c42bfa173b 100644
--- a/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
+++ b/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
@@ -991,20 +991,20 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
               placement="right"
               tooltipId="overlay-tooltip-compile-run-doc"
               tooltipText={<div className="text-left p-2">
-                  <div>Choose the script to execute right after compilation
-                    by adding the `dev-run-script` natspec tag, as in:</div>
-                  <pre>
-                    <code>
-                    /**<br />
-                      * @title ContractName<br />
-                      * @dev ContractDescription<br />
-                      * @custom:dev-run-script file_path<br />
-                      */<br />
-                      contract ContractName {'{}'}<br />
-                    </code>
-                  </pre>
-                  Click the i icon to learn more
-                </div>}
+                <div>Choose the script to execute right after compilation
+                  by adding the `dev-run-script` natspec tag, as in:</div>
+                <pre>
+                  <code>
+                  /**<br />
+                    * @title ContractName<br />
+                    * @dev ContractDescription<br />
+                    * @custom:dev-run-script file_path<br />
+                    */<br />
+                    contract ContractName {'{}'}<br />
+                  </code>
+                </pre>
+                Click the "i" icon to learn more
+              </div>}
             >
               <a href="https://remix-ide.readthedocs.io/en/latest/running_js_scripts.html#compile-a-contract-and-run-a-script-on-the-fly" target="_blank" ><i className="pl-2 ml-2 mt-3 mb-1 fas fa-info text-dark"></i></a>
             </CustomTooltip>
diff --git a/libs/remix-ui/tabs/src/lib/remix-ui-tabs.css b/libs/remix-ui/tabs/src/lib/remix-ui-tabs.css
index 6fd84e1a27..3b392f7312 100644
--- a/libs/remix-ui/tabs/src/lib/remix-ui-tabs.css
+++ b/libs/remix-ui/tabs/src/lib/remix-ui-tabs.css
@@ -1,58 +1,65 @@
 .remix-ui-tabs {
-    display: -webkit-box; 
-    max-height: 2.15rem;
+  display: -webkit-box;
+  max-height: 2.15rem;
+}
+.remix-ui-tabs_end {
+  height: 2.15rem;
+  background-image: linear-gradient(to right, var(--body-bg) , var(--secondary));
+  width: 3rem;
+  right: -10px;
+  filter: opacity(0.5);
 }
 .remix-ui-tabs li {
-    display: inline-block;
+  display: inline-block;
 }
 .title-tabs {
-    padding: inherit;
-    align-items: center;
-    padding-right: 8px;
-    padding-left: 2px;
-    cursor: default;
-    /*to make it unselectable*/
-    -webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none;   /* Chrome/Safari/Opera */
-    -khtml-user-select: none;    /* Konqueror */
-    -moz-user-select: none;      /* Firefox */
-    -ms-user-select: none;       /* Internet Explorer/Edge */
-    user-select: none;           /* Non-prefixed version, currently supported by any browser but < IE9 */
-    vertical-align: middle;
+  padding: inherit;
+  align-items: center;
+  padding-right: 8px;
+  padding-left: 2px;
+  cursor: default;
+  /*to make it unselectable*/
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none;   /* Chrome/Safari/Opera */
+  -khtml-user-select: none;    /* Konqueror */
+  -moz-user-select: none;      /* Firefox */
+  -ms-user-select: none;       /* Internet Explorer/Edge */
+  user-select: none;           /* Non-prefixed version, currently supported by any browser but < IE9 */
+  vertical-align: middle;
 }
 .tab:hover .close-tabs{
-    visibility: visible
+  visibility: visible
 }
 .active .close-tabs {
-    visibility: visible
+  visibility: visible
 }
 .close-tabs {
-    visibility: hidden;
-    font-size: medium;
+  visibility: hidden;
+  font-size: medium;
 }
 .iconImage {
-    width: 1rem;
-    height: 1rem;
-    align-self: start;
+  width: 1rem;
+  height: 1rem;
+  align-self: start;
 }
 .active {
-    border: 1px solid transparent;
-    border-top-left-radius: 2px;
-    border-top-right-radius: 2px;
+  border: 1px solid transparent;
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
 }
 .tab-scroll {
-    overflow-x: auto;
-    overflow-y: hidden;
-    white-space: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
 }
 
 /* Hide scrollbar for Chrome, Safari and Opera */
 .tab-scroll::-webkit-scrollbar {
-    display: none;
+  display: none;
 }
   
-  /* Hide scrollbar for IE, Edge and Firefox */
+/* Hide scrollbar for IE, Edge and Firefox */
 .tab-scroll {
-    -ms-overflow-style: none;  /* IE and Edge */
-    scrollbar-width: none;  /* Firefox */
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
 }
diff --git a/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx b/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx
index d20a9b488c..82951d059e 100644
--- a/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx
+++ b/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx
@@ -7,6 +7,7 @@ import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'
 import './remix-ui-tabs.css'
 const _paq = window._paq = window._paq || []
 
+
 /* eslint-disable-next-line */
 export interface TabsUIProps {
   tabs: Array<any>
@@ -89,14 +90,24 @@ export const TabsUI = (props: TabsUIProps) => {
     const invert = props.themeQuality === 'dark' ? 'invert(1)' : 'invert(0)'
 
     return (
-      <div ref={el => { tabsRef.current[index] = el }} className={classNameTab} data-id={index === currentIndexRef.current ? 'tab-active' : ''} title={tab.tooltip}>
-        {tab.icon ? (<img className="my-1 mr-1 iconImage" style={{ filter: invert }} src={tab.icon} />) : (<i className={classNameImg}></i>)}
-        <span className={`title-tabs ${getFileDecorationClasses(tab)}`}>{tab.title}</span>
-        {getFileDecorationIcons(tab)}
-        <span className="close-tabs" onClick={(event) => { props.onClose(index); event.stopPropagation() }}>
-          <i className="text-dark fas fa-times"></i>
-        </span>
-      </div>
+      <CustomTooltip
+        tooltipId="tabsActive"
+        tooltipText={tab.tooltip}
+        placement="bottom"
+      >
+        <div
+          ref={el => { tabsRef.current[index] = el }}
+          className={classNameTab}
+          data-id={index === currentIndexRef.current ? 'tab-active' : ''}
+        >
+          {tab.icon ? (<img className="my-1 mr-1 iconImage" style={{ filter: invert }} src={tab.icon} />) : (<i className={classNameImg}></i>)}
+          <span className={`title-tabs ${getFileDecorationClasses(tab)}`}>{tab.title}</span>
+          {getFileDecorationIcons(tab)}
+          <span className="close-tabs" onClick={(event) => { props.onClose(index); event.stopPropagation() }}>
+            <i className="text-dark fas fa-times"></i>
+          </span>
+        </div>
+      </CustomTooltip>
     )
   }
 
@@ -142,60 +153,80 @@ export const TabsUI = (props: TabsUIProps) => {
   }
 
   return (
-    <div className="remix-ui-tabs d-flex justify-content-between border-0 header nav-tabs" data-id="tabs-component">
-      <div className="d-flex flex-row" style={{ maxWidth: 'fit-content', width: '97%' }}>
-        <div className="d-flex flex-row justify-content-center align-items-center m-1 mt-1">
-          <button
-            data-id='play-editor'
-            className="btn text-success py-0"
-            disabled={!(tabsState.currentExt === 'js' || tabsState.currentExt === 'ts' || tabsState.currentExt === 'sol')}
-            onClick={async () => {
-              const path = active().substr(active().indexOf('/') + 1, active().length)
-              const content = await props.plugin.call('fileManager', "readFile", path)
-              if (tabsState.currentExt === 'js' || tabsState.currentExt === 'ts') {
-                await props.plugin.call('scriptRunner', 'execute', content, path)
-                _paq.push(['trackEvent', 'editor', 'clickRunFromEditor', tabsState.currentExt])
-              } else if (tabsState.currentExt === 'sol' || tabsState.currentExt === 'yul') {
-                await props.plugin.call('solidity', 'compile', path)
-                _paq.push(['trackEvent', 'editor', 'clickRunFromEditor', tabsState.currentExt])
-              }
-            }}
-          >
+    <div className='d-flex'>
+      <CustomTooltip
+        placement="bottom"
+        tooltipId="overlay-tooltip-all-tabs"
+        tooltipText="Scroll to see all tabs"
+      >
+        <div className='remix-ui-tabs_end position-relative position-fixed'></div>
+      </CustomTooltip>
+      <div className="remix-ui-tabs d-flex justify-content-between border-0 header nav-tabs" data-id="tabs-component">
+        <div className="d-flex flex-row" style={{ maxWidth: 'fit-content', width: '97%' }}>
+          <div className="d-flex flex-row justify-content-center align-items-center m-1 mt-1">
+            <button
+              data-id='play-editor'
+              className="btn text-success py-0"
+              disabled={!(tabsState.currentExt === 'js' || tabsState.currentExt === 'ts' || tabsState.currentExt === 'sol')}
+              onClick={async () => {
+                const path = active().substr(active().indexOf('/') + 1, active().length)
+                const content = await props.plugin.call('fileManager', "readFile", path)
+                if (tabsState.currentExt === 'js' || tabsState.currentExt === 'ts') {
+                  await props.plugin.call('scriptRunner', 'execute', content, path)
+                  _paq.push(['trackEvent', 'editor', 'clickRunFromEditor', tabsState.currentExt])
+                } else if (tabsState.currentExt === 'sol' || tabsState.currentExt === 'yul') {
+                  await props.plugin.call('solidity', 'compile', path)
+                  _paq.push(['trackEvent', 'editor', 'clickRunFromEditor', tabsState.currentExt])
+                }
+              }}
+            >
+              <CustomTooltip
+                placement="bottom"
+                tooltipId="overlay-tooltip-run-script"
+                tooltipText={<span>
+                    {(tabsState.currentExt === 'js' || tabsState.currentExt === 'ts') ? "Run script (CTRL + SHIFT + S)" :
+                      tabsState.currentExt === 'sol' || tabsState.currentExt === 'yul'? "Compile CTRL + S" : "Select .sol or .yul file to compile or a .ts or .js file and run it"}
+                  </span>}
+              >
+                <i className="fad fa-play"></i>
+              </CustomTooltip>
+            </button>
             <CustomTooltip
               placement="bottom"
-              tooltipId="overlay-tooltip-run-script"
-              tooltipText={<span>
-                  {(tabsState.currentExt === 'js' || tabsState.currentExt === 'ts') ? "Run script (CTRL + SHIFT + S)" :
-                    tabsState.currentExt === 'sol' || tabsState.currentExt === 'yul'? "Compile CTRL + S" : "Select .sol or .yul file to compile or a .ts or .js file and run it"}
-                </span>}
+              tooltipId="overlay-tooltip-zoom-out"
+              tooltipText="Zoom out"
             >
-              <i className="fad fa-play"></i>
+              <span data-id="tabProxyZoomOut" className="btn btn-sm px-2 fas fa-search-minus text-dark" onClick={() => props.onZoomOut()}></span>
             </CustomTooltip>
-          </button>
-          <span data-id="tabProxyZoomOut" className="btn btn-sm px-2 fas fa-search-minus text-dark" title="Zoom out" onClick={() => props.onZoomOut()}></span>
-          <span data-id="tabProxyZoomIn" className="btn btn-sm px-2 fas fa-search-plus text-dark" title="Zoom in" onClick={() => props.onZoomIn()}></span>
+            <CustomTooltip
+              placement="bottom"
+              tooltipId="overlay-tooltip-run-zoom-in"
+              tooltipText="Zoom in"
+            >
+              <span data-id="tabProxyZoomIn" className="btn btn-sm px-2 fas fa-search-plus text-dark" onClick={() => props.onZoomIn()}></span>
+            </CustomTooltip>
+          </div>
+          <Tabs
+            className="tab-scroll"
+            selectedIndex={tabsState.selectedIndex}
+            domRef={(domEl) => {
+              if (tabsElement.current) return
+              tabsElement.current = domEl
+              tabsElement.current.addEventListener('wheel', transformScroll)
+            }}
+            onSelect={(index) => {
+              props.onSelect(index)
+              currentIndexRef.current = index
+              dispatch({ type: 'SELECT_INDEX', payload: index, ext: getExt(props.tabs[currentIndexRef.current].name)})
+            }}
+          >
+            <TabList className="d-flex flex-row align-items-center">
+              {props.tabs.map((tab, i) => <Tab className="" key={tab.name}>{renderTab(tab, i)}</Tab>)}
+            </TabList>
+            {props.tabs.map((tab) => <TabPanel key={tab.name} ></TabPanel>)}
+          </Tabs>
         </div>
-        <Tabs
-          className="tab-scroll"
-          selectedIndex={tabsState.selectedIndex}
-          domRef={(domEl) => {
-            if (tabsElement.current) return
-            tabsElement.current = domEl
-            tabsElement.current.addEventListener('wheel', transformScroll)
-          }}
-          onSelect={(index) => {
-            props.onSelect(index)
-            currentIndexRef.current = index
-            dispatch({ type: 'SELECT_INDEX', payload: index, ext: getExt(props.tabs[currentIndexRef.current].name)})
-          }}
-        >
-          <TabList className="d-flex flex-row align-items-center">
-            {props.tabs.map((tab, i) => <Tab className="" key={tab.name}>{renderTab(tab, i)}</Tab>)}
-          </TabList>
-          {props.tabs.map((tab) => <TabPanel key={tab.name} ></TabPanel>)}
-        </Tabs>
       </div>
-      <i className="mt-2 mr-2 fas fa-arrows-alt-h" title="Scroll to see all tabs"></i>
     </div>
   )
 }
diff --git a/libs/remix-ui/vertical-icons-panel/src/lib/components/Badge.tsx b/libs/remix-ui/vertical-icons-panel/src/lib/components/Badge.tsx
index 83680f583e..eb488f00ac 100644
--- a/libs/remix-ui/vertical-icons-panel/src/lib/components/Badge.tsx
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/components/Badge.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { BadgeStatus } from './Icon'
-
+import { CustomTooltip } from '@remix-ui/helper'
+import { FormattedMessage } from 'react-intl'
 interface BadgeProps {
   badgeStatus?: BadgeStatus
 }
@@ -47,13 +48,20 @@ function Badge ({ badgeStatus }: BadgeProps) {
     <>
       {
         badgeStatus && checkStatusKeyValue(badgeStatus.key, badgeStatus.type) ? (
-          <i
-            title={badgeStatus.title}
-            className={resolveClasses(badgeStatus.key, badgeStatus.type!)}
-            aria-hidden="true"
+          <CustomTooltip
+            placement={'right'}
+            tooltipClasses="text-nowrap"
+            tooltipId="recordedTransactionsCounttooltip"
+            tooltipText={<FormattedMessage id='udapp.transactionsCountTooltip' />}
           >
-            {badgeStatus.text}
-          </i>
+            <i
+              title={badgeStatus.title}
+              className={resolveClasses(badgeStatus.key, badgeStatus.type!)}
+              aria-hidden="true"
+            >
+              {badgeStatus.text}
+            </i>
+          </CustomTooltip>
         ) : null
       }
     </>
diff --git a/libs/remix-ui/workspace/src/lib/css/remix-ui-workspace.css b/libs/remix-ui/workspace/src/lib/css/remix-ui-workspace.css
index 020c7807cc..7aaf1e5a81 100644
--- a/libs/remix-ui/workspace/src/lib/css/remix-ui-workspace.css
+++ b/libs/remix-ui/workspace/src/lib/css/remix-ui-workspace.css
@@ -71,14 +71,6 @@
     padding: .25rem;
   }
 
-  .remixui_menuicon .bs-popover-auto[x-placement^="bottom"] .popover-header::before, .bs-popover-bottom .popover-header::before {
-    border-bottom-color: var(--dark) !important
-  }
-
-  .remixui_menuicon .bs-popover-auto[x-placement^="bottom"] > .arrow::after, .bs-popover-bottom > .arrow::after {
-    border-bottom-color: var(--dark) !important
-  }
-
   .custom-dropdown-items {
     padding: 0.25rem 0.25rem;
     border-radius: .25rem;
@@ -107,10 +99,6 @@
     padding-bottom: 0.1rem;
   }
 
-  .remixui_menuwidth {
-    /* width: 8rem; */
-  }
-
   #workspacesMenuDropdown > div.custom-dropdown-items {
     min-width: 8rem;
   }