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<{}> = () => {