(feature) header and footer styles, created individual components for logos and social icons.

This commit is contained in:
Gabriel Rodríguez Alsina 2018-12-07 16:19:14 -03:00
parent 47e8a1dacf
commit a3131a6ee1
27 changed files with 552 additions and 65 deletions

View File

@ -1,7 +1,4 @@
import './assets/stylesheets/index.css'
import FileSaver from 'file-saver'
import Footer from './components/Footer'
import Header from './components/Header'
import JSzip from 'jszip'
import Keys from './components/Keys'
import KeysManager from './utils/keysManager'
@ -11,7 +8,12 @@ import addressGenerator from './utils/addressGenerator'
import getWeb3 from './utils/getWeb3'
import networkAddresses from './utils/addresses'
import swal from 'sweetalert'
import { Footer } from './components/Footer'
import { Header } from './components/Header'
import { constants } from './utils/constants'
import { isTestnet } from './utils/utils'
import './assets/stylesheets/index.css'
function generateElement(msg) {
let errorNode = document.createElement('div')
@ -31,22 +33,28 @@ class App extends Component {
this.state = {
web3Config: {},
mining: null,
isDisabledBtn: props.generateKeysIsDisabled
isDisabledBtn: props.generateKeysIsDisabled,
isTestnet: false
}
this.keysManager = null
getWeb3()
.then(async web3Config => {
return networkAddresses(web3Config)
})
.then(async config => {
const { web3Config, addresses } = config
this.keysManager = new KeysManager()
await this.keysManager.init({
web3: web3Config.web3Instance,
netId: web3Config.netId,
addresses
})
console.log('culo ' + isTestnet(web3Config.netId))
this.setState({
isTestnet: isTestnet(web3Config.netId),
isDisabledBtn: false,
web3Config
})
@ -62,6 +70,7 @@ class App extends Component {
}
})
}
componentDidMount() {
if (window.location.hash.indexOf('just-generate-keys') !== -1) {
this.setState({ loading: true })
@ -77,6 +86,7 @@ class App extends Component {
}, 150)
}
}
async generateKeys(cb) {
const mining = await addressGenerator()
const voting = await addressGenerator()
@ -93,6 +103,7 @@ class App extends Component {
payout
}
}
async generateZip({ mining, voting, payout, netIdName }) {
const zip = new JSzip()
zip.file(`${netIdName}_keys/mining_key_${mining.jsonStore.address}.json`, JSON.stringify(mining.jsonStore))
@ -107,6 +118,7 @@ class App extends Component {
FileSaver.saveAs(blob, `poa_network_validator_keys.zip`)
})
}
async onClick() {
this.setState({ loading: true })
const initialKey = this.state.web3Config.defaultAccount
@ -116,7 +128,7 @@ class App extends Component {
} catch (e) {
isValid = false
}
console.log(isValid)
if (Number(isValid) !== 1) {
this.setState({ loading: false })
const invalidKeyMsg = `The key is an invalid Initial key<br/>
@ -142,7 +154,6 @@ class App extends Component {
sender: initialKey
})
.then(async receipt => {
console.log(receipt)
if (receipt.status === true || receipt.status === '0x1') {
this.setState({ loading: false })
swal('Congratulations!', 'Your keys are generated!', 'success')
@ -169,7 +180,6 @@ class App extends Component {
}
})
.catch(error => {
console.error(error.message)
this.setState({ loading: false, keysGenerated: false })
let content = document.createElement('div')
let msg
@ -189,6 +199,7 @@ class App extends Component {
})
}
}
render() {
let loader = this.state.loading ? <Loading netId={this.state.web3Config.netId} /> : ''
let createKeyBtn = (
@ -206,17 +217,19 @@ class App extends Component {
</div>
)
let content
if (this.state.keysGenerated) {
content = <Keys mining={this.state.mining} voting={this.state.voting} payout={this.state.payout} />
} else {
content = createKeyBtn
}
return (
<div className="App">
<Header netId={this.state.web3Config.netId} />
<div className="lo-App">
<Header isTestnet={this.state.isTestnet} />
{loader}
<section className="content">{content}</section>
<Footer netId={this.state.web3Config.netId} />
<section className="lo-App_Content">{content}</section>
<Footer isTestnet={this.state.isTestnet} />
</div>
)
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 457 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 309 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -0,0 +1,12 @@
.lo-App {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
}
.lo-App_Content {
@include content-layout-width();
flex-grow: 1;
}

View File

@ -0,0 +1,44 @@
.sw-Footer {
align-items: center;
background-color: $brand-primary;
color: #fff;
display: flex;
justify-content: center;
min-height: 50px;
overflow: hidden;
padding: 16px 0;
transition: background-color 0.25s ease-out;
width: 100%;
&.sw-Footer-test {
background-color: $brand-secondary;
}
}
.sw-Footer_Content {
@include content-layout-width();
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
@media (min-width: $breakpoint-md) {
flex-direction: row;
justify-content: space-between;
}
}
.sw-Footer_Text {
color: #fff;
flex-grow: 1;
font-size: 11px;
font-weight: 300;
line-height: 1.2;
margin: 0;
padding: 15px 0 0 0;
text-align: center;
@media (min-width: $breakpoint-md) {
padding-top: 0;
}
}

View File

@ -0,0 +1,19 @@
.sw-Header {
align-items: center;
background-color: $brand-primary;
color: #fff;
display: flex;
height: 70px;
justify-content: center;
overflow: hidden;
transition: background-color 0.25s ease-out;
width: 100%;
&.sw-Header-test {
background-color: $brand-secondary;
}
}
.sw-Header_Content {
@include content-layout-width();
}

View File

@ -0,0 +1,21 @@
.sw-LogoPOA {
display: block;
text-decoration: none;
.sw-Header & {
height: 26px;
width: 167px;
}
.sw-Footer & {
height: 18px;
width: 130px;
}
}
.sw-LogoPOA_Image {
display: block;
height: 100%;
width: 100%;
}

View File

@ -0,0 +1,21 @@
.sw-LogoSokol {
display: block;
text-decoration: none;
.sw-Header & {
height: 26px;
width: 178px;
}
.sw-Footer & {
height: 18px;
width: 123px;
}
}
.sw-LogoSokol_Image {
display: block;
height: 100%;
width: 100%;
}

View File

@ -0,0 +1,39 @@
$ft-SocialIcons_Icon-dimensions: 30px !default;
.ft-SocialIcons {
align-items: center;
display: flex;
justify-content: space-between;
padding-top: 15px;
@media (min-width: $breakpoint-md) {
padding-top: 0;
}
}
.ft-SocialIcons_Icon {
background-color: #fff;
border-radius: 3px;
font-size: 0;
height: $ft-SocialIcons_Icon-dimensions;
line-height: 0;
margin-right: 10px;
width: $ft-SocialIcons_Icon-dimensions;
&:last-child {
margin-right: 0;
}
&#{ & }-github {
mask-image: url('#{ $base-images-path }/SocialIcons/github.png');
}
&#{ & }-poa {
mask-image: url('#{ $base-images-path }/SocialIcons/poa.png');
}
&#{ & }-telegram {
mask-image: url('#{ $base-images-path }/SocialIcons/telegram.png');
}
&#{ & }-twitter {
mask-image: url('#{ $base-images-path }/SocialIcons/twitter.png');
}
}

View File

@ -0,0 +1,6 @@
@import "App";
@import "Footer";
@import "Header";
@import "LogoPOA";
@import "LogoSokol";
@import "SocialIcons";

View File

@ -0,0 +1,16 @@
@mixin content-layout-width() {
max-width: $container-max-width;
padding-left: $container-horizontal-padding-mobile;
padding-right: $container-horizontal-padding-mobile;
width: 100%;
@media (min-width: $breakpoint-md) {
padding-left: $container-horizontal-padding-tablet;
padding-right: $container-horizontal-padding-tablet;
}
@media (min-width: $breakpoint-xl) {
padding-left: $container-horizontal-padding-desktop;
padding-right: $container-horizontal-padding-desktop;
}
}

View File

@ -1,3 +1,5 @@
@import 'variables';
@import 'mixins';
@import 'typography';
@import 'typography';
@import 'content-layout';

View File

@ -2,19 +2,22 @@
$brand-primary: #5a2da5;
$brand-secondary: #8ce1d7;
$base-border-color: #e9e9e9;
$base-text-color: #4a4a4a;
$base-title-color: #333;
$base-text-color: #777;
$base-text-color-light: #9b9b9b;
$fullscreen-backdrop-color: rgba(78, 44, 137, 0.9);
// modal
$sw-ModalWindow-horizontal-padding-xs: 8px;
// typography
$base-font-size: 16px;
$base-font-size: 14px;
// paths
$base-images-path: '../../assets/images';
// layout
$container-max-width: 1000px;
$container-horizontal-padding-desktop: 20px;
$container-horizontal-padding-tablet: 20px;
$container-horizontal-padding-mobile: 10px;
// responsive breakpoints
$breakpoint-xs: 320px;
$breakpoint-sm: 480px;
@ -25,16 +28,4 @@ $breakpoint-xxl: 1280px;
$breakpoint-xxxl: 1366px;
// z-index
$z-index-max: 12345678;
// grid gaps
$grid-column-gap-md: 15px;
$grid-column-gap-xl: 39px;
$grid-column-gap-xxl: 74px;
$grid-column-gap-xxl: 90px;
$grid-row-gap-md: 22px;
$grid-row-gap-lg: 31px;
// home
$hm-Home_Btn-width: 230px;
$z-index-max: 12345678;

View File

@ -349,6 +349,173 @@ template {
body {
-webkit-font-smoothing: antialiased;
color: #4a4a4a;
color: #777;
font-family: Nunito, sans-serif;
font-size: 16px; }
font-size: 14px; }
html,
body,
#root,
html.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown),
body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
height: 100%; }
#root {
display: flex;
overflow: auto; }
.lo-App {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%; }
.lo-App_Content {
max-width: 1000px;
padding-left: 10px;
padding-right: 10px;
width: 100%;
flex-grow: 1; }
@media (min-width: 768px) {
.lo-App_Content {
padding-left: 20px;
padding-right: 20px; } }
@media (min-width: 1024px) {
.lo-App_Content {
padding-left: 20px;
padding-right: 20px; } }
.sw-Footer {
align-items: center;
background-color: #5a2da5;
color: #fff;
display: flex;
justify-content: center;
min-height: 50px;
overflow: hidden;
padding: 16px 0;
transition: background-color 0.25s ease-out;
width: 100%; }
.sw-Footer.sw-Footer-test {
background-color: #8ce1d7; }
.sw-Footer_Content {
max-width: 1000px;
padding-left: 10px;
padding-right: 10px;
width: 100%;
align-items: center;
display: flex;
flex-direction: column;
justify-content: center; }
@media (min-width: 768px) {
.sw-Footer_Content {
padding-left: 20px;
padding-right: 20px; } }
@media (min-width: 1024px) {
.sw-Footer_Content {
padding-left: 20px;
padding-right: 20px; } }
@media (min-width: 768px) {
.sw-Footer_Content {
flex-direction: row;
justify-content: space-between; } }
.sw-Footer_Text {
color: #fff;
flex-grow: 1;
font-size: 11px;
font-weight: 300;
line-height: 1.2;
margin: 0;
padding: 15px 0 0 0;
text-align: center; }
@media (min-width: 768px) {
.sw-Footer_Text {
padding-top: 0; } }
.sw-Header {
align-items: center;
background-color: #5a2da5;
color: #fff;
display: flex;
height: 70px;
justify-content: center;
overflow: hidden;
transition: background-color 0.25s ease-out;
width: 100%; }
.sw-Header.sw-Header-test {
background-color: #8ce1d7; }
.sw-Header_Content {
max-width: 1000px;
padding-left: 10px;
padding-right: 10px;
width: 100%; }
@media (min-width: 768px) {
.sw-Header_Content {
padding-left: 20px;
padding-right: 20px; } }
@media (min-width: 1024px) {
.sw-Header_Content {
padding-left: 20px;
padding-right: 20px; } }
.sw-LogoPOA {
display: block;
text-decoration: none; }
.sw-Header .sw-LogoPOA {
height: 26px;
width: 167px; }
.sw-Footer .sw-LogoPOA {
height: 18px;
width: 130px; }
.sw-LogoPOA_Image {
display: block;
height: 100%;
width: 100%; }
.sw-LogoSokol {
display: block;
text-decoration: none; }
.sw-Header .sw-LogoSokol {
height: 26px;
width: 178px; }
.sw-Footer .sw-LogoSokol {
height: 18px;
width: 123px; }
.sw-LogoSokol_Image {
display: block;
height: 100%;
width: 100%; }
.ft-SocialIcons {
align-items: center;
display: flex;
justify-content: space-between;
padding-top: 15px; }
@media (min-width: 768px) {
.ft-SocialIcons {
padding-top: 0; } }
.ft-SocialIcons_Icon {
background-color: #fff;
border-radius: 3px;
font-size: 0;
height: 30px;
line-height: 0;
margin-right: 10px;
width: 30px; }
.ft-SocialIcons_Icon:last-child {
margin-right: 0; }
.ft-SocialIcons_Icon.ft-SocialIcons_Icon-github {
mask-image: url("../../assets/images/SocialIcons/github.png"); }
.ft-SocialIcons_Icon.ft-SocialIcons_Icon-poa {
mask-image: url("../../assets/images/SocialIcons/poa.png"); }
.ft-SocialIcons_Icon.ft-SocialIcons_Icon-telegram {
mask-image: url("../../assets/images/SocialIcons/telegram.png"); }
.ft-SocialIcons_Icon.ft-SocialIcons_Icon-twitter {
mask-image: url("../../assets/images/SocialIcons/twitter.png"); }

View File

@ -0,0 +1,13 @@
html,
body,
#root,
html.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown),
body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
// swal2-shown above are for when sweet alert is showing
height: 100%;
}
#root {
display: flex;
overflow: auto;
}

View File

@ -1,32 +1,17 @@
import React from 'react'
import moment from 'moment'
import { Logo } from '../Logo'
import { SocialIcons } from '../SocialIcons'
import { constants } from '../../utils/constants'
const Footer = ({ netId }) => {
const footerClassName = netId in constants.NETWORKS && constants.NETWORKS[netId].TESTNET ? 'sokol' : ''
export const Footer = ({ extraClassName = '', isTestnet = false }) => {
return (
<footer className={`footer ${footerClassName}`}>
<div className="container">
<p className="footer-rights">{moment().format('YYYY')} POA Network. All rights reserved.</p>
<a href="/poa-dapps-keys-generation" className="footer-logo" />
<div className="socials">
<a href="https://twitter.com/poanetwork" className="socials-i socials-i_twitter">
Twitter
</a>
<a href="https://poa.network" className="socials-i socials-i_oracles">
POA Network
</a>
<a href="https://t.me/oraclesnetwork" className="socials-i socials-i_telegram">
Telegram
</a>
<a href="https://github.com/poanetwork/" className="socials-i socials-i_github">
GitHub
</a>
</div>
<footer className={`sw-Footer ${extraClassName} ${isTestnet ? 'sw-Footer-test' : ''}`}>
<div className="sw-Footer_Content">
<Logo isTestnet={isTestnet} href={constants.baseURL} />
<p className="sw-Footer_Text">{moment().format('YYYY')} POA Network. All rights reserved.</p>
<SocialIcons />
</div>
</footer>
)
}
export default Footer

View File

@ -1,17 +1,13 @@
import React from 'react'
import { constants } from '../../utils/constants'
import { Logo } from '../Logo'
let Header = ({ netId }) => {
const thisIsTestnet = netId in constants.NETWORKS && constants.NETWORKS[netId].TESTNET
const headerClassName = thisIsTestnet ? 'sokol' : ''
const logoClassName = thisIsTestnet ? 'header-logo-sokol' : 'header-logo'
export const Header = ({ extraClassName = '', isTestnet = false }) => {
return (
<header className={`header ${headerClassName}`}>
<div className="container">
<a href="/poa-dapps-keys-generation" className={logoClassName} />
<header className={`sw-Header ${extraClassName} ${isTestnet ? 'sw-Header-test' : ''}`}>
<div className="sw-Header_Content">
<Logo isTestnet={isTestnet} href={constants.baseURL} />
</div>
</header>
)
}
export default Header

View File

@ -0,0 +1,7 @@
import React from 'react'
import { LogoPOA } from '../LogoPOA'
import { LogoSokol } from '../LogoSokol'
export const Logo = ({ href = null, extraClass = '', isTestnet = false }) => {
return isTestnet ? <LogoSokol href={href} extraClass={extraClass} /> : <LogoPOA href={href} extraClass={extraClass} />
}

View File

@ -0,0 +1,10 @@
import React from 'react'
import logoPOA from './logo.svg'
export const LogoPOA = ({ href = null, extraClass = '' }) => {
return (
<a href={href} className={`sw-LogoPOA ${extraClass}`}>
<img className="sw-LogoPOA_Image" src={logoPOA} alt="" />
</a>
)
}

View File

@ -0,0 +1,32 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="167"
height="26"
>
<defs>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Nunito:400');
text {
font-family: "Nunito", sans-serif;
}
</style>
</defs>
<path
d="M8.938 17.812h-.813v2.376h-.003l.003.015c0 .44-.364.797-.812.797h-6.5A.805.805 0 0 1 0 20.203l.003-.015H0V5.812h.003L0 5.797C0 5.357.364 5 .813 5h8.125c3.589 0 6.499 2.868 6.499 6.406s-2.91 6.406-6.499 6.406zM25.188 5c4.487 0 8.125 3.582 8.125 8s-3.638 8-8.125 8c-4.488 0-8.126-3.582-8.126-8s3.638-8 8.126-8zM52 20.493a.498.498 0 0 1-.503.494H33.064c-.022.003-.041.013-.064.013a.5.5 0 0 1-.5-.5c0-.109.042-.204.101-.286l-.009-.017 9.151-14.809h.02a.493.493 0 0 1 .965 0h.021L52 20.296l-.032.043c.017.05.032.1.032.154z"
fill-rule="evenodd"
fill="#FFF"
/>
<text
fill="#fff"
font-family="Nunito"
font-size="14"
font-weight="300"
x="63"
y="17"
>Ceremony App</text>
<path
d="M166 0a1 1 0 0 1 1 1v24a1 1 0 0 1-2 0V1a1 1 0 0 1 1-1z"
fill-rule="evenodd"
fill="#60DB97"
/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1,10 @@
import React from 'react'
import logoSokol from './logo.svg'
export const LogoSokol = ({ href = null, extraClass = '' }) => {
return (
<a href={href} className={`sw-LogoSokol ${extraClass}`}>
<img className="sw-LogoSokol_Image" src={logoSokol} alt="" />
</a>
)
}

View File

@ -0,0 +1,32 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="178"
height="26"
>
<defs>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Nunito:400');
text {
font-family: "Nunito", sans-serif;
}
</style>
</defs>
<path
fill="#FFF"
fill-rule="evenodd"
d="M36.528 20H24.272c-.167 0-.334-.028-.499-.068l.018.068h-5.287l-1.607-5.969H.969A.96.96 0 0 1 0 13.078l.003-.015H0V5.906C0 4.853.86 4 1.922 4l.016.002V4h30.275c1.061 0 2.153.855 2.437 1.91l3.285 12.18c.285 1.055-.345 1.91-1.407 1.91zM7.723 6.866H3.361l1.169 4.298h4.362L7.723 6.866zm7.209 0h-4.361l1.169 4.298h4.361l-1.169-4.298zm11.743 10.985h1.923l-.517-1.911h-1.922l.516 1.911zm5.201-10.985h-8.17l2.194 8.119h8.171l-2.195-8.119zm2.453 9.074h-1.922l.516 1.911h1.923l-.517-1.911zm-33.61.047v-.049h12.969v.002h1.557L16.341 20H1.938v-.002L1.922 20A1.914 1.914 0 0 1 0 18.094v-1.188h.005c0-.006-.005-.01-.005-.015 0-.44.308-.793.719-.904z"
/>
<text
fill="#fff"
font-family="Nunito"
font-size="14"
font-weight="300"
x="47"
y="17"
>Ceremony App</text>
<path
d="M166 0a1 1 0 0 1 1 1v24a1 1 0 0 1-2 0V1a1 1 0 0 1 1-1z"
fill-rule="evenodd"
fill="#fff"
/>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1,45 @@
import React from 'react'
const socialNetworks = [
{
tag: 'twitter',
text: 'Twitter',
url: 'https://twitter.com/poanetwork'
},
{
tag: 'poa',
text: 'POA Network',
url: 'https://poa.network'
},
{
tag: 'telegram',
text: 'Telegram',
url: 'https://t.me/oraclesnetwork'
},
{
tag: 'github',
text: 'GitHub',
url: 'https://github.com/poanetwork/'
}
]
const getSocialNetworks = () => {
return socialNetworks.map((item, index) => {
return (
<a
className={`ft-SocialIcons_Icon ft-SocialIcons_Icon-${item.tag}`}
href={item.url}
key={index}
rel="noopener noreferrer"
target="_blank"
title={item.text}
>
{item.text}
</a>
)
})
}
export const SocialIcons = ({ extraClass = '' }) => {
return <div className={`ft-SocialIcons ${extraClass}`}>{getSocialNetworks()}</div>
}

View File

@ -6,6 +6,7 @@ constants.ABIsSources = {
KeysManager: 'KeysManager.abi.json'
}
constants.userDeniedTransactionPattern = 'User denied transaction'
constants.baseURL = '/poa-dapps-keys-generation'
constants.NETWORKS = {
'77': {

5
src/utils/utils.js Normal file
View File

@ -0,0 +1,5 @@
import { constants } from './constants'
export const isTestnet = netId => {
return netId in constants.NETWORKS && constants.NETWORKS[netId].TESTNET
}