diff --git a/qortal-ui-plugins/plugins/core/wallet/wallet-app.src.js b/qortal-ui-plugins/plugins/core/wallet/wallet-app.src.js index 07de779c..ae817975 100644 --- a/qortal-ui-plugins/plugins/core/wallet/wallet-app.src.js +++ b/qortal-ui-plugins/plugins/core/wallet/wallet-app.src.js @@ -18,6 +18,7 @@ import '@material/mwc-dialog' import '@material/mwc-formfield' import '@material/mwc-icon' import '@material/mwc-icon-button' +import '@material/mwc-tab-bar' import '@material/mwc-textfield' import '@polymer/paper-progress/paper-progress.js' import '@polymer/paper-slider/paper-slider.js' @@ -60,19 +61,18 @@ class MultiWallet extends LitElement { arrrAmount: { type: Number }, arrrMemo: { type: String }, errorMessage: { type: String }, + arrrWalletAddress: { type: String }, successMessage: { type: String }, sendMoneyLoading: { type: Boolean }, btnDisable: { type: Boolean }, isValidAmount: { type: Boolean }, balance: { type: Number }, + balanceString: { type: String }, btcFeePerByte: { type: Number }, ltcFeePerByte: { type: Number }, dogeFeePerByte: { type: Number }, dgbFeePerByte: { type: Number }, rvnFeePerByte: { type: Number }, - balanceString: { type: String }, - arrrWalletAddress: { type: String }, - exportErrorMessage: { type: String }, qortBook: { type: Array }, btcBook: { type: Array }, ltcBook: { type: Array }, @@ -159,6 +159,21 @@ class MultiWallet extends LitElement { cursor: default; } + #tabs-height { + --mdc-tab-height: 50px; + } + + #tabs-1-content { + height: 100%; + padding-bottom: 10px; + } + + mwc-tab-bar { + --mdc-text-transform: none; + --mdc-tab-color-default: var(--black); + --mdc-tab-text-label-color-default: var(--black); + } + paper-slider.blue { --paper-slider-knob-color: var(--paper-light-blue-500); --paper-slider-active-color: var(--paper-light-blue-500); @@ -196,6 +211,10 @@ class MultiWallet extends LitElement { font-family: 'Roboto Mono', monospace; } + .sans { + font-family: 'Open Sans', sans-serif; + } + .weight-100 { font-weight: 100; } @@ -273,25 +292,37 @@ class MultiWallet extends LitElement { -moz-osx-font-smoothing: grayscale; } - h2 { margin: 0; + color: var(--black); font-weight: 400; font: 24px/24px 'Open Sans', sans-serif; } h3 { margin: 0 0 5px; + color: var(--black); font-weight: 600; font-size: 18px; line-height: 18px; } - @media (min-width: 765px) { - .wrapper { - display: grid; - grid-template-columns: 0.5fr 3.5fr; - } + .hrstyle { + color: var(--border); + border-radius: 80%; + margin-bottom: 1rem; + } + + .header-title { + font-size: 32px; + color: var(--black); + font-weight: 600; + text-align: center; + margin-top: 1rem; + } + + .fullWidth { + width: 100%; } .wrapper { @@ -405,19 +436,6 @@ class MultiWallet extends LitElement { display: inline-block; } - .currency-box { - display: flex; - background-color: var(--white); - text-align: center; - padding: 12px; - cursor: pointer; - transition: 0.1s ease-in-out; - } - - .currency-box:not(:last-child) { - border-bottom: var(--border); - } - .active { background: var(--menuactive); } @@ -432,27 +450,6 @@ class MultiWallet extends LitElement { filter: grayscale(100%); } - .currency-box.active .currency-image, - .currency-box:hover .currency-image { - filter: none; - } - - .currency-box:hover { - background: var(--menuhover); - } - - .currency-box.active, - .currency-box:hover .currency-text { - font-weight: 500; - } - - .currency-text { - margin: auto 0; - margin-left: 8px; - font-size: 20px; - color: var(--black); - } - .qort .currency-image { background-image: url('/img/qort.png'); } @@ -572,9 +569,6 @@ class MultiWallet extends LitElement { .cards { margin-top: 25px; } - .currency-box:nth-of-type(2) { - margin-right: 0; - } } .checkboxLabel:hover{ @@ -591,16 +585,6 @@ class MultiWallet extends LitElement { .cards { margin-top: 25px; } - .currency-box { - width: calc(50% - 25px); - max-width: 260px; - display: inline-block; - margin-right: 25px; - margin-bottom: 25px; - } - .currency-box:nth-of-type(2) { - margin-right: 0; - } } @media (max-width: 530px) { @@ -610,16 +594,6 @@ class MultiWallet extends LitElement { .cards { text-align: center; } - .currency-box { - width: calc(100% - 25px); - max-width: 260px; - } - .currency-box:nth-of-type(2) { - margin-right: 25px; - } - .currency-box:last-of-type { - margin-bottom: 0; - } .wallet-balance { font-size: 22px; } @@ -652,11 +626,8 @@ class MultiWallet extends LitElement { this.isTextMenuOpen = false this.loading = true - this.selectWallet = this.selectWallet.bind(this) - this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'; - this.exportErrorMessage = '' this.qortBook = [] this.btcBook = [] this.ltcBook = [] @@ -767,40 +738,38 @@ class MultiWallet extends LitElement { render() { return html`