(add) styled header links.+ icons / (add) styled header mobile menu button / (add) component for main title / (add) component for navigation links /

This commit is contained in:
Gabriel Rodriguez Alsina 2018-12-18 17:15:21 -03:00
parent 249f94c567
commit 00e4b47fac
33 changed files with 253 additions and 195 deletions

View File

@ -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: ''
// }
]
}
}

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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;
}
}

View File

@ -57,15 +57,3 @@
}
}
}
// @media screen and (max-width: $mobile-width) {
// #root,
// .app-container {
// height: 100%;
// }
// .app-container {
// padding-left: 10px;
// padding-right: 10px;
// }
// }

View File

@ -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;
}
}

View File

@ -0,0 +1,3 @@
.nl-IconFinalize_Path {
@include menu-icon-colors();
}

View File

@ -0,0 +1,3 @@
.nl-IconActive_Path {
@include menu-icon-colors();
}

View File

@ -0,0 +1,3 @@
.nl-IconAll_Path {
@include menu-icon-colors();
}

View File

@ -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;
}
}

View File

@ -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 {

View File

@ -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;
}

View File

@ -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";

View File

@ -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');
}
}
}

View File

@ -4,4 +4,5 @@
@import 'placeholders';
@import 'brand-icons-mixins';
@import 'content-layout';
@import 'content-layout';
@import 'menu-icon-mixins';

View File

@ -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;
}
}

View File

@ -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

File diff suppressed because one or more lines are too long

View File

@ -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>
)

View File

@ -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>
)
}
}

View File

@ -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>
)
}

View File

@ -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>
)
}

View File

@ -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>
)
}

View File

@ -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
}
}

View File

@ -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

View File

@ -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>
)
}

View File

@ -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': {