diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index 0d3a3e92..e56c994e 100644 --- a/.storybook/webpack.config.js +++ b/.storybook/webpack.config.js @@ -2,21 +2,34 @@ const path = require('path') const webpack = require('webpack') const AntdScssThemePlugin = require('antd-scss-theme-plugin') const WorkerPlugin = require('worker-plugin') +const _ = require('lodash/fp') -const disableEslint = (e) => { +const disableEslint = (config) => { return ( - e.module.rules + config.module.rules .filter((e) => e.use && e.use.some((e) => e.options && void 0 !== e.options.useEslintrc)) .forEach((s) => { - e.module.rules = e.module.rules.filter((e) => e !== s) + config.module.rules = config.module.rules.filter((e) => e !== s) }), - e + config ) } +const setScssRoot = (config, path) => + config.module.rules + .filter((rule) => rule.use) + .map((rule) => rule.use) + .forEach((use) => { + use + .filter((item) => _.isObject(item) && item.loader.includes('resolve-url-loader')) + .forEach((item) => (item.options.root = path)) + }) + module.exports = ({config}) => { config = disableEslint(config) + setScssRoot(config, path.join(__dirname, '../src')) + config.plugins.push(new AntdScssThemePlugin('./src/vars.scss')) config.plugins.push(new WorkerPlugin()) config.plugins.push( diff --git a/config-overrides.js b/config-overrides.js index d764104b..26287b35 100644 --- a/config-overrides.js +++ b/config-overrides.js @@ -1,3 +1,4 @@ +const path = require('path') const { override, fixBabelImports, @@ -7,6 +8,7 @@ const { } = require('customize-cra') const AntdScssThemePlugin = require('antd-scss-theme-plugin') const WorkerPlugin = require('worker-plugin') +const _ = require('lodash/fp') // // This method returns the loaders from create-react-app's webpack config @@ -55,6 +57,20 @@ const addRawImages = () => (config) => { return config } +const setScssRoot = (path) => (config) => { + getLoaders(config) + .filter((rule) => rule.use) + .map((rule) => rule.use) + .forEach((use) => { + use + .filter((item) => _.isObject(item) && item.loader.includes('resolve-url-loader')) + .forEach((loader) => { + loader.options.root = path + }) + }) + return config +} + module.exports = override( addWebpackPlugin(new AntdScssThemePlugin('./src/vars.scss')), addWebpackPlugin(new WorkerPlugin()), @@ -63,6 +79,7 @@ module.exports = override( libraryDirectory: 'es', style: true, }), + setScssRoot(path.join(__dirname, 'src')), addLessLoader(), addRawImages(), disableEsLint(), diff --git a/src/App.scss b/src/App.scss index bc5c3fec..0ac9f804 100644 --- a/src/App.scss +++ b/src/App.scss @@ -4,10 +4,11 @@ display: grid; grid-template-columns: auto 1fr; overflow: hidden; - transition: background-position 0.3s; + transition: background-position $bg-transition-duration; background-repeat: no-repeat; background-position: 100% top; background-size: contain; + font-weight: 500; &.wallets { background-position: 125% top; diff --git a/src/Settings.scss b/src/Settings.scss index 6d208473..20f9351d 100644 --- a/src/Settings.scss +++ b/src/Settings.scss @@ -13,13 +13,13 @@ .settings-label { margin-bottom: 0.5rem; - font-size: $font-size-xs; + font-size: $font-size-s; text-transform: uppercase; } .settings-note { margin-bottom: 0.6rem; - font-size: $font-size-xs; + font-size: $font-size-s; @include themify($themes) { color: themed('inactive-text-color'); diff --git a/src/address-book/AddressBook.scss b/src/address-book/AddressBook.scss index 48ecbe02..888bebbf 100644 --- a/src/address-book/AddressBook.scss +++ b/src/address-book/AddressBook.scss @@ -1,30 +1,12 @@ @import '../partial', '../vars'; .AddressBook { - margin-top: $router-top-margin; - .toolbar { display: grid; grid-template-columns: auto 1fr auto; - margin-bottom: $dialog-component-spacing; + margin-bottom: 3rem; + padding-top: $router-top-margin; line-height: 30px; - - .line { - @extend %line; - } - - .action { - display: inline-block; - min-width: 126px; - height: 30px; - margin-left: 1rem; - font-size: $font-size-s; - font-weight: bold; - letter-spacing: $letter-spacing-large; - text-align: center; - text-transform: uppercase; - vertical-align: middle; - } } .address-list { @@ -48,6 +30,7 @@ text-align: right; > span { + @extend %disable-focus-outline; padding: 0.25em; cursor: pointer; } diff --git a/src/address-book/AddressBook.tsx b/src/address-book/AddressBook.tsx index 99bc47a2..e0af1c22 100644 --- a/src/address-book/AddressBook.tsx +++ b/src/address-book/AddressBook.tsx @@ -190,21 +190,20 @@ const _AddressBook = ({ return (
+
+ +
-
-
- -
{sortedLabels.length === 0 ? ( diff --git a/src/address-book/DialogAddressSelect.scss b/src/address-book/DialogAddressSelect.scss index 942b0cf3..0be535a2 100644 --- a/src/address-book/DialogAddressSelect.scss +++ b/src/address-book/DialogAddressSelect.scss @@ -22,11 +22,9 @@ width: 100%; height: $dialog-component-height; min-height: $dialog-component-height; - border-radius: $dialog-component-border-radius; + border: none; @include themify($themes) { - border: 1px solid themed('dialog-dark-input-bg'); - background-color: themed('dialog-dark-input-bg'); color: themed('secondary-text-color'); } } @@ -34,7 +32,6 @@ .ant-select-selector { width: 100%; height: $dialog-component-height; - margin-top: 1px; .ant-select-selection-search-input { line-height: 3; @@ -46,7 +43,8 @@ .ant-select-selection-item { max-width: 120px; - padding-top: 6px; + padding-top: 8px; + font-weight: 500; } } } diff --git a/src/assets/bg-base-dark.png b/src/assets/bg-base-dark.png index bbc448bf..8737b327 100644 Binary files a/src/assets/bg-base-dark.png and b/src/assets/bg-base-dark.png differ diff --git a/src/assets/bg-moving-dark.png b/src/assets/bg-moving-dark.png index 77f1b8d5..25db6252 100644 Binary files a/src/assets/bg-moving-dark.png and b/src/assets/bg-moving-dark.png differ diff --git a/src/common/BorderlessInput.scss b/src/common/BorderlessInput.scss index 57b4a36a..510b9a93 100644 --- a/src/common/BorderlessInput.scss +++ b/src/common/BorderlessInput.scss @@ -11,8 +11,8 @@ resize: none; @include themify($themes) { - border: 1px solid themed('normal-color'); - background-color: themed('normal-color'); + border: 1px solid themed('text-color'); + background-color: themed('dialog-dark-input-bg'); color: themed('text-color'); } @@ -23,7 +23,7 @@ &:hover, &:focus { @include themify($themes) { - background-color: themed('normal-color'); + background-color: themed('dialog-dark-input-bg'); color: themed('text-color'); } } diff --git a/src/common/Dialog.scss b/src/common/Dialog.scss index 3b0ea896..1fe44f6b 100644 --- a/src/common/Dialog.scss +++ b/src/common/Dialog.scss @@ -1,7 +1,5 @@ @import '../themify', '../vars', '../partial'; -$dialog-width: 530px; - .Dialog { width: $dialog-width; margin: auto; @@ -24,6 +22,38 @@ $dialog-width: 530px; .actions { &.grid { @extend %two-col-grid-template; + + %diagonal-template { + @extend %diagonal-before-after-common; + z-index: unset; + top: 0px; + height: 48px; + opacity: 1; + } + + .ant-btn { + &.left { + margin-left: $diagonal-part-width; + padding: 0 $diagonal-part-width/2 0 0; + + &::before { + @extend %diagonal-template; + left: -15px; + transform: skew(20deg); + } + } + + &.right { + margin-right: $diagonal-part-width; + padding: 0 0 0 $diagonal-part-width/2; + + &::after { + @extend %diagonal-template; + right: -15px; + transform: skew(-20deg); + } + } + } } &.natural > * { diff --git a/src/common/Dialog.tsx b/src/common/Dialog.tsx index ff3b67e8..2d8def83 100644 --- a/src/common/Dialog.tsx +++ b/src/common/Dialog.tsx @@ -120,6 +120,7 @@ const _Dialog: FunctionComponent = ({ loading: leftInProgress, children: t(['common', 'button', 'cancel']), ...leftButtonProps, + className: rightButtonProps?.className || 'left', onClick: createHandleClick(leftButtonProps, setLeftInProgress, skipValidationLeft), } @@ -130,6 +131,7 @@ const _Dialog: FunctionComponent = ({ children: t(['common', 'button', 'next']), loading: rightInProgress, ...rightButtonProps, + className: rightButtonProps?.className || 'right', onClick: createHandleClick(rightButtonProps, setRightInProgress, skipValidationRight), } diff --git a/src/common/MantisModal.scss b/src/common/MantisModal.scss index f306e5ac..d351dfaa 100644 --- a/src/common/MantisModal.scss +++ b/src/common/MantisModal.scss @@ -5,18 +5,24 @@ color: themed('text-color'); } + .ant-modal-body { + padding: $modal-body-padding; + } + .ant-modal-content { border-radius: $dialog-component-border-radius * 2; box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.4), 0 6px 16px 0 rgba(0, 0, 0, 0.01), 0 9px 28px 8px rgba(0, 0, 0, 0.2); @include themify($themes) { - background-color: themed('modal-background'); + background: themed('bg-moving'), themed('modal-background'); + background-position: right top; + background-size: cover; } } .ant-modal-close { - margin: 29px 46px 0 0; + margin: 29px 22px 0 0; } .ant-modal-footer { diff --git a/src/common/dialog/DialogError.scss b/src/common/dialog/DialogError.scss index 32f77784..f8f07e79 100644 --- a/src/common/dialog/DialogError.scss +++ b/src/common/dialog/DialogError.scss @@ -4,7 +4,7 @@ margin-bottom: $dialog-component-spacing; padding: 15px; border-radius: $dialog-component-border-radius; - font-size: $font-size-xs; + font-size: $font-size-s; text-align: center; @include themify($themes) { diff --git a/src/common/dialog/DialogFee.scss b/src/common/dialog/DialogFee.scss index db9a1b35..b5f2dee8 100644 --- a/src/common/dialog/DialogFee.scss +++ b/src/common/dialog/DialogFee.scss @@ -14,8 +14,6 @@ .options .button.inactive, .options .button.custom { - opacity: $unselected-opacity; - @include themify($themes) { background-color: themed('input-bg'); color: themed('text-color'); @@ -55,15 +53,15 @@ display: grid; grid-template-columns: 0 1fr 1fr 1fr 1fr; height: $dialog-component-height; - border-radius: $dialog-component-border-radius + 0.1rem; + border-radius: $dialog-component-border-radius; @include themify($themes) { - border: 1px solid themed('input-bg'); + border: 1px solid themed('text-color'); } .dark & { @include themify($themes) { - border: 1px solid themed('dialog-dark-input-bg'); + border: 1px solid themed('text-color'); } } @@ -74,7 +72,13 @@ padding: 0; border-radius: 0; font-size: $font-size-s; + letter-spacing: -0.01em; text-align: center; + text-transform: uppercase; + + @include themify($themes) { + background-color: themed('primary-color'); + } &.custom { border-radius: $dialog-component-border-radius 0 0 $dialog-component-border-radius; @@ -96,7 +100,7 @@ } .fee-amount { - font-size: $font-size-xs; + font-size: 8px; } } diff --git a/src/common/dialog/DialogInput.scss b/src/common/dialog/DialogInput.scss index a2166523..4daf0790 100644 --- a/src/common/dialog/DialogInput.scss +++ b/src/common/dialog/DialogInput.scss @@ -28,7 +28,7 @@ .dark & { .ant-input { @include themify($themes) { - border: 1px solid themed('dialog-dark-input-bg'); + border: 1px solid themed('text-color'); background-color: themed('dialog-dark-input-bg'); color: themed('secondary-text-color'); } diff --git a/src/common/dialog/DialogMessage.scss b/src/common/dialog/DialogMessage.scss index e806358a..89a042b4 100644 --- a/src/common/dialog/DialogMessage.scss +++ b/src/common/dialog/DialogMessage.scss @@ -8,7 +8,7 @@ } .description { - font-size: $font-size-s; + font-size: $font-size-m; } &.highlight .description { diff --git a/src/common/dialog/DialogPassword.scss b/src/common/dialog/DialogPassword.scss index b1003f91..c206f4eb 100644 --- a/src/common/dialog/DialogPassword.scss +++ b/src/common/dialog/DialogPassword.scss @@ -19,7 +19,7 @@ .criteria { margin-top: 5px; opacity: $secondary-opacity; - font-size: $font-size-xs; + font-size: $font-size-s; font-weight: bold; } diff --git a/src/common/dialog/DialogSecrets.scss b/src/common/dialog/DialogSecrets.scss index e94bbcc0..e3fe3ae7 100644 --- a/src/common/dialog/DialogSecrets.scss +++ b/src/common/dialog/DialogSecrets.scss @@ -12,7 +12,7 @@ display: inline-block; padding: 0 1em; - font-size: $font-size-xs; + font-size: $font-size-s; text-transform: uppercase; cursor: pointer; diff --git a/src/common/dialog/DialogShowAmount.scss b/src/common/dialog/DialogShowAmount.scss index 1ff13166..3cf5c706 100644 --- a/src/common/dialog/DialogShowAmount.scss +++ b/src/common/dialog/DialogShowAmount.scss @@ -27,6 +27,12 @@ border-radius: $dialog-component-border-radius; cursor: not-allowed; + @include themify($themes) { + border: 1px solid themed('text-color'); + background-color: themed('dialog-dark-input-bg'); + color: themed('text-color'); + } + .logo { width: 27px; @@ -45,12 +51,6 @@ white-space: nowrap; } - @include themify($themes) { - border: 1px solid themed('dialog-dark-input-bg'); - background-color: themed('dialog-dark-input-bg'); - color: themed('secondary-text-color'); - } - &.invalid { @include themify($themes) { border: 1px solid themed('error-color'); diff --git a/src/common/wallet-state.ts b/src/common/wallet-state.ts index becd13e5..cdb890b4 100644 --- a/src/common/wallet-state.ts +++ b/src/common/wallet-state.ts @@ -279,6 +279,7 @@ function useWalletState(initialState?: Partial): WalletData { )(syncStatusOption) const reset = (status: WalletStatus = 'INITIAL'): void => { + rendererLog.debug(`new walletStatus ${status}`) setWalletStatus(status) setTotalBalance(none) setAvailableBalance(none) diff --git a/src/index.scss b/src/index.scss index 29996eb2..aec2dd20 100644 --- a/src/index.scss +++ b/src/index.scss @@ -5,7 +5,7 @@ // fonts // -@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&family=Montserrat:wght@300;400;600;700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&family=Montserrat:wght@300;400;500;600;700&display=swap'); // // elements @@ -116,12 +116,22 @@ div#root { @include themify($themes) { background-color: themed('btn-default-bg'); color: themed('secondary-background'); + + &::after, + &::before { + background-color: themed('btn-default-bg'); + } } &:focus { @include themify($themes) { background-color: themed('btn-focus-bg'); color: themed('secondary-background'); + + &::after, + &::before { + background-color: themed('btn-focus-bg'); + } } } @@ -129,6 +139,11 @@ div#root { @include themify($themes) { background-color: themed('btn-hover-bg'); color: themed('secondary-background'); + + &::after, + &::before { + background-color: themed('btn-hover-bg'); + } } } } @@ -138,12 +153,22 @@ div#root { @include themify($themes) { background-color: themed('primary-color'); color: #000; + + &::after, + &::before { + background-color: themed('primary-color'); + } } &.secondary { @include themify($themes) { background-color: themed('secondary-background'); color: themed('text-color'); + + &::after, + &::before { + background-color: themed('secondary-background'); + } } &:hover, @@ -151,6 +176,11 @@ div#root { @include themify($themes) { background-color: themed('normal-color'); color: themed('text-color'); + + &::after, + &::before { + background-color: themed('normal-color'); + } } } } @@ -184,6 +214,13 @@ div#root { background-color: themed('btn-disabled-bg'); color: rgba(0, 0, 0, 0.4); } + + &::after, + &::before { + @include themify($themes) { + background-color: themed('btn-disabled-bg'); + } + } } // antd checkbox @@ -202,6 +239,14 @@ div#root { } } +// antd select + +.ant-select-single:not(.ant-select-customize-input) .ant-select-selector { + @include themify($themes) { + border: 1px solid themed('text-color') !important; + } +} + // antd Popover theme overrides .ant-popover-inner-content { font-size: $font-size-s; @@ -281,7 +326,7 @@ div#root { // modal .ant-modal-mask { @include themify($themes) { - background-color: rgba(themed('component-background'), 0.75); + background-color: rgba(themed('modal-mask'), 0.6); } } @@ -299,32 +344,55 @@ input::placeholder { .Mantis { .ant-btn { + $transition: all $transition-duration cubic-bezier(0.645, 0.045, 0.355, 1); + height: $dialog-component-height; padding: 0 15px; + transition: $transition; border-radius: $dialog-component-border-radius; font-size: $font-size-button; font-weight: bold; letter-spacing: $letter-spacing-medium; text-align: center; text-shadow: none; - text-transform: uppercase; + + &.right-diagonal::before, + &.left-diagonal::after { + transition: $transition; + opacity: 1; + } + + &.right-diagonal::before { + // Default antd values conflicted with + top: unset; + bottom: unset; + } &.small-button { height: 30px; margin: 0.5rem 0; - font-size: $font-size-xs; + font-size: $font-size-s; letter-spacing: initial; } .ant-btn-loading-icon { transform: translateX(-10px); } + + &::before, + &::after { + transition: $transition; + } } // antd Wave animation override (e.g. Button click) - [ant-click-animating-without-extra-node='true']::after, - .ant-click-animating-node { - opacity: $secondary-opacity; + [ant-click-animating-without-extra-node]:after { + left: unset; + -webkit-animation: none !important; + -moz-animation: none !important; + -o-animation: none !important; + -ms-animation: none !important; + animation: none !important; } .ant-form-item { @@ -349,6 +417,8 @@ input::placeholder { } .ant-input { + @extend %input-font-base; + &::-webkit-outer-spin-button, &::-webkit-inner-spin-button { -webkit-appearance: none; @@ -359,4 +429,54 @@ input::placeholder { input[type='number'] { -moz-appearance: textfield; } + + [ant-click-animating-without-extra-node]::after { + -webkit-animation: none !important; + -moz-animation: none !important; + -o-animation: none !important; + -ms-animation: none !important; + animation: none !important; + } +} + +// Header buttons + +.main-buttons { + $button-width: 125px; + $space-between: 10px; + + position: absolute; + right: 0; + + .action { + display: inline-block; + position: relative; + z-index: 1; + width: $button-width; + height: $button-height; + margin-right: $diagonal-part-width + $space-between; + font-size: $font-size-s; + font-weight: bold; + line-height: $button-height; + text-align: center; + vertical-align: middle; + } + + .left-diagonal { + padding: 0 0 0 15px; + + &::after { + @extend %diagonal-before-after-common; + right: -15px; + } + } + + .right-diagonal { + padding: 0 15px 0 0; + + &::before { + @extend %diagonal-before-after-common; + left: -15px; + } + } } diff --git a/src/layout/Sidebar.scss b/src/layout/Sidebar.scss index 92443863..2d16a004 100644 --- a/src/layout/Sidebar.scss +++ b/src/layout/Sidebar.scss @@ -63,11 +63,11 @@ display: block; z-index: $zindex-sidebar; - transform: scale(0.5); + transform: scale(0.3); transform-origin: center left; transition: transform 0.3s ease-out; opacity: 0.6; - font-size: 30px; + font-size: 40px; font-weight: 600; letter-spacing: $link-letter-spacing; line-height: 70px; diff --git a/src/main/main.ts b/src/main/main.ts index a31cacbd..a5b5d1be 100644 --- a/src/main/main.ts +++ b/src/main/main.ts @@ -40,6 +40,9 @@ import {Language} from '../shared/i18n' const IS_LINUX = os.type() == 'Linux' const LINUX_ICON = path.join(__dirname, '/../icon.png') +// Force sRGB +app.commandLine.appendSwitch('force-color-profile', 'srgb') + // Keep a global reference of the window object, if you don't, the window will // be closed automatically when the JavaScript object is garbage collected. let mainWindowHandle: BrowserWindow | null = null diff --git a/src/main/util.ts b/src/main/util.ts index 39603169..8132134b 100644 --- a/src/main/util.ts +++ b/src/main/util.ts @@ -1,7 +1,7 @@ // Typed wrapper for listening to IPC events import {app, ipcMain, dialog} from 'electron' import {IPCFromRendererChannelName} from '../shared/ipc-types' -import {MANTIS_WALLET_VERSION} from '../shared/version' +import {EDITION, MANTIS_WALLET_VERSION} from '../shared/version' import {TFunctionMain} from './i18n' import {displayNameOfNetworkMain} from '../config/type' @@ -14,7 +14,7 @@ export function ipcListenToRenderer( export function getTitle(t: TFunctionMain, networkType?: string): string { const networkName = displayNameOfNetworkMain(networkType || '', t) - return `${t(['title', 'mantisWallet'])} — ${MANTIS_WALLET_VERSION} — ${networkName}` + return `${t(['title', 'mantisWallet'])} — ${MANTIS_WALLET_VERSION} ${EDITION} — ${networkName}` } export function showErrorBox(t: TFunctionMain, title: string, content: string): void { diff --git a/src/partial.scss b/src/partial.scss index f100a054..08be2018 100644 --- a/src/partial.scss +++ b/src/partial.scss @@ -1,129 +1,30 @@ @import './themify', './vars'; -%status-steps { - display: grid; - height: 30px; - padding: 0 14px; - font-size: $font-size-xs; - font-weight: bold; - - @include themify($themes) { - color: themed('secondary-text-color'); - } - - .progress { - display: inline-block; - position: relative; - padding-left: 25px; - - .icon { - position: absolute; - left: 2px; - width: 20px; - height: 15px; - padding-right: 5px; - font-size: 15px; - - &.unknown { - padding: 0; - } - } - - .checked { - @include themify($themes) { - fill: themed('success-color'); - color: themed('text-color'); - } - } - - .inProgress { - left: 3px; - - @include themify($themes) { - stroke: themed('text-color'); - fill: themed('text-color'); - color: themed('text-color'); - } - } - - .stopped { - @include themify($themes) { - stroke: themed('warning-color'); - fill: themed('warning-color'); - color: themed('text-color'); - } - } - - .fail { - @include themify($themes) { - color: themed('error-text'); - } - } - } - - .ProgressBar { - position: relative; - top: -3px; - padding: 0 5px; - } - - .line { - @extend %line; - - position: relative; - top: -8px; - - @include themify($themes) { - background-color: themed('secondary-text-color'); - } - - .percentage { - position: absolute; - top: 10px; - left: 50%; - transform: translate(-50%, -50%); - - @include themify($themes) { - color: themed('text-color'); - } - } - } -} - -%line { - content: ''; - display: inline-block; - height: 1px; - margin: 15px 15px 0; - opacity: $secondary-opacity; - line-height: 1px; - vertical-align: middle; - - @include themify($themes) { - background-color: themed('border-color-base'); - } -} - %ellipsize { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -%dialog-label { +%_dialog-label-base { height: $dialog-label-height; - font-size: $font-size-xs; + font-weight: 500; +} + +%dialog-label { + @extend %_dialog-label-base; + font-size: $font-size-s; letter-spacing: $letter-spacing-small; - text-transform: uppercase; cursor: pointer; + user-select: none; } %dialog-input-inline-error { + @extend %_dialog-label-base; position: absolute; top: -1 * $dialog-label-height; right: 0; - height: $dialog-label-height; - font-size: $font-size-xs; + font-size: $font-size-s - 1px; text-align: right; @include themify($themes) { @@ -165,10 +66,11 @@ } %title { - margin-bottom: $dialog-component-spacing; + margin-bottom: 2rem; + margin-left: -3rem; overflow: hidden; - font-size: $font-size-title; - font-weight: bold; + font-size: 26px; + font-weight: 500; letter-spacing: $letter-spacing-small; } @@ -220,6 +122,20 @@ %two-col-grid-template { display: grid; - grid-column-gap: 1rem; + grid-column-gap: 2.5rem; grid-template-columns: 1fr 1fr; } + +%input-font-base { + font-weight: 500; +} + +%diagonal-before-after-common { + content: ''; + display: inline-block; + position: absolute; + z-index: -1; + width: $diagonal-part-width; + height: $button-height; + transform: skew(20deg); +} diff --git a/src/themes.scss b/src/themes.scss index 68bfc6b1..688fec0a 100644 --- a/src/themes.scss +++ b/src/themes.scss @@ -1,6 +1,6 @@ @import './vars'; -$dark-text-color: #f7f7f7; +$dark-text-color: #fff; $dark-normal-color: #303030; $dark-secondary-background: #000; $dark-btn-bg: #e9e9e9; @@ -35,10 +35,11 @@ $themes: ( error-background-color: $error-background-color, warning-color: $warning-color, component-background: $dark-component-background, - modal-background: $dark-secondary-background, + modal-background: #1a1a1a, link-color: $dark-text-color, tertiary-background: #707070, - dialog-dark-input-bg: $dark-component-background, + dialog-dark-input-bg: transparent, + input-bg: transparent, quaternary-background: $dark-component-background, secondary-text-color: #b5b5b5, border-color-base: $dark-text-color, @@ -46,10 +47,10 @@ $themes: ( btn-disabled-bg: darken($dark-btn-bg, 20%), btn-focus-bg: lighten($dark-btn-bg, 10%), btn-hover-bg: lighten($dark-btn-bg, 20%), - input-bg: $dark-normal-color, sidebar-link-color: $primary-color, - bg-base: url('./assets/bg-base-dark.png'), - bg-moving: url('./assets/bg-moving-dark.png'), + bg-base: url('/assets/bg-base-dark.png'), + bg-moving: url('/assets/bg-moving-dark.png'), + modal-mask: #000, ), light: ( text-color: $light-text-color, @@ -69,7 +70,8 @@ $themes: ( modal-background: #ffffff, link-color: $light-text-color, tertiary-background: #6b6b6b, - dialog-dark-input-bg: #f5f5f5, + dialog-dark-input-bg: transparent, + input-bg: transparent, quaternary-background: #fafafa, secondary-text-color: #545454, border-color-base: $light-text-color, @@ -77,9 +79,9 @@ $themes: ( btn-disabled-bg: lighten($light-btn-bg, 50%), btn-focus-bg: darken($light-btn-bg, 10%), btn-hover-bg: darken($light-btn-bg, 20%), - input-bg: $light-normal-color, sidebar-link-color: $light-text-color, - bg-base: url('./assets/bg-base-light.png'), - bg-moving: url('./assets/bg-moving-light.png'), + bg-base: url('/assets/bg-base-light.png'), + bg-moving: url('/assets/bg-moving-light.png'), + modal-mask: #fff, ), ); diff --git a/src/vars.scss b/src/vars.scss index 72555638..5e6c7833 100644 --- a/src/vars.scss +++ b/src/vars.scss @@ -6,7 +6,7 @@ $app-padding-horizontal: 40px; $router-top-margin: 10rem; // Font sizes -$font-size-xs: 10px; +$font-size-xs: 10px; // Only use xs if really necessary $font-size-s: 12px; $font-size-m: 14px; $font-size-l: 16px; @@ -29,24 +29,30 @@ $checkbox-size: 20px; $main-content-padding: 64px; $transition-duration: 0.3s; +$bg-transition-duration: 0.5s; $wave-animation-width: 6px; $sidebar-width: 500px; // Dialog / Modal -$modal-body-padding: 42px 64px 53px; +$dialog-width: 625px; +$modal-body-padding: 42px 96px 53px; $dialog-spacing-before-buttons: 1.6rem; -$dialog-label-height: 20px; +$dialog-label-height: 23px; $dialog-component-height: 3rem; $dialog-component-spacing: 1.5rem; -$dialog-component-border-radius: 0.5rem; +$dialog-component-border-radius: 0; // Default letter spacings $letter-spacing-small: 0.03em; $letter-spacing-medium: 0.06em; $letter-spacing-large: 0.09em; +// Diagonal button +$diagonal-part-width: 30px; +$button-height: 50px; + // antd uses z-index of 10xx for modals, tooltips, etc // let's keep sidebar under them $zindex-sidebar: 900; diff --git a/src/wallets/NoWallet.scss b/src/wallets/NoWallet.scss index 1497a006..348dbce1 100644 --- a/src/wallets/NoWallet.scss +++ b/src/wallets/NoWallet.scss @@ -9,6 +9,10 @@ height: 100%; > .Dialog { - width: 500px; + width: 800px; + + .title { + margin-left: 0; + } } } diff --git a/src/wallets/NoWallet.tsx b/src/wallets/NoWallet.tsx index 92485a99..45fdfb42 100644 --- a/src/wallets/NoWallet.tsx +++ b/src/wallets/NoWallet.tsx @@ -12,7 +12,6 @@ export const NoWallet: FunctionComponent<{}> = () => {
+
+ + +
-
▼{' '} - -
-
diff --git a/src/wallets/Wallets.tsx b/src/wallets/Wallets.tsx index 51db7fab..64024adc 100644 --- a/src/wallets/Wallets.tsx +++ b/src/wallets/Wallets.tsx @@ -4,6 +4,7 @@ import {Navigate} from '../layout/Router' import {Loading} from '../common/Loading' import {WalletError} from './WalletErrorScreen' import {Wallet} from './Wallet' +import {rendererLog} from '../common/logger' export const Wallets = (): JSX.Element => { const walletState = WalletState.useContainer() @@ -12,6 +13,8 @@ export const Wallets = (): JSX.Element => { if (walletState.walletStatus === 'INITIAL') { walletState.refreshSyncStatus() } + + rendererLog.debug(`walletStatus: ${walletState.walletStatus}`) }, [walletState.walletStatus]) switch (walletState.walletStatus) {