diff --git a/src/config/variables.js b/src/config/variables.js index 944d8d19..964c3873 100644 --- a/src/config/variables.js +++ b/src/config/variables.js @@ -15,6 +15,7 @@ export const FONT_WEIGHT = { }; export const FONT_FAMILY = { + DEFAULT: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif', MONOSPACE: '"Roboto Mono", Menlo, Monaco, Consolas, "Courier New", monospace', MONOSPACE_NUMBERS: '"Roboto Zero", "Roboto Mono", Menlo, Monaco, Consolas, "Courier New", monospace', }; diff --git a/src/index.js b/src/index.js index addd2f1b..d8bfec85 100644 --- a/src/index.js +++ b/src/index.js @@ -5,7 +5,7 @@ import baseStyles from 'support/BaseStyles'; import { onBeforeUnload } from 'actions/WalletActions'; import 'styles/index.less'; import App from 'views/index'; -import store from 'support/store'; +import store from 'store'; const root: ?HTMLElement = document.getElementById('root'); if (root) { diff --git a/src/support/store/index.js b/src/store.js similarity index 100% rename from src/support/store/index.js rename to src/store.js diff --git a/src/styles/fonts.less b/src/styles/fonts.less deleted file mode 100644 index b929b9bb..00000000 --- a/src/styles/fonts.less +++ /dev/null @@ -1,174 +0,0 @@ -// custom Roboto with Zero without the thing inside, so it's more readable as number -// since 0 doesn't look too similar to 8 -@font-face { - font-family: 'Roboto Zero'; - src: url('../fonts/roboto/RobotoZero.eot') format('embedded-opentype'), - url('../fonts/roboto/RobotoZero.eot?#iefix') format('embedded-opentype'), - url('../fonts/roboto/RobotoZero.woff') format('woff'), - url('../fonts/roboto/RobotoZero.ttf') format('truetype'); -} - -@font-face { - font-family: 'Roboto Mono'; - font-style: normal; - src: url('../fonts/roboto/roboto-mono-v4-greek_cyrillic-ext_greek-ext_latin_cyrillic_vietnamese_latin-ext-regular.eot') format('embedded-opentype'), /* IE9 Compat Modes */ - url('../fonts/roboto/roboto-mono-v4-greek_cyrillic-ext_greek-ext_latin_cyrillic_vietnamese_latin-ext-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('../fonts/roboto/roboto-mono-v4-greek_cyrillic-ext_greek-ext_latin_cyrillic_vietnamese_latin-ext-regular.woff2') format('woff2'), /* Super Modern Browsers */ - url('../fonts/roboto/roboto-mono-v4-greek_cyrillic-ext_greek-ext_latin_cyrillic_vietnamese_latin-ext-regular.woff') format('woff'), /* Modern Browsers */ - url('../fonts/roboto/roboto-mono-v4-greek_cyrillic-ext_greek-ext_latin_cyrillic_vietnamese_latin-ext-regular.ttf') format('truetype'), /* Safari, Android, iOS */ - url('../fonts/roboto/roboto-mono-v4-greek_cyrillic-ext_greek-ext_latin_cyrillic_vietnamese_latin-ext-regular.svg#RobotoMono') format('svg'); /* Legacy iOS */ -} - -@font-face { - font-family: 'icomoon'; - src: url('../fonts/icomoon.eot') format('embedded-opentype'), - url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'), - url('../fonts/icomoon.woff') format('woff'), - url('../fonts/icomoon.ttf') format('truetype'), - url('../fonts/icomoon.svg#icomoon') format('svg'); -} - -@font-default: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; -@font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; -@font-family-monospace: "Roboto Mono", Menlo, Monaco, Consolas, "Courier New", monospace; -@font-family-monospace-numbers: "Roboto Zero", "Roboto Mono", Menlo, Monaco, Consolas, "Courier New", monospace; - -// ::selection, -// ::-moz-selection { -// background: @color_info_secondary; -// } - -.icomoon-base() { - display: inline-block; - font-family: 'icomoon'; - font-style: normal; - font-weight: normal; - line-height: 1; - font-size: 24px; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); -} - - - - -.icomoon-eject { - .icomoon-base(); - content: "\e902"; -} - -.icomoon-refresh { - .icomoon-base(); - content: "\e903"; -} - -.icomoon-info { - .icomoon-base(); - content: "\e904"; -} - -.icomoon-chat { - .icomoon-base(); - content: "\e905"; -} - -.icomoon-redirect { - .icomoon-base(); - content: "\e906"; -} - -.icomoon-settings { - .icomoon-base(); - content: "\e907"; -} - -.icomoon-warning { - .icomoon-base(); - content: "\e908"; -} - -.icomoon-arrow-down { - .icomoon-base(); - content: "\e909"; -} - -.icomoon-close { - .icomoon-base(); - content: "\e90a"; -} - -.icomoon-arrow-up { - .icomoon-base(); - content: "\e90b"; -} - -.icomoon-arrow-right2 { - .icomoon-base(); - content: "\e90c"; -} - -.icomoon-plus { - .icomoon-base(); - content: "\e90d"; -} - -.icomoon-arrow-right { - .icomoon-base(); - content: "\e90e"; -} - -.icomoon-help { - .icomoon-base(); - content: "\e90f"; -} - - -.icomoon-eye-error { - .icomoon-base(); - content: "\e911"; -} - -.icomoon-T1 { - .icomoon-base(); - content: "\e912"; -} - - - -.icomoon-arrow-left { - .icomoon-base(); - content: "\e91a"; -} - - -.icomoon-setmax { - .icomoon-base(); - content: "\e91b"; -} - -.icomoon-checked { - .icomoon-base(); - content: "\e91c"; -} - -.icomoon-error { - .icomoon-base(); - content: "\e91d"; -} - -.icomoon-eye { - .icomoon-base(); - content: "\e91e"; -} - -.icomoon-back { - .icomoon-base(); - content: "\e91f"; -} - -.icomoon-download { - .icomoon-base(); - content: "\e91b"; - transform: rotate(180deg) -} diff --git a/src/styles/index.less b/src/styles/index.less index 8523296b..e1dab216 100644 --- a/src/styles/index.less +++ b/src/styles/index.less @@ -1,12 +1,2 @@ -@import './fonts.less'; @import './colors.less'; -@import './mixins.less'; - -@import './reactSelect.less'; -@import './rcTooltip.less'; - -@import './send.less'; -@import './receive.less'; -@import './summary.less'; - -@import './inputs.less'; \ No newline at end of file +@import './rcTooltip.less'; \ No newline at end of file diff --git a/src/styles/inputs.less b/src/styles/inputs.less deleted file mode 100644 index 34a4206b..00000000 --- a/src/styles/inputs.less +++ /dev/null @@ -1,300 +0,0 @@ -input, textarea { - font-size: 14px; - font-weight: 300; - line-height: 1.42857143; - font-family: @font-family-monospace; - color: @color_text_primary; - background-color: @color_white; - border: 1px solid @color_divider; - border-radius: 2px; - transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; - padding: 6px 12px; - - &:focus { - box-shadow: 0 1px 2px 0 rgba(169, 169, 169, 0.25); - } - - &:disabled { - background: @color_gray_light; - color: @color_text_secondary; - } -} - -input { - - &.valid { - border-color: @color_success_primary; - &:focus { - box-shadow: 0 1px 4px 0 rgba(1, 183, 87, 0.25); - } - } - - &.warning { - border-color: @color_warning_primary; - &:focus { - box-shadow: 0 1px 4px 0 rgba(235, 138, 0, 0.25); - } - } - - &.not-valid { - border-color: @color_error_primary; - &:focus { - box-shadow: 0 1px 4px 0 rgba(255, 111, 109, 0.25); - } - } -} - -a.button, -button { - padding: 12px 24px; - border-radius: 3px; - font-size: 14px; - font-weight: 300; - cursor: pointer; - background: @color_green_primary; - color: @color_white; - border: 0px; - - .hover(); - - &:hover { - background: @color_green_secondary; - } - - &:active { - background: @color_green_tertiary; - } - - &:disabled { - pointer-events: none; - color: @color_text_secondary; - background: @color_gray_light; - } - - &.blue { - background: transparent; - border: 1px solid @color_info_primary; - color: @color_info_primary; - padding: 12px 58px; - - &:hover { - color: @color_white; - background: @color_info_primary; - } - } - - &.white { - background: @color_white; - color: @color_text_secondary; - border: 1px solid @color_divider; - &:hover { - //color: @color_text_primary; - //border-color: @color_text_primary; - background: @color_divider; - } - &:active { - color: @color_text_primary; - background: @color_divider; - } - } - - &.transparent { - background: transparent; - border: 0px; - color: @color_text_secondary; - .hover(); - - &:hover, - &:active { - color: @color_text_primary; - background: transparent; - } - } -} - - // a copy of webusb.less from trezor-connect - .trezor-webusb-button { - position: relative; - padding: 12px 24px 12px 40px; - background: transparent; - color: @color_green_primary; - border: 1px solid @color_green_primary; - .hover(); - - &:before, - &:after { - content: ''; - position: absolute; - background: @color_green_primary; - top: 0; - bottom: 0; - margin: auto; - .hover(); - } - - &:before { - width: 12px; - height: 2px; - left: 18px; - } - - &:after { - width: 2px; - height: 12px; - left: 23px; - } - - &:hover { - background: @color_green_primary; - color: @color_white; - - &:before, - &:after { - background: @color_white; - } - } - - iframe { - position: absolute; - top: 0; - left: 0; - z-index: 1; - } -} - - -.custom-checkbox { - - position: relative; - display: flex; - align-items: center; - cursor: pointer; - color: @color_text_secondary; - - input { - position: absolute; - left: -9999px; - z-index: -1; - opacity: 0; - - &:checked + .indicator:after { - background-color: @color_green_primary; - border-color: @color_green_primary; - } - &:disabled + .indicator:after { - background-color: @color_text_secondary; - } - } - - .indicator { - position: relative; - height: 24px; - width: 24px; - margin-right: 12px; - - &:after { - .icomoon-checked; - .hover(); - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - color: @color_white; - background-color: @color_white; - border: 1px solid @color_divider; - border-radius: 2px; - } - - &:hover { - border-color: @color_text_secondary; - } - } - - &.radio { - .indicator { - &:after { - border-radius: 50%; - } - } - - input:checked + .indicator:after { - content: ''; - background: white; - border: 4px solid @color_green_primary; - } - } - - &.align-left { - padding-left: 20px; - padding-right: 10px; - .indicator { - position: absolute; - left: 0; - top: 2px; - margin: 0; - &:after { - top: 0px; - } - } - } -} - -a.green, -a.green:visited { - position: relative; - color: @color_green_primary; - .hover(); - - &:after { - content: ''; - position: absolute; - width: 100%; - border-top: 1px solid @color_green_primary; - line-height: 1px; - left: 0px; - bottom: -1px; - transition: border-color 0.3s; - } - - &:hover { - color: @color_green_secondary; - } - - &:active { - color: @color_green_tertiary; - } - - &:hover, - &:active { - &:after { - border-color: transparent; - } - } -} - -a.gray, -a.gray:visited { - position: relative; - color: @color_text_secondary; - .hover(); - - &:after { - content: ''; - position: absolute; - width: 100%; - border-top: 1px solid @color_text_secondary; - line-height: 1px; - left: 0px; - bottom: -1px; - transition: border-color 0.3s; - } - - &:hover, - &:active { - color: @color_text_primary; - &:after { - border-color: transparent; - } - } -} diff --git a/src/styles/mixins.less b/src/styles/mixins.less deleted file mode 100644 index 76f2f1d0..00000000 --- a/src/styles/mixins.less +++ /dev/null @@ -1,31 +0,0 @@ -.antialised() { - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.no-outlines() { - outline: none !important; - border-color: inherit !important; - -webkit-box-shadow: none !important; - box-shadow: none !important; -} - -.hover() { - transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out; -} - -.placeholder(@rules) { - &::-webkit-input-placeholder { - @rules(); - } - &:-moz-placeholder { - @rules(); - } - &::-moz-placeholder { - @rules(); - } - &:-ms-input-placeholder { - @rules(); - } -} \ No newline at end of file diff --git a/src/styles/reactSelect.less b/src/styles/reactSelect.less deleted file mode 100644 index abbc05ae..00000000 --- a/src/styles/reactSelect.less +++ /dev/null @@ -1,100 +0,0 @@ -// https://github.com/JedWatson/react-select/blob/master/less/select.less - -// @import '~react-select/less/select.less'; - -// // override predefined colors -// @select-primary-color: @color_white; -// @select-input-hover-box-shadow: none; -// @select-input-box-shadow-focus: transparent; -// @select-input-border-radius: 0px; -// @select-item-border-radius: 0px; -// @select-input-border-color: transparent; -// @select-input-border-focus: @color_divider; -// // @select-input-bg: transparent; -// // @select-input-bg-focus: transparent; - -// .Select-focus-state(@color) { -// // do nothing -// background: transparent; -// box-shadow: none; -// } - -// .Select-focus-state-classic() { -// background: transparent; -// box-shadow: none; -// } - -// .Select-arrow-zone { -// position: absolute; -// top: 0; -// bottom: 0; -// margin: auto 0; -// padding-right: 0px !important; -// width: 24px; -// height: 24px; -// right: 8px; - -// .Select-arrow { -// top: 0px; -// border: 0px; -// width: 24px; - -// &:after { -// .icomoon-arrow-down; -// transition: transform 0.3s, color 0.3s; -// color: @color_text_secondary; -// transform-origin: 50% 50%; -// font-size: 24px; -// } -// } -// } - -// .Select { - -// .Select-control { -// cursor: pointer; - -// .Select-input { -// background: transparent; -// position: absolute; -// top: 0; -// // display: none !important; // uncomment for disable auto closing -// } - -// &:hover { -// .Select-arrow:after { -// color: @color_text_primary; -// } -// } -// } - -// .Select-noresults { -// color: @color_text_secondary; -// font-family: @font-default; -// } - -// .Select-placeholder { -// color: @color_text_secondary; -// font-family: @font-default; -// } - -// .Select-value-label { -// color: @color_text_primary; -// } - -// .Select-menu-outer { -// border-radius: 0px; -// border: 1px solid @color_divider; -// box-shadow: none; -// } - -// &.is-open { -// .Select-arrow { -// top: 0px !important; -// border: 0px; -// &:after { -// transform: rotate(180deg); -// } -// } -// } -// } diff --git a/src/styles/receive.less b/src/styles/receive.less deleted file mode 100644 index ba6f94e3..00000000 --- a/src/styles/receive.less +++ /dev/null @@ -1,126 +0,0 @@ -.receive { - - .address { - position: relative; - padding: 0px 48px; - display: flex; - flex-wrap: wrap; - - .verify { - position: absolute; - background: @color_white; - border: 2px solid @color_green_primary; - left: 0; - right: 0; - top: 0; - margin: 0px 48px; - z-index: 10001; // bigger than modal container - } - - .value { - // same as input (inputs.less) - font-size: 14px; - font-weight: 300; - line-height: 1.42857143; - font-family: @font-family-monospace; - color: @color_text_primary; - border: 1px solid @color_divider; - border-radius: 3px; - padding: 6px 12px; - padding-right: 38px; // eye icon - position: relative; - flex: 1; - user-select: all; /* Chrome and Opera */ - } - - button { - padding: 6px 24px; - - &.white { - padding: 0px; - border: 0px; - position: absolute; - height: 100%; - background: transparent; - right: 48px; - } - - span { - display: flex; - align-items: center; - white-space: nowrap; - &:before { - .icomoon-eye; - font-size: 32px; - line-height: 14px; - // padding-top: 2px; - padding-right: 4px; - } - } - - } - - &.hidden { - .value { - padding-right: 6px; // no eye icon - user-select: none; - border-radius: 3px 0px 0px 3px; - &:after { - content: ''; - position: absolute; - left: 0; - top: 0; - height: 100%; - width: 100%; - background: linear-gradient(to right, - rgba(255,255,255, 0) 0%, - rgba(255,255,255, 1) 220px - ); - pointer-events: none; /* so the text is still selectable */ - } - } - - button { - border-radius: 0px 3px 3px 0px; - } - } - - &.unverified { - button span:before { - .icomoon-eye-error; - color: @color_error_primary; - font-size: 32px; - line-height: 14px; - padding-top: 0px; - padding-right: 4px; - } - } - - &.verifying { - .value { - background: @color_white; - z-index: 10001; // bigger than modal container - border-color: @color_green_primary; - border-width: 2px; - transform: translate(-1px, -1px); - } - - .confirm { - display: block; - position: relative; - background: @color_white; - z-index: 10001; - width: 100%; - padding: 6px 12px; - transform: translate(-1px, -1px); - margin: 0px 2px; - } - } - - - } - - .qr { - margin: 24px 48px; - } -} \ No newline at end of file diff --git a/src/styles/send.less b/src/styles/send.less deleted file mode 100644 index 4ef88cd2..00000000 --- a/src/styles/send.less +++ /dev/null @@ -1,367 +0,0 @@ -.send-form { - - .Select { - width: 98px; - height: 34px; - font-family: @font-family-monospace; - - &.fee { - width: 100%; - } - - .Select-control { - height: 34px; - border: 1px solid @color_divider; - border-radius: 0px 2px 2px 0px; - } - - .Select-option { - .hover(); - &.is-focused { - background: @color_gray_light; - } - - &.is-selected { - background: @color_divider; - } - } - - &.is-disabled { - .Select-control { - cursor: default; - } - .Select-arrow { - visibility: hidden; - } - } - - .fee-option { - display: flex; - align-items: center; - - .fee-value { - flex: 1; - color: @color_text_primary; - } - - .fee-label { - color: @color_text_secondary; - font-size: 12px; - font-weight: 400; - padding-right: 36px; - } - } - - } - - .row { - position: relative; - display: block; - padding: 0px 48px; - padding-bottom: 24px; - - .error, - .warning:not(input), - .info { - position: absolute; - left: 48px; - bottom: 6px; - font-size: 12px; - color: @color_error_primary; - white-space: nowrap; - } - - .error { - color: @color_error_primary; - } - .warning:not(input) { - color: @color_warning_primary; - } - .info { - color: @color_green_primary; - } - } - - .input-icon { - position: absolute; - top: 0; - bottom: 0; - right: 54px; - margin: auto 0; - height: 26px; - color: @color_green_primary; - } - - .address-input { - input.valid + .input-icon:before { - .icomoon-checked; - } - input.not-valid + .input-icon:before { - .icomoon-error; - color: @color_error_primary; - } - input.warning + .input-icon:before { - .icomoon-warning; - color: @color_warning_primary; - } - } - - .amount-input { - position: relative; - display: flex; - flex-direction: row; - - input { - flex: 1; - border-radius: 2px 0px 0px 2px; - } - - .set-max { - position: relative; - height: 34px; - line-height: 34px; - font-size: 12px; - font-weight: 300; // different - color: @color_text_secondary; - border: 1px solid @color_divider; - border-right: 0px; - border-left: 0px; - background: @color_white; - padding: 0px 10px 0px 32px; - cursor: pointer; - .hover(); - - &:before { - .icomoon-setmax; - width: 24px; - height: 24px; - font-size: 24px; - position: absolute; - top: 0; - bottom: 0; - margin: auto 0; - left: 4px; - } - - &:hover { - background: @color_gray_light; - } - - &:active { - background: @color_divider; - } - - &.enabled { - color: @color_white; - background: @color_green_primary; - border-color: @color_green_primary; - &:before { - .icomoon-checked; - } - - &:hover { - background: @color_green_secondary; - } - - &:active { - background: @color_green_tertiary; - } - } - } - } - - .advanced { - font-weight: 500; - line-height: 40px; // button height - color: @color_text_secondary; - .hover(); - &:hover, - &:active { - color: @color_text_primary; - } - &:after { - .icomoon-arrow-down; - transition: transform 0.3s; - transform-origin: 50% 50%; - font-size: 24px; - position: relative; - top: 6px; - left: 8px; - } - } - - .advanced-container { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - padding: 0px 48px; - - padding-bottom: 24px; - button { - min-width: 50%; - white-space: nowrap; - } - &.opened { - flex-direction: column; - padding: 0px; - button { - position: relative; - // left: 50%; - // width: 50%; - float: right; // TODO: better - } - .advanced { - display: inline-block; - margin: 0px 48px 12px 48px; - &:after { - transform: rotate(180deg); - top: 5px; - } - } - } - - .what-is-it { - &:before { - .icomoon-help; - .hover(); - transform-origin: 50% 50%; - font-size: 24px; - position: relative; - top: 5px; - cursor: pointer; - } - &:hover { - &:before { - color: @color_text_primary; - } - } - } - - // @media screen and (max-width: 900px) { - // :not(.opened) { - // border: 1px solid red; - // } - // } - - } - - .gas-row { - display: flex; - flex-direction: row; - border-top: 1px solid @color_divider; - padding-top: 24px; - - .column { - position: relative; - flex: 1; - padding-right: 20px; - - &.nonce { - width: 100px; - flex: none; - } - - &:last-child { - padding-right: 0px; - } - - .error, - .warning, - .info { - left: 0; - bottom: -17px; - white-space: nowrap; - } - } - } - - .update-fee-levels { - position: relative; - font-size: 12px; - color: @color_warning_primary; - padding-left: 24px; - margin-left: 8px; - a { - text-decoration: underline; - color: @color_green_primary; - margin-left: 4px; - } - &:before { - .icomoon-warning; - position: absolute; - top: -4px; - left: 0; - } - } - - label { - display: block; - font-size: 14px; - color: @color_text_secondary; - padding-bottom: 4px; - } - - input, - textarea { - width: 100%; - } - - textarea { - resize: none; - height: 80px; - } - - - .pending-transactions { - - border-top: 1px solid @color_divider; - - .tx { - border-bottom: 1px solid @color_divider; - padding: 14px 48px; - display: flex; - flex-direction: row; - align-items: center; - - - &:last-child { - border-bottom: 0px; - } - - .icon { - width: 36px; - height: 36px; - //border: 8px solid white; - border-radius: 50%; - margin-right: 10px; - line-height: 30px; - text-transform: uppercase; - user-select: none; - text-align: center; - padding: 6px; - p { - line-height: 24px; - padding: 0px; - color: inherit; - } - } - - .name { - flex: 1; - - a, a:visited { - color: @color_text_secondary; - .hover(); - - &:hover, &:active { - color: @color_text_primary; - } - } - } - - .balance { - color: @color_text_primary; - } - } - } -} \ No newline at end of file diff --git a/src/styles/summary.less b/src/styles/summary.less deleted file mode 100644 index 020e2383..00000000 --- a/src/styles/summary.less +++ /dev/null @@ -1,227 +0,0 @@ -.summary { - - .summary-header { - display: flex; - align-items: center; - &:before { - content: ''; - display: inline-block; - width: 32px; - height: 22px; - background-repeat: no-repeat; - background-size: auto 20px; - } - - &.ethereum:before { - background-image: url('../images/eth-logo.png'); - } - &.ethereum-classic:before { - background-image: url('../images/etc-logo.png'); - } - &.ropsten:before { - background-image: url('../images/ropsten-logo.png'); - } - &.rinkeby:before { - background-image: url('../images/rinkeby-logo.png'); - } - - a { - font-size: 12px; - margin-left: auto; - white-space: nowrap; - } - - } - - .token-select { - width: 100%; - height: 34px; - font-family: @font-family-monospace; - - .Select-control { - height: 34px; - border: 1px solid @color_divider; - } - - .Select-input { - - } - - .Select-arrow-zone { - display: none; - } - } - - .identicon { - display: inline-block; - vertical-align: middle; - position: relative; - top: -4px; - margin-right: 10px; - border-radius: 50%; - } - - - .summary-details { - position: relative; - padding: 0px 48px; - border-bottom: 1px solid @color_divider; - - .content { - display: flex; - padding-bottom: 32px; - - .column { - margin-right: 48px; - - .label, .value { - color: @color_text_secondary; - font-size: 12px; - } - - .fiat-value { - font-weight: 500; - font-size: 18px; - margin: 7px 0px 7px 0px; - color: @color_text_primary; - } - } - } - - .toggle { - display: block; - position: absolute; - left: 50%; - margin-left: -20px; - bottom: -20px; - width: 40px; - height: 40px; - //line-height: 30px; - background: @color_white; - color: @color_text_secondary; - box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04); - border-radius: 50%; - cursor: pointer; - transition: all 0.3s; - - &:hover { - background: @color_divider; - color: @color_text_primary; - } - - &:before { - .icomoon-arrow-down; - transition: transform 0.3s; - transform-origin: 50% 50%; - position: absolute; - left: 8px; - top: 10px; - } - } - - &.opened { - .toggle:before { - transform: rotate(180deg); - top: 8px; - } - } - } - - .what-is-it { - &:before { - .icomoon-help; - .hover(); - transform-origin: 50% 50%; - font-size: 24px; - position: relative; - top: 5px; - cursor: pointer; - color: @color_text_secondary; - } - &:hover { - &:before { - color: @color_text_primary; - } - } - } - - .filter { - //background: @color_main; - padding: 0px 48px 32px 48px; - // text-align: right; - - input { - box-shadow: none; - } - } - - .token-select { - .Select-control { - cursor: text; - } - - .Select-option { - .hover(); - &.is-focused { - background: @color_gray_light; - } - - &.is-selected { - background: @color_divider; - } - } - } - - .token { - border-top: 1px solid @color_divider; - padding: 14px 48px; - display: flex; - flex-direction: row; - align-items: center; - position: relative; - - .icon { - width: 36px; - height: 36px; - //border: 8px solid white; - border-radius: 50%; - margin-right: 10px; - line-height: 30px; - text-transform: uppercase; - user-select: none; - text-align: center; - padding: 6px; - p { - line-height: 24px; - padding: 0px; - color: inherit; - } - } - - .name { - flex: 1; - color: @color_text_secondary; - } - - button { - position: absolute; - right: 12px; - padding: 0px; - padding-top: 3px; - &:after { - .icomoon-close; - } - } - - - - &:last-child { - // border-bottom: 1px solid @color_divider; - } - } - - -} - - - diff --git a/src/styles/topNavigation.less b/src/styles/topNavigation.less deleted file mode 100644 index 0003ecb1..00000000 --- a/src/styles/topNavigation.less +++ /dev/null @@ -1,243 +0,0 @@ -nav { - display: flex; - width: 100%; - max-width: 1170px; - height: 64px; - margin: 0 auto; - margin-top: 32px; - z-index: 1; - background: @color_white; - border-radius: 4px 4px 0px 0px; - border-bottom: 1px solid @color_divider; - box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04); - - @media screen and (max-width: 1170px) { - border-radius: 0px; - margin-top: 0px; - } - - // .layout-wrapper { - // height: 100%; - // background: @color_white; - // border-radius: 4px 4px 0px 0px; - // border-bottom: 1px solid rgba(218, 218, 218, 0.5); - // box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04); - // } - - // override styles for react-select - .device-select { - width: 320px; - height: 64px; - // display: inline-block; - // vertical-align: middle; - box-shadow: none; - - &.is-focused:not(.is-open) > .Select-control { - border-color: @color_divider; - box-shadow: none; - } - - .Select-control { - height: 63px; - border: 0px; - border-radius: 4px 0px 0px 0px; - border-right: 1px solid @color_divider; - cursor: pointer; - transition: color 0.2s ease-in-out; - - .Select-input { - background: transparent; - position: absolute; - top: 0; - //display: none !important; - } - - &:hover { - background: transparent; - // border: 0px; - border-right: 1px solid @color_divider; - box-shadow: none; - - .Select-arrow { - &:after { - color: @color_text_primary; - } - } - } - } - - .Select-arrow-zone { - position: absolute; - top: 0; - bottom: 0; - margin: auto 0; - padding: 0px; - width: 24px; - height: 24px; - right: 24px; - - .Select-arrow { - top: 0px; - border: 0px; - width: 24px; - - &:after { - .icomoon-arrow-down; - transition: transform 0.3s; - color: @color_text_secondary; - transform-origin: 50% 50%; - font-size: 24px; - } - } - } - - - - .Select-option { - &:hover { - background: red; - } - - &.is-selected { - background: yellow; - } - } - - &.is-open { - .Select-control { - border-color: @color_divider; - } - - .Select-arrow { - top: 0px !important; - border: 0px; - - - &:after { - // .icomoon-arrow-up; - transform: rotate(180deg); - - } - } - } - - &.is-disabled { - - .Select-control { - background: transparent; - cursor: default; - } - - .Select-arrow { - visibility: hidden; - &:after { - content: '' - } - } - - .device { - .device-menu { - padding-right: 24px; - } - } - } - - .Select-menu-outer { - border-radius: 0px; - border: 1px solid @color_divider; - box-shadow: none; - visibility: hidden; - } - } - - .device { - height: 63px; - width: 319px; - display: flex; - align-items: center; - padding-left: 80px; - - &:before { - content: ''; - position: absolute; - display: block; - width: 13px; - height: 25px; - z-index: 2; - left: 33px; - top: 17px; - background-repeat: no-repeat; - background-position: center; - background-size: 13px 25px; - background-image: url('../images/icontrezor.png'); - } - - .label-container { - flex: 1; - overflow: hidden; - span { - display: block; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - - &.label { - font-weight: 500; - font-size: 14px; - color: @color_text_primary; - } - - &.status { - font-size: 12px; - color: @color_text_secondary; - } - } - } - - .device-menu { - display: flex; - justify-content: flex-end; - padding-right: 48px; - padding-left: 4px; - - div { - display: inline-block; - } - - .forget, - .settings, - .acquire { - cursor: pointer; - - &:before { - .icomoon-refresh; - color: @color_text_secondary; - position: relative; - font-size: 24px; - .hover(); - } - - &:hover { - &:before { - color: @color_text_primary; - } - } - } - - .forget { - &:before { - .icomoon-eject; - } - } - - .settings { - &:before { - .icomoon-settings; - } - } - } - - } - - -} diff --git a/src/support/BaseStyles.js b/src/support/BaseStyles.js index f3f6ef71..610c1cba 100644 --- a/src/support/BaseStyles.js +++ b/src/support/BaseStyles.js @@ -40,23 +40,28 @@ const baseStyles = () => injectGlobal` outline: 0; } + /* + custom Roboto with Zero without the thing inside, so it's more readable as number + since 0 doesn't look too similar to 8 + */ + @font-face { font-family: 'Roboto Zero'; - src: url('../fonts/roboto/RobotoZero.eot') format('embedded-opentype'), - url('../fonts/roboto/RobotoZero.eot?#iefix') format('embedded-opentype'), - url('../fonts/roboto/RobotoZero.woff') format('woff'), - url('../fonts/roboto/RobotoZero.ttf') format('truetype'); + src: url('./fonts/roboto/RobotoZero.eot') format('embedded-opentype'), + url('./fonts/roboto/RobotoZero.eot?#iefix') format('embedded-opentype'), + url('./fonts/roboto/RobotoZero.woff') format('woff'), + url('./fonts/roboto/RobotoZero.ttf') format('truetype'); } @font-face { font-family: 'Roboto Mono'; font-style: normal; - src: url('../fonts/roboto/roboto-mono-v4-greek_cyrillic-ext_greek-ext_latin_cyrillic_vietnamese_latin-ext-regular.eot') format('embedded-opentype'), /* IE9 Compat Modes */ - url('../fonts/roboto/roboto-mono-v4-greek_cyrillic-ext_greek-ext_latin_cyrillic_vietnamese_latin-ext-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('../fonts/roboto/roboto-mono-v4-greek_cyrillic-ext_greek-ext_latin_cyrillic_vietnamese_latin-ext-regular.woff2') format('woff2'), /* Super Modern Browsers */ - url('../fonts/roboto/roboto-mono-v4-greek_cyrillic-ext_greek-ext_latin_cyrillic_vietnamese_latin-ext-regular.woff') format('woff'), /* Modern Browsers */ - url('../fonts/roboto/roboto-mono-v4-greek_cyrillic-ext_greek-ext_latin_cyrillic_vietnamese_latin-ext-regular.ttf') format('truetype'), /* Safari, Android, iOS */ - url('../fonts/roboto/roboto-mono-v4-greek_cyrillic-ext_greek-ext_latin_cyrillic_vietnamese_latin-ext-regular.svg#RobotoMono') format('svg'); /* Legacy iOS */ + src: url('./fonts/roboto/roboto-mono-v4-greek_cyrillic-ext_greek-ext_latin_cyrillic_vietnamese_latin-ext-regular.eot') format('embedded-opentype'), /* IE9 Compat Modes */ + url('./fonts/roboto/roboto-mono-v4-greek_cyrillic-ext_greek-ext_latin_cyrillic_vietnamese_latin-ext-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('./fonts/roboto/roboto-mono-v4-greek_cyrillic-ext_greek-ext_latin_cyrillic_vietnamese_latin-ext-regular.woff2') format('woff2'), /* Super Modern Browsers */ + url('./fonts/roboto/roboto-mono-v4-greek_cyrillic-ext_greek-ext_latin_cyrillic_vietnamese_latin-ext-regular.woff') format('woff'), /* Modern Browsers */ + url('./fonts/roboto/roboto-mono-v4-greek_cyrillic-ext_greek-ext_latin_cyrillic_vietnamese_latin-ext-regular.ttf') format('truetype'), /* Safari, Android, iOS */ + url('./fonts/roboto/roboto-mono-v4-greek_cyrillic-ext_greek-ext_latin_cyrillic_vietnamese_latin-ext-regular.svg#RobotoMono') format('svg'); /* Legacy iOS */ } `; diff --git a/src/fonts/icomoon.eot b/src/support/fonts/icomoon.eot similarity index 100% rename from src/fonts/icomoon.eot rename to src/support/fonts/icomoon.eot diff --git a/src/fonts/icomoon.svg b/src/support/fonts/icomoon.svg similarity index 100% rename from src/fonts/icomoon.svg rename to src/support/fonts/icomoon.svg diff --git a/src/fonts/icomoon.ttf b/src/support/fonts/icomoon.ttf similarity index 100% rename from src/fonts/icomoon.ttf rename to src/support/fonts/icomoon.ttf diff --git a/src/fonts/icomoon.woff b/src/support/fonts/icomoon.woff similarity index 100% rename from src/fonts/icomoon.woff rename to src/support/fonts/icomoon.woff diff --git a/src/fonts/roboto/RobotoZero.eot b/src/support/fonts/roboto/RobotoZero.eot similarity index 100% rename from src/fonts/roboto/RobotoZero.eot rename to src/support/fonts/roboto/RobotoZero.eot diff --git a/src/fonts/roboto/RobotoZero.ttf b/src/support/fonts/roboto/RobotoZero.ttf similarity index 100% rename from src/fonts/roboto/RobotoZero.ttf rename to src/support/fonts/roboto/RobotoZero.ttf diff --git a/src/fonts/roboto/RobotoZero.woff b/src/support/fonts/roboto/RobotoZero.woff similarity index 100% rename from src/fonts/roboto/RobotoZero.woff rename to src/support/fonts/roboto/RobotoZero.woff diff --git a/src/fonts/roboto/roboto-mono-v4-greek_cyrillic-ext_greek-ext_latin_cyrillic_vietnamese_latin-ext-regular.eot b/src/support/fonts/roboto/roboto-mono-v4-greek_cyrillic-ext_greek-ext_latin_cyrillic_vietnamese_latin-ext-regular.eot similarity index 100% rename from src/fonts/roboto/roboto-mono-v4-greek_cyrillic-ext_greek-ext_latin_cyrillic_vietnamese_latin-ext-regular.eot rename to src/support/fonts/roboto/roboto-mono-v4-greek_cyrillic-ext_greek-ext_latin_cyrillic_vietnamese_latin-ext-regular.eot diff --git a/src/fonts/roboto/roboto-mono-v4-greek_cyrillic-ext_greek-ext_latin_cyrillic_vietnamese_latin-ext-regular.svg b/src/support/fonts/roboto/roboto-mono-v4-greek_cyrillic-ext_greek-ext_latin_cyrillic_vietnamese_latin-ext-regular.svg similarity index 100% rename from src/fonts/roboto/roboto-mono-v4-greek_cyrillic-ext_greek-ext_latin_cyrillic_vietnamese_latin-ext-regular.svg rename to src/support/fonts/roboto/roboto-mono-v4-greek_cyrillic-ext_greek-ext_latin_cyrillic_vietnamese_latin-ext-regular.svg diff --git a/src/fonts/roboto/roboto-mono-v4-greek_cyrillic-ext_greek-ext_latin_cyrillic_vietnamese_latin-ext-regular.ttf b/src/support/fonts/roboto/roboto-mono-v4-greek_cyrillic-ext_greek-ext_latin_cyrillic_vietnamese_latin-ext-regular.ttf similarity index 100% rename from src/fonts/roboto/roboto-mono-v4-greek_cyrillic-ext_greek-ext_latin_cyrillic_vietnamese_latin-ext-regular.ttf rename to src/support/fonts/roboto/roboto-mono-v4-greek_cyrillic-ext_greek-ext_latin_cyrillic_vietnamese_latin-ext-regular.ttf diff --git a/src/fonts/roboto/roboto-mono-v4-greek_cyrillic-ext_greek-ext_latin_cyrillic_vietnamese_latin-ext-regular.woff b/src/support/fonts/roboto/roboto-mono-v4-greek_cyrillic-ext_greek-ext_latin_cyrillic_vietnamese_latin-ext-regular.woff similarity index 100% rename from src/fonts/roboto/roboto-mono-v4-greek_cyrillic-ext_greek-ext_latin_cyrillic_vietnamese_latin-ext-regular.woff rename to src/support/fonts/roboto/roboto-mono-v4-greek_cyrillic-ext_greek-ext_latin_cyrillic_vietnamese_latin-ext-regular.woff diff --git a/src/fonts/roboto/roboto-mono-v4-greek_cyrillic-ext_greek-ext_latin_cyrillic_vietnamese_latin-ext-regular.woff2 b/src/support/fonts/roboto/roboto-mono-v4-greek_cyrillic-ext_greek-ext_latin_cyrillic_vietnamese_latin-ext-regular.woff2 similarity index 100% rename from src/fonts/roboto/roboto-mono-v4-greek_cyrillic-ext_greek-ext_latin_cyrillic_vietnamese_latin-ext-regular.woff2 rename to src/support/fonts/roboto/roboto-mono-v4-greek_cyrillic-ext_greek-ext_latin_cyrillic_vietnamese_latin-ext-regular.woff2 diff --git a/src/views/index.js b/src/views/index.js index b3c49555..d79e7628 100644 --- a/src/views/index.js +++ b/src/views/index.js @@ -23,7 +23,7 @@ import WalletInitialize from 'views/Wallet/views/Initialize'; import WalletAcquire from 'views/Wallet/views/Acquire'; import WalletUnreadableDevice from 'views/Wallet/views/UnreadableDevice'; -import store, { history } from 'support/store'; +import store, { history } from 'store'; const App = () => (