From 5804e78bc5f5ba410d344a293b15678417ec245b Mon Sep 17 00:00:00 2001 From: Peter Banik Date: Mon, 30 Oct 2023 11:19:02 +0100 Subject: [PATCH] Dialog panel coloring --- .../webserver/site/src/css/application.scss | 10 +- client/webserver/site/src/css/forms.scss | 17 +- client/webserver/site/src/css/forms_dark.scss | 18 +- client/webserver/site/src/css/main.scss | 17 +- client/webserver/site/src/css/main_dark.scss | 13 +- client/webserver/site/src/css/market.scss | 80 ++- .../webserver/site/src/css/market_dark.scss | 72 ++- client/webserver/site/src/css/orders.scss | 27 +- client/webserver/site/src/css/settings.scss | 3 +- client/webserver/site/src/css/wallets.scss | 33 +- .../webserver/site/src/css/wallets_dark.scss | 27 +- .../webserver/site/src/html/bodybuilder.tmpl | 10 +- .../webserver/site/src/html/dexsettings.tmpl | 7 +- client/webserver/site/src/html/forms.tmpl | 18 +- client/webserver/site/src/html/init.tmpl | 6 +- client/webserver/site/src/html/login.tmpl | 4 +- client/webserver/site/src/html/markets.tmpl | 552 +++++++++--------- client/webserver/site/src/html/mm.tmpl | 6 +- client/webserver/site/src/html/order.tmpl | 4 +- client/webserver/site/src/html/orders.tmpl | 2 +- client/webserver/site/src/html/register.tmpl | 16 +- client/webserver/site/src/html/settings.tmpl | 24 +- client/webserver/site/src/html/wallets.tmpl | 44 +- client/webserver/site/src/js/charts.ts | 4 +- client/webserver/site/src/js/doc.ts | 17 + client/webserver/site/src/js/forms.ts | 4 +- client/webserver/site/src/js/markets.ts | 2 +- 27 files changed, 576 insertions(+), 461 deletions(-) diff --git a/client/webserver/site/src/css/application.scss b/client/webserver/site/src/css/application.scss index dae0a95cb0..2223263c6f 100644 --- a/client/webserver/site/src/css/application.scss +++ b/client/webserver/site/src/css/application.scss @@ -6,10 +6,14 @@ $buycolor_dark: #29bb77; $sellcolor_dark: #e95e5e; $buycolor_light: #207a46; $sellcolor_light: #99302b; -$light_body_bg: white; -$dark_body_bg: #091a28; +$dark_body_bg: #04111c; +$dark_main_bg: #091a28; +$dark_dialog_bg: #102332; +$light_body_bg: #ecebf0; +$light_main_bg: #f4f2f9; +$light_dialog_bg: #fff; $light_border_color: #ddd; -$dark_border_color: #383f4b; +$dark_border_color: #272c3580; $light_input_border: #999; $dark_input_border: #555; $sans: "source-sans", sans-serif; diff --git a/client/webserver/site/src/css/forms.scss b/client/webserver/site/src/css/forms.scss index 1415309ddb..ea0c51580b 100644 --- a/client/webserver/site/src/css/forms.scss +++ b/client/webserver/site/src/css/forms.scss @@ -24,7 +24,7 @@ linear-gradient( to bottom, #e0e0e000, - $light_body_bg + $light_dialog_bg 90% ); } @@ -153,16 +153,17 @@ display: flex; justify-content: flex-start; align-items: stretch; + border-bottom: 1px solid $light_border_color; + padding-left: 15px; .wtab { padding: 8px 20px; font-size: 15px; - border-style: solid solid none; border-radius: 5px 5px 0 0; - border-width: 1px; - border-color: #555; - opacity: 0.8; - background-color: $light_body_bg; + border: 1px solid $light_border_color; + border-bottom: none; + opacity: 0.6; + background-color: transparent; position: relative; z-index: 150; } @@ -175,6 +176,8 @@ opacity: 1; top: 1px; cursor: default; + background: linear-gradient(0deg, $light_dialog_bg 20%, #ddd 100%); + border-top: none; } .wtab:not(.selected) { @@ -187,7 +190,7 @@ } .bordertop { - border-top: solid 1px #555; + border-top: solid 1px $light_border_color; border-radius: 0 10px 0 0; } diff --git a/client/webserver/site/src/css/forms_dark.scss b/client/webserver/site/src/css/forms_dark.scss index 5de4fa84ac..b2c6711701 100644 --- a/client/webserver/site/src/css/forms_dark.scss +++ b/client/webserver/site/src/css/forms_dark.scss @@ -14,7 +14,7 @@ body.dark { linear-gradient( to bottom, #13202b00, - $dark_body_bg + $dark_dialog_bg 90% ); } @@ -41,20 +41,20 @@ body.dark { #newWalletForm { .wallet-tabs { + border-bottom: 1px solid $dark_border_color; + .wtab { - background-color: $dark_body_bg; - border-color: #999; - opacity: 0.8; - } + border-color: $dark_border_color; + background-color: $dark_dialog_bg; - .wtab.selected { - opacity: 1; - background-color: #263846; + &.selected { + background: linear-gradient(0deg, $dark_dialog_bg 20%, $dark_main_bg 100%); + } } } .bordertop { - border-top: solid 1px #999; + border-top: solid 1px $dark_border_color; } } diff --git a/client/webserver/site/src/css/main.scss b/client/webserver/site/src/css/main.scss index a65bb696cf..c1e054223d 100644 --- a/client/webserver/site/src/css/main.scss +++ b/client/webserver/site/src/css/main.scss @@ -77,7 +77,6 @@ header.maintop { justify-content: space-between; align-items: center; z-index: 100; - border-bottom: 1px solid $light_border_color; background-color: $light_body_bg; } @@ -173,7 +172,7 @@ header.maintop a:hover, } #header .hoverbright:hover { - color: #222; + color: #666; } form.card button:hover { @@ -336,7 +335,7 @@ div.popup-notes { display: flex; flex-direction: column; align-items: stretch; - background-color: $light_body_bg; + background-color: $light_dialog_bg; border: 1px solid #7777; z-index: 100; font-family: $sans; @@ -402,6 +401,10 @@ div.popup-notes { display: none !important; } +.d-conceal { + visibility: hidden !important; +} + .buycolor { color: $buycolor_light; } @@ -466,7 +469,8 @@ hr.dashed { } .hoverbg:hover { - background-color: #7775; + background-color: #7777771b; + cursor: pointer; } div.form-closer { @@ -550,3 +554,8 @@ sup.token-parent { } } +.dialog-panel { + background-color: $light_dialog_bg; + filter: drop-shadow(3px 3px 5px #00000030); +} + diff --git a/client/webserver/site/src/css/main_dark.scss b/client/webserver/site/src/css/main_dark.scss index 9b82015d46..f80c56e70d 100644 --- a/client/webserver/site/src/css/main_dark.scss +++ b/client/webserver/site/src/css/main_dark.scss @@ -4,7 +4,7 @@ body.dark { header.maintop { background-color: $dark_body_bg; - border-bottom-style: solid; + border-bottom-style: none; border-color: $dark_border_color; border-width: 1px; } @@ -62,6 +62,10 @@ body.dark { text-decoration: underline; } + .hoverbg:hover { + background-color: #1d2936a0; + } + button { color: $font-color-dark; background-color: transparent; @@ -125,7 +129,7 @@ body.dark { #noteBox, #profileBox { - background-color: $dark_body_bg; + background-color: $dark_dialog_bg; } #tooltip { @@ -146,4 +150,9 @@ body.dark { background-color: #27278d; } } + + .dialog-panel { + background-color: $dark_dialog_bg; + filter: drop-shadow(3px 3px 8px #00000040); + } } diff --git a/client/webserver/site/src/css/market.scss b/client/webserver/site/src/css/market.scss index d48a61f3f4..6f98773df8 100644 --- a/client/webserver/site/src/css/market.scss +++ b/client/webserver/site/src/css/market.scss @@ -18,14 +18,13 @@ div[data-handler=markets] { .ordertable-header { height: 30px; padding: 0 45px 0 10px; + background-color: $light_dialog_bg; } .orderbook { min-width: 300px; width: 90%; - border-right: 1px solid $light_border_color; - border-left: 1px solid $light_border_color; - border-top: 1px solid $light_border_color; + border-right: 5px solid $light_body_bg; & > div:first-child { // buy orders order: 3; @@ -43,12 +42,17 @@ div[data-handler=markets] { .order-panel { min-width: 375px; width: 90%; + border-left: 5px solid $light_body_bg; - & > div { - border: 1px solid $light_border_color; + #orderTypeBttns { + button { + border-radius: 5px 5px 0 0; + } } #orderForm { + background: $light_dialog_bg; + input[type=number] { height: 30px; border-radius: 0; @@ -129,6 +133,20 @@ div[data-handler=markets] { background-color: #6e0909; } + #notRegistered, + #registrationStatus, + #bondCreationPending { + background-color: $light_dialog_bg; + } + + .charts, + .orderbook, + .balances-panel, + .user-order-panel, + #recentMatchesBox { + background: $light_main_bg; + } + .user-order { border: 1px solid $light_border_color; @@ -141,6 +159,10 @@ div[data-handler=markets] { padding-bottom: 0; } + &.inactive { + opacity: 0.5; + } + .user-order-header { @extend .flex-center; @@ -164,9 +186,6 @@ div[data-handler=markets] { background-color: $sellcolor_light; } - &.inactive { - opacity: 0.5; - } } .active-indicator { @@ -240,22 +259,28 @@ div[data-handler=markets] { min-width: 30px; } - tbody > tr:hover, - tbody > tr.hover { - background-color: white; - } - .ico-check { color: #9b8c09; } } + #orderTypeBttns { + border-bottom: 1px solid $light_border_color; + } + .markettab { height: 30px; border-style: none; + border: 1px solid $light_border_color; + border-bottom: none; + background-color: $light_main_bg; + position: relative; + opacity: 0.8; &.selected { - background-color: #fffe; + top: 1px; + opacity: 1; + background-color: $light_dialog_bg; } } @@ -671,34 +696,26 @@ div[data-handler=markets] { } } + span.label { + text-transform: uppercase; + font-weight: normal; + font-size: small; + } + .twentyfour { - margin-left: 0; - border-left: 1px solid $light_border_color; + padding-left: 5px; .data-point { margin-left: 0; & > * { + align-items: flex-start; padding-right: 20px; } span.label { + text-align: left; width: 100%; - border-bottom: 1px solid $light_border_color; - } - - &:first-child > span.label { - padding-right: 5px; - padding-left: 5px; - } - - &:nth-child(3), - &:nth-child(4) { - align-items: flex-end; - - span.label { - text-align: right; - } } &:nth-child(4) > * { @@ -881,7 +898,6 @@ div[data-handler=markets] { height: 100%; overflow-x: hidden; - border-style: none none none solid; } } diff --git a/client/webserver/site/src/css/market_dark.scss b/client/webserver/site/src/css/market_dark.scss index f5d3bc4f45..05d816a158 100644 --- a/client/webserver/site/src/css/market_dark.scss +++ b/client/webserver/site/src/css/market_dark.scss @@ -2,19 +2,23 @@ body.dark { div[data-handler=markets] { table.ordertable { color: #a1a1a1; - - tbody > tr:hover, - tbody > tr.hover { - background-color: #1d2936; - } } .numorders { background-color: #141488; } - .markettab.selected { - background-color: #fff1; + #orderTypeBttns { + border-color: $dark_border_color; + } + + .markettab { + background-color: $dark_main_bg; + border-color: $dark_border_color; + + &.selected { + background-color: $dark_dialog_bg; + } } .market-bal { @@ -56,18 +60,39 @@ body.dark { } } - .orderbook { - border-right: 1px solid $dark_border_color; - border-left: 1px solid $dark_border_color; - border-top: 1px solid $dark_border_color; + #notRegistered, + #registrationStatus, + #bondCreationPending { + background-color: $dark_dialog_bg; } - .order-panel > div { - border: 1px solid $dark_border_color; + .charts, + .orderbook, + .balances-panel, + .user-order-panel, + #recentMatchesBox { + background: $dark_main_bg; + } + + .order-panel { + border-left-color: $dark_body_bg; + } + + .orderbook { + border-right-color: $dark_body_bg; + + .ordertable-header { + background-color: $dark_dialog_bg; + } } .user-order { - border: 1px solid $dark_border_color; + border: none; + border-bottom: 1px solid $dark_border_color; + + &:first-child { + border-top: 1px solid $dark_border_color; + } .order-details { border-color: $dark_border_color; @@ -91,6 +116,7 @@ body.dark { } #orderForm { + background: $dark_dialog_bg; color: #a1a1a1; button { @@ -147,7 +173,7 @@ body.dark { #leftMarketDock { border-color: $dark_border_color; - background-color: $dark_body_bg; + background-color: $dark_main_bg; #searchBoxV1 { border-color: $dark_border_color; @@ -159,35 +185,27 @@ body.dark { } } - .twentyfour { - border-left: 1px solid $dark_border_color; - - .data-point span.label { - border-bottom: 1px solid $dark_border_color; - } - } - #main .market-stats-v1 { border-bottom: 1px solid $dark_border_color; } #durBttnBox, #epochLine { - background-color: $dark_body_bg; + background-color: $dark_main_bg; .candle-dur-bttn { - background-color: $dark_body_bg; + background-color: $dark_main_bg; } } #marketReopener { border-color: $dark_border_color; - background-color: $dark_body_bg; + background-color: $dark_main_bg; } .user-order-floaty-menu { border-color: $dark_border_color $dark_input_border $dark_input_border $dark_input_border; - background-color: $dark_body_bg; + background-color: $dark_main_bg; } } diff --git a/client/webserver/site/src/css/orders.scss b/client/webserver/site/src/css/orders.scss index acb2cf1acb..6fd39ad682 100644 --- a/client/webserver/site/src/css/orders.scss +++ b/client/webserver/site/src/css/orders.scss @@ -6,7 +6,7 @@ } .orders-left-side { - border-right: 1px solid black; + border-right: 1px solid $light_border_color; } .filter-opts { @@ -47,6 +47,7 @@ } #ordersTable { + background-color: $light_dialog_bg; width: 100%; // max-width: 90%; margin: 0 auto; @@ -73,3 +74,27 @@ } } } + +body.dark { + .orders-left-side { + border-color: $dark_border_color; + } + + #ordersTable { + background-color: $dark_main_bg; + + thead { + background-color: $dark_dialog_bg; + } + + tbody { + tr:nth-child(even) { + background-color: #7771; + } + + tr:hover { + background-color: #77777716; + } + } + } +} \ No newline at end of file diff --git a/client/webserver/site/src/css/settings.scss b/client/webserver/site/src/css/settings.scss index 360977ddc1..1ef56d0d9c 100644 --- a/client/webserver/site/src/css/settings.scss +++ b/client/webserver/site/src/css/settings.scss @@ -27,7 +27,8 @@ div.settings { } span.settings-gear { - display: inline-block; + display: block; + text-align: center; font-size: 40px; opacity: 0.6; margin: 10px; diff --git a/client/webserver/site/src/css/wallets.scss b/client/webserver/site/src/css/wallets.scss index a55b888a79..4b0e1ec08a 100644 --- a/client/webserver/site/src/css/wallets.scss +++ b/client/webserver/site/src/css/wallets.scss @@ -40,8 +40,6 @@ } #assetSelect { - border-right: 1px solid $dark-border-color; - .icon-select { padding: 15px; cursor: pointer; @@ -75,7 +73,7 @@ .icon-select:hover, .icon-select.selected { opacity: 1; - background-color: #fff1; + background-color: $light_main_bg; } } @@ -108,7 +106,7 @@ #walletInfo { padding-top: 25px; - border-top: solid 1px #777; + border-top: solid 1px $light_border_color; table#walletInfoTable { width: 100%; @@ -181,14 +179,7 @@ height: 100px; } - #marketsOverviewBox { - border-left: 1px solid $light_border_color; - border-bottom: 1px solid $light_border_color; - } - #walletDetailsBox { - border-bottom: $light_border_color; - #assetLogo { width: 35px; height: 35px; @@ -210,10 +201,8 @@ @extend .table-striped; } - #stakingBox { - border-width: 1px; - border-style: solid none; - border-color: $light_border_color; + #vspPicker { + padding: 50px !important; } table#vspPickerTable, @@ -279,12 +268,18 @@ } .walletspage { - #orderActivityBox { - border-top: 1px solid $dark-border-color; + #walletDetailsBox, + #orderActivityBox, + #marketsOverviewBox { + background-color: $light_main_bg; + } + + #stakingBox { + border-top: 8px solid $light_body_bg; } #marketsOverviewBox { - border-right: 1px solid $dark-border-color; + border-left: 8px solid $light_body_bg; border-bottom: none; } @@ -304,7 +299,7 @@ padding-top: 0; padding-left: 25px; border-top: none; - border-left: solid 1px #777; + border-left: solid 1px $light_border_color; table#walletInfoTable { width: auto; diff --git a/client/webserver/site/src/css/wallets_dark.scss b/client/webserver/site/src/css/wallets_dark.scss index d279eabdaf..065308ab8b 100644 --- a/client/webserver/site/src/css/wallets_dark.scss +++ b/client/webserver/site/src/css/wallets_dark.scss @@ -1,12 +1,21 @@ body.dark { .walletspage { + #walletDetailsBox, + #orderActivityBox, #marketsOverviewBox { - border-left: 1px solid $dark_border_color; - border-bottom: 1px solid $dark_border_color; + background-color: $dark_main_bg; } - #walletDetailsBox { - border-bottom: $dark_border_color; + #stakingBox { + border-top-color: $dark_body_bg; + } + + #marketsOverviewBox { + border-left-color: $dark_body_bg; + } + + #walletInfo { + border-color: $dark_border_color } #peersTable, @@ -20,10 +29,6 @@ body.dark { } } - #stakingBox { - border-color: $dark_border_color; - } - table#vspPickerTable, table#ticketHistoryTable { border: 1px solid $dark_border_color; @@ -45,6 +50,12 @@ body.dark { background-color: $dark_body_bg; border-color: $dark_body_bg; } + + &:hover, + &.selected { + opacity: 1; + background-color: $dark_main_bg; + } } } } diff --git a/client/webserver/site/src/html/bodybuilder.tmpl b/client/webserver/site/src/html/bodybuilder.tmpl index 328c602a5f..0f70b657f0 100644 --- a/client/webserver/site/src/html/bodybuilder.tmpl +++ b/client/webserver/site/src/html/bodybuilder.tmpl @@ -49,11 +49,11 @@
-
+
-
-
[[[Notifications]]]
-
[[[Recent Activity]]]
+
+
[[[Notifications]]]
+
[[[Recent Activity]]]
@@ -76,7 +76,7 @@
-
+
diff --git a/client/webserver/site/src/html/dexsettings.tmpl b/client/webserver/site/src/html/dexsettings.tmpl index fded08256a..f749dc48d8 100644 --- a/client/webserver/site/src/html/dexsettings.tmpl +++ b/client/webserver/site/src/html/dexsettings.tmpl @@ -35,7 +35,7 @@
{{- /* DISABLE ACCOUNT */ -}} -
+ {{template "disableAccountForm"}}
@@ -45,14 +45,15 @@ {{- /* DEX ADDRESS */ -}} -
+ {{template "dexAddrForm" .}}
{{- /* BOND DETAILS */ -}} -
+
[[[bond_details]]]
+
[[[current_tier]]] diff --git a/client/webserver/site/src/html/forms.tmpl b/client/webserver/site/src/html/forms.tmpl index 326bda8b93..dccbd17384 100644 --- a/client/webserver/site/src/html/forms.tmpl +++ b/client/webserver/site/src/html/forms.tmpl @@ -52,10 +52,7 @@ {{define "newWalletForm"}}
-
-
-
-
+
[[[add_a_x_wallet]]]
[[[Token on]]] @@ -63,10 +60,10 @@
-
-
- -
+
+
+
+
[[[pick a different asset]]]
@@ -106,6 +103,9 @@ [[[wallet_wait_synced]]].
+
+ +
{{end}} {{define "unlockWalletForm"}} @@ -227,7 +227,7 @@ {{end}} {{define "regAssetForm"}} -
[[[how_reg]]]
+
[[[how_reg]]]
[[[whatsabond]]] diff --git a/client/webserver/site/src/html/init.tmpl b/client/webserver/site/src/html/init.tmpl index 405dfc986a..2f4bc4f2ba 100644 --- a/client/webserver/site/src/html/init.tmpl +++ b/client/webserver/site/src/html/init.tmpl @@ -4,7 +4,7 @@
{{- /* App Initialization */ -}} - +
[[[Set App Password]]]
[[[reg_set_app_pw_msg]]]
@@ -36,7 +36,7 @@ {{- /* Quick Config Form */ -}} -
+
[[[Quick Configuration]]]
[[[quickconfig_wallet_header]]]
@@ -83,7 +83,7 @@ {{- /* Seed Backup */ -}} -
+
[[[Backup App Seed]]]
diff --git a/client/webserver/site/src/html/login.tmpl b/client/webserver/site/src/html/login.tmpl index 239d3834fd..34d3c5cff2 100644 --- a/client/webserver/site/src/html/login.tmpl +++ b/client/webserver/site/src/html/login.tmpl @@ -3,12 +3,12 @@
{{- /* LOGIN FORM */ -}} - + {{template "loginForm"}} {{- /* RESET APP PASSWORD */ -}} -
+ {{template "appPassResetForm"}}
diff --git a/client/webserver/site/src/html/markets.tmpl b/client/webserver/site/src/html/markets.tmpl index 99635b3456..4a19ccc1cb 100644 --- a/client/webserver/site/src/html/markets.tmpl +++ b/client/webserver/site/src/html/markets.tmpl @@ -64,7 +64,7 @@
- +
- @@ -83,26 +83,22 @@
- 24 Hr. -
- -
- [[[:title:volume]]] -
+ 24H [[[:title:volume]]] +
-
High -
+
-
Low -
+
-
@@ -137,7 +133,7 @@ {{- /* This row is used by the app as a template. */ -}} - +
-
@@ -153,8 +149,8 @@
{{- /* END ORDER BOOK */ -}} {{- /* CHARTS */ -}} -
-
+
+
@@ -195,297 +191,305 @@
- {{- /* TOKEN APPROVAL */ -}} -
- [[[approval_required_buy]]] - [[[approval_required_sell]]] - [[[approval_required_both]]] - -
- [[[approval_change_pending]]] -
- -
- [[[approval_change_pending]]] +
+ {{- /* TOKEN APPROVAL */ -}} +
+ [[[approval_required_buy]]] + [[[approval_required_sell]]] + [[[approval_required_both]]] + +
+ [[[approval_change_pending]]] +
+ +
+ [[[approval_change_pending]]] +
-
- - {{- /* ORDER TYPE BUTTONS */ -}} -
- - -
- -
- - {{- /* CREATE ACCOUNT TO TRADE */ -}} -
-
[[[create_account_to_trade]]]
-
-

