fixing some color problems in Pride theme. Fixing the btns text on

deploy and run

apps/remix-ide/src/assets/css/themes/remix-pride.css

@@ -171,7 +171,7 @@ sup {
 }
 
 a {
-  color: #747b90 !important;
+  color: #2557eb !important;
   text-decoration: underline;
   background-color: transparent;
 }
@@ -2360,8 +2360,8 @@ fieldset:disabled a.btn {
 }
 .btn-primary:hover {
   color: #fff;
-  background-color: #005e80;
+  background-color: #ab6dcf;
-  border-color: #0480ad;
+  border-color: #a275d6;
 }
 .btn-primary:focus,
 .btn-primary.focus {
@@ -2378,7 +2378,7 @@ fieldset:disabled a.btn {
 .show > .btn-primary.dropdown-toggle {
   color: #fff;
   background-color: #dac5ff;
-  border-color: #004b66;
+  border-color: #40a2c5;
 }
 .btn-primary:not(:disabled):not(.disabled):active:focus,
 .btn-primary:not(:disabled):not(.disabled).active:focus,
@@ -2466,7 +2466,7 @@ fieldset:disabled a.btn {
 .btn-info:hover {
   color: #fff;
   background-color: #005e80;
-  border-color: #005573;
+  border-color: #3597bb;
 }
 .btn-info:focus,
 .btn-info.focus {
@@ -2482,7 +2482,7 @@ fieldset:disabled a.btn {
 .btn-info:not(:disabled):not(.disabled).active,
 .show > .btn-info.dropdown-toggle {
   color: #fff;
-  background-color: #005573;
+  background-color: #3597bb;
   border-color: #004b66;
 }
 .btn-info:not(:disabled):not(.disabled):active:focus,
@@ -2876,11 +2876,11 @@ fieldset:disabled a.btn {
 
 .btn-link {
   font-weight: 400;
-  color: #747b90;
+  color: #8644d1;
   text-decoration: underline;
 }
 .btn-link:hover {
-  color: #515766;
+  color: #738fd6;
   text-decoration: none;
 }
 .btn-link:focus,
@@ -4722,7 +4722,7 @@ a.badge:focus {
 a.badge-primary:hover,
 a.badge-primary:focus {
   color: #fff;
-  background-color: #005573;
+  background-color: #3597bb;
 }
 a.badge-primary:focus,
 a.badge-primary.focus {
@@ -4767,7 +4767,7 @@ a.badge-success.focus {
 a.badge-info:hover,
 a.badge-info:focus {
   color: #fff;
-  background-color: #005573;
+  background-color: #3597bb;
 }
 a.badge-info:focus,
 a.badge-info.focus {
@@ -6135,7 +6135,7 @@ a.bg-primary:hover,
 a.bg-primary:focus,
 button.bg-primary:hover,
 button.bg-primary:focus {
-  background-color: #005573 !important;
+  background-color: #3597bb !important;
 }
 
 .bg-secondary {
@@ -6168,7 +6168,7 @@ a.bg-info:hover,
 a.bg-info:focus,
 button.bg-info:hover,
 button.bg-info:focus {
-  background-color: #005573 !important;
+  background-color: #3597bb !important;
 }
 
 .bg-warning {

libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.css

@@ -19,7 +19,7 @@
 
 .stepButton:hover {
     color: #fff;
-    background-color: #005573;
+    background-color: var(--primary);
     border-color: #005573;
 }
 .jumpButtons {
@@ -33,7 +33,7 @@
 }
 
 .jumpButtonDisabled {
-    background-color: #005573;
+    background-color: var(--grey);
     border-color: #005573;
 }
 

libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx

@@ -53,13 +53,12 @@ export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward,
 
   const stepBtnStyle = 'd-flex align-items-center justify-content-center btn btn-primary btn-sm stepButton h-75 m-0 p-1'
   const disableStepBtnStyle = 'stepButtonDisabled'
-  const jumpBtnStyle = 'd-flex align-items-center justify-content-center btn btn-primary btn-sm jumpButton h-75 m-0 p-1'
   const disableJumpBtnStyle = 'jumpButtonDisabled'
   const stepMarkupStructure = {
     stepOverBackJSX : {
       markup: (<div className={state.overBackDisabled ? `${stepBtnStyle} ${disableStepBtnStyle}`: `${stepBtnStyle}`} onClick={() => { stepOverBack && stepOverBack() }}>
         <button id='overback' className='btn btn-link btn-sm stepButton m-0 p-0' onClick={() => { stepOverBack && stepOverBack() }} disabled={state.overBackDisabled} style={{ pointerEvents: 'none', color: 'white' }}>
-            <span className="fas fa-reply"></span>
+          <span className="fas fa-reply"></span>
         </button>
       </div>),
       placement: 'top-start',

libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx

@@ -370,13 +370,18 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
 
   const customJSX = (
     <span className="p-0 m-0">
-              <input className="custom-control-input" id="debugGeneratedSourcesInput" onChange={({ target: { checked } }) => {
+      <input className="custom-control-input" id="debugGeneratedSourcesInput" onChange={({ target: { checked } }) => {
-              setState(prevState => {
+        setState(prevState => {
-                return { ...prevState, opt: { ...prevState.opt, debugWithGeneratedSources: checked } }
+          return { ...prevState, opt: { ...prevState.opt, debugWithGeneratedSources: checked } }
-              })
+        })
-            }} type="checkbox" />
+      }} type="checkbox" />
-            <label data-id="debugGeneratedSourcesLabel" className="form-check-label custom-control-label" htmlFor="debugGeneratedSourcesInput"><FormattedMessage id='debugger.useGeneratedSources' /> (Solidity {'>='} v0.7.2)</label>
+      <label
-            </span>
+        data-id="debugGeneratedSourcesLabel"
+        className="form-check-label custom-control-label"
+        htmlFor="debugGeneratedSourcesInput">
+          <FormattedMessage id='debugger.useGeneratedSources' />(Solidity {'>='} v0.7.2)
+      </label>
+    </span>
   )
   return (
     <div>

libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx

@@ -288,7 +288,7 @@ export function ContractGUI (props: ContractGUIProps) {
             data-title={buttonOptions.title}
             disabled={(toggleUpgradeImp && !proxyAddress) || props.disabled}
           >
-            <div>{title}</div>
+            <div className='text-nowrap overflow-hidden text-truncate'>{title}</div>
           </button>
         </CustomTooltip>
         <input