webserver/site: use border color to show if address is valid or inval…

…id (#3040)

* webserver/site: use border color to show if address is valid or invalid
---------
Signed-off-by: Philemon Ukane <ukanephilemon@gmail.com>

client/webserver/site/src/css/forms.scss

@@ -22,6 +22,14 @@ textarea {
     outline: none;
   }
 
+  &.border-danger {
+    border-color: var(--text-danger);
+  }
+
+  &.border-success {
+    border-color: var(--indicator-good);
+  }
+
   &.thin {
     width: 4rem;
   }

client/webserver/site/src/html/wallets.tmpl

@@ -526,10 +526,7 @@
       </div>
       <div>
         <label for="sendAddr">[[[Address]]]</label>
-        <div class="d-flex">
-          <input type="text" class="col-1" id="sendAddr" spellcheck="false">
-          <span id="validAddr" class="ico-check mx-2 pt-2 d-hide"></span>
-        </div>
+          <input type="text" id="sendAddr" spellcheck="false">
       </div>
       <div class="d-flex align-items-stretch">
         <div class="flex-grow-1 pe-3">

client/webserver/site/src/js/wallets.ts

@@ -382,13 +382,12 @@ export default class WalletsPage extends BasePage {
     // Validate send address on input.
     Doc.bind(page.sendAddr, 'input', async () => {
       const asset = app().assets[this.selectedAssetID]
-      Doc.hide(page.validAddr)
-      page.sendAddr.classList.remove('is-invalid')
+      page.sendAddr.classList.remove('border-danger', 'border-success')
       const addr = page.sendAddr.value || ''
       if (!asset || addr === '') return
       const valid = await this.validateSendAddress(addr, asset.id)
-      if (valid) Doc.show(page.validAddr)
-      else page.sendAddr.classList.add('is-invalid')
+      if (valid) page.sendAddr.classList.add('border-success')
+      else page.sendAddr.classList.add('border-danger')
     })
 
     // A link on the wallet reconfiguration form to show/hide the password field.
@@ -2161,8 +2160,8 @@ export default class WalletsPage extends BasePage {
       Doc.show(page.toggleSubtract)
     }
 
-    Doc.hide(page.validAddr, page.sendErr, page.maxSendDisplay, page.sendTokenMsgBox)
-    page.sendAddr.classList.remove('invalid')
+    Doc.hide(page.sendErr, page.maxSendDisplay, page.sendTokenMsgBox)
+    page.sendAddr.classList.remove('border-danger', 'border-success')
     page.sendAddr.value = ''
     page.sendAmt.value = ''
     const xcRate = app().fiatRatesMap[assetID]