ui: restyle markets page

This restyles the markets page. The new style is responsive. There are also some other stylistic changes that apply across the app, including a softer-edged DEX symbol, and adjusted buy/sell colors.
decred · Oct 3, 2022 · 7f0ef46 · 7f0ef46
1 parent a461a3b
commit 7f0ef46
Show file tree

Hide file tree

Showing 36 changed files with 2,138 additions and 1,916 deletions.
diff --git a/client/webserver/live_test.go b/client/webserver/live_test.go
@@ -29,6 +29,7 @@ import (
 	"decred.org/dcrdex/client/comms"
 	"decred.org/dcrdex/client/core"
 	"decred.org/dcrdex/client/db"
+	"decred.org/dcrdex/client/orderbook"
 	"decred.org/dcrdex/dex"
 	"decred.org/dcrdex/dex/calc"
 	"decred.org/dcrdex/dex/candles"
@@ -48,7 +49,7 @@ const (
 
 var (
 	tCtx                  context.Context
-	maxDelay                     = time.Second * 2
+	maxDelay                     = time.Second * 4
 	epochDuration                = time.Second * 30 // milliseconds
 	feedPeriod                   = time.Second * 10
 	creationPendingAsset  uint32 = 0xFFFFFFFF
@@ -183,7 +184,7 @@ func mkMrkt(base, quote string) *core.Market {
 			Rate:    rate,
 			// BookVolume: ,
 			Change24: change24,
-			// Vol24: ,
+			Vol24:    lotSize * uint64(50000*rand.Float32()),
 		},
 	}
 }
@@ -1141,12 +1142,24 @@ func (c *TCore) book(dexAddr, mktID string) *core.OrderBook {
 		buys = append(buys, ord)
 		c.buys[ord.Token] = ord
 	}
+	recentMatches := make([]*orderbook.MatchSummary, 0, 25)
+	tNow := time.Now()
+	for i := 0; i < 25; i++ {
+		ord := randomOrder(rand.Float32() > 0.5, maxQty, midGap, gapWidthFactor*midGap, false)
+		recentMatches = append(recentMatches, &orderbook.MatchSummary{
+			Rate:  ord.MsgRate,
+			Qty:   ord.QtyAtomic,
+			Stamp: uint64(tNow.Add(-time.Duration(i) * time.Minute).UnixMilli()),
+			Sell:  ord.Sell,
+		})
+	}
 	c.orderMtx.Unlock()
 	sort.Slice(buys, func(i, j int) bool { return buys[i].Rate > buys[j].Rate })
 	sort.Slice(sells, func(i, j int) bool { return sells[i].Rate < sells[j].Rate })
 	return &core.OrderBook{
-		Buys:  buys,
-		Sells: sells,
+		Buys:          buys,
+		Sells:         sells,
+		RecentMatches: recentMatches,
 	}
 }
 

