ui: introduce some variation in element background colors

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

@@ -6,8 +6,12 @@ $buycolor_dark: #29bb77;
 $sellcolor_dark: #e95e5e;
 $buycolor_light: #207a46;
 $sellcolor_light: #99302b;
-$light_body_bg: white;
+$light_body_bg: #fafafa;
 $dark_body_bg: #091a28;
+$light_form_bg: #fafafae4;
+$dark_form_bg: #091a28e4;
+$light_panel: #f0f0f0;
+$dark_panel: #122739;
 $light_border_color: #ddd;
 $dark_border_color: #383f4b;
 $light_input_border: #999;

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

@@ -24,13 +24,13 @@
         linear-gradient(
           to bottom,
           #e0e0e000,
-          $light_body_bg
+          $light_panel
           90%
         );
     }
 
     &:not(.nohover):hover {
-      background-color: #c7c7c7;
+      background-color: #7773;
 
       .fader {
         background-image:
@@ -162,7 +162,6 @@
       border-width: 1px;
       border-color: #555;
       opacity: 0.8;
-      background-color: $light_body_bg;
       position: relative;
       z-index: 150;
     }
@@ -175,6 +174,7 @@
       opacity: 1;
       top: 1px;
       cursor: default;
+      background-color: white;
     }
 
     .wtab:not(.selected) {
@@ -244,12 +244,12 @@ button.form-button {
   left: 0;
   right: 0;
   padding: 25px 0;
-  background-color: $light_body_bg;
-  z-index: 100;
+  background-color: $light_form_bg;
+  z-index: 101;
 
   & > form {
     box-sizing: content-box;
-    padding: 50px;
+    padding: 2rem;
     margin: auto;
     text-align: left;
     position: relative;
@@ -260,6 +260,14 @@ button.form-button {
   }
 }
 
+div[data-handler=init],
+div[data-handler=login],
+div[data-handler=register] {
+ #forms {
+  z-index: 99;
+ } 
+}
+
 #walletWait {
   max-width: 425px;
 

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

@@ -14,14 +14,12 @@ body.dark {
           linear-gradient(
             to bottom,
             #13202b00,
-            $dark_body_bg
+            $dark_panel
             90%
           );
       }
 
       &:not(.nohover):hover {
-        background-color: #202c35;
-
         .fader {
           background-image:
             linear-gradient(

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

@@ -78,7 +78,6 @@ header.maintop {
   align-items: center;
   z-index: 100;
   border-bottom: 1px solid $light_border_color;
-  background-color: $light_body_bg;
 }
 
 a.logo-icon {
@@ -96,7 +95,6 @@ div.main {
   flex-grow: 1;
   min-height: 0;
   position: relative;
-  z-index: 0;
 }
 
 div.clear {
@@ -527,12 +525,7 @@ sup.token-parent {
 @include media-breakpoint-up(md) {
   div.mainlinks > div,
   div.mainlinks > a {
-    padding-left: 18px;
-    padding-right: 18px;
-
-    &:last-child {
-      padding-right: 0;
-    }
+    padding: 10px 18px;
   }
 }
 
@@ -554,3 +547,23 @@ sup.token-parent {
   }
 }
 
+.panel {
+  background-color: $light_panel;
+}
+
+div[data-handler=dexsettings],
+div[data-handler=init],
+div[data-handler=login],
+div[data-handler=markets],
+div[data-handler=mm],
+div[data-handler=order],
+div[data-handler=orders],
+div[data-handler=register],
+div[data-handler=settings],
+div[data-handler=wallets] {
+  #forms > form:not(.plain) {
+    border-radius: 5px;
+    background-color: #f3f3f3;
+    box-shadow: 0 3px 6px #00000021, 0 2px 7px #00000041;
+  }
+}

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

@@ -3,10 +3,7 @@ body.dark {
   color: $font-color-dark;
 
   header.maintop {
-    background-color: $dark_body_bg;
-    border-bottom-style: solid;
-    border-color: $dark_border_color;
-    border-width: 1px;
+    border: 1px solid $dark_border_color;
   }
 
   a.logo-icon {
@@ -116,7 +113,7 @@ body.dark {
   }
 
   #forms {
-    background-color: $dark_body_bg;
+    background-color: $dark_form_bg;
   }
 
   .buycolor {
@@ -150,4 +147,25 @@ body.dark {
       background-color: #27278d;
     }
   }
+
+  .panel {
+    background-color: $dark_panel;
+  }
+
+  div[data-handler=dexsettings],
+  div[data-handler=markets],
+  div[data-handler=mm],
+  div[data-handler=order],
+  div[data-handler=orders],
+  div[data-handler=settings],
+  div[data-handler=init],
+  div[data-handler=login],
+  div[data-handler=register],
+  div[data-handler=wallets] {
+    #forms > form:not(.plain) {
+      border: 1px solid $dark-border-color;
+      background-color: $dark_panel;
+      box-shadow: 0 3px 6px #00000029, 0 2px 10px #00000049;
+    }
+  }
 }

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

@@ -44,10 +44,6 @@ div[data-handler=markets] {
     min-width: 375px;
     width: 90%;
 
-    & > div {
-      border: 1px solid $light_border_color;
-    }
-
     #orderForm {
       input[type=number] {
         height: 30px;
@@ -259,7 +255,7 @@ div[data-handler=markets] {
     border-style: none;
 
     &.selected {
-      background-color: #fffe;
+      background-color: #7773;
     }
   }
 
@@ -885,7 +881,6 @@ div[data-handler=markets] {
 
         height: 100%;
         overflow-x: hidden;
-        border-style: none none none solid;
       }
     }
 

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

@@ -62,10 +62,6 @@ body.dark {
       border-top: 1px solid $dark_border_color;
     }
 
-    .order-panel > div {
-      border: 1px solid $dark_border_color;
-    }
-
     .user-order {
       border: 1px solid $dark_border_color;
 

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

@@ -75,7 +75,7 @@
     .icon-select:hover,
     .icon-select.selected {
       opacity: 1;
-      background-color: #fff1;
+      background-color: #fff;
     }
   }
 
@@ -280,11 +280,11 @@
 
   .walletspage {
     #orderActivityBox {
-      border-top: 1px solid $dark-border-color;
+      border-top: 1px solid $light-border-color;
     }
 
     #marketsOverviewBox {
-      border-right: 1px solid $dark-border-color;
+      border-right: 1px solid $light-border-color;
       border-bottom: none;
     }
 

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

@@ -45,6 +45,19 @@ body.dark {
         background-color: $dark_body_bg;
         border-color: $dark_body_bg;
       }
+
+      &.selected,
+      &:hover {
+        background-color: $dark_body_bg;
+      }
+    }
+  }
+
+  @include media-breakpoint-up(lg) {
+    .walletspage {
+      #marketsOverviewBox {
+        border-color: $dark-border-color;
+      }
     }
   }
 }

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

