Merge pull request #5798 from ethereum/uiSR

script runner ui fixes and not only ui

Author: Aniket-Engg

apps/remix-ide/src/app/tabs/script-runner-ui.tsx

@@ -36,7 +36,7 @@ export class ScriptRunnerUIPlugin extends ViewPlugin {
 
   render() {
     return (
-      <div id="scriptrunnerTab">
+      <div className="bg-light" id="scriptrunnerTab">
         <PluginViewWrapper plugin={this} />
       </div>
     )

apps/remix-ide/src/remixAppManager.js

@@ -424,7 +424,8 @@ class PluginLoader {
       'dapp-draft',
       'solidityumlgen',
       'remixGuide',
-      'doc-viewer'
+      'doc-viewer',
+      'UIScriptRunner'
     ]
     this.loaders = {}
     this.loaders.localStorage = {

libs/remix-ui/scriptrunner/src/lib/components/config-section.tsx

@@ -81,27 +81,26 @@ export default function ConfigSection(props: ConfigSectionProps) {
   }
 
   return (
-    <section className="mb-4">
+    <section className="mb-2">
       <section className="d-flex flex-row ">
         <SectionHeader />
-        <div className="d-flex flex-row ml-3">
-          {props.config.isLoading && <div className="d-flex flex-row pb-1 align-items-center justify-content-center">
-            <span>Loading config</span><i className="fas fa-spinner fa-spin ml-1"></i>
-          </div>}
-        </div>
         <>
           {!props.config.isLoading && !props.config.errorStatus && !props.config.error &&
           <div onClick={() => props.loadScriptRunner(props.config)} className="pointer px-2 pb-1">
             { props.activeConfig && props.activeConfig.name === props.config.name &&
               <div className={`${!isVisible ? 'd-flex flex-row align-items-center justify-content-center pt-1' : 'd-flex flex-row pb-1 align-items-center justify-content-center'}`}>
-                {isVisible && <span onAnimationEnd={handleAnimationEnd} className="text-success" style={{ animation: 'fadeOut 5s forwards', animationFillMode: 'forwards' }}>Config loaded</span>}
-                <FontAwesomeIcon data-id={`sr-loaded-${props.config.title}`} className="text-success ml-3" icon={faCheck}></FontAwesomeIcon>
+                <FontAwesomeIcon data-id={`sr-loaded-${props.config.name}`} className="text-success ml-3" icon={faCheck}></FontAwesomeIcon>
+                {isVisible && <span onAnimationEnd={handleAnimationEnd} className="text-success px-3" style={{ animation: 'fadeOut 5s forwards', animationFillMode: 'forwards' }}>Config loaded</span>}
               </div>
             }
           </div>
           }
-          <div className="w-25"></div>
         </>
+        <div className="d-flex flex-row mx-4">
+          {props.config.isLoading && <div className="d-flex flex-row pb-1 align-items-center justify-content-center">
+            <i className="fas fa-spinner fa-spin"></i><span className='pl-3'>Loading config</span>
+          </div>}
+        </div>
       </section>
       <section id="errorSection">
         {props.config.errorStatus && props.config.error && <div className="text-danger">
@@ -122,16 +121,15 @@ export default function ConfigSection(props: ConfigSectionProps) {
             </div>
         }
       </section>
-      <section className="d-flex flex-column" style={{ width: '100%' }} >
-        <div className="mt-4 bg-light p-3 ">
+      <section className="d-flex flex-column w-100">
+        <div className="mt-2 mb-4 bg-dark p-3 ">
           <p className="text-dark text-monospace">{props.config.description}</p>
           <p className="text-dark">Dependencies</p>
           <ul className="list-unstyled ">
             <Dependencies />
           </ul>
         </div>
       </section>
-
     </section>
   )
 }

libs/remix-ui/scriptrunner/src/lib/script-runner-ui.tsx

@@ -39,7 +39,7 @@ export const ScriptRunnerUI = (props: ScriptRunnerUIProps) => {
         <div className="text-uppercase mb-3 text-dark h2" style={{ fontSize: 'x-large' }}>script configuration</div>
         <div className="text-uppercase text-dark h3" style={{ fontSize: 'large' }}>choose a specific configuration for your script</div>
       </div>
-      <div className="mt-5 d-flex flex-column gap-3 mb-4">
+      <div className="mt-3 d-flex flex-column gap-3 mb-4">
         {configurations.filter((config) => config.publish).map((config: ProjectConfiguration, index) => (
           <ConfigSection
             activeKey={activeKey}

libs/remix-ui/statusbar/src/lib/components/scamDetails.tsx

@@ -28,7 +28,7 @@ export default function ScamDetails ({ refs, floatStyle, scamAlerts }: ScamDetai
         willChange: 'transform',
         boxShadow: "0 1px 7px var(--secondary)"
       } }
-      className="p-1 pb-0 mb-0 d-flex alert alert-warning border border-warning"
+      className="py-2 px-4 pb-0 mb-0 d-flex alert alert-warning border border-warning"
     >
       <span className="align-self-center pl-2 mt-1">
         <i style={{ fontSize: 'xxx-large', fontWeight: 'lighter' }} className="pr-2 far fa-exclamation-triangle"></i>