[[[need_to_register_msg]]]

- + + {{- /* ORDER TYPE BUTTONS */ -}} +
+ +
-
- - {{- /* BOND CREATION PENDING */ -}} -
-
-
-

[[[posting_bonds_shortly]]] -

-

[[[bond_creation_pending_msg]]] -

+ +
+ + {{- /* CREATE ACCOUNT TO TRADE */ -}} +
+
[[[create_account_to_trade]]]
+
+

[[[need_to_register_msg]]]

+
-
- - {{- /* REGISTRATION STATUS */ -}} -
-
-
- -

[[[reg_status_msg]]] -

- + + {{- /* BOND CREATION PENDING */ -}} +
+
+
+

[[[posting_bonds_shortly]]] +

+

[[[bond_creation_pending_msg]]] +

+
-
- - {{- /* BOND REQUIRED TO TRADE */ -}} -
-
[[[action_required_to_trade]]]
-
-

- [[[acct_tier_post_bond]]] - [[[enable_bond_maintenance]]] -

-
-
- - {{- /* MM RUNNING */ -}} -
-
-
- [[[market_making_running]]] -

[[[cannot_manually_trade]]]

+ + {{- /* REGISTRATION STATUS */ -}} +
+
+
+ +

[[[reg_status_msg]]] +