@@ -23,7 +23,7 @@
 {{end}}
 
 {{define "header"}}
-<header id=header class="maintop">
+<header id=header class="maintop panel">
   {{$authed := .UserInfo.Authed}}
   <a href="/" class="logo-icon d-none d-md-block"></a>
   <a href="/" class="logo-icon d-block d-md-none"></a>

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

@@ -227,7 +227,7 @@
 {{end}}
 
 {{define "regAssetForm"}}
-<div class="text-center sans-light fs24 mb-3" data-tmpl="how">[[[how_reg]]]</div>
+<div class="text-center sans-light fs24" data-tmpl="how">[[[how_reg]]]</div>
 <div id="whatsabond" class="mt-1 fs14">
   <span class="ico-info"></span>
   <span class="ms-1">[[[whatsabond]]]</span>

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

@@ -62,7 +62,7 @@
 
       {{- /* MARKET STATS - SMALL SCREENS */ -}}
       <div id="marketStatsV1" class="market-stats-v1 align-items-center justify-content-center p-2 flex-wrap">
-        <div class="flex-center me-2 pointer hoverbg" data-tmpl="marketSelect">
+        <div class="flex-center p-2 pointer hoverbg" data-tmpl="marketSelect">
           <div class="flex-center">
             <img class="market-stats-pair-img" data-tmpl="baseIcon"><img class="market-stats-pair-img" data-tmpl="quoteIcon" class="ms-1">
           </div>
@@ -193,7 +193,7 @@
 
           {{- /* ORDER FORM */ -}}
           <div class="order-panel pb-3 position-relative">
