mics improvements (mostly adding await & adjusting font sizes), adjus…

…t red/green colors on markets page
norwnd · Jan 5, 2025 · feb36e7 · feb36e7
1 parent 567cd28
commit feb36e7
Show file tree

Hide file tree

Showing 9 changed files with 83 additions and 85 deletions.
diff --git a/client/webserver/site/src/css/colors.scss b/client/webserver/site/src/css/colors.scss
@@ -52,10 +52,10 @@ body:not(.dark) {
 
   // market view
   --indicator-good: #179717;
-  --buy-color: #00a35e;
-  --sell-color: #c60000;
-  --market-buygreen-bg: #4a8263;
-  --market-sellred-bg: #8a3838;
+  --buy-color: #00703b;
+  --sell-color: #ad0e0e;
+  --market-buygreen-bg: #41aa70;
+  --market-sellred-bg: #db3232;
   --market-btn-color: #555;
   --market-btn-selected-color: black;
   --market-orderopt-bg: #fff1;
@@ -120,10 +120,10 @@ body.dark {
 
   // market view
   --indicator-good: #29bb77;
-  --buy-color: #00a35e;
-  --sell-color: #c60000;
-  --market-buygreen-bg: #4a8263;
-  --market-sellred-bg: #8a3838;
+  --buy-color: #00703b;
+  --sell-color: #ad0e0e;
+  --market-buygreen-bg: #41aa70;
+  --market-sellred-bg: #db3232;
   --market-btn-color: #aaa;
   --market-btn-selected-color: #eee;
   --market-orderopt-bg: #0001;

diff --git a/client/webserver/site/src/css/market.scss b/client/webserver/site/src/css/market.scss
@@ -85,7 +85,7 @@ div[data-handler=markets] {
     }
 
     button {
-      opacity: 0.85;
+      opacity: 0.90;
       padding: 5px 25px;
       border-radius: 6px;
       background-color: var(--section-bg);
@@ -228,14 +228,9 @@ div[data-handler=markets] {
         align-items: flex-start;
 
         & > span:first-child {
-          font-size: 12px;
           font-family: $demi-sans;
           color: grey;
-          margin-bottom: 2px;
-        }
-
-        & > span:nth-child(2) {
-          font-size: 14px;
+          margin-bottom: 4px;
         }
 
         &.full-span {

diff --git a/client/webserver/site/src/html/bodybuilder.tmpl b/client/webserver/site/src/html/bodybuilder.tmpl
@@ -41,7 +41,7 @@
     </div>
 
     <div class="d-flex flex-stretch-column ps-1 border-right">
-      <div data-tmpl="externalPrice" title="Price on external markets such as Binance" class="d-flex align-items-center border-bottom pe-2 fs18 text-warning">-</div>
+      <div data-tmpl="externalPrice" title="Price on external markets such as Binance" class="d-flex align-items-center border-bottom pe-2 fs17 text-warning">-</div>
       <div data-tmpl="bisonPrice" title="Price last trade executed at" class="d-flex align-items-center pe-2 fs18">-</div>
     </div>
 

diff --git a/client/webserver/site/src/html/markets.tmpl b/client/webserver/site/src/html/markets.tmpl
@@ -39,31 +39,31 @@
             <div id="orderBook" class="d-flex flex-stretch-column">
               {{- /* SELL ORDER LIST */ -}}
               <div class="hoveronly overflow-x-hidden flex-stretch-column ordertable-wrap reversible">
-                <table class="compact lh1 fs16">
+                <table class="compact lh1">
                   <tbody id="sellRows"></tbody>
                 </table>
               </div>
 
               <div id="obMidSection" class="d-flex align-items-center justify-content-center py-1 px-2">
-                <span id="obExternalPrice" title="Price on external markets such as Binance" class="text-warning fs16"></span>
+                <span id="obExternalPrice" title="Price on external markets such as Binance" class="text-warning fs17"></span>
               </div>
 
               {{- /* BUY ORDER LIST */ -}}
               <div class="hoveronly overflow-x-hidden flex-stretch-column ordertable-wrap">
-                <table class="compact buys lh1 fs16">
+                <table class="compact buys lh1">
                   <tbody id="buyRows">
                     {{- /* This row is used by the app as a template. */ -}}
                     <tr id="orderRowTmpl" class="d-flex justify-content-between px-2 w-100">
                       <td class="d-flex justify-content-start align-items-center text-nowrap pe-2">
-                        <span data-tmpl="rate" class="fs16">-</span>
-                        <span data-tmpl="rateDelta" class="fs12 ps-1">(-)</span>
+                        <span data-tmpl="rate" class="fs17">-</span>
+                        <span data-tmpl="rateDelta" class="fs14 ps-1">(-)</span>
                         <span class="ico-own-book-order fs8 ps-1 d-hide" data-tmpl="ownBookOrder"></span>
                         <span class="ico-check-buy fs10 ps-1 d-hide" data-tmpl="epochBuy"></span>
                         <span class="ico-check-sell fs10 ps-1 d-hide" data-tmpl="epochSell"></span>
                       </td>
                       <td class="d-flex justify-content-end align-items-center ps-2">
                         <small class="numorders lh1 border-rounded3 text-center" data-tmpl="numOrders">-</small>
-                        <div data-tmpl="qty" class="fs16 ms-2">-</div>
+                        <div data-tmpl="qty" class="fs17 ms-2">-</div>
                       </td>
                     </tr>
                   </tbody>
@@ -144,7 +144,7 @@
                     <div id="orderTotalPreviewBuyRight" class="d-flex align-items-center justify-content-start mx-2 fs18"></div>
                   </div>
                   <button id="submitBttnBuy" type="button" class="flex-center border pointer hoverbg border-rounded3 m-1 submit fs18 text-center buygreen-bg"></button> {{/* textContent set by script */}}
-                  <div class="m-1 fs16 pt-3 text-center d-hide text-danger text-break" id="orderErrBuy"></div>
+                  <div class="m-1 fs17 pt-3 text-center d-hide text-danger text-break" id="orderErrBuy"></div>
                 </form>
               </section>
               {{- /* SELL ORDER FORM */ -}}
@@ -193,7 +193,7 @@
                     <div id="orderTotalPreviewSellRight" class="d-flex align-items-center justify-content-start mx-2 fs18"></div>
                   </div>
                   <button id="submitBttnSell" type="button" class="flex-center border pointer hoverbg border-rounded3 m-1 submit fs18 text-center sellred-bg"></button> {{/* textContent set by script */}}
-                  <div class="m-1 fs16 pt-3 text-center d-hide text-danger text-break" id="orderErrSell"></div>
+                  <div class="m-1 fs17 pt-3 text-center d-hide text-danger text-break" id="orderErrSell"></div>
                 </form>
               </section>
             </section>
@@ -204,9 +204,9 @@
             <div id="orderScroller" class="flex-stretch-column">
               {{- /* TOKEN APPROVAL */ -}}
               <div class="fs15 pt-1 pb-3 text-center border-bottom d-hide" id="tokenApproval">
-                <span class="p-3 flex-center fs16 grey d-hide" id="approvalRequiredBuy">[[[approval_required_buy]]]</span>
-                <span class="p-3 flex-center fs16 grey d-hide" id="approvalRequiredSell">[[[approval_required_sell]]]</span>
-                <span class="p-3 flex-center fs16 grey d-hide" id="approvalRequiredBoth">[[[approval_required_both]]]</span>
+                <span class="p-3 flex-center fs17 grey d-hide" id="approvalRequiredBuy">[[[approval_required_buy]]]</span>
+                <span class="p-3 flex-center fs17 grey d-hide" id="approvalRequiredSell">[[[approval_required_sell]]]</span>
+                <span class="p-3 flex-center fs17 grey d-hide" id="approvalRequiredBoth">[[[approval_required_both]]]</span>
                 <button id="approveBaseBttn" type="button" class="go">[[[Approve]]] <span id="baseTokenAsset"></span></button>
                 <div id="approvalPendingBase" class="d-hide flex-center position-relative py-2">
                   <span class="px-1" id="approvalPendingBaseSymbol"></span> [[[approval_change_pending]]] <div class="px-2 ico-spinner spinner fs15"></div>
@@ -221,7 +221,7 @@
 
               {{- /* CREATE ACCOUNT TO TRADE */ -}}
               <div id="notRegistered" class="d-hide">
-                <div class="p-3 flex-center fs16 grey">[[[create_account_to_trade]]]</div>
+                <div class="p-3 flex-center fs17 grey">[[[create_account_to_trade]]]</div>
                 <div class="border-top border-bottom flex-center p-2">
                   <p class="text-center fs14 p-2 m-0">[[[need_to_register_msg]]]</p>
                   <button data-tmpl="registerBttn" type="button" class="text-nowrap">[[[Create Account]]]</button>
@@ -252,7 +252,7 @@
 
               {{- /* BOND REQUIRED TO TRADE */ -}}
               <div class="d-hide p-2 mt-2" id="bondRequired">
-                <div class="p-3 flex-center fs16 grey">[[[action_required_to_trade]]]</div>
+                <div class="p-3 flex-center fs17 grey">[[[action_required_to_trade]]]</div>
                 <div class="border-top border-bottom flex-center p-2">
                   <p class="text-center fs14 p-2 m-0">
                   [[[acct_tier_post_bond]]]
@@ -262,7 +262,7 @@
               </div>
 
               {{- /* WALLET RELATED ERRORS */ -}}
-              <div id="noWallet" class="p-3 border-bottom flex-center fs16 grey d-hide"></div>
+              <div id="noWallet" class="p-3 border-bottom flex-center fs17 grey d-hide"></div>
 
               {{- /* REPUTATION */ -}}
               <div id="reputationAndTradingTierBox">
@@ -331,12 +331,12 @@
               <div id="userOrderTmpl" class="user-order border-top border-bottom">
                 <div data-tmpl="header" class="user-order-header pointer">
                   <div data-tmpl="sideLight" class="side-indicator"></div>
-                  <span data-tmpl="side" class="fs14"></span>
-                  <span data-tmpl="qty" class="ms-1 fs15"></span>
-                  <span data-tmpl="baseSymbol" class="ms-1 grey fs15"></span>
-                  <span data-tmpl="rate" class="ms-1 fs15"></span>
+                  <span data-tmpl="side" class="fs16"></span>
+                  <span data-tmpl="qty" class="ms-1 fs16"></span>
+                  <span data-tmpl="baseSymbol" class="ms-1 grey fs16"></span>
+                  <span data-tmpl="rate" class="ms-1 fs16"></span>
                   <span class="flex-grow-1 d-flex align-items-center justify-content-end">
-                    <span data-tmpl="status" class="fs15"></span>
+                    <span data-tmpl="status" class="fs16"></span>
                   </span>
                   <!-- <span class="fs11 ico-open ms-2"></span> -->
                 </div>
@@ -345,35 +345,35 @@
                     <span data-tmpl="cancelBttn" class="ico-cross pointer hoverbg fs11 d-hide py-2 px-3 mx-1" data-tooltip="[[[cancel_order]]]"></span>
                     <a data-tmpl="link" class="ico-open pointer hoverbg fs13 plainlink py-2 px-3 ms-1" data-tooltip="[[[order details]]]"></a>
                   </div>
-                  <div class="user-order-datum">
+                  <div class="user-order-datum fs15">
                     <span>[[[Type]]]</span>
                     <span data-tmpl="type"></span>
                   </div>
-                  <div class="user-order-datum">
+                  <div class="user-order-datum fs15">
                     <span>[[[Side]]]</span>
                     <span data-tmpl="side"></span>
                   </div>
-                  <div class="user-order-datum">
+                  <div class="user-order-datum fs15">
                     <span>[[[Status]]]</span>
                     <span data-tmpl="status"></span>
                   </div>
-                  <div class="user-order-datum">
+                  <div class="user-order-datum fs15">
                     <span>[[[Age]]]</span>
                     <span data-tmpl="age"></span>
                   </div>
-                  <div class="user-order-datum">
+                  <div class="user-order-datum fs15">
                     <span>[[[Quantity]]]</span>
                     <span data-tmpl="qty"></span>
                   </div>
-                  <div class="user-order-datum">
+                  <div class="user-order-datum fs15">
                     <span>[[[Rate]]]</span>
                     <span data-tmpl="rate"></span>
                   </div>
-                  <div class="user-order-datum">
+                  <div class="user-order-datum fs15">
                     <span>[[[Filled]]]</span>
                     <span data-tmpl="filled"></span>
                   </div>
-                  <div class="user-order-datum">
+                  <div class="user-order-datum fs15">
                     <span>[[[Settled]]]</span>
                     <span data-tmpl="settled"></span>
                   </div>
@@ -412,9 +412,9 @@
                   </thead>
                   <tbody id="recentMatchesLiveList">
                     <tr id="recentMatchesTemplate">
-                      <td data-tmpl="price" class="text-start"></td>
-                      <td data-tmpl="qty" class="text-end"></td>
-                      <td data-tmpl="time" class="text-end"></td>
+                      <td data-tmpl="price" class="text-start fs17"></td>
+                      <td data-tmpl="qty" class="text-end fs17"></td>
+                      <td data-tmpl="time" class="text-end fs17"></td>
                     </tr>
                   </tbody>
                 </table>
@@ -500,16 +500,16 @@
         </div>
       </div>
 
-      <div class="fs16 p-3 text-center d-hide text-danger text-break" id="vErr"></div>{{- /* End Auth Section */ -}}
+      <div class="fs17 p-3 text-center d-hide text-danger text-break" id="vErr"></div>{{- /* End Auth Section */ -}}
 
-      <div id="disclaimer" class="disclaimer fs16 pt-3 mt-3 border-top">
+      <div id="disclaimer" class="disclaimer fs17 pt-3 mt-3 border-top">
         [[[order_disclaimer]]]
       </div>
-      <div id="disclaimerAck" class="d-flex align-items-center grey text-center pointer hoverbg fs16">
+      <div id="disclaimerAck" class="d-flex align-items-center grey text-center pointer hoverbg fs17">
         <span class="ico-check fs12 me-1"></span>
         <span>[[[acknowledge_and_hide]]]</span>
       </div>
-      <div id="showDisclaimer" class="d-flex align-items-center grey text-center pointer hoverbg fs16 d-hide">
+      <div id="showDisclaimer" class="d-flex align-items-center grey text-center pointer hoverbg fs17 d-hide">
         <span class="ico-plus fs8 me-1 mt-1"></span>
         <span>[[[show_disclaimer]]]</span>
       </div>

diff --git a/client/webserver/site/src/js/charts.ts b/client/webserver/site/src/js/charts.ts
@@ -85,10 +85,10 @@ const darkTheme: Theme = {
   value: '#9a9a9a',
   zoom: '#5b5b5b',
   zoomHover: '#aaa',
-  sellLine: '#c60000',
-  buyLine: '#00a35e',
-  sellFill: '#c60000',
-  buyFill: '#00a35e',
+  sellLine: '#db3232',
+  buyLine: '#41aa70',
+  sellFill: '#db3232',
+  buyFill: '#41aa70',
   crosshairs: '#888',
   legendFill: 'black',
   legendText: '#d5d5d5'
@@ -103,10 +103,10 @@ const lightTheme: Theme = {
   value: '#4d4d4d',
   zoom: '#777',
   zoomHover: '#333',
-  sellLine: '#c60000',
-  buyLine: '#00a35e',
-  sellFill: '#c60000',
-  buyFill: '#00a35e',
+  sellLine: '#db3232',
+  buyLine: '#41aa70',
+  sellFill: '#db3232',
+  buyFill: '#41aa70',
   crosshairs: '#595959',
   legendFill: '#e6e6e6',
   legendText: '#1b1b1b'

diff --git a/client/webserver/site/src/js/doc.ts b/client/webserver/site/src/js/doc.ts
@@ -716,7 +716,7 @@ export default class Doc {
     let count = 0
     const add = (n: number, s: string) => {
       if (n > 0 || count > 0) count++
-      if (n > 0) result += `${n} ${s} `
+      if (n > 0) result += `${n}${s} `
       return count >= 2
     }
     let y, mo, d, h, m, s
@@ -732,7 +732,7 @@ export default class Doc {
     if (add(m, 'm')) { return result }
     [s, seconds] = timeMod(seconds, 1000)
     add(s, 's')
-    return result || '0 s'
+    return result.trimEnd() || '0s'
   }
 
   // showFormError can be used to set and display error message on forms.

diff --git a/client/webserver/site/src/js/markets.ts b/client/webserver/site/src/js/markets.ts
@@ -67,7 +67,7 @@ const maxRecentlyActiveUserOrdersShown = 8
 const maxCompletedUserOrdersShown = 100
 
 // orderBookSideMaxCapacity defines how many orders in the book side will be displayed
-const orderBookSideMaxCapacity = 14
+const orderBookSideMaxCapacity = 13
 
 const buyBtnClass = 'buygreen-bg'
 const sellBtnClass = 'sellred-bg'
@@ -908,8 +908,8 @@ export default class MarketsPage extends BasePage {
    */
   async showTokenApprovalForm (isBase: boolean) {
     const assetID = isBase ? this.market.base.id : this.market.quote.id
-    this.approveTokenForm.setAsset(assetID, this.market.dex.host)
-    this.forms.show(this.page.approveTokenForm)
+    await this.approveTokenForm.setAsset(assetID, this.market.dex.host)
+    await this.forms.show(this.page.approveTokenForm)
   }
 
   /*
@@ -3257,8 +3257,8 @@ export default class MarketsPage extends BasePage {
     if (!bookSide || !bookSide.length) return
 
     let orderBins = this.binOrdersByRateAndEpoch(bookSide)
-    // trim order bins list to fit only 14 of them on the screen per book-side (otherwise
-    // we'd need to scroll the UI which is undesirable)
+    // trim order bins list to avoid exceeding predefined limit per book-side so that all the orders
+    // fit on the screen (otherwise we'd need to scroll book-side in UI which is undesirable)
     orderBins = orderBins.slice(0, orderBookSideMaxCapacity)
     orderBins.forEach(bin => {
       const tableRow = this.newOrderTableRow(bin)

diff --git a/client/webserver/site/src/js/order.ts b/client/webserver/site/src/js/order.ts
@@ -283,10 +283,13 @@ export default class OrderPage extends BasePage {
     if (!m.refund) {
       // Special messaging for pending refunds.
       let lockTime = lockTimeMakerMs
-      if (m.side === OrderUtil.Taker) lockTime = lockTimeTakerMs
+      if (m.side === OrderUtil.Taker) {
+        lockTime = lockTimeTakerMs
+      }
       const refundAfter = new Date(m.stamp + lockTime)
-      if (Date.now() > refundAfter.getTime()) tmpl.refundPending.textContent = intl.prep(intl.ID_REFUND_IMMINENT)
-      else {
+      if (Date.now() > refundAfter.getTime()) {
+        tmpl.refundPending.textContent = intl.prep(intl.ID_REFUND_IMMINENT)
+      } else {
         const refundAfterStr = refundAfter.toLocaleTimeString(Doc.languages(), {
           year: 'numeric',
           month: 'short',