(add) styled header links.+ icons / (add) styled header mobile menu button / (add) component for main title / (add) component for navigation links /
|
@ -44,12 +44,6 @@ class App extends Component {
|
|||
url: `${commonStore.rootPath}/new`,
|
||||
class: 'btn btn-new-ballot btn-success btn-new no-shadow text-capitalize'
|
||||
}
|
||||
// {
|
||||
// 'icon': '',
|
||||
// 'title': 'Settings',
|
||||
// 'url': `${ commonStore.rootPath }/settings`,
|
||||
// class: ''
|
||||
// }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
|
||||
<path fill="#ffffff" fill-rule="evenodd" d="M17 18a1 1 0 0 1-1-1v-1H2v1a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1zm0-5H1a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1zm-1-6H2v4h14V7zM4 8h1a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm4 0h6a1 1 0 0 1 0 2H8a1 1 0 0 1 0-2zm9-4H1a1 1 0 0 1-1-1V1a1 1 0 0 1 2 0v1h14V1a1 1 0 0 1 2 0v2a1 1 0 0 1-1 1z"/>
|
||||
</svg>
|
Before Width: | Height: | Size: 448 B |
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
|
||||
<path fill="#60DB97" fill-rule="evenodd" d="M17 18a1 1 0 0 1-1-1v-1H2v1a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1zm0-5H1a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1zm-1-6H2v4h14V7zM4 8h1a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm4 0h6a1 1 0 0 1 0 2H8a1 1 0 0 1 0-2zm9-4H1a1 1 0 0 1-1-1V1a1 1 0 0 1 2 0v1h14V1a1 1 0 0 1 2 0v2a1 1 0 0 1-1 1z"/>
|
||||
</svg>
|
Before Width: | Height: | Size: 448 B |
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="17">
|
||||
<path fill="#ffffff" fill-rule="evenodd" d="M16 10.95V11H2v-.05a2.502 2.502 0 0 1 0-4.9V6h14v.05a2.502 2.502 0 0 1 0 4.9zM16 8H2v1h14V8zm0-3.05V5H2v-.05a2.502 2.502 0 0 1 0-4.9V0h14v.05a2.502 2.502 0 0 1 0 4.9zM16 2H2v1h14V2zM2 12.05V12h14v.05a2.502 2.502 0 0 1 0 4.9V17H2v-.05a2.502 2.502 0 0 1 0-4.9zM2 15h14v-1H2v1z"/>
|
||||
</svg>
|
Before Width: | Height: | Size: 397 B |
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="17">
|
||||
<path fill="#60DB97" fill-rule="evenodd" d="M16 10.95V11H2v-.05a2.502 2.502 0 0 1 0-4.9V6h14v.05a2.502 2.502 0 0 1 0 4.9zM16 8H2v1h14V8zm0-3.05V5H2v-.05a2.502 2.502 0 0 1 0-4.9V0h14v.05a2.502 2.502 0 0 1 0 4.9zM16 2H2v1h14V2zM2 12.05V12h14v.05a2.502 2.502 0 0 1 0 4.9V17H2v-.05a2.502 2.502 0 0 1 0-4.9zM2 15h14v-1H2v1z"/>
|
||||
</svg>
|
Before Width: | Height: | Size: 397 B |
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"><path fill="#fff" fill-rule="evenodd" d="M17.691 1.719l-3 3-4.265 4.265.019.02 4.245 4.245 3 3a1.019 1.019 0 1 1-1.441 1.441l-3-3-4.265-4.264L4.72 14.69l-3 3a1.02 1.02 0 0 1-1.442-1.441l3-3 4.265-4.265-.02-.019-4.245-4.246-3-3A1.019 1.019 0 1 1 1.719.278l3 3 4.265 4.265 4.266-4.265 3-3a1.019 1.019 0 1 1 1.441 1.441z"/></svg>
|
Before Width: | Height: | Size: 389 B |
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"><path fill="#60DB97" fill-rule="evenodd" d="M17.691 1.719l-3 3-4.265 4.265.019.02 4.245 4.245 3 3a1.019 1.019 0 1 1-1.441 1.441l-3-3-4.265-4.264L4.72 14.69l-3 3a1.02 1.02 0 0 1-1.442-1.441l3-3 4.265-4.265-.02-.019-4.245-4.246-3-3A1.019 1.019 0 1 1 1.719.278l3 3 4.265 4.265 4.266-4.265 3-3a1.019 1.019 0 1 1 1.441 1.441z"/></svg>
|
Before Width: | Height: | Size: 392 B |
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="14"><path fill="#fff" fill-rule="evenodd" d="M17 8H1a1 1 0 0 1 0-2h16a1 1 0 0 1 0 2zm0-6H1a1 1 0 0 1 0-2h16a1 1 0 0 1 0 2zM1 12h16a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2z"/></svg>
|
Before Width: | Height: | Size: 229 B |
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="14"><path fill="#60DB97" fill-rule="evenodd" d="M17 8H1a1 1 0 0 1 0-2h16a1 1 0 0 1 0 2zm0-6H1a1 1 0 0 1 0-2h16a1 1 0 0 1 0 2zM1 12h16a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2z"/></svg>
|
Before Width: | Height: | Size: 232 B |
|
@ -15,28 +15,18 @@ body {
|
|||
-webkit-font-smoothing: antialiased;
|
||||
background-color: #ffffff;
|
||||
box-sizing: border-box;
|
||||
color: #333;
|
||||
color: $base-text-color;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-size: 14px;
|
||||
// padding-bottom: $footer-height_desktop;
|
||||
font-size: $base-font-size;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
// @media screen and (max-width: $breakpoint-md) {
|
||||
// padding-bottom: $footer-height_mobile;
|
||||
// }
|
||||
// @media screen and (max-width: $mobile-width) {
|
||||
// padding-bottom: $footer-height_mobile;
|
||||
// }
|
||||
}
|
||||
|
||||
a {
|
||||
color: $poa-purple;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.sokol {
|
||||
|
||||
&.sokol {
|
||||
color: $sokol-cyan;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -57,15 +57,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// @media screen and (max-width: $mobile-width) {
|
||||
// #root,
|
||||
// .app-container {
|
||||
// height: 100%;
|
||||
// }
|
||||
// .app-container {
|
||||
// padding-left: 10px;
|
||||
// padding-right: 10px;
|
||||
// }
|
||||
// }
|
||||
|
||||
|
|
|
@ -15,10 +15,10 @@
|
|||
width: 100%;
|
||||
z-index: 124;
|
||||
|
||||
@media (min-width: $mobile-width) {
|
||||
position: relative;
|
||||
z-index: 9999;
|
||||
}
|
||||
// @media (min-width: $mobile-width) {
|
||||
// position: relative;
|
||||
// z-index: 9999;
|
||||
// }
|
||||
|
||||
&#{ & }-menu-open {
|
||||
flex-direction: column;
|
||||
|
@ -37,74 +37,6 @@
|
|||
background-color: $xdai-gray;
|
||||
}
|
||||
|
||||
|
||||
//// TODO: crap below, fix
|
||||
&-logo {
|
||||
display: block;
|
||||
height: 26px;
|
||||
} // header links
|
||||
|
||||
.links-container {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: $header-links-container-height;
|
||||
margin-left: auto;
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
display: none;
|
||||
}
|
||||
@media screen and (max-width: $breakpoint-md) {
|
||||
justify-content: flex-end;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.link {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 18px;
|
||||
margin-left: 34px;
|
||||
opacity: 0.8;
|
||||
text-decoration: none;
|
||||
transition: opacity linear 0.1s;
|
||||
&:hover,
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
display: none;
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
display: block;
|
||||
order: 3;
|
||||
}
|
||||
.mobile-menu-icon {
|
||||
width: 18px;
|
||||
height: 14px;
|
||||
}
|
||||
.mobile-menu-open-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.Select {
|
||||
$select-mobile-width: 125px;
|
||||
margin-left: 25px;
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
margin-left: 0;
|
||||
max-width: $select-mobile-width;
|
||||
order: 2;
|
||||
.Select-control {
|
||||
max-width: $select-mobile-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn.btn-new-ballot {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
|
@ -134,7 +66,15 @@
|
|||
min-height: $header-height;
|
||||
}
|
||||
|
||||
.select-network-id {
|
||||
background: #fff;
|
||||
width: 40px;
|
||||
.sw-Header_Links {
|
||||
align-items: center;
|
||||
display: none;
|
||||
height: $header-links-container-height;
|
||||
justify-content: flex-end;
|
||||
margin-left: auto;
|
||||
width: auto;
|
||||
|
||||
@media (min-width: $breakpoint-md) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,3 @@
|
|||
.nl-IconFinalize_Path {
|
||||
@include menu-icon-colors();
|
||||
}
|
|
@ -0,0 +1,3 @@
|
|||
.nl-IconActive_Path {
|
||||
@include menu-icon-colors();
|
||||
}
|
|
@ -0,0 +1,3 @@
|
|||
.nl-IconAll_Path {
|
||||
@include menu-icon-colors();
|
||||
}
|
|
@ -0,0 +1,22 @@
|
|||
.hd-IconMobileMenu {
|
||||
display: block;
|
||||
order: 3;
|
||||
|
||||
@media (min-width: $breakpoint-md) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hd-IconMobileMenu_Path {
|
||||
&#{ & }-core {
|
||||
fill: $poa-menu-icon-color;
|
||||
}
|
||||
|
||||
&#{ & }-sokol {
|
||||
fill: $sokol-menu-icon-color;
|
||||
}
|
||||
|
||||
&#{ & }-dai {
|
||||
fill: $xdai-menu-icon-color;
|
||||
}
|
||||
}
|
|
@ -1,12 +1,7 @@
|
|||
.sw-MainTitle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-bottom: 40px;
|
||||
|
||||
@media (min-width: $breakpoint-md) {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
.sw-MainTitle_Content {
|
||||
|
|
|
@ -0,0 +1,43 @@
|
|||
.nl-NavigationLinks {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.nl-NavigationLinks_Link {
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
margin-left: 0;
|
||||
opacity: 0.8;
|
||||
text-decoration: none;
|
||||
transition: opacity linear 0.1s;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&#{ & }-core {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&#{ & }-sokol {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&#{ & }-dai {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-md) {
|
||||
margin-left: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
.nl-NavigationLinks_Text {
|
||||
margin-left: 10px;
|
||||
text-decoration: none;
|
||||
}
|
|
@ -2,7 +2,11 @@
|
|||
@import "BaseLoader";
|
||||
@import "Footer";
|
||||
@import "Header";
|
||||
@import "IconAFinalize";
|
||||
@import "IconActive";
|
||||
@import "IconAll";
|
||||
@import "IconGithub";
|
||||
@import "IconMobileMenu";
|
||||
@import "IconPOA";
|
||||
@import "IconTelegram";
|
||||
@import "IconTwitter";
|
||||
|
@ -12,8 +16,6 @@
|
|||
@import "LogoSokol";
|
||||
@import "MainTitle";
|
||||
@import "MobileMenuLinks";
|
||||
@import "NavigationLinks";
|
||||
@import "SearchBar";
|
||||
@import "SocialIcons";
|
||||
|
||||
// delete
|
||||
@import "link-icons";
|
||||
@import "SocialIcons";
|
|
@ -1,31 +0,0 @@
|
|||
// TODO: Temporary, fix this
|
||||
|
||||
.link-icon {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
margin-right: 10px;
|
||||
float: left;
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
&-all {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-all.svg');
|
||||
}
|
||||
&-active {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-active.svg');
|
||||
}
|
||||
&-to-finalize {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-to-finalize.svg');
|
||||
}
|
||||
|
||||
.sokol & {
|
||||
&-all {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-all-sokol.svg');
|
||||
}
|
||||
&-active {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-active-sokol.svg');
|
||||
}
|
||||
&-to-finalize {
|
||||
background-image: url('#{ $base-images-path }/icons/icon-to-finalize-sokol.svg');
|
||||
}
|
||||
}
|
||||
}
|
|
@ -4,4 +4,5 @@
|
|||
@import 'placeholders';
|
||||
|
||||
@import 'brand-icons-mixins';
|
||||
@import 'content-layout';
|
||||
@import 'content-layout';
|
||||
@import 'menu-icon-mixins';
|
|
@ -0,0 +1,13 @@
|
|||
@mixin menu-icon-colors() {
|
||||
&#{ & }-core {
|
||||
fill: $poa-menu-icon-color;
|
||||
}
|
||||
|
||||
&#{ & }-sokol {
|
||||
fill: $sokol-menu-icon-color;
|
||||
}
|
||||
|
||||
&#{ & }-dai {
|
||||
fill: $xdai-menu-icon-color;
|
||||
}
|
||||
}
|
|
@ -6,22 +6,25 @@ $poa-purple-darker: #45277a;
|
|||
$poa-freeze-color: #50bbda;
|
||||
$poa-danger-color: #f21b57;
|
||||
$poa-success-color: #60db97;
|
||||
$poa-menu-icon-color: #60db97;
|
||||
|
||||
$sokol-cyan: #6ac9b9;
|
||||
$sokol-cyan-darker: #41b19e;
|
||||
$sokol-freeze-color: #50bbda;
|
||||
$sokol-danger-color: #f24c67;
|
||||
$sokol-success-color: #6ac9b9;
|
||||
$sokol-menu-icon-color: #ffffff;
|
||||
|
||||
$xdai-orange: #fec042;
|
||||
$xdai-gray-darker: #eaeef0;
|
||||
$xdai-gray: #f2f6f8;
|
||||
$xdai-menu-icon-color: #333333;
|
||||
|
||||
// colors
|
||||
$gray-text-color: #333;
|
||||
|
||||
// typography
|
||||
$base-text-color: #000;
|
||||
$base-text-color: #333;
|
||||
$base-font-size: 14px;
|
||||
|
||||
// borders
|
||||
|
|
|
@ -1,41 +1,33 @@
|
|||
import NavigationLinks from '../NavigationLinks.jsx'
|
||||
import React from 'react'
|
||||
import menuIconBase from '../../assets/images/icons/icon-menu.svg'
|
||||
import menuIconSokol from '../../assets/images/icons/icon-menu-sokol.svg'
|
||||
import menuOpenIconBase from '../../assets/images/icons/icon-close.svg'
|
||||
import menuOpenIconSokol from '../../assets/images/icons/icon-close-sokol.svg'
|
||||
import { Logo } from '../Logo'
|
||||
import { MobileMenuLinks } from '../MobileMenuLinks'
|
||||
import { constants } from '../../utils/constants'
|
||||
import { NavigationLinks } from '../NavigationLinks'
|
||||
import { IconMobileMenu } from '../IconMobileMenu'
|
||||
|
||||
export const Header = ({
|
||||
baseRootPath,
|
||||
navigationData,
|
||||
netId,
|
||||
networkBranch = undefined,
|
||||
onMenuToggle,
|
||||
showMobileMenu = false
|
||||
}) => {
|
||||
const thisIsTestnet = netId in constants.NETWORKS && constants.NETWORKS[netId].TESTNET
|
||||
const menuIcon = thisIsTestnet ? menuIconSokol : menuIconBase
|
||||
const menuOpenIcon = thisIsTestnet ? menuOpenIconSokol : menuOpenIconBase
|
||||
|
||||
return (
|
||||
<header className={`sw-Header sw-Header-${networkBranch} ${showMobileMenu ? 'sw-Header-menu-open' : ''}`}>
|
||||
{showMobileMenu ? <MobileMenuLinks onMenuToggle={onMenuToggle} navigationData={navigationData} /> : null}
|
||||
<div className="sw-Header_Content">
|
||||
<Logo networkBranch={networkBranch} href={baseRootPath} />
|
||||
<div className="links-container">
|
||||
<NavigationLinks navigationData={navigationData} />
|
||||
<div className="sw-Header_Links">
|
||||
<NavigationLinks networkBranch={networkBranch} navigationData={navigationData} />
|
||||
</div>
|
||||
<div className="mobile-menu">
|
||||
<IconMobileMenu networkBranch={networkBranch} isOpen={showMobileMenu} onClick={onMenuToggle} />
|
||||
{/* <div className="mobile-menu">
|
||||
<img
|
||||
alt=""
|
||||
className={showMobileMenu ? 'mobile-menu-open-icon' : 'mobile-menu-icon'}
|
||||
onClick={onMenuToggle}
|
||||
|
||||
src={showMobileMenu ? menuOpenIcon : menuIcon}
|
||||
/>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
|
|
|
@ -0,0 +1,26 @@
|
|||
import React from 'react'
|
||||
|
||||
export const IconMobileMenu = ({ networkBranch, onClick, isOpen = false }) => {
|
||||
switch (isOpen) {
|
||||
case true:
|
||||
return (
|
||||
<svg onClick={onClick} className="hd-IconMobileMenu" xmlns="http://www.w3.org/2000/svg" width="18" height="18">
|
||||
<path
|
||||
className={`hd-IconMobileMenu_Path hd-IconMobileMenu_Path-${networkBranch}`}
|
||||
d="M17.691 1.719l-3 3-4.265 4.265.019.02 4.245 4.245 3 3a1.019 1.019 0 1 1-1.441 1.441l-3-3-4.265-4.264L4.72 14.69l-3 3a1.02 1.02 0 0 1-1.442-1.441l3-3 4.265-4.265-.02-.019-4.245-4.246-3-3A1.019 1.019 0 1 1 1.719.278l3 3 4.265 4.265 4.266-4.265 3-3a1.019 1.019 0 1 1 1.441 1.441z"
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
default:
|
||||
return (
|
||||
<svg onClick={onClick} className="hd-IconMobileMenu" xmlns="http://www.w3.org/2000/svg" width="18" height="14">
|
||||
<path
|
||||
className={`hd-IconMobileMenu_Path hd-IconMobileMenu_Path-${networkBranch}`}
|
||||
d="M17 8H1a1 1 0 0 1 0-2h16a1 1 0 0 1 0 2zm0-6H1a1 1 0 0 1 0-2h16a1 1 0 0 1 0 2zM1 12h16a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2z"
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
}
|
|
@ -0,0 +1,13 @@
|
|||
import React from 'react'
|
||||
|
||||
export const IconActive = ({ networkBranch }) => {
|
||||
return (
|
||||
<svg className={`nl-IconActive`} xmlns="http://www.w3.org/2000/svg" width="18" height="18">
|
||||
<path
|
||||
className={`nl-IconActive_Path nl-IconActive_Path-${networkBranch}`}
|
||||
d="M17 18a1 1 0 0 1-1-1v-1H2v1a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1zm0-5H1a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1zm-1-6H2v4h14V7zM4 8h1a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm4 0h6a1 1 0 0 1 0 2H8a1 1 0 0 1 0-2zm9-4H1a1 1 0 0 1-1-1V1a1 1 0 0 1 2 0v1h14V1a1 1 0 0 1 2 0v2a1 1 0 0 1-1 1z"
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
|
@ -0,0 +1,13 @@
|
|||
import React from 'react'
|
||||
|
||||
export const IconAll = ({ networkBranch }) => {
|
||||
return (
|
||||
<svg className={`nl-IconAll`} xmlns="http://www.w3.org/2000/svg" width="16" height="18">
|
||||
<path
|
||||
className={`nl-IconAll_Path nl-IconAll_Path-${networkBranch}`}
|
||||
d="M15 15h-5a1 1 0 0 1-1-1v-3H2v6a1 1 0 0 1-2 0V1a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v3h4a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1zM9 2H2v7h7V2zm2 11h3V6h-3v7z"
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
|
@ -0,0 +1,13 @@
|
|||
import React from 'react'
|
||||
|
||||
export const IconFinalize = ({ networkBranch }) => {
|
||||
return (
|
||||
<svg className={`nl-IconFinalize`} xmlns="http://www.w3.org/2000/svg" width="18" height="17">
|
||||
<path
|
||||
className={`nl-IconFinalize_Path nl-IconFinalize_Path-${networkBranch}`}
|
||||
fillRule="evenodd"
|
||||
d="M16 10.95V11H2v-.05a2.502 2.502 0 0 1 0-4.9V6h14v.05a2.502 2.502 0 0 1 0 4.9zM16 8H2v1h14V8zm0-3.05V5H2v-.05a2.502 2.502 0 0 1 0-4.9V0h14v.05a2.502 2.502 0 0 1 0 4.9zM16 2H2v1h14V2zM2 12.05V12h14v.05a2.502 2.502 0 0 1 0 4.9V17H2v-.05a2.502 2.502 0 0 1 0-4.9zM2 15h14v-1H2v1z"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
|
@ -0,0 +1,17 @@
|
|||
import React from 'react'
|
||||
import { IconAll } from './IconAll'
|
||||
import { IconActive } from './IconActive'
|
||||
import { IconFinalize } from './IconFinalize'
|
||||
|
||||
export const NavigationIcon = ({ icon, networkBranch }) => {
|
||||
switch (icon) {
|
||||
case 'all':
|
||||
return <IconAll networkBranch={networkBranch} />
|
||||
case 'active':
|
||||
return <IconActive networkBranch={networkBranch} />
|
||||
case 'finalize':
|
||||
return <IconFinalize networkBranch={networkBranch} />
|
||||
default:
|
||||
return null
|
||||
}
|
||||
}
|
|
@ -1,13 +0,0 @@
|
|||
import React from 'react'
|
||||
import { NavLink } from 'react-router-dom'
|
||||
|
||||
const NavigationLinks = ({ navigationData }) => {
|
||||
return navigationData.map((item, index) => (
|
||||
<NavLink activeClassName="active" className={`link ${item.class}`} exact key={index} to={item.url}>
|
||||
<i className={`link-icon ${item.icon}`} />
|
||||
<span className="link-text">{item.title}</span>
|
||||
</NavLink>
|
||||
))
|
||||
}
|
||||
|
||||
export default NavigationLinks
|
|
@ -0,0 +1,23 @@
|
|||
import React from 'react'
|
||||
import { NavLink } from 'react-router-dom'
|
||||
import { constants } from '../../utils/constants'
|
||||
import { NavigationIcon } from '../NavigationIcon'
|
||||
|
||||
export const NavigationLinks = ({ networkBranch }) => {
|
||||
return (
|
||||
<div className="nl-NavigationLinks">
|
||||
{constants.navigationData.map((item, index) => (
|
||||
<NavLink
|
||||
activeClassName="active"
|
||||
className={`nl-NavigationLinks_Link nl-NavigationLinks_Link-${networkBranch}`}
|
||||
exact
|
||||
key={index}
|
||||
to={item.url}
|
||||
>
|
||||
<NavigationIcon networkBranch={networkBranch} icon={item.icon} />
|
||||
<span className={`nl-NavigationLinks_Text nl-NavigationLinks_Text-${networkBranch}`}>{item.title}</span>
|
||||
</NavLink>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
|
@ -14,16 +14,37 @@ constants.ABIsSources = {
|
|||
VotingToChangeProxyAddress: 'VotingToChangeProxyAddress.abi.json',
|
||||
VotingToManageEmissionFunds: 'VotingToManageEmissionFunds.abi.json'
|
||||
}
|
||||
|
||||
constants.NEW_MINING_KEY = {
|
||||
label: 'New Mining Key',
|
||||
lastNameAndKey: '',
|
||||
fullName: '',
|
||||
value: '0x0000000000000000000000000000000000000000'
|
||||
}
|
||||
|
||||
constants.minBallotDurationInDays = 2
|
||||
constants.startTimeOffsetInMinutes = 5
|
||||
constants.endTimeDefaultInMinutes = 2890
|
||||
constants.getTransactionReceiptInterval = 5000
|
||||
constants.rootPath = '/poa-dapps-voting'
|
||||
|
||||
constants.navigationData = [
|
||||
{
|
||||
icon: 'all',
|
||||
title: 'All',
|
||||
url: constants.rootPath
|
||||
},
|
||||
{
|
||||
icon: 'active',
|
||||
title: 'Active',
|
||||
url: `${constants.rootPath}/active`
|
||||
},
|
||||
{
|
||||
icon: 'finalize',
|
||||
title: 'To Finalize',
|
||||
url: `${constants.rootPath}/tofinalize`
|
||||
}
|
||||
]
|
||||
|
||||
constants.NETWORKS = {
|
||||
'77': {
|
||||
|
|