-            <div id="orderScroller" class="d-flex flex-column align-items-stretch">
+            <div id="orderScroller" class="d-flex flex-column align-items-stretch brdrleft">
 
               {{- /* TOKEN APPROVAL */ -}}
               <div class="fs15 pt-1 pb-3 text-center brdrbottom d-hide" id="tokenApproval">
@@ -384,7 +384,7 @@
 
               {{- /* BALANCES */ -}}
               <div id="noWallet" class="p-3 brdrbottom flex-center fs16 grey d-hide"></div>
-              <div id="walletInfoTmpl" class="brdrtop brdrbottom mb-3 d-flex flex-column align-items-stretch min-fit">
+              <div id="walletInfoTmpl" class="brdrtop mb-3 d-flex flex-column align-items-stretch min-fit">
                 <div class="d-flex align-items-center px-3 py-1 brdrbottom" data-tmpl="walletIcons">
                   <img data-tmpl="logo" class="micro-icon me-1">
                   <span data-tmpl="symbol"></span>

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

@@ -7,7 +7,7 @@
   <span class="me-2 errcolor ico-cross d-hide pointer peers-table-icon" id="removeIconTmpl"></span>
   <div class="fill-abs d-flex align-items-stretch">
     {{- /* ASSET SELECT */ -}}
-    <div class="d-flex flex-column align-items-stretch stylish-overflow invisible" id="assetSelect">
+    <div class="panel d-flex flex-column align-items-stretch stylish-overflow invisible" id="assetSelect">
       <div id="iconSelectTmpl" class="icon-select d-flex align-items-stretch">
         <div class="position-relative overflow-visible">
           <img data-tmpl="img">
@@ -302,7 +302,7 @@
   {{- /* POP-UP FORMS */ -}}
   <div id="forms" class="d-hide">
 
-    <form id="checkmarkForm" class="flex-center flex-column">
+    <form id="checkmarkForm" class="flex-center flex-column plain">
       <div id="checkmarkBox" class="flex-center">
         <span class="ico-check" id="checkmark"></span>
       </div>
@@ -444,7 +444,7 @@
     </form>
 
     {{- /* RECONFIGURE WALLET */ -}}
-    <form class="pb-3 d-hide mt-3" id="reconfigForm" autocomplete="off">
+    <form class="d-hide" id="reconfigForm" autocomplete="off">
       <div class="form-closer recfg-form hoverbg"><span class="ico-cross"></span></div>
       <div class="py-1 text-center position-relative fs22 sans-light">
         [[[Reconfigure]]]

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

@@ -239,8 +239,9 @@ export class Chart {
     this.canvas.height = this.parent.clientHeight
     const xLblHeight = 30
     const yGuess = 40 // y label width guess. Will be adjusted when drawn.
-    const plotExtents = new Extents(yGuess, this.canvas.width, 10, this.canvas.height - xLblHeight)
-    const xLblExtents = new Extents(yGuess, this.canvas.width, this.canvas.height - xLblHeight, this.canvas.height)
+    const xPaddingRight = 20
+    const plotExtents = new Extents(yGuess, this.canvas.width - xPaddingRight, 10, this.canvas.height - xLblHeight)
+    const xLblExtents = new Extents(yGuess, this.canvas.width - xPaddingRight, this.canvas.height - xLblHeight, this.canvas.height)
     const yLblExtents = new Extents(0, yGuess, 10, this.canvas.height - xLblHeight)
     this.plotRegion = new Region(this.ctx, plotExtents)
     this.xRegion = new Region(this.ctx, xLblExtents)

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

@@ -991,7 +991,7 @@ export class FeeAssetSelectionForm {
         el.style.transform = `scale(${prog})`
       }
       form.style.opacity = Math.pow(prog, 4).toFixed(1)
-      form.style.paddingTop = `${(1 - prog) * extraTop}px`
+      form.style.top = `${(1 - prog) * extraTop}px`
       how.style.fontSize = `${fontSize * prog}px`
     }, 'easeOut')
   }

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

@@ -822,7 +822,7 @@ export default class WalletsPage extends BasePage {
       tmpl.parentImg.classList.remove('d-hide')
       tmpl.parentImg.src ||= Doc.logoPath(parentSymbol)
     }
-
+    if (this.selectedAssetID === assetID) bttn.classList.add('selected')
     tmpl.name.textContent = a.name
     if (a.wallet) {
       bttn.classList.remove('nowallet')