Merge pull request #4312 from ethereum/recorderfixes

typos and black theme bg color fix

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

@@ -5632,7 +5632,7 @@ a.close.disabled {
   vertical-align: text-top !important;
 }
 .bg-primary {
-  background-color: #28282D !important;
+  background-color: var(--primary) !important;
 }
 a.bg-primary:focus,
 a.bg-primary:hover,

apps/remix-ide/src/walkthroughService.js

@@ -19,7 +19,7 @@ export class WalkthroughService extends Plugin {
     introJs().setOptions({
       steps: [{
         title: 'Transactions Recorder',
-        intro: '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.Click to launch the Home tab that contains links, tips, and shortcuts..',
+        intro: '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. Click to launch the Home tab that contains links, tips, and shortcuts.',
         element: document.querySelector('#udappRecorderCard'),
         tooltipClass: 'bg-light text-dark',
         position: 'right',
@@ -28,7 +28,7 @@ export class WalkthroughService extends Plugin {
       {
         element: document.querySelector('#udappRecorderUseLatest'),
         title: 'Transactions Recorder',
-        intro: 'If set the recorder will run transactions using the latest compilation result.',
+        intro: 'If selected the recorder will run transactions using the latest compilation result.',
         tooltipClass: 'bg-light text-dark',
         position: 'right',
         highlightClass: 'bg-light border border-warning'
@@ -36,7 +36,7 @@ export class WalkthroughService extends Plugin {
       {
         element: document.querySelector('#udappRecorderSave'),
         title: 'Transactions Recorder',
-        intro: 'Once there is a one or a few transactions have been executed from Remix, click this button to save these transactions as a scenario file.',
+        intro: 'Once one or more transactions have been executed from Remix, click this button to save these transactions as a scenario file.',
         tooltipClass: 'bg-light text-dark',
         position: 'right',
         highlightClass: 'bg-light border border-warning'

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

@@ -35,9 +35,9 @@ export function RecorderUI(props: RecorderProps) {
 
   return (
     <div className="udapp_cardContainer py-1 list-group-item border-top border-bottom" id="udappRecorderCard">
-      <div className="udapp_recorderSection d-flex justify-content-between" onClick={toggleClass}>
+      <div className="udapp_recorderSection d-flex justify-content-between">
         <div className="d-flex justify-content-center align-items-center">
-          <label className="mt-1 udapp_recorderSectionLabel">
+          <label className="text-nowrap mt-1 udapp_recorderSectionLabel" onClick={toggleClass}>
             <FormattedMessage id="udapp.transactionsRecorded" />
           </label>
           <CustomTooltip
@@ -46,7 +46,7 @@ export function RecorderUI(props: RecorderProps) {
             tooltipId="recordedTransactionsCounttooltip"
             tooltipText={<FormattedMessage id="udapp.transactionsCountTooltip" />}
           >
-            <div className="ml-2 badge badge-pill badge-primary text-center" data-title="The number of recorded transactions">
+            <div className="pl-3 badge badge-pill badge-primary text-center" style={{cursor:"default"}} data-title="The number of recorded transactions">
               {props.count}
             </div>
           </CustomTooltip>
@@ -66,6 +66,7 @@ export function RecorderUI(props: RecorderProps) {
             </i>
           </CustomTooltip>
         </div>
+        <div className="w-100" onClick={toggleClass}></div>
         <div className="p-3">
           <span data-id="udappRecorderTitleExpander" onClick={toggleClass}>
             <i className={!toggleExpander ? 'fas fa-angle-right' : 'fas fa-angle-down'} aria-hidden="true"></i>