dashboard of Bytom
Revision | cd138f57620c7ca0c104187ad1698f89c58eb1a0 (tree) |
---|---|
Zeit | 2021-06-21 16:57:20 |
Autor | j <coffce404@gmai...> |
Commiter | j |
style: update sidebar style
@@ -1,6 +1,6 @@ | ||
1 | 1 | import React from 'react' |
2 | 2 | import styles from './Main.scss' |
3 | -import { MenuItem, Dropdown } from 'react-bootstrap' | |
3 | +import { MenuItem, Dropdown, DropdownButton } from 'react-bootstrap' | |
4 | 4 | import { Link } from 'react-router' |
5 | 5 | import { connect } from 'react-redux' |
6 | 6 | import actions from 'actions' |
@@ -8,21 +8,22 @@ import Tutorial from 'features/tutorial/components/Tutorial' | ||
8 | 8 | import TutorialHeader from 'features/tutorial/components/TutorialHeader/TutorialHeader' |
9 | 9 | import { Navigation, SecondaryNavigation } from '../' |
10 | 10 | import { withNamespaces } from 'react-i18next' |
11 | +import Sync from '../Sync/Sync' | |
12 | +import { navIcon } from '../../utils' | |
11 | 13 | |
12 | 14 | class Main extends React.Component { |
13 | - | |
14 | 15 | constructor(props) { |
15 | 16 | super(props) |
16 | 17 | |
17 | 18 | this.state = { |
18 | - tutorialHeight: 0 | |
19 | + tutorialHeight: 0, | |
19 | 20 | } |
20 | 21 | this.toggleDropdown = this.toggleDropdown.bind(this) |
21 | 22 | this.setTutorialHeight = this.setTutorialHeight.bind(this) |
22 | 23 | } |
23 | 24 | |
24 | 25 | setTutorialHeight(height) { |
25 | - this.setState({tutorialHeight: height }) | |
26 | + this.setState({ tutorialHeight: height }) | |
26 | 27 | } |
27 | 28 | |
28 | 29 | toggleDropdown(event) { |
@@ -33,68 +34,73 @@ class Main extends React.Component { | ||
33 | 34 | render() { |
34 | 35 | let logo = require('images/Logo-Bytom.svg') |
35 | 36 | |
36 | - const { t, i18n , version } = this.props | |
37 | + const { t, i18n, version } = this.props | |
37 | 38 | |
38 | 39 | const changeLanguage = (lng) => { |
39 | 40 | i18n.changeLanguage(lng) |
40 | 41 | } |
41 | 42 | |
42 | 43 | return ( |
43 | - <div className={styles.main} | |
44 | - onClick={this.props.closeDropdown} > | |
44 | + <div className={styles.main} onClick={this.props.closeDropdown}> | |
45 | 45 | <div className={styles.sidebar}> |
46 | 46 | <div className={styles.sidebarContent}> |
47 | - <div className={styles.logo}> | |
47 | + <div className={styles.header}> | |
48 | 48 | <Link to={'/'}> |
49 | 49 | <img src={logo} className={styles.brand_image} /> |
50 | 50 | </Link> |
51 | - | |
52 | - <Dropdown | |
53 | - id='dropdown-custom-1' | |
54 | - bsSize='xsmall' | |
55 | - className={styles.languagesContainer} | |
56 | - pullRight | |
57 | - onSelect={changeLanguage} | |
58 | - > | |
59 | - <Dropdown.Toggle | |
60 | - className={styles.languages} | |
61 | - noCaret | |
62 | - > | |
63 | - {t('language')} | |
64 | - </Dropdown.Toggle> | |
65 | - <Dropdown.Menu | |
66 | - className={styles.languagesMenu} | |
67 | - > | |
68 | - <MenuItem eventKey='zh'>中文</MenuItem> | |
69 | - <MenuItem eventKey='en'>ENGLISH</MenuItem> | |
70 | - </Dropdown.Menu> | |
71 | - </Dropdown> | |
72 | - | |
73 | - <span> | |
74 | - <span className={styles.settings} onClick={this.toggleDropdown}> | |
75 | - <img src={require('images/navigation/settings.png')}/> | |
76 | - </span> | |
77 | - {this.props.showDropwdown && <SecondaryNavigation/>} | |
78 | - </span> | |
51 | + <div className={styles.headerInfo}> | |
52 | + <div>Welcome Back,</div> | |
53 | + <div>Dashboard</div> | |
54 | + </div> | |
79 | 55 | </div> |
80 | 56 | |
81 | 57 | <Navigation /> |
58 | + <Sync /> | |
82 | 59 | |
83 | 60 | <div className={styles.version}> |
84 | 61 | <span> |
85 | 62 | {t('commonWords.version')}: {version} |
86 | 63 | </span> |
87 | 64 | </div> |
65 | + <div className={styles.action}> | |
66 | + <Dropdown id="dropdown-custom-1" bsSize="xsmall" onSelect={changeLanguage} dropup> | |
67 | + <Dropdown.Toggle noCaret className={styles.actionButton}> | |
68 | + <div> | |
69 | + <img src={require(`images/navigation/language.png`)} /> | |
70 | + </div> | |
71 | + </Dropdown.Toggle> | |
72 | + <Dropdown.Menu className={styles.actionMenu}> | |
73 | + <MenuItem eventKey="zh">中文</MenuItem> | |
74 | + <MenuItem eventKey="en">ENGLISH</MenuItem> | |
75 | + </Dropdown.Menu> | |
76 | + </Dropdown> | |
88 | 77 | |
78 | + <Dropdown id="dropdown-custom-1" bsSize="xsmall" dropup> | |
79 | + <Dropdown.Toggle noCaret className={styles.actionButton}> | |
80 | + <div> | |
81 | + <img src={require(`images/navigation/language.png`)} /> | |
82 | + </div> | |
83 | + </Dropdown.Toggle> | |
84 | + <Dropdown.Menu className={styles.actionMenu}> | |
85 | + <MenuItem eventKey="coreStatus"><Link to="/core">{ t('crumbName.coreStatus') }</Link></MenuItem> | |
86 | + <MenuItem eventKey="backupRestore"><Link to="/backup">{ t('crumbName.backupRestore') }</Link></MenuItem> | |
87 | + {this.props.canViewTokens && <MenuItem eventKey="accessControl"><Link to="/access-control">{ t('crumbName.accessControl') }</Link></MenuItem>} | |
88 | + {this.props.canLogOut && <MenuItem eventKey="logout" onClick={this.props.logOut}>{ t('crumbName.logout') }</MenuItem>} | |
89 | + </Dropdown.Menu> | |
90 | + </Dropdown> | |
91 | + </div> | |
89 | 92 | </div> |
90 | 93 | </div> |
91 | 94 | |
92 | - <div className={`${styles.content} flex-container`} style={{marginTop: this.state.tutorialHeight}}> | |
93 | - {!this.props.connected && <div className={styles.connectionIssue}> | |
94 | - There was an issue connecting to Chain Core. Please check your connection while dashboard attempts to reconnect. | |
95 | - </div>} | |
95 | + <div className={`${styles.content} flex-container`} style={{ marginTop: this.state.tutorialHeight }}> | |
96 | + {!this.props.connected && ( | |
97 | + <div className={styles.connectionIssue}> | |
98 | + There was an issue connecting to Chain Core. Please check your connection while dashboard attempts to | |
99 | + reconnect. | |
100 | + </div> | |
101 | + )} | |
96 | 102 | <TutorialHeader handleTutorialHeight={this.setTutorialHeight}> |
97 | - <Tutorial types={['TutorialInfo']}/> | |
103 | + <Tutorial types={['TutorialInfo']} /> | |
98 | 104 | </TutorialHeader> |
99 | 105 | {this.props.children} |
100 | 106 | </div> |
@@ -103,15 +109,19 @@ class Main extends React.Component { | ||
103 | 109 | } |
104 | 110 | } |
105 | 111 | |
106 | -export default withNamespaces('translations') (connect( | |
107 | - (state) => ({ | |
108 | - canLogOut: state.core.requireClientToken, | |
109 | - version:state.core.version, | |
110 | - connected: true, | |
111 | - showDropwdown: state.app.dropdownState == 'open', | |
112 | - }), | |
113 | - (dispatch) => ({ | |
114 | - toggleDropdown: () => dispatch(actions.app.toggleDropdown), | |
115 | - closeDropdown: () => dispatch(actions.app.closeDropdown), | |
116 | - }) | |
117 | -)(Main)) | |
112 | +export default withNamespaces('translations')( | |
113 | + connect( | |
114 | + (state) => ({ | |
115 | + canLogOut: state.core.requireClientToken, | |
116 | + canViewTokens: !state.core.clientToken, | |
117 | + version: state.core.version, | |
118 | + connected: true, | |
119 | + showDropwdown: state.app.dropdownState == 'open', | |
120 | + }), | |
121 | + (dispatch) => ({ | |
122 | + toggleDropdown: () => dispatch(actions.app.toggleDropdown), | |
123 | + closeDropdown: () => dispatch(actions.app.closeDropdown), | |
124 | + logOut: () => dispatch(actions.core.clearSession) | |
125 | + }), | |
126 | + )(Main), | |
127 | +) |
@@ -2,12 +2,14 @@ | ||
2 | 2 | display: flex; |
3 | 3 | flex-direction: column; |
4 | 4 | flex: 1; |
5 | + background: rgba(248, 248, 248, 0.95); | |
5 | 6 | } |
6 | 7 | |
7 | 8 | .sidebar { |
8 | 9 | width: $sidebar-width; |
9 | 10 | position: fixed; |
10 | 11 | z-index: 10; |
12 | + color: #78808D; | |
11 | 13 | } |
12 | 14 | |
13 | 15 | .content { |
@@ -17,15 +19,11 @@ | ||
17 | 19 | } |
18 | 20 | |
19 | 21 | .sidebarContent { |
20 | - background-image: url('images/sidebarBackground.svg'); | |
21 | - background-color: $background-inverse-color; | |
22 | - background-repeat: no-repeat; | |
23 | - background-position: 0px 60px; | |
24 | - background-size: cover; | |
25 | 22 | position: fixed; |
26 | 23 | width: $sidebar-width; |
27 | 24 | height: 100%; |
28 | 25 | padding-bottom: 30px; |
26 | + background: rgba(248, 248, 248, 0.95); | |
29 | 27 | |
30 | 28 | overflow-y: auto; |
31 | 29 | -ms-overflow-style: none; // MS Edge fix |
@@ -34,25 +32,31 @@ | ||
34 | 32 | } |
35 | 33 | |
36 | 34 | .version { |
37 | - position: fixed; | |
38 | 35 | width: $sidebar-width; |
39 | - bottom: 0; | |
40 | 36 | border-top: solid 1px $border-inverse-color; |
41 | - | |
42 | - padding: $gutter-size/2 $gutter-size; | |
43 | - background: #FCFDFD; | |
37 | + padding: 0 26px 0; | |
44 | 38 | font-size: $font-size-chrome; |
45 | 39 | } |
46 | 40 | |
47 | -.logo { | |
48 | - border-bottom: 1px solid $border-inverse-color; | |
49 | - height: $title-height; | |
50 | - padding-left: $gutter-size; | |
41 | +.header { | |
51 | 42 | display: flex; |
52 | 43 | align-items: center; |
44 | + margin: 30px 24px; | |
53 | 45 | |
54 | 46 | img { |
55 | - height: 28px; | |
47 | + height: 64px; | |
48 | + width: 64px; | |
49 | + } | |
50 | +} | |
51 | +.headerInfo { | |
52 | + margin-left: 12px; | |
53 | + color: #78808D; | |
54 | + font-size: 16px; | |
55 | + | |
56 | + >div:last-child { | |
57 | + color: #444B57; | |
58 | + font-size: 18px; | |
59 | + font-weight: bold; | |
56 | 60 | } |
57 | 61 | } |
58 | 62 |
@@ -70,21 +74,32 @@ | ||
70 | 74 | } |
71 | 75 | } |
72 | 76 | |
73 | -.languagesContainer { | |
74 | - position: absolute; | |
75 | - right: 38px; | |
76 | - top: 0px; | |
77 | - height: 60px; | |
77 | +.action { | |
78 | + margin-top: 16px; | |
79 | + padding: 0 26px; | |
78 | 80 | } |
79 | 81 | |
80 | -.languages { | |
81 | - top: 50%; | |
82 | - transform: translateY(-50%); | |
83 | - border: none; | |
84 | - background-color: transparentize($highlight-inverse-color, 0.9); | |
85 | - color: $highlight-inverse-color; | |
86 | - height: 27px; | |
87 | - line-height: 27px !important; | |
82 | +.actionButton { | |
83 | + display: flex; | |
84 | + justify-content: center; | |
85 | + align-items: center; | |
86 | + margin-right: 24px; | |
87 | + width: 62px; | |
88 | + height: 48px; | |
89 | + border: 1px solid #E1E3E6; | |
90 | + border-radius: 8px !important; | |
91 | + box-shadow: 0px 4px 2px -2px rgba(27, 46, 94, 0.02); | |
92 | + | |
93 | + img { | |
94 | + width: 20px; | |
95 | + height: 20px; | |
96 | + } | |
97 | +} | |
98 | + | |
99 | +.actionMenu { | |
100 | + a { | |
101 | + color: #78808D !important; | |
102 | + } | |
88 | 103 | } |
89 | 104 | |
90 | 105 | .connectionIssue { |
@@ -95,6 +110,6 @@ | ||
95 | 110 | border-bottom: 1px solid $highlight-danger; |
96 | 111 | } |
97 | 112 | |
98 | -.languagesMenu { | |
99 | - right: -26px; | |
100 | -} | |
\ No newline at end of file | ||
113 | +// .languagesMenu { | |
114 | +// right: -26px; | |
115 | +// } | |
\ No newline at end of file |
@@ -1,12 +1,12 @@ | ||
1 | 1 | import React from 'react' |
2 | -import {connect} from 'react-redux' | |
3 | -import {Link} from 'react-router' | |
2 | +import { connect } from 'react-redux' | |
3 | +import { Link } from 'react-router' | |
4 | 4 | import styles from './Navigation.scss' |
5 | -import {navIcon} from '../../utils' | |
5 | +import { navIcon } from '../../utils' | |
6 | 6 | import Sync from '../Sync/Sync' |
7 | -import {docsRoot, releaseUrl} from '../../../../utility/environment' | |
7 | +import { docsRoot, releaseUrl } from '../../../../utility/environment' | |
8 | 8 | import { capitalize } from 'utility/string' |
9 | -import {withNamespaces} from 'react-i18next' | |
9 | +import { withNamespaces } from 'react-i18next' | |
10 | 10 | import actions from 'actions' |
11 | 11 | |
12 | 12 | class Navigation extends React.Component { |
@@ -14,7 +14,7 @@ class Navigation extends React.Component { | ||
14 | 14 | super(props) |
15 | 15 | this.openTutorial = this.openTutorial.bind(this) |
16 | 16 | this.state = { |
17 | - showFed: false | |
17 | + showFed: false, | |
18 | 18 | } |
19 | 19 | } |
20 | 20 |
@@ -23,12 +23,13 @@ class Navigation extends React.Component { | ||
23 | 23 | this.props.openTutorial() |
24 | 24 | } |
25 | 25 | componentDidMount() { |
26 | - this.props.fetchFederationItem() | |
27 | - .then(resp =>{ | |
28 | - this.setState({showFed: true}) | |
26 | + this.props | |
27 | + .fetchFederationItem() | |
28 | + .then((resp) => { | |
29 | + this.setState({ showFed: true }) | |
29 | 30 | }) |
30 | - .catch(e =>{ | |
31 | - this.setState({showFed: false}) | |
31 | + .catch((e) => { | |
32 | + this.setState({ showFed: false }) | |
32 | 33 | }) |
33 | 34 | } |
34 | 35 |
@@ -36,39 +37,105 @@ class Navigation extends React.Component { | ||
36 | 37 | const t = this.props.t |
37 | 38 | return ( |
38 | 39 | <div className={styles.main}> |
39 | - {this.props.update && <div className={`${styles.updateWarning} ${styles.smallFont}`}> | |
40 | - <a href={releaseUrl} target='_blank'> | |
41 | - <img src={require('images/warning.svg')} className={styles.warningIcon} /> | |
42 | - {this.props.newVersionCode}{t('crumbName.update')} | |
43 | - </a> | |
44 | - </div>} | |
40 | + {this.props.update && ( | |
41 | + <div className={`${styles.updateWarning} ${styles.smallFont}`}> | |
42 | + <a href={releaseUrl} target="_blank"> | |
43 | + <img src={require('images/warning.svg')} className={styles.warningIcon} /> | |
44 | + {this.props.newVersionCode} | |
45 | + {t('crumbName.update')} | |
46 | + </a> | |
47 | + </div> | |
48 | + )} | |
49 | + <ul className={styles.navigation}> | |
50 | + <li> | |
51 | + <Link to="/transactions" activeClassName={styles.active}> | |
52 | + {navIcon('transaction', styles)} | |
53 | + {capitalize(t('crumbName.transaction'))} | |
54 | + </Link> | |
55 | + </li> | |
56 | + <li> | |
57 | + <Link to="/assets" activeClassName={styles.active}> | |
58 | + {navIcon('asset', styles)} | |
59 | + {capitalize(t('crumbName.asset'))} | |
60 | + </Link> | |
61 | + </li> | |
62 | + <li> | |
63 | + <Link to="/balances" activeClassName={styles.active}> | |
64 | + {navIcon('balance', styles)} | |
65 | + {capitalize(t('crumbName.balance'))} | |
66 | + </Link> | |
67 | + </li> | |
68 | + <li> | |
69 | + <Link to="/accounts" activeClassName={styles.active}> | |
70 | + {navIcon('account', styles)} | |
71 | + {capitalize(t('crumbName.accountManagement'))} | |
72 | + </Link> | |
73 | + </li> | |
74 | + {this.props.showNavAdvance && ( | |
75 | + <div> | |
76 | + <li> | |
77 | + <Link to="/unspents" activeClassName={styles.active}> | |
78 | + {navIcon('unspent', styles)} | |
79 | + {capitalize(t('crumbName.unspent'))} | |
80 | + </Link> | |
81 | + </li> | |
82 | + <li> | |
83 | + <Link to="/keys" activeClassName={styles.active}> | |
84 | + {navIcon('mockhsm', styles)} | |
85 | + {capitalize(t('crumbName.key'))} | |
86 | + </Link> | |
87 | + </li> | |
88 | + </div> | |
89 | + )} | |
90 | + <li> | |
91 | + <Link to="/keys" activeClassName={styles.active}> | |
92 | + {navIcon('mockhsm', styles)} | |
93 | + {capitalize(t('crumbName.key'))} | |
94 | + </Link> | |
95 | + </li> | |
96 | + </ul> | |
97 | + </div> | |
98 | + ) | |
99 | + return ( | |
100 | + <div className={styles.main}> | |
101 | + {this.props.update && ( | |
102 | + <div className={`${styles.updateWarning} ${styles.smallFont}`}> | |
103 | + <a href={releaseUrl} target="_blank"> | |
104 | + <img src={require('images/warning.svg')} className={styles.warningIcon} /> | |
105 | + {this.props.newVersionCode} | |
106 | + {t('crumbName.update')} | |
107 | + </a> | |
108 | + </div> | |
109 | + )} | |
45 | 110 | <ul className={styles.navigation}> |
46 | 111 | <li className={styles.navigationTitle}>{t('crumbName.coreData')}</li> |
47 | 112 | <li> |
48 | - <Link to='/transactions' activeClassName={styles.active}> | |
113 | + <Link to="/transactions" activeClassName={styles.active}> | |
49 | 114 | {navIcon('transaction', styles)} |
50 | 115 | {capitalize(t('crumbName.transaction'))} |
51 | 116 | </Link> |
52 | 117 | </li> |
53 | 118 | |
54 | 119 | <li> |
55 | - <Link to='/assets' activeClassName={styles.active}> | |
120 | + <Link to="/assets" activeClassName={styles.active}> | |
56 | 121 | {navIcon('asset', styles)} |
57 | - {capitalize((t('crumbName.asset')))} | |
122 | + {capitalize(t('crumbName.asset'))} | |
58 | 123 | </Link> |
59 | 124 | </li> |
60 | 125 | <li> |
61 | - <Link to='/balances' activeClassName={styles.active}> | |
126 | + <Link to="/balances" activeClassName={styles.active}> | |
62 | 127 | {navIcon('balance', styles)} |
63 | - {capitalize((t('crumbName.balance')))} | |
128 | + {capitalize(t('crumbName.balance'))} | |
64 | 129 | </Link> |
65 | 130 | </li> |
66 | - { this.state.showFed && <li> | |
67 | - <Link to='/federations' activeClassName={styles.active}> | |
68 | - {navIcon('federation', styles)} | |
69 | - {capitalize((t('crumbName.federation')))} | |
70 | - </Link> | |
71 | - </li>} | |
131 | + {this.state.showFed && ( | |
132 | + <li> | |
133 | + <Link to="/federations" activeClassName={styles.active}> | |
134 | + {navIcon('federation', styles)} | |
135 | + {capitalize(t('crumbName.federation'))} | |
136 | + </Link> | |
137 | + </li> | |
138 | + )} | |
72 | 139 | </ul> |
73 | 140 | |
74 | 141 | {/* <ul className={styles.navigation}> |
@@ -81,35 +148,39 @@ class Navigation extends React.Component { | ||
81 | 148 | </li> |
82 | 149 | </ul> */} |
83 | 150 | <ul className={styles.navigation}> |
84 | - <li className={styles.navigationTitle}>{t('crumbName.account')}( {this.props.currentAccount} )</li> | |
151 | + <li className={styles.navigationTitle}> | |
152 | + {t('crumbName.account')}( {this.props.currentAccount} ) | |
153 | + </li> | |
85 | 154 | <li> |
86 | - <Link to='/accounts' activeClassName={styles.active}> | |
155 | + <Link to="/accounts" activeClassName={styles.active}> | |
87 | 156 | {navIcon('account', styles)} |
88 | 157 | {capitalize(t('crumbName.accountManagement'))} |
89 | 158 | </Link> |
90 | 159 | </li> |
91 | 160 | </ul> |
92 | 161 | |
93 | - { this.props.showNavAdvance && <ul className={styles.navigation}> | |
94 | - <li className={styles.navigationTitle}>{ t('crumbName.advanced') }</li> | |
95 | - <li> | |
96 | - <Link to='/unspents' activeClassName={styles.active}> | |
97 | - {navIcon('unspent', styles)} | |
98 | - {capitalize((t('crumbName.unspent')))} | |
99 | - </Link> | |
100 | - </li> | |
101 | - <li> | |
102 | - <Link to='/keys' activeClassName={styles.active}> | |
103 | - {navIcon('mockhsm', styles)} | |
104 | - {capitalize((t('crumbName.key')))} | |
105 | - </Link> | |
106 | - </li> | |
107 | - </ul>} | |
162 | + {this.props.showNavAdvance && ( | |
163 | + <ul className={styles.navigation}> | |
164 | + <li className={styles.navigationTitle}>{t('crumbName.advanced')}</li> | |
165 | + <li> | |
166 | + <Link to="/unspents" activeClassName={styles.active}> | |
167 | + {navIcon('unspent', styles)} | |
168 | + {capitalize(t('crumbName.unspent'))} | |
169 | + </Link> | |
170 | + </li> | |
171 | + <li> | |
172 | + <Link to="/keys" activeClassName={styles.active}> | |
173 | + {navIcon('mockhsm', styles)} | |
174 | + {capitalize(t('crumbName.key'))} | |
175 | + </Link> | |
176 | + </li> | |
177 | + </ul> | |
178 | + )} | |
108 | 179 | |
109 | 180 | <ul className={styles.navigation}> |
110 | - <li className={styles.navigationTitle}>{t('crumbName.help') }</li> | |
181 | + <li className={styles.navigationTitle}>{t('crumbName.help')}</li> | |
111 | 182 | <li> |
112 | - <a href={docsRoot} target='_blank'> | |
183 | + <a href={docsRoot} target="_blank"> | |
113 | 184 | {navIcon('docs', styles)} |
114 | 185 | {t('crumbName.doc')} |
115 | 186 | </a> |
@@ -117,35 +188,33 @@ class Navigation extends React.Component { | ||
117 | 188 | </ul> |
118 | 189 | |
119 | 190 | {/*<ul className={styles.navigation}>*/} |
120 | - {/*<li className={styles.navigationTitle}>{ t('crumbName.developer') }</li>*/} | |
121 | - {/*<li>*/} | |
122 | - {/*<a href='/equity' target='_blank'>*/} | |
123 | - {/*{navIcon('transaction', styles)}*/} | |
124 | - {/*{ t('crumbName.equity')}*/} | |
125 | - {/*</a>*/} | |
126 | - {/*</li>*/} | |
191 | + {/*<li className={styles.navigationTitle}>{ t('crumbName.developer') }</li>*/} | |
192 | + {/*<li>*/} | |
193 | + {/*<a href='/equity' target='_blank'>*/} | |
194 | + {/*{navIcon('transaction', styles)}*/} | |
195 | + {/*{ t('crumbName.equity')}*/} | |
196 | + {/*</a>*/} | |
197 | + {/*</li>*/} | |
127 | 198 | {/*</ul>*/} |
128 | 199 | |
129 | - | |
130 | - <Sync/> | |
131 | - | |
200 | + <Sync /> | |
132 | 201 | </div> |
133 | 202 | ) |
134 | 203 | } |
135 | 204 | } |
136 | 205 | |
137 | 206 | export default connect( |
138 | - state => { | |
207 | + (state) => { | |
139 | 208 | return { |
140 | 209 | newVersionCode: state.core.newVersionCode, |
141 | 210 | update: state.core.update, |
142 | 211 | coreData: state.core.coreData, |
143 | 212 | routing: state.routing, // required for <Link>s to update active state on navigation |
144 | 213 | showNavAdvance: state.app.navAdvancedState === 'advance', |
145 | - currentAccount: state.account.currentAccount | |
214 | + currentAccount: state.account.currentAccount, | |
146 | 215 | } |
147 | 216 | }, |
148 | 217 | (dispatch) => ({ |
149 | 218 | fetchFederationItem: () => dispatch(actions.federation.fetchItems()), |
150 | - }) | |
151 | -)( withNamespaces('translations')(Navigation)) | |
219 | + }), | |
220 | +)(withNamespaces('translations')(Navigation)) |
@@ -4,26 +4,27 @@ | ||
4 | 4 | margin-top: $gutter-size; |
5 | 5 | } |
6 | 6 | |
7 | -.main { | |
8 | - a { | |
9 | - display: block; | |
10 | - padding: 5px 0; | |
11 | - color: $highlight-inverse-color; | |
12 | - font-size: $font-size-nav; | |
13 | - } | |
14 | - | |
15 | - .active, | |
16 | - .active:hover, | |
17 | - .active:focus { | |
18 | - color: $highlight-default; | |
19 | - } | |
20 | - | |
21 | - a:hover, | |
22 | - a:focus { | |
23 | - text-decoration: none; | |
24 | - color: lighten($highlight-inverse-color, 15%); | |
25 | - } | |
26 | -} | |
7 | +// .main { | |
8 | +// a { | |
9 | +// display: block; | |
10 | +// padding: 5px 0; | |
11 | +// color: $highlight-inverse-color; | |
12 | +// font-size: $font-size-nav; | |
13 | +// } | |
14 | + | |
15 | +// .active, | |
16 | +// .active:hover, | |
17 | +// .active:focus { | |
18 | +// color: #444B57; | |
19 | +// background: #fff; | |
20 | +// } | |
21 | + | |
22 | +// a:hover, | |
23 | +// a:focus { | |
24 | +// text-decoration: none; | |
25 | +// color: lighten($highlight-inverse-color, 15%); | |
26 | +// } | |
27 | +// } | |
27 | 28 | |
28 | 29 | .langBtn { |
29 | 30 | width: 80px !important; |
@@ -38,38 +39,30 @@ | ||
38 | 39 | } |
39 | 40 | |
40 | 41 | .navigation { |
41 | - padding: 0; | |
42 | 42 | list-style-type: none; |
43 | - margin-top: $gutter-size/2; | |
44 | - margin-bottom: 0; | |
45 | - padding: 0 $gutter-size; | |
46 | -} | |
43 | + padding: 0 24px; | |
47 | 44 | |
48 | -.navigationTitle { | |
49 | - color: $highlight-inverse-color; | |
50 | - //font-size: $font-size-caps; | |
51 | - text-transform: uppercase; | |
52 | - padding: 3px 0; | |
53 | - font-size: $font-size-chrome; | |
54 | - | |
55 | - transform:scale(0.916); | |
56 | - transform-origin-x: 0%; | |
57 | - | |
58 | - -ms-transform:scale(0.916); | |
59 | - -ms-transform-origin-x: 0%; | |
60 | - | |
61 | - -moz-transform:scale(0.916); | |
62 | - -moz-transform-origin-x: 0%; | |
63 | - | |
64 | - -o-transform:scale(0.916); | |
65 | - -o-transform-origin-x: 0%; | |
66 | - | |
67 | - -webkit-transform: scale(0.916); | |
68 | - -webkit-transform-origin-x: 0%; | |
45 | + a { | |
46 | + display: block; | |
47 | + margin-bottom: 10px; | |
48 | + padding: 0 18px; | |
49 | + height: 48px; | |
50 | + line-height: 48px; | |
51 | + color: #78808D; | |
52 | + font-size: 18px; | |
53 | + border-radius: 8px; | |
54 | + | |
55 | + &.active { | |
56 | + background: #fff; | |
57 | + font-weight: 500; | |
58 | + } | |
59 | + } | |
69 | 60 | } |
70 | 61 | |
62 | + | |
71 | 63 | .activeIcon { |
72 | 64 | display: none; |
65 | + color: #78808D; | |
73 | 66 | } |
74 | 67 | |
75 | 68 | .active .activeIcon { |
@@ -29,8 +29,8 @@ class Sync extends React.Component { | ||
29 | 29 | |
30 | 30 | if (syncing) { |
31 | 31 | return <ul className={`${navStyles.navigation} ${styles.main}`}> |
32 | - <li key='sync-title' className={navStyles.navigationTitle}>{ networkID } { t('sync.status')}</li> | |
33 | - <li key='sync-peer-count' className={(peerCount>0)?styles.blockHightlight: null}> | |
32 | + <li key='sync-title' className={styles.status}>{ networkID } { t('sync.status')}</li> | |
33 | + <li key='sync-peer-count' className={styles.peerCount}> | |
34 | 34 | <Link to={'/peers'}> |
35 | 35 | {t('sync.peer')}: {peerCount} |
36 | 36 | </Link> |
@@ -43,8 +43,8 @@ class Sync extends React.Component { | ||
43 | 43 | |
44 | 44 | const elems = [] |
45 | 45 | |
46 | - elems.push(<li key='sync-title' className={navStyles.navigationTitle}>{ networkID } {t('sync.status') }</li>) | |
47 | - elems.push(<li key='sync-peer-count' className={(peerCount>0)?styles.blockHightlight: null}> | |
46 | + elems.push(<li key='sync-title' className={styles.status}>{ networkID } {t('sync.status') }</li>) | |
47 | + elems.push(<li key='sync-peer-count' className={styles.peerCount}> | |
48 | 48 | <Link to={'/peers'}> |
49 | 49 | {t('sync.peer')}: {peerCount} |
50 | 50 | </Link> |
@@ -1,6 +1,7 @@ | ||
1 | 1 | .main { |
2 | - padding: $gutter-size; | |
3 | - margin-top: $gutter-size; | |
2 | + padding: 0 26px; | |
3 | + margin-top: 36px; | |
4 | + color: #78808D; | |
4 | 5 | } |
5 | 6 | |
6 | 7 | .testnetError { |
@@ -20,3 +21,18 @@ | ||
20 | 21 | height: 5px; |
21 | 22 | border-radius: 0; |
22 | 23 | } |
24 | + | |
25 | +.status { | |
26 | + font-size: 12px; | |
27 | +} | |
28 | + | |
29 | +.peerCount { | |
30 | + margin-top: 14px; | |
31 | + margin-bottom: 16px; | |
32 | + | |
33 | + a { | |
34 | + padding: 0; | |
35 | + line-height: 20px; | |
36 | + height: unset; | |
37 | + } | |
38 | +} | |
\ No newline at end of file |
@@ -12,8 +12,8 @@ | ||
12 | 12 | @import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_tooltip'; |
13 | 13 | |
14 | 14 | $background-color: #ffffff; |
15 | -$background-content-color: #F3F6F8; | |
16 | -$background-emphasis-color: #fafafa; | |
15 | +$background-content-color: #fff; | |
16 | +$background-emphasis-color: #fff; | |
17 | 17 | |
18 | 18 | $border-color: #F5F5F5; |
19 | 19 | $border-strong-color: #cccccc; |
@@ -49,7 +49,7 @@ $gutter-size: 30px; | ||
49 | 49 | |
50 | 50 | $minWidth: 930px; |
51 | 51 | $maxWidth: 1240px; |
52 | -$sidebar-width: 220px; | |
52 | +$sidebar-width: 280px; | |
53 | 53 | |
54 | 54 | $box-shadow: 0 3px 6px -2px rgba(0,0,0,0.15); |
55 | 55 |