diff --git a/client/webserver/locales/en-us.go b/client/webserver/locales/en-us.go
@@ -81,10 +81,10 @@ var EnUS = map[string]string{
 	"outdated_tooltip":               "Balance may be outdated. Connect to the wallet to refresh.",
 	"available":                      "available",
 	"connect_refresh_tooltip":        "Click to connect and refresh",
-	"add_a_base_wallet":              `Add a<br><span data-unit="base"></span><br>wallet`,
-	"add_a_quote_wallet":             `Add a<br><span data-unit="quote"></span><br>wallet`,
+	"add_a_wallet":                   `Add a <span data-tmpl="addWalletSymbol"></span> wallet`,
 	"locked":                         "locked",
 	"immature":                       "immature",
+	"fee balance":                    "fee balance",
 	"Sell Orders":                    "Sell Orders",
 	"Your Orders":                    "Your Orders",
 	"Recent Matches":                 "Recent Matches",

diff --git a/client/webserver/locales/pl-pl.go b/client/webserver/locales/pl-pl.go
@@ -80,8 +80,7 @@ var PlPL = map[string]string{
 	"outdated_tooltip":               "Saldo może być nieaktualne. Połącz się z portfelem, aby je odświeżyć.",
 	"available":                      "dostępne",
 	"connect_refresh_tooltip":        "Kliknij, aby połączyć i odświeżyć",
-	"add_a_base_wallet":              `Dodaj portfel<br><span data-unit="base"></span><br>`,
-	"add_a_quote_wallet":             `Dodaj portfel<br><span data-unit="quote"></span><br>`,
+	"add_a_wallet":                   `Dodaj portfel <span data-tmpl="addWalletSymbol"></span> `,
 	"locked":                         "zablokowane",
 	"immature":                       "niedojrzałe",
 	"Sell Orders":                    "Zlecenia sprzedaży",

diff --git a/client/webserver/locales/pt-br.go b/client/webserver/locales/pt-br.go
@@ -80,8 +80,7 @@ var PtBr = map[string]string{
 	"outdated_tooltip":               "Balanço pode está desatualizado. Conecte-se a carteira para atualizar.",
 	"available":                      "disponível",
 	"connect_refresh_tooltip":        "Clique para conectar e atualizar",
-	"add_a_base_wallet":              `Adicionar uma carteira<br><span data-unit="base"></span><br>`,
-	"add_a_quote_wallet":             `Adicionar uma<br><span data-unit="quote"></span><br>carteira`,
+	"add_a_wallet":                   `Adicionar uma carteira <span data-tmpl="addWalletSymbol"></span> `,
 	"locked":                         "trancado",
 	"immature":                       "imaturo",
 	"Sell Orders":                    "Pedido de venda",

diff --git a/client/webserver/locales/zh-cn.go b/client/webserver/locales/zh-cn.go
@@ -80,8 +80,7 @@ var ZhCN = map[string]string{
 	"outdated_tooltip":               "账户可能已过期。请连接到钱包进行更新。",
 	"available":                      "可用",
 	"connect_refresh_tooltip":        "点击连接并刷新",
-	"add_a_base_wallet":              `添加一个<br><span data-unit="base"></span><br>钱包`,
-	"add_a_quote_wallet":             `添加一个<br><span data-unit="quote"></span><br>钱包`,
+	"add_a_wallet":                   `添加一个 <span data-tmpl="addWalletSymbol"></span> 钱包`,
 	"locked":                         "锁定",
 	"immature":                       "不成熟",
 	"Sell Orders":                    "卖单",

diff --git a/client/webserver/site/src/css/application.scss b/client/webserver/site/src/css/application.scss
@@ -2,17 +2,14 @@
 $grid-columns: 24;
 $font-color-dark: #dfe2e1;
 $font-color-light: #333;
-$buycolor_dark: #05a35a;
-$sellcolor_dark: #ae3333;
+$buycolor_dark: #29bb77;
+$sellcolor_dark: #e95e5e;
 $buycolor_light: #207a46;
 $sellcolor_light: #99302b;
-$light_bg_1: #eaeaea;
-$light_bg_2: #d5d5d5;
-$dark_bg_1: #111;
-$dark_bg_2: #1e1e1e;
-$dark_bg_3: #292929;
-$dark_body_bg: #13202b;
-$light_body_bg: #e0e0e0;
+$light_body_bg: white;
+$dark_body_bg: #091a28;
+$light_border_color: #ddd;
+$dark_border_color: #383f4b;
 $sans: "source-sans", sans-serif;
 $demi-sans: "demi-sans", sans-serif;
 $mono: "mono", monospace;

diff --git a/client/webserver/site/src/css/forms.scss b/client/webserver/site/src/css/forms.scss
@@ -1,10 +1,6 @@
 #regAssetForm {
   position: relative;
 
-  .grey {
-    color: #999;
-  }
-
   div.reg-asset-allmkts {
     min-width: 210px;
     max-width: 320px;
@@ -117,10 +113,6 @@
 #confirmRegForm {
   width: 425px;
 
-  .grey {
-    color: grey;
-  }
-
   button.submit {
     width: auto;
     padding: 12px 30px;
@@ -155,10 +147,6 @@
 #newWalletForm {
   width: 425px;
 
-  .grey {
-    color: #999;
-  }
-
   .wallet-tabs {
     width: 100%;
     display: flex;
@@ -255,7 +243,7 @@ button.form-button {
   bottom: 0;
   right: 0;
   padding: 25px 0;
-  background-color: #e0e0e0f3;
+  background-color: $light_body_bg;
   z-index: 100;
 
   & > form {
@@ -274,10 +262,6 @@ button.form-button {
 #walletWait {
   max-width: 425px;
 
-  .grey {
-    color: #999;
-  }
-
   .icons {
     width: 25px;
   }
@@ -345,3 +329,10 @@ button.form-button {
 #authorizeSeedDisplay {
   width: 425px;
 }
+
+#deposit {
+  #copyAlert {
+    margin-left: 12px;
+    position: absolute;
+  }
+}
diff --git a/client/webserver/site/src/css/icons.scss b/client/webserver/site/src/css/icons.scss
@@ -110,6 +110,12 @@
   transform: rotate(180deg);
 }
 
+.ico-arrowup::before {
+  content: "\e90c";
+  display: inline-block;
+  transform: rotate(-90deg);
+}
+
 .ico-checkbox::before {
   content: "\e90d";
 }