diff --git a/react/src/components/addcoin/addcoin.scss b/react/src/components/addcoin/addcoin.scss index ca0772b..284e025 100644 --- a/react/src/components/addcoin/addcoin.scss +++ b/react/src/components/addcoin/addcoin.scss @@ -1,5 +1,43 @@ .add-coin-modal { color: #757575; + + .modal-body { + max-height: 590px; + overflow-y: auto; + } + + .multi { + .col-sm-8 { + width: 30%; + } + .col-sm-12 { + &.text-center { + width: 60%; + padding: 0; + + .col-lg-4 { + width: 25%; + margin-right: 8%; + padding: 0; + + .input{ + &.to-labelauty+label { + max-width: 136px; + } + } + } + .col-lg-4 { + &:last-child { + margin-right: 0; + } + } + .col-sm-1 { + width: 44px; + padding: 0; + } + } + } + } } .vertical-margin-20 { @@ -24,4 +62,25 @@ margin: 0; } } +} + +.btn-add-coin-item, +.btn-add-coin-item-options, +.btn-save-coin-selection, +.btn-load-coin-selection { + position: absolute; + right: 32px; + z-index: 50; +} +.btn-add-coin-item { + right: 60px; +} +.btn-add-coin-item-options { + padding: 6px; +} +.btn-save-coin-selection { + top: 60px; +} +.btn-load-coin-selection { + top: 95px; } \ No newline at end of file diff --git a/react/src/components/dashboard/claimInterestModal/claimInterestModal.scss b/react/src/components/dashboard/claimInterestModal/claimInterestModal.scss new file mode 100644 index 0000000..d278ffa --- /dev/null +++ b/react/src/components/dashboard/claimInterestModal/claimInterestModal.scss @@ -0,0 +1,48 @@ +.modal-claim-interest { + .modal-dialog { + width: 70%; + + .table > tbody > tr > td, + .table > tbody > tr > th, + .table > tfoot > tr > td, + .table > tfoot > tr > th, + .table > thead > tr > td, + .table > thead > tr > th { + padding: 8px 30px 8px 0; + } + + .claim-btn { + position: absolute; + right: 29px; + top: 66px; + } + .table-scroll { + height: 366px; + overflow-y: auto; + overflow-x: hidden; + width: 100%; + } + .bold { + font-weight: bold; + } + .green { + color: #66bb6a; + } + .red { + color: #f96868; + } + .locktime { + i { + font-size: 20px; + line-height: 1.1; + } + } + + .refresh-icon { + position: absolute; + right: 20px; + font-size: 20px; + z-index: 100; + } + } +} \ No newline at end of file diff --git a/react/src/components/dashboard/coindDownModal/coindDownModal.scss b/react/src/components/dashboard/coindDownModal/coindDownModal.scss new file mode 100644 index 0000000..179ecd4 --- /dev/null +++ b/react/src/components/dashboard/coindDownModal/coindDownModal.scss @@ -0,0 +1,24 @@ +.coind-down-modal { + .modal-body { + height: 60vh; + + > div { + height: 100%; + } + .form-group { + &.form-material { + &.floating { + height: 80%; + } + } + } + .page-content { + width: 90%; + height: 100%; + + textarea { + height: 100%; + } + } + } +} \ No newline at end of file diff --git a/react/src/components/dashboard/jumblr/jumblr.scss b/react/src/components/dashboard/jumblr/jumblr.scss new file mode 100644 index 0000000..38953a2 --- /dev/null +++ b/react/src/components/dashboard/jumblr/jumblr.scss @@ -0,0 +1,89 @@ +.jumblr { + p { + width: calc(100% - 100px); + } + .breadcrumb { + padding: 8px 30px; + position: relative; + top: 0; + } + .img-responsive { + position: absolute; + top: -28px; + right: 18px; + + .coin { + font-size: 30px; + position: relative; + left: -18px; + top: 4px; + } + .image { + width: 60px; + } + } + .header-easydex-section { + img { + max-width: inherit; + } + } + .copy-string-btn { + position: absolute; + right: 36px; + margin-top: -68px; + } + .btn-next { + position: absolute; + top: 60px; + right: 32px; + } + input.labelauty+label, + input.labelauty+label { + background: #d6d5d5; + color: #504e4e; + } + input.labelauty:checked+label { + color: #fff; + background-color: #3949ab; + } + input.labelauty + label:hover .labelauty-unchecked, + input.labelauty + label .labelauty-unchecked { + color: #504e4e; + } + .nofloat { + float: none; + display: inline-block; + padding-left: 0; + } +} + +.jumblr-mode-selector { + .nav-tabs { + li { + cursor: pointer; + + &.active { + > a { + cursor: pointer; + color: #fff; + background-color: #62a8ea; + border-color: transparent; + border-bottom-color: #62a8ea; + } + } + } + } + + .panel-heading { + background: #f3f3f3; + cursor: pointer; + } + .panel-title { + color: #676767; + } + .jumblr-addresses-list { + .col-xs-3 { + padding: 0; + } + } +} \ No newline at end of file diff --git a/react/src/components/dashboard/qrModal/qrModal.scss b/react/src/components/dashboard/qrModal/qrModal.scss new file mode 100644 index 0000000..c0b3cd0 --- /dev/null +++ b/react/src/components/dashboard/qrModal/qrModal.scss @@ -0,0 +1,5 @@ +.qr-modal-send-block { + position: absolute; + top: 15px; + right: 30px; +} \ No newline at end of file diff --git a/react/src/components/dashboard/settings/settings.scss b/react/src/components/dashboard/settings/settings.scss new file mode 100644 index 0000000..f6297d8 --- /dev/null +++ b/react/src/components/dashboard/settings/settings.scss @@ -0,0 +1,115 @@ +.support-box { + padding: 15px 20px; + width: 220px; + display: inline-block; + cursor: pointer; + + &-title { + font-weight: bold; + padding-top: 12px; + padding-bottom: 3px; + } + img { + height: 50px; + } +} + +.support-box-wrapper { + display: inline-block; + margin-right: 50px; + + &:last-child, { + margin-right: 0; + } +} + +.support-box:hover { + .support-box-link { + color: #5683ad; + font-weight: 500; + } +} + +.login-settings-modal { + #AppUpdate { + .col-sm-4 { + width: 100%; + } + } + .modal-dialog { + width: 80%; + } + .modal-body { + background: #f3f4f5; + border-radius: 4px; + } + .modal-footer { + margin-top: 15px; + } + .page-content { + padding-top: 0; + } + .support-box-wrapper { + .support-box { + margin: 0; + margin-bottom: 20px; + } + } +} + +.settings-help { + font-size: 20px; + position: relative; + top: 2px; + left: 10px; + color: #5683ad; +} + +#SettingsAccordion { + .toggle { + position: relative; + top: 4px; + } + table { + width: 100%; + + td { + &:first-child { + width: 40%; + } + &:last-child { + width: 60%; + } + } + } +} + +#SettingsAccordion { + .panel { + .panel-collapse { + transition: all .3s; + + &.collapse { + height: 0; + } + } + } +} + +#section-iguana-wallet-settings { + background: #f3f4f5; + + .panel-title { + cursor: pointer; + cursor: hand; + + &:before { + content: '\F273'; + } + &.collapsed { + &:before { + content: '\F278'; + } + } + } +} \ No newline at end of file diff --git a/react/src/components/dashboard/syncOnly/syncOnly.scss b/react/src/components/dashboard/syncOnly/syncOnly.scss new file mode 100644 index 0000000..3fa0ae6 --- /dev/null +++ b/react/src/components/dashboard/syncOnly/syncOnly.scss @@ -0,0 +1,37 @@ +.sync-only-forks { + color: #757575; + + .modal-body { + overflow-y: auto; + } + .badge{ + &.up { + position: absolute; + top: 40px; + left: 65px; + margin: 0 5px; + } + } + .avatar { + width: 20%; + display: inline-block; + text-align: center; + vertical-align: top; + + img { + width: 55px; + display: inherit; + } + } + .progress-bars { + padding-left: 40px; + display: inline-block; + width: 80%; + margin: 0 auto; + } + .padding-bottom-60 { + &:last-child { + padding-bottom: 0 !important; + } + } +} \ No newline at end of file diff --git a/react/src/components/dashboard/walletsData/pagination.js b/react/src/components/dashboard/walletsData/pagination.js index dba569d..e92d445 100644 --- a/react/src/components/dashboard/walletsData/pagination.js +++ b/react/src/components/dashboard/walletsData/pagination.js @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import PaginationRender from './pagination.render'; export default class TablePaginationRenderer extends Component { - constructor (props) { + constructor(props) { super(); this.state = { page: props.page diff --git a/react/src/components/dashboard/walletsData/walletsData.scss b/react/src/components/dashboard/walletsData/walletsData.scss new file mode 100644 index 0000000..ab72b82 --- /dev/null +++ b/react/src/components/dashboard/walletsData/walletsData.scss @@ -0,0 +1,89 @@ +.search-box { + float: right; + padding-right: 0; +} +.basilisk-progress-bar { + position: absolute; + width: 100%; +} +.breadcrumb--basilisk, +.breadcrumb--native { + top: 0; +} +.dropdown-menu { + .no--hover { + pointer-events: none; + } +} +.ReactTable { + border: none; + + .pagination-bottom { + margin-top: 35px; + } + .rt-td { + text-align: center; + } + .rt-table { + border: 1px solid rgba(0, 0, 0, 0.1); + } + .rt-thead .rt-th, + .rt-thead .rt-td { + padding: 10px 5px; + } + .rt-tr.-odd div, + .rt-tr.-even div { + padding-top: 10px; + padding-bottom: 10px; + } + .-pagination, + .rt-thead, + .rt-tfoot { + border: none; + } + .rt-tfoot { + border-top: 1px solid rgba(0, 0, 0, 0.1); + } + .rt-thead { + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + } + .colum--direction { + width: 40px !important; + flex: 40 0 auto !important; + padding-right: 10px; + } + .colum--txinfo { + width: 40px !important; + flex: 40 0 auto !important; + } + .colum--type { + width: 40px !important; + flex: 40 0 auto !important; + } + .-pagination { + .-pageJump { + margin-right: 5px; + margin-left: 5px; + } + .-btn { + color: #757575; + background-color: #efefef; + border: 1px solid #e0e0e0; + + &:hover { + color: #fff; + } + } + .-btn[disabled]:hover { + color: #757575; + } + } + .rt-noData { + top: 46px; + width: 100%; + text-align: center; + height: 98px; + padding: 38px; + background: rgba(255, 255, 255, 0.85); + } +} \ No newline at end of file diff --git a/react/src/components/dashboard/walletsNative/walletsNative.js b/react/src/components/dashboard/walletsNative/walletsNative.js index e220d6a..05531f3 100644 --- a/react/src/components/dashboard/walletsNative/walletsNative.js +++ b/react/src/components/dashboard/walletsNative/walletsNative.js @@ -26,18 +26,18 @@ class WalletsNative extends React.Component { if (data && data.komodod && data.komodod.error) { - switch (data.komodod.error) { - case 'run -reindex': - Store.dispatch( - triggerToaster( - translate('TOASTR.RESTART_AGAMA_WITH_REINDEX_PARAM'), - translate('TOASTR.WALLET_NOTIFICATION'), - 'info', - false - ) - ); - break; - } + switch (data.komodod.error) { + case 'run -reindex': + Store.dispatch( + triggerToaster( + translate('TOASTR.RESTART_AGAMA_WITH_REINDEX_PARAM'), + translate('TOASTR.WALLET_NOTIFICATION'), + 'info', + false + ) + ); + break; + } } } @@ -81,7 +81,7 @@ const mapStateToProps = (state) => { mode: state.ActiveCoin.mode, } }; - + }; export default connect(mapStateToProps)(WalletsNative); diff --git a/react/src/components/login/login.scss b/react/src/components/login/login.scss index 4b07173..beceabf 100644 --- a/react/src/components/login/login.scss +++ b/react/src/components/login/login.scss @@ -103,7 +103,7 @@ input[type="password"] { z-index: 1; top: -5px; left: 105%; - + &::after { content: ''; position: absolute; @@ -152,4 +152,10 @@ input[type="password"] { a { color: #fb8c00; } +} + +.login-form, +.register-form { + width: 540px; + margin: 30px 0; } \ No newline at end of file diff --git a/react/src/components/overrides.scss b/react/src/components/overrides.scss index 653bb27..d09dffc 100644 --- a/react/src/components/overrides.scss +++ b/react/src/components/overrides.scss @@ -1,6 +1,8 @@ /* TODO: nesting, separate */ #app { + height: 100%; + > div { height: 100%; } @@ -28,30 +30,6 @@ body { padding-top: 44px; } -.login-form, -.register-form { - width: 540px; - margin: 30px 0; -} - -#section-iguana-wallet-settings { - background: #f3f4f5; - - .panel-title { - cursor: pointer; - cursor: hand; - - &:before { - content: '\F273'; - } - &.collapsed { - &:before { - content: '\F278'; - } - } - } -} - #section-dashboard { height: 100%; } @@ -147,131 +125,12 @@ body { } } -.display-sync-only-coins-toggle { - cursor: pointer; - - &:hover { - color: #ffa726; - } -} - -.btn-add-coin-item, -.btn-add-coin-item-options, -.btn-save-coin-selection, -.btn-load-coin-selection { - position: absolute; - right: 32px; - z-index: 50; -} -.btn-add-coin-item { - right: 60px; -} -.btn-add-coin-item-options { - padding: 6px; -} -.btn-save-coin-selection { - top: 60px; -} -.btn-load-coin-selection { - top: 95px; -} - .btn-outline-primary { color: #FF6600; background-color: #fff; border-color: #FF6600; } -.add-coin-modal { - .modal-body { - max-height: 590px; - overflow-y: auto; - } - - .multi { - .col-sm-8 { - width: 30%; - } - .col-sm-12 { - &.text-center { - width: 60%; - padding: 0; - - .col-lg-4 { - width: 25%; - margin-right: 8%; - padding: 0; - - .input{ - &.to-labelauty+label { - max-width: 136px; - } - } - } - .col-lg-4 { - &:last-child { - margin-right: 0; - } - } - .col-sm-1 { - width: 44px; - padding: 0; - } - } - } - } -} - -.sync-only-forks { - color: #757575; - - .modal-body { - overflow-y: auto; - } - .badge{ - &.up { - position: absolute; - top: 40px; - left: 65px; - margin: 0 5px; - } - } - .avatar { - width: 20%; - display: inline-block; - text-align: center; - vertical-align: top; - - img { - width: 55px; - display: inherit; - } - } - .progress-bars { - padding-left: 40px; - display: inline-block; - width: 80%; - margin: 0 auto; - } - .padding-bottom-60 { - &:last-child { - padding-bottom: 0 !important; - } - } -} - -#SettingsAccordion { - .panel { - .panel-collapse { - transition: all .3s; - - &.collapse { - height: 0; - } - } - } -} - .center { text-align: center; } @@ -314,6 +173,13 @@ body { -webkit-transition: .4s; transition: .4s; + &.round { + border-radius: 34px; + + &:before { + border-radius: 50%; + } + } &:before { border-radius: 50%; position: absolute; @@ -356,15 +222,6 @@ input:checked + .slider:before { } } -.slider { - &.round { - border-radius: 34px; - &:before { - border-radius: 50%; - } - } -} - .pointer { cursor: pointer; } @@ -373,8 +230,10 @@ input:checked + .slider:before { text-align: center; } -.coin-logo.breadcrumb { - z-index: 100; +.coin-logo { + &.breadcrumb { + z-index: 100; + } } .breadcrumb > li + li:before { display: none; @@ -521,10 +380,6 @@ input:checked + .slider:before { width: 200px; } -#app { - height: 100%; -} - .spinner { width: 50px; height: 40px; @@ -625,31 +480,6 @@ select{ margin-left: 10px; } -.coind-down-modal { - .modal-body { - height: 60vh; - - > div { - height: 100%; - } - .form-group { - &.form-material { - &.floating { - height: 80%; - } - } - } - .page-content { - width: 90%; - height: 100%; - - textarea { - height: 100%; - } - } - } -} - .backround-gray { background: #f3f4f5; } @@ -669,12 +499,6 @@ select{ } } -.qr-modal-send-block { - position: absolute; - top: 15px; - right: 30px; -} - @media only screen and (min-width : 1201px) { .wallet-widgets { .flex { @@ -751,338 +575,10 @@ select{ height: 75px; } -#toast-container { - > div { - padding: 15px 15px 15px 60px; - width: 310px; - opacity: 1; - } -} - .toggle-filters:hover { background-color: #f3f1f1; } -/* jumblr */ -.jumblr { - p { - width: calc(100% - 100px); - } - .breadcrumb { - padding: 8px 30px; - position: relative; - top: 0; - } - .img-responsive { - position: absolute; - top: -28px; - right: 18px; - - .coin { - font-size: 30px; - position: relative; - left: -18px; - top: 4px; - } - .image { - width: 60px; - } - } - .header-easydex-section { - img { - max-width: inherit; - } - } - .copy-string-btn { - position: absolute; - right: 36px; - margin-top: -68px; - } - .btn-next { - position: absolute; - top: 60px; - right: 32px; - } - input.labelauty+label, - input.labelauty+label { - background: #d6d5d5; - color: #504e4e; - } - input.labelauty:checked+label { - color: #fff; - background-color: #3949ab; - } - input.labelauty + label:hover .labelauty-unchecked, - input.labelauty + label .labelauty-unchecked { - color: #504e4e; - } - .nofloat { - float: none; - display: inline-block; - padding-left: 0; - } -} - -.jumblr-mode-selector { - .nav-tabs { - li { - cursor: pointer; - - &.active { - > a { - cursor: pointer; - color: #fff; - background-color: #62a8ea; - border-color: transparent; - border-bottom-color: #62a8ea; - } - } - } - } - - .panel-heading { - background: #f3f3f3; - cursor: pointer; - } - .panel-title { - color: #676767; - } - .jumblr-addresses-list { - .col-xs-3 { - padding: 0; - } - } -} - -.modal-claim-interest { - .modal-dialog { - width: 70%; - - .table > tbody > tr > td, - .table > tbody > tr > th, - .table > tfoot > tr > td, - .table > tfoot > tr > th, - .table > thead > tr > td, - .table > thead > tr > th { - padding: 8px 30px 8px 0; - } - - .claim-btn { - position: absolute; - right: 29px; - top: 66px; - } - .table-scroll { - height: 366px; - overflow-y: auto; - overflow-x: hidden; - width: 100%; - } - .bold { - font-weight: bold; - } - .green { - color: #66bb6a; - } - .red { - color: #f96868; - } - .locktime { - i { - font-size: 20px; - line-height: 1.1; - } - } - - .refresh-icon { - position: absolute; - right: 20px; - font-size: 20px; - z-index: 100; - } - } -} - -.search-box { - float: right; - padding-right: 0; -} - .no-padding-left { padding-left: 0; -} - -.basilisk-progress-bar { - position: absolute; - width: 100%; -} - -.breadcrumb--basilisk, -.breadcrumb--native { - top: 0; -} - -.dropdown-menu { - .no--hover { - pointer-events: none; - } -} - -.ReactTable { - border: none; - - .pagination-bottom { - margin-top: 35px; - } - .rt-td { - text-align: center; - } - .rt-table { - border: 1px solid rgba(0, 0, 0, 0.1); - } - .rt-thead .rt-th, - .rt-thead .rt-td { - padding: 10px 5px; - } - .rt-tr.-odd div, - .rt-tr.-even div { - padding-top: 10px; - padding-bottom: 10px; - } - .-pagination, - .rt-thead, - .rt-tfoot { - border: none; - } - .rt-tfoot { - border-top: 1px solid rgba(0, 0, 0, 0.1); - } - .rt-thead { - border-bottom: 1px solid rgba(0, 0, 0, 0.1); - } - .colum--direction { - width: 40px !important; - flex: 40 0 auto !important; - padding-right: 10px; - } - .colum--txinfo { - width: 40px !important; - flex: 40 0 auto !important; - } - .colum--type { - width: 40px !important; - flex: 40 0 auto !important; - } - .-pagination { - .-pageJump { - margin-right: 5px; - margin-left: 5px; - } - .-btn { - color: #757575; - background-color: #efefef; - border: 1px solid #e0e0e0; - - &:hover { - color: #fff; - } - } - .-btn[disabled]:hover { - color: #757575; - } - } - .rt-noData { - top: 46px; - width: 100%; - text-align: center; - height: 98px; - padding: 38px; - background: rgba(255, 255, 255, 0.85); - } -} - -.support-box { - padding: 15px 20px; - width: 220px; - display: inline-block; - cursor: pointer; - - &-title { - font-weight: bold; - padding-top: 12px; - padding-bottom: 3px; - } - img { - height: 50px; - } -} - -.support-box-wrapper { - display: inline-block; - margin-right: 50px; - - &:last-child, { - margin-right: 0; - } -} - -.support-box:hover { - .support-box-link { - color: #5683ad; - font-weight: 500; - } -} - -.login-settings-modal { - #AppUpdate { - .col-sm-4 { - width: 100%; - } - } - .modal-dialog { - width: 80%; - } - .modal-body { - background: #f3f4f5; - border-radius: 4px; - } - .modal-footer { - margin-top: 15px; - } - .page-content { - padding-top: 0; - } - .support-box-wrapper { - .support-box { - margin: 0; - margin-bottom: 20px; - } - } -} - -.settings-help { - font-size: 20px; - position: relative; - top: 2px; - left: 10px; - color: #5683ad; -} - -#SettingsAccordion { - .toggle { - position: relative; - top: 4px; - } - table { - width: 100%; - - td { - &:first-child { - width: 40%; - } - &:last-child { - width: 60%; - } - } - } } \ No newline at end of file diff --git a/react/src/components/toaster/toaster.scss b/react/src/components/toaster/toaster.scss new file mode 100644 index 0000000..d42bc45 --- /dev/null +++ b/react/src/components/toaster/toaster.scss @@ -0,0 +1,7 @@ +#toast-container { + > div { + padding: 15px 15px 15px 60px; + width: 310px; + opacity: 1; + } +} \ No newline at end of file diff --git a/react/src/styles/index.scss b/react/src/styles/index.scss index b8589ce..a276e12 100644 --- a/react/src/styles/index.scss +++ b/react/src/styles/index.scss @@ -34,4 +34,12 @@ @import '../components/dashboard/main/dashboard.scss'; @import '../components/login/login.scss'; @import '../components/overrides.scss'; +@import '../components/dashboard/settings/settings.scss'; +@import '../components/dashboard/walletsData/walletsData.scss'; +@import '../components/dashboard/claimInterestModal/claimInterestModal.scss'; +@import '../components/dashboard/jumblr/jumblr.scss'; +@import '../components/dashboard/qrModal/qrModal.scss'; +@import '../components/dashboard/coindDownModal/coindDownModal.scss'; +@import '../components/dashboard/syncOnly/syncOnly.scss'; +@import '../components/toaster/toaster.scss'; @import '~react-table/react-table.css';