From 9f7a9bb3f83abf80153b571583b1036c7b10f3b8 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Tue, 5 Apr 2022 18:25:37 +0200
Subject: [PATCH] fix ui for solidity key bindings

---
 .../css/themes/bootstrap-cerulean.min.css     |  3 +-
 .../css/themes/bootstrap-cyborg.min.css       |  3 +-
 .../css/themes/bootstrap-flatly.min.css       |  2 +-
 .../css/themes/bootstrap-spacelab.min.css     |  3 +-
 .../assets/css/themes/remix-black_undtds.css  |  3 +-
 .../assets/css/themes/remix-candy_ikhg4m.css  |  3 +-
 .../assets/css/themes/remix-dark_tvx1s2.css   |  3 +-
 .../assets/css/themes/remix-light_powaqg.css  |  3 +-
 .../css/themes/remix-midcentury_hrzph3.css    |  3 +-
 .../src/lib/compiler-container.tsx            | 37 ++++++++-----------
 10 files changed, 25 insertions(+), 38 deletions(-)

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 574b674c31..e55dd84d72 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
@@ -5186,11 +5186,10 @@ a.close.disabled {
     border-left-color:#000
 }
 .tooltip-inner {
-    max-width:200px;
     padding:.25rem .5rem;
     color:#fff;
     text-align:center;
-    background-color:#000;
+    background-color:var(--text-background);
     border-radius:.25rem
 }
 .popover {
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 3fb3c90e77..4e72386890 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
@@ -5189,11 +5189,10 @@ a.close.disabled {
     border-left-color:#282828
 }
 .tooltip-inner {
-    max-width:200px;
     padding:.25rem .5rem;
     color:#fff;
     text-align:center;
-    background-color:#282828;
+    background-color:var(--text-background);
     border-radius:.25rem
 }
 .popover {
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 ae329ec04a..92e36ea836 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
@@ -4226,7 +4226,7 @@ a.close.disabled {
 	left:0;	border-width:.4rem 0 .4rem .4rem;	border-left-color:#000
 }
 .tooltip-inner {
-	max-width:200px;	padding:.25rem .5rem;	color:#fff;	text-align:center;	background-color:#000;	border-radius:.25rem
+	padding:.25rem .5rem;	color:#fff;	text-align:center;	background-color:var(--text-background);	border-radius:.25rem
 }
 .popover {
 	position:absolute;	top:0;	left:0;	z-index:1060;	display:block;	max-width:276px;	font-family:Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";	font-style:normal;	font-weight:400;	line-height:1.5;	text-align:left;	text-align:start;	text-decoration:none;	text-shadow:none;	text-transform:none;	letter-spacing:normal;	word-break:normal;	word-spacing:normal;	white-space:normal;	line-break:auto;	font-size:.825rem;	word-wrap:break-word;	background-color:#fff;	background-clip:padding-box;	border:1px solid rgba(0,0,0,.2);	border-radius:.3rem
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 f4ea0194cf..4e10e31966 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
@@ -5187,11 +5187,10 @@ a.close.disabled {
     border-left-color:#000
 }
 .tooltip-inner {
-    max-width:200px;
     padding:.25rem .5rem;
     color:#fff;
     text-align:center;
-    background-color:#000;
+    background-color:var(--text-background);
     border-radius:.25rem
 }
 .popover {
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 43b83dea2b..b22873959e 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
@@ -5240,11 +5240,10 @@ a.close.disabled {
   border-left-color: #000;
 }
 .tooltip-inner {
-  max-width: 200px;
   padding: 3px 8px;
   color: #d5d5d5;
   text-align: center;
-  background-color: #000;
+  background-color: var(--text-background);
   border-radius: 2px;
 }
 .popover {
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 2e388aa831..fa06290406 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
@@ -5701,11 +5701,10 @@ a.close.disabled {
 }
 
 .tooltip-inner {
-  max-width: 200px;
   padding: 0.25rem 0.5rem;
   color: #fff;
   text-align: center;
-  background-color: #000;
+  background-color:var(--text-background);
   border-radius: 0.25rem;
 }
 
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 740db3bd9d..44d9eb3872 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
@@ -5236,11 +5236,10 @@ a.close.disabled {
   border-left-color: #000;
 }
 .tooltip-inner {
-  max-width: 200px;
   padding: 3px 8px;
   color: #fff;
   text-align: center;
-  background-color: #000;
+  background-color:var(--text-background);
   border-radius: 2px;
 }
 .popover {
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 8a04976a20..a1a70635a9 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
@@ -5697,11 +5697,10 @@ a.close.disabled {
 }
 
 .tooltip-inner {
-  max-width: 200px;
   padding: 0.25rem 0.5rem;
   color: #fff;
   text-align: center;
-  background-color: #000;
+  background-color:var(--text-background);
   border-radius: 0.25rem;
 }
 
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 5feec8f606..eaf51d5bf3 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
@@ -5703,11 +5703,10 @@ a.close.disabled {
 }
 
 .tooltip-inner {
-  max-width: 200px;
   padding: 0.25rem 0.5rem;
   color: #eeede9;
   text-align: center;
-  background-color: #000;
+  background-color: var(--text-background);
   border-radius: 0.25rem;
 }
 
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 e88d772e53..3a55bf5d02 100644
--- a/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
+++ b/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
@@ -623,7 +623,21 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
           }
           <OverlayTrigger overlay={
               <Tooltip id="overlay-tooltip">
-                <span>hit Ctr+s for compiling</span>
+                <div className="text-left">
+                <div>Ctr+s for compiling</div>
+                <div>Ctrl+Shift+s for compiling and on the fly execution:</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>
+                </div>
               </Tooltip>
             }>
           <button id="compileBtn" data-id="compilerContainerCompileBtn" className="btn btn-primary d-block w-100 text-break remixui_disabled mb-1 mt-3" title="Compile" onClick={compile} disabled={disableCompileButton}>
@@ -632,26 +646,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
               Compile { typeof state.compiledFileName === 'string' ? extractNameFromKey(state.compiledFileName) || '<no file selected>' : '<no file selected>' }
             </span>
           </button>
-          </OverlayTrigger>
-          <OverlayTrigger overlay={
-              <Tooltip  id="overlay-tooltip-keybinding">
-                <div className="remixui_tooltipCode" >
-                <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>
-                </div>
-              </Tooltip>
-            }>
-          <span className="mt-2 text-dark">Ctrl+Shift+s for compiling and on the fly execution.</span>
-          </OverlayTrigger>          
+          </OverlayTrigger>                   
         </header>
       </article>
     </section>