+ +
-
- - {{- /* ORDER FORM */ -}} -
-
- - {{- /* BUY - SELL SELECTOR */ -}} -
- - - + + {{- /* BOND REQUIRED TO TRADE */ -}} +
+
[[[action_required_to_trade]]]
+
+

+ [[[acct_tier_post_bond]]] + [[[enable_bond_maintenance]]] +

- - {{- /* MARKET CONFIG */ -}} -
-
- [[[:title:lot_size]]]: - - -
-
- [[[Rate Step]]]: - - +
+ + {{- /* MM RUNNING */ -}} +
+
+
+ [[[market_making_running]]] +

[[[cannot_manually_trade]]]

-
-
- - [[[Max]]] [[[Buy]]]: - - [[[lot]]] - - - , - - - - +
+ + {{- /* ORDER FORM */ -}} + +
+ + {{- /* BUY - SELL SELECTOR */ -}} +
+ + +
-
- - {{- /* RATE AND QUANTITY INPUTS */ -}} -
- -
- - / + + {{- /* MARKET CONFIG */ -}} +
+
+ [[[:title:lot_size]]]: + + +
+
+ [[[Rate Step]]]: + + +
-
-
- -
- - [[[:title:lots]]] +
+
+ + [[[Max]]] [[[Buy]]]: + + [[[lot]]] + + + , + + + + +
-
{{/* spacer */}} -
- - + + {{- /* RATE AND QUANTITY INPUTS */ -}} +
+ +
+ + / +
-
- - {{- /* MARKET BUY ORDER QUANTITY INPUT */ -}} -
-
- [[[min trade is about]]] +
+ +
+ + [[[:title:lots]]] +
+
{{/* spacer */}} +
+ + +
-
- -
- - + + {{- /* MARKET BUY ORDER QUANTITY INPUT */ -}} +
+
+ [[[min trade is about]]] +
+
+ +
+ + +
+
+
+ + ~ 0 + @ 0 [[[:title:lots]]]
+ +
-
- - ~ 0 - @ 0 [[[:title:lots]]]
- - + + {{- /* ORDER PREVIEW */ -}} +
+ + {{- /* TIME-IN-FORCE CHECK BOX */ -}} +
+ + +
+ + {{- /* SUBMIT ORDER BUTTON */ -}} +
+ {{/* textContent set by script */}}
+
+ +
- {{- /* ORDER PREVIEW */ -}} -
- - {{- /* TIME-IN-FORCE CHECK BOX */ -}} -
- - -
- - {{- /* SUBMIT ORDER BUTTON */ -}} -
- {{/* textContent set by script */}} -
-
-
- - + {{- /* BALANCES */ -}} -
- Create wallets to trade -
-
-
- - -
-
{{template "walletIcons"}}
-
- +
+
+ Create wallets to trade
-
-
- asset not supported -
-
-
-
-
- -
-
- -
-
-
- -
+
+
+ + +
+
{{template "walletIcons"}}
+
+ +
+
+
+ asset not supported +
+
+
+
+
+ +
+
+ +
+
+
+ +
+
{{- /* USER ORDERS */ -}} -
- [[[Your Orders]]] -
-
[[[unready_wallets_msg]]]
-
no active orders
-
-
-
-
- - - - @ - - - - - -
- - -
-
-
- - - -
-
- [[[Type]]] - -
-
- [[[Side]]] +
+
+ [[[Your Orders]]] +
+
[[[unready_wallets_msg]]]
+
no active orders
+
+
+
+
+ + + @ + + + + + +
+ +
-
- [[[Status]]] - -
-
- [[[Age]]] - -
-
- [[[Quantity]]] - -
-
- [[[Rate]]] - -
-
- [[[Filled]]] - -
-
- [[[Settled]]] - +
+
+ + + +
+
+ [[[Type]]] + +
+
+ [[[Side]]] + +
+
+ [[[Status]]] + +
+
+ [[[Age]]] + +
+
+ [[[Quantity]]] + +
+
+ [[[Rate]]] + +
+
+ [[[Filled]]] + +
+
+ [[[Settled]]] + +
-
{{- /* END USER ORDERS */ -}} + [[[view order history]]] +
+ {{- /* END USER ORDERS */ -}} - [[[view order history]]] {{- /* RECENT MATCHES */ -}} -
-
[[[Recent Matches]]]
+
+
[[[Recent Matches]]]
@@ -515,27 +519,27 @@
{{- /* UNLOCK WALLET */ -}} -
+ {{template "unlockWalletForm"}} {{- /* DEPOSIT ADDRESS */ -}} -
+ {{template "depositAddress"}} {{- /* NEW WALLET */ -}} -
+ {{template "newWalletForm"}} {{- /* TOGGLE WALLET STATUS AUTHORIZATION */ -}} -
+ {{template "toggleWalletStatusConfirm"}} {{- /* VERIFY FORM */ -}} -
+
@@ -792,10 +796,10 @@ {{- /* CANCEL ORDER FORM */ -}} -
+ {{template "cancelOrderForm" .}} -
+ {{template "accelerateForm" .}}
diff --git a/client/webserver/site/src/html/mm.tmpl b/client/webserver/site/src/html/mm.tmpl index ee7d67cf00..69b799bc6c 100644 --- a/client/webserver/site/src/html/mm.tmpl +++ b/client/webserver/site/src/html/mm.tmpl @@ -48,7 +48,7 @@ {{template "orderOptionTemplates"}} {{- /* APP PASSWORD */ -}} -
+
@@ -60,12 +60,12 @@ {{- /* NEW WALLET */ -}} -
+ {{template "newWalletForm"}} {{- /* ADD BOT FORM */ -}} -
+ {{- /* ABSOLUTELY-POSITIONED CUSTOM ASSET SELECT */ -}}
diff --git a/client/webserver/site/src/html/order.tmpl b/client/webserver/site/src/html/order.tmpl index ca1ad702b2..22b97aad0b 100644 --- a/client/webserver/site/src/html/order.tmpl +++ b/client/webserver/site/src/html/order.tmpl @@ -40,7 +40,7 @@
[[[Offering]]]
-
{{$ord.OfferString}} {{$ord.FromTicker}} {{template "microIcon" $ord.FromTicker}}
+
{{$ord.OfferString}} {{$ord.FromTicker}} {{template "microIcon" $ord.BaseSymbol}}
[[[Asking]]]
@@ -96,7 +96,7 @@
[[[Matches]]]
-
+
[[[Match ID]]] diff --git a/client/webserver/site/src/html/orders.tmpl b/client/webserver/site/src/html/orders.tmpl index 5579f2df2e..fd0b17006e 100644 --- a/client/webserver/site/src/html/orders.tmpl +++ b/client/webserver/site/src/html/orders.tmpl @@ -89,7 +89,7 @@ {{- /* POP UP FORMS */ -}}
{{- /* DELETE ARCHIVED RECORDS FORM */ -}} -
+
[[[delete_archived_records]]]
diff --git a/client/webserver/site/src/html/register.tmpl b/client/webserver/site/src/html/register.tmpl index 72e0b53061..ddb4f31d90 100644 --- a/client/webserver/site/src/html/register.tmpl +++ b/client/webserver/site/src/html/register.tmpl @@ -4,42 +4,42 @@
{{- /* LOGIN FORM */ -}} - + {{template "loginForm"}} {{- /* RESET APP PASSWORD */ -}} -
+ {{template "appPassResetForm"}} {{- /* Form to set up a wallet. Shown on demand when a user clicks a setupWallet button. */ -}} -
+ {{template "newWalletForm" }} {{- /* DEX ADDRESS FORM */ -}} -
+ {{template "dexAddrForm" .}} {{- /* DISCOVER ACCOUNT FORM */ -}} -
+ {{template "discoverAcctForm" .}} {{- /* REG ASSET SELECTOR */ -}} -
+ {{template "regAssetForm"}} {{- /* CONFIRM FEE PAYMENT */ -}} -
+ {{template "confirmRegistrationForm"}} {{- /* SYNC AND BALANCE FORM */ -}} -
+ {{template "waitingForWalletForm"}} diff --git a/client/webserver/site/src/html/settings.tmpl b/client/webserver/site/src/html/settings.tmpl index c79a95d341..dd42d661bc 100644 --- a/client/webserver/site/src/html/settings.tmpl +++ b/client/webserver/site/src/html/settings.tmpl @@ -3,8 +3,8 @@ {{$passwordIsCached := .UserInfo.PasswordIsCached}} {{$authed := .UserInfo.Authed}}
-
-
+
+
@@ -802,7 +802,7 @@ {{- /* SET VOTES */ -}} - +
{{- /* AGENDAS */ -}} @@ -822,7 +822,7 @@ {{- /* TREASURY SPENDS */ -}} -
[[[Treasury Spends]]]
+
[[[Treasury Spends]]]
@@ -844,7 +844,7 @@
{{- /* TREASURY KEYS */ -}} -
[[[Treasury Keys]]]
+
[[[Treasury Keys]]]
diff --git a/client/webserver/site/src/js/charts.ts b/client/webserver/site/src/js/charts.ts index f9a57385d4..b12e9d6a17 100644 --- a/client/webserver/site/src/js/charts.ts +++ b/client/webserver/site/src/js/charts.ts @@ -103,8 +103,8 @@ interface Theme { const darkTheme: Theme = { axisLabel: '#b1b1b1', - gridBorder: '#383f4b', - gridLines: '#383f4b', + gridBorder: '#383f4b80', + gridLines: '#383f4b80', gapLine: '#6b6b6b', value: '#9a9a9a', zoom: '#5b5b5b', diff --git a/client/webserver/site/src/js/doc.ts b/client/webserver/site/src/js/doc.ts index 277a1bee2d..e5dea0517e 100644 --- a/client/webserver/site/src/js/doc.ts +++ b/client/webserver/site/src/js/doc.ts @@ -235,6 +235,23 @@ export default class Doc { return !el.classList.contains('d-hide') } + /* + * conceal hides the specified elements while keeping the element's display + * attribute unchanged. This is accomplished by adding the d-conceal + * class to the element. Use Doc.reveal to undo. + */ + static conceal (...els: Element[]) { + for (const el of els) el.classList.add('d-conceal') + } + + /* + * reveal shows the specified elements. This is accomplished by removing the + * d-conceal class as added with Doc.conceal. + */ + static reveal (...els: Element[]) { + for (const el of els) el.classList.remove('d-conceal') + } + /* * animate runs the supplied function, which should be a "progress" function * accepting one argument. The progress function will be called repeatedly diff --git a/client/webserver/site/src/js/forms.ts b/client/webserver/site/src/js/forms.ts index 0163bf49c7..15bfe99b63 100644 --- a/client/webserver/site/src/js/forms.ts +++ b/client/webserver/site/src/js/forms.ts @@ -134,9 +134,11 @@ export class NewWalletForm { parentForm: parentForm } - const ani = new Wave(this.page.mainForm, { backgroundColor: true }) + Doc.conceal(...Doc.kids(this.page.mainForm)) + const ani = new Wave(this.page.mainForm, { backgroundColor: false }) const res = await postJSON('/api/newwallet', createForm) ani.stop() + Doc.reveal(...Doc.kids(this.page.mainForm)) return res } diff --git a/client/webserver/site/src/js/markets.ts b/client/webserver/site/src/js/markets.ts index bc7b789ca0..59f696e0f6 100644 --- a/client/webserver/site/src/js/markets.ts +++ b/client/webserver/site/src/js/markets.ts @@ -1559,7 +1559,7 @@ export default class MarketsPage extends BasePage { unreadyOrders = true } header.sideLight.classList.add(ord.sell ? 'sell' : 'buy') - if (!isActive) header.sideLight.classList.add('inactive') + if (!isActive) div.classList.add('inactive') details.side.textContent = mord.header.side.textContent = OrderUtil.sellString(ord) details.side.classList.add(ord.sell ? 'sellcolor' : 'buycolor') header.side.classList.add(ord.sell ? 'sellcolor' : 'buycolor')