Merge pull request #3519 from ethereum/ctc

UI fixes in UDAPP

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

@@ -103,42 +103,38 @@ export function AccountUI (props: AccountProps) {
 
   const passphraseCreationPrompt = () => {
     return (
-      <div> Please provide a Passphrase for the account creation
-        <div>
-          <input id="prompt1" type="password" name='prompt_text' style={{ width: '100%' }} onInput={handlePassphrase} />
-          <br />
-          <br />
-          <input id="prompt2" type="password" name='prompt_text' style={{ width: '100%' }} onInput={handleMatchPassphrase} />
-        </div>
+      <div className='d-flex flex-column'>
+        Please provide a Passphrase for the account creation
+        <input id="prompt1" type="password" name='prompt_text' className='w-100 py-2' onInput={handlePassphrase} />
+        <input id="prompt2" type="password" name='prompt_text' className='w-100' onInput={handleMatchPassphrase} />
       </div>
     )
   }
 
   const signMessagePrompt = () => {
     return (
-      <div> <FormattedMessage id='udapp.enterAMessageToSign' />
-        <div>
-          <textarea
-            id="prompt_text"
-            className='bg-light'
-            data-id="signMessageTextarea"
-            style={{ width: '100%' }}
-            rows={4}
-            cols={50}
-            onInput={handleMessageInput}
-            defaultValue={messageRef.current}
-          ></textarea>
-        </div>
+      <div>
+        <FormattedMessage id='udapp.enterAMessageToSign' />
+        <textarea
+          id="prompt_text"
+          className='bg-light text-light'
+          data-id="signMessageTextarea"
+          style={{ width: '100%' }}
+          rows={4}
+          cols={50}
+          onInput={handleMessageInput}
+          defaultValue={messageRef.current}
+        ></textarea>
       </div>
     )
   }
 
   const signedMessagePrompt = (msgHash: string, signedData: string) => {
     return (
-      <div>
-        <b><FormattedMessage id='udapp.hash' />:</b><br />
+      <div className="d-flex flex-column">
+        <label className='text-uppercase'><FormattedMessage id='udapp.hash' /></label>
         <span id="remixRunSignMsgHash" data-id="settingsRemixRunSignMsgHash">{msgHash}</span>
-        <br /><b><FormattedMessage id='udapp.signature' />:</b><br />
+        <label className='pt-2 text-uppercase'><FormattedMessage id='udapp.signature' /></label>
         <span id="remixRunSignMsgSignature" data-id="settingsRemixRunSignMsgSignature">{signedData}</span>
       </div>
     )
@@ -154,16 +150,16 @@ export function AccountUI (props: AccountProps) {
           tooltipId="remixPlusWrapperTooltip"
           tooltipText={plusOpt.title}
         >
-            <span id="remixRunPlusWraper">
-              <i id="remixRunPlus" className={`fas fa-plus-circle udapp_icon ${plusOpt.classList}`} aria-hidden="true" onClick={newAccount}></i>
-            </span>
+          <span id="remixRunPlusWraper">
+            <i id="remixRunPlus" className={`fas fa-plus-circle udapp_icon ${plusOpt.classList}`} aria-hidden="true" onClick={newAccount}></i>
+          </span>
         </CustomTooltip>
       </label>
       <div className="udapp_account">
-        <select id="txorigin" data-id="runTabSelectAccount" name="txorigin" className="form-control udapp_select custom-select pr-4" value={selectedAccount} onChange={(e) => { props.setAccount(e.target.value) }}>
-          {
-            accounts.map((value, index) => <option value={value} key={index}>{ loadedAccounts[value] }</option>)
-          }
+        <select id="txorigin" data-id="runTabSelectAccount" name="txorigin" className="form-control udapp_select custom-select pr-4" value={selectedAccount||""} onChange={(e) => { props.setAccount(e.target.value) }}>
+        {
+          accounts.map((value, index) => <option value={value} key={index}>{ loadedAccounts[value] }</option>)
+        }
         </select>
         <div style={{ marginLeft: -5 }}><CopyToClipboard tip='Copy account to clipboard' content={selectedAccount} direction='top' /></div>
         <CustomTooltip

libs/remix-ui/run-tab/src/lib/css/run-tab.css

@@ -170,7 +170,6 @@
 }
 .udapp_icon:hover {
   font-size: 12px;
-  color: var(--warning);
 }
 .udapp_errorIcon {
   color: var(--warning);