5 changed files with 17 additions and 257 deletions
@ -1,61 +0,0 @@ |
|||
import React from 'react' |
|||
import PropTypes from 'prop-types' |
|||
import { NavLink } from 'react-router-dom' |
|||
import Isvg from 'react-inlinesvg' |
|||
|
|||
import walletIcon from 'icons/wallet_2.svg' |
|||
import peersIcon from 'icons/contacts.svg' |
|||
import networkIcon from 'icons/network.svg' |
|||
import helpIcon from 'icons/help_2.svg' |
|||
|
|||
import styles from './Nav.scss' |
|||
|
|||
const Nav = ({ openPayForm, openRequestForm }) => ( |
|||
<nav className={styles.nav}> |
|||
<header className={styles.header}> |
|||
<h1>zap</h1> |
|||
<span>beta</span> |
|||
</header> |
|||
<ul className={styles.links}> |
|||
<NavLink exact to='/' activeClassName={styles.active} className={styles.link}> |
|||
<li> |
|||
<Isvg styles={{ verticalAlign: 'middle' }} src={walletIcon} /> |
|||
<span>Wallet</span> |
|||
</li> |
|||
</NavLink> |
|||
<NavLink exact to='/contacts' activeClassName={styles.active} className={styles.link}> |
|||
<li> |
|||
<Isvg styles={{ verticalAlign: 'middle' }} src={peersIcon} /> |
|||
<span>Contacts</span> |
|||
</li> |
|||
</NavLink> |
|||
<NavLink exact to='/network' activeClassName={styles.active} className={styles.link}> |
|||
<li> |
|||
<Isvg styles={{ verticalAlign: 'middle' }} src={networkIcon} /> |
|||
<span>Network</span> |
|||
</li> |
|||
</NavLink> |
|||
<NavLink exact to='/help' activeClassName={styles.active} className={styles.link}> |
|||
<li> |
|||
<Isvg styles={{ verticalAlign: 'middle' }} src={helpIcon} /> |
|||
<span>Help</span> |
|||
</li> |
|||
</NavLink> |
|||
</ul> |
|||
<div className={styles.buttons}> |
|||
<div className={`buttonPrimary ${styles.button}`} onClick={openPayForm}> |
|||
<span>Pay</span> |
|||
</div> |
|||
<div className={`buttonPrimary ${styles.button}`} onClick={openRequestForm}> |
|||
<span>Request</span> |
|||
</div> |
|||
</div> |
|||
</nav> |
|||
) |
|||
|
|||
Nav.propTypes = { |
|||
openPayForm: PropTypes.func.isRequired, |
|||
openRequestForm: PropTypes.func.isRequired |
|||
} |
|||
|
|||
export default Nav |
@ -1,188 +0,0 @@ |
|||
@import '../../variables.scss'; |
|||
|
|||
.nav { |
|||
display: inline-block; |
|||
vertical-align: top; |
|||
width: 15%; |
|||
font-size: 24px; |
|||
background: $secondary; |
|||
height: 100vh; |
|||
position: relative; |
|||
min-width: 15%; |
|||
color: $white; |
|||
} |
|||
|
|||
.header { |
|||
padding: 20px; |
|||
|
|||
h1 { |
|||
color: $main; |
|||
font-size: 30px; |
|||
font-weight: 300; |
|||
text-align: center; |
|||
float: left; |
|||
-webkit-font-smoothing: antialiased; |
|||
margin-right: 5px; |
|||
} |
|||
|
|||
span { |
|||
font-family: "Open Sans", "Helvetica Neue", Helvetica; |
|||
color: #bbb; |
|||
font-size: 11px; |
|||
letter-spacing: 2px; |
|||
text-transform: uppercase; |
|||
text-align: right; |
|||
line-height: 100%; |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
} |
|||
} |
|||
|
|||
.info { |
|||
padding: 25px 10px 10px 10px; |
|||
|
|||
.link { |
|||
display: inline-block; |
|||
vertical-align: top; |
|||
list-style-type: none; |
|||
width: 50%; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
|
|||
|
|||
.currency { |
|||
margin: 0 1px; |
|||
|
|||
&.active { |
|||
color: $main; |
|||
} |
|||
|
|||
span { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
|
|||
svg[data-icon='ltc'] { |
|||
width: 24px; |
|||
height: 28px; |
|||
|
|||
g { |
|||
transform: scale(1.75) translate(-5px, -5px); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.logo { |
|||
text-align: center; |
|||
margin-top: 20px; |
|||
margin-bottom: 35%; |
|||
|
|||
svg { |
|||
width: 100px; |
|||
height: 100px; |
|||
} |
|||
} |
|||
|
|||
.balance { |
|||
text-align: right; |
|||
color: $main; |
|||
|
|||
p { |
|||
margin: 2px 0; |
|||
|
|||
&:first-child { |
|||
font-size: 14px; |
|||
} |
|||
|
|||
&:nth-child(2) { |
|||
font-size: 12px; |
|||
} |
|||
|
|||
span { |
|||
display: inline-block; |
|||
vertical-align: top; |
|||
|
|||
svg[data-icon='ltc'] { |
|||
width: 10px; |
|||
height: 10px; |
|||
|
|||
g { |
|||
transform: scale(1.75) translate(-5px, -5px); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.links { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin-top: 50%; |
|||
|
|||
.link { |
|||
position: relative; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 100%; |
|||
color: $darkestgrey; |
|||
opacity: 0.5; |
|||
cursor: pointer; |
|||
text-decoration: none; |
|||
transition: all 0.25s; |
|||
|
|||
li { |
|||
margin: 12.5px 0; |
|||
min-width: 150px; |
|||
} |
|||
|
|||
&.active { |
|||
color: $main; |
|||
opacity: 1.0; |
|||
|
|||
svg g { |
|||
stroke: $main; |
|||
} |
|||
} |
|||
|
|||
svg { |
|||
width: 28px; |
|||
height: 28px; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
span { |
|||
margin-left: 15px; |
|||
line-height: 22px; |
|||
font-size: 18px; |
|||
font-weight: 500; |
|||
letter-spacing: .2px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.buttons { |
|||
width: 75%; |
|||
font-size: 18px; |
|||
position: absolute; |
|||
bottom: 10px; |
|||
right: 12.5%; |
|||
|
|||
.button { |
|||
margin-bottom: 20px; |
|||
font-weight: bold; |
|||
cursor: pointer; |
|||
text-transform: uppercase; |
|||
letter-spacing: .2px; |
|||
font-size: 0.75em; |
|||
} |
|||
} |
|||
|
|||
|
|||
.content { |
|||
width: 80%; |
|||
} |
@ -1,3 +0,0 @@ |
|||
import Nav from './Nav' |
|||
|
|||
export default Nav |
Loading…
Reference in new issue