Merge pull request #3519 from ethereum/ctc

UI fixes in UDAPP

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

@@ -103,24 +103,21 @@ 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>
+        <FormattedMessage id='udapp.enterAMessageToSign' />
         <textarea
           id="prompt_text"
-            className='bg-light'
+          className='bg-light text-light'
           data-id="signMessageTextarea"
           style={{ width: '100%' }}
           rows={4}
@@ -129,16 +126,15 @@ export function AccountUI (props: AccountProps) {
           defaultValue={messageRef.current}
         ></textarea>
       </div>
-      </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>
     )
@@ -160,7 +156,7 @@ export function AccountUI (props: AccountProps) {
         </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) }}>
+        <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>)
         }

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