fix ui for solidity key bindings

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 {

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 {

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

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 {

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 {

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;
 }
 

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 {

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;
 }
 

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;
 }
 

libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx

@@ -623,19 +623,9 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
           }
           <OverlayTrigger overlay={
               <Tooltip id="overlay-tooltip">
-                <span>hit Ctr+s for compiling</span>
+                <div className="text-left">
-              </Tooltip>
+                <div>Ctr+s for compiling</div>
-            }>
+                <div>Ctrl+Shift+s for compiling and on the fly execution:</div>
-          <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}>
-            <span>
-              { <i ref={compileIcon} className="fas fa-sync remixui_iconbtn" aria-hidden="true"></i> }
-              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>
@@ -650,7 +640,12 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
                 </div>
               </Tooltip>
             }>
-          <span className="mt-2 text-dark">Ctrl+Shift+s for compiling and on the fly execution.</span>
+          <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}>
+            <span>
+              { <i ref={compileIcon} className="fas fa-sync remixui_iconbtn" aria-hidden="true"></i> }
+              Compile { typeof state.compiledFileName === 'string' ? extractNameFromKey(state.compiledFileName) || '<no file selected>' : '<no file selected>' }
+            </span>
+          </button>
           </OverlayTrigger>                   
         </header>
       </article>