poanetwork
/
poa-dapps-keys-generation
mirror of https://github.com/poanetwork/poa-dapps-keys-generation.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

(add) style support for multiple styles

This commit is contained in:
Gabriel Rodriguez Alsina 2018-12-11 16:02:00 -03:00
parent 65cb9dadc2
commit 49857827ba
20 changed files with 339 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/App.js
View File

@ -12,7 +12,7 @@ import { Footer } from './components/Footer'
import { Header } from './components/Header'
import { Home } from './components/Home'
import { constants } from './utils/constants'
import { isTestnet } from './utils/utils'
import { getNetworkBranch } from './utils/utils'
import './assets/stylesheets/index.css'
function generateElement(msg) {
@ -34,7 +34,7 @@ class App extends Component {
web3Config: {},
mining: null,
isDisabledBtn: props.generateKeysIsDisabled,
isTestnet: false
networkBranch: ''
}
this.keysManager = null
@ -52,9 +52,8 @@ class App extends Component {
addresses
})
console.log('culo ' + isTestnet(web3Config.netId))
this.setState({
isTestnet: isTestnet(web3Config.netId),
networkBranch: getNetworkBranch(web3Config.netId),
isDisabledBtn: false,
web3Config
})
@ -219,16 +218,16 @@ class App extends Component {
return (
<div className="lo-App">
<Header isTestnet={this.state.isTestnet} />
<Header networkBranch={this.state.networkBranch} />
{loader}
<section className="lo-App_Content">
{this.state.keysGenerated ? (
<Keys mining={this.state.mining} voting={this.state.voting} payout={this.state.payout} />
) : (
<Home />
<Home onClick={this.onClick} disabled={this.state.isDisabledBtn} networkBranch={this.state.networkBranch} />
)}
</section>
<Footer isTestnet={this.state.isTestnet} />
<Footer networkBranch={this.state.networkBranch} />
</div>
)
}

2
src/assets/stylesheets/base/_typography.scss
View File

@ -3,6 +3,6 @@
body {
-webkit-font-smoothing: antialiased;
color: $base-text-color;
font-family: Nunito, sans-serif;
font-family: "Nunito", sans-serif;
font-size: $base-font-size;
}

41
src/assets/stylesheets/components/_ButtonGenerate.scss Normal file
View File

@ -0,0 +1,41 @@
$sw-ButtonGenerate-height: 44px !default;
.sw-ButtonGenerate {
@include button-base($poa-purple, $sw-ButtonGenerate-height);
@include button-disabled($poa-purple);
@include button-focus-active-hover($poa-purple);
&#{ & }-poa {
background-color: $poa-purple;
}
&#{ & }-sokol {
background-color: $sokol-cyan;
}
&#{ & }-dai {
background-color: $xdai-orange;
}
.hm-Home & {
width: 100%;
@media (min-width: $breakpoint-md) {
width: auto;
}
}
}
.sw-ButtonGenerate_Text {
@include button-text(#fff, 16px);
margin-right: 65px;
}
.sw-ButtonGenerate_Icon {
display: block;
height: 16px;
width: 18px;
}

14
src/assets/stylesheets/components/_Footer.scss
View File

@ -1,6 +1,6 @@
.sw-Footer {
align-items: center;
background-color: $brand-primary;
background-color: $poa-purple;
color: #fff;
display: flex;
justify-content: center;
@ -10,8 +10,16 @@
transition: background-color 0.25s ease-out;
width: 100%;
&.sw-Footer-test {
background-color: $brand-secondary;
&#{ & }-poa {
background-color: $poa-purple;
}
&#{ & }-sokol {
background-color: $sokol-cyan;
}
&#{ & }-dai {
background-color: $xdai-orange;
}
}

14
src/assets/stylesheets/components/_Header.scss
View File

@ -1,6 +1,6 @@
.sw-Header {
align-items: center;
background-color: $brand-primary;
background-color: $poa-purple;
color: #fff;
display: flex;
height: 70px;
@ -9,8 +9,16 @@
transition: background-color 0.25s ease-out;
width: 100%;
&.sw-Header-test {
background-color: $brand-secondary;
&#{ & }-poa {
background-color: $poa-purple;
}
&#{ & }-sokol {
background-color: $sokol-cyan;
}
&#{ & }-dai {
background-color: $xdai-orange;
}
}

23
src/assets/stylesheets/components/_Home.scss
View File

@ -5,19 +5,26 @@
max-width: 100%;
padding-bottom: 50px;
padding-top: 50px;
text-align: center;
@media (min-width: $breakpoint-xl) {
flex-direction: row;
justify-content: space-between;
text-align: left;
}
}
.hm-Home_TextContainer {
align-items: center;
display: flex;
flex-direction: column;
flex-grow: 1;
order: 2;
@media (min-width: $breakpoint-xl) {
align-items: flex-start;
order: 1;
padding: 0 45px 0 0;
}
}
@ -39,4 +46,20 @@
background-repeat: no-repeat;
background-size: cover;
width: 520px;
}
.hm-Home_Title {
color: #333;
font-size: 24px;
font-weight: 400;
line-height: 1.2;
margin: 0 0 24px;
}
.hm-Home_Text {
color: #777;
font-size: 14px;
font-weight: 400;
line-height: 1.71;
margin: 0 0 30px;
}

1
src/assets/stylesheets/components/_index.scss
View File

@ -1,4 +1,5 @@
@import "App";
@import "ButtonGenerate";
@import "Footer";
@import "Header";
@import "Home";

54
src/assets/stylesheets/helpers/_button-mixins.scss Normal file
View File

@ -0,0 +1,54 @@
@mixin button-base($button-background-color, $button-height) {
align-items: center;
background-color: $button-background-color;
border-radius: 5px;
border: none;
box-shadow: 0 5px 10px 0 rgba(92, 52, 162, 0.3);
cursor: pointer;
display: flex;
height: $button-height;
justify-content: space-between;
line-height: $button-height;
outline: none;
padding: 0 15px;
transition: background-color 0.25s ease-out;
}
@mixin button-text($text-color: #fff, $font-size: 16px) {
color: $text-color;
display: block;
font-size: $font-size;
font-weight: 400;
line-height: 1.2;
text-align: left;
white-space: nowrap;
}
@mixin button-focus-active-hover($button-background-color) {
&:focus,
&:active,
&:hover {
background-color: darken($button-background-color, 10%);
border-color: darken($button-background-color, 10%);
}
}
@mixin button-disabled($button-background-color) {
&[disabled] {
&:focus,
&.active,
&:hover {
background-color: $button-background-color;
border-color: $button-background-color;
}
}
&[disabled] {
cursor: not-allowed;
opacity: 0.7;
}
}

1
src/assets/stylesheets/helpers/_index.scss
View File

@ -2,4 +2,5 @@
@import 'mixins';
@import 'typography';
@import 'button-mixins';
@import 'content-layout';

10
src/assets/stylesheets/helpers/_variables.scss
View File

@ -1,6 +1,10 @@
// colors
$brand-primary: #5a2da5;
$brand-secondary: #8ce1d7;
// brand colors
$poa-purple: #5a2da5;
$sokol-cyan: #8ce1d7;
$xdai-orange: #fec042;
$xdai-gray: #f2f6f8;
// base colors
$base-border-color: #e9e9e9;
$base-title-color: #333;
$base-text-color: #777;

91
src/assets/stylesheets/index.css
View File

@ -350,7 +350,7 @@ template {
body {
-webkit-font-smoothing: antialiased;
color: #777;
font-family: Nunito, sans-serif;
font-family: "Nunito", sans-serif;
font-size: 14px; }
html,
@ -388,6 +388,56 @@ body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
padding-left: 20px;
padding-right: 20px; } }
.sw-ButtonGenerate {
align-items: center;
background-color: #5a2da5;
border-radius: 5px;
border: none;
box-shadow: 0 5px 10px 0 rgba(92, 52, 162, 0.3);
cursor: pointer;
display: flex;
height: 44px;
justify-content: space-between;
line-height: 44px;
outline: none;
padding: 0 15px;
transition: background-color 0.25s ease-out; }
.sw-ButtonGenerate[disabled]:focus, .sw-ButtonGenerate[disabled].active, .sw-ButtonGenerate[disabled]:hover {
background-color: #5a2da5;
border-color: #5a2da5; }
.sw-ButtonGenerate[disabled] {
cursor: not-allowed;
opacity: 0.7; }
.sw-ButtonGenerate:focus, .sw-ButtonGenerate:active, .sw-ButtonGenerate:hover {
background-color: #44227d;
border-color: #44227d; }
.sw-ButtonGenerate.sw-ButtonGenerate-poa {
background-color: #5a2da5; }
.sw-ButtonGenerate.sw-ButtonGenerate-sokol {
background-color: #8ce1d7; }
.sw-ButtonGenerate.sw-ButtonGenerate-dai {
background-color: #fec042; }
.hm-Home .sw-ButtonGenerate {
width: 100%; }
@media (min-width: 768px) {
.hm-Home .sw-ButtonGenerate {
width: auto; } }
.sw-ButtonGenerate_Text {
color: #fff;
display: block;
font-size: 16px;
font-weight: 400;
line-height: 1.2;
text-align: left;
white-space: nowrap;
margin-right: 65px; }
.sw-ButtonGenerate_Icon {
display: block;
height: 16px;
width: 18px; }
.sw-Footer {
align-items: center;
background-color: #5a2da5;
@ -399,8 +449,12 @@ body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
padding: 16px 0;
transition: background-color 0.25s ease-out;
width: 100%; }
.sw-Footer.sw-Footer-test {
.sw-Footer.sw-Footer-poa {
background-color: #5a2da5; }
.sw-Footer.sw-Footer-sokol {
background-color: #8ce1d7; }
.sw-Footer.sw-Footer-dai {
background-color: #fec042; }
.sw-Footer_Content {
max-width: 100%;
@ -447,8 +501,12 @@ body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
overflow: hidden;
transition: background-color 0.25s ease-out;
width: 100%; }
.sw-Header.sw-Header-test {
.sw-Header.sw-Header-poa {
background-color: #5a2da5; }
.sw-Header.sw-Header-sokol {
background-color: #8ce1d7; }
.sw-Header.sw-Header-dai {
background-color: #fec042; }
.sw-Header_Content {
max-width: 100%;
@ -470,18 +528,25 @@ body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
flex-direction: column;
max-width: 100%;
padding-bottom: 50px;
padding-top: 50px; }
padding-top: 50px;
text-align: center; }
@media (min-width: 1024px) {
.hm-Home {
flex-direction: row;
justify-content: space-between; } }
justify-content: space-between;
text-align: left; } }
.hm-Home_TextContainer {
align-items: center;
display: flex;
flex-direction: column;
flex-grow: 1;
order: 2; }
@media (min-width: 1024px) {
.hm-Home_TextContainer {
order: 1; } }
align-items: flex-start;
order: 1;
padding: 0 45px 0 0; } }
.hm-Home_ImageContainer {
align-items: center;
@ -517,6 +582,20 @@ body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
.hm-Home_Image {
background-image: url("../../assets/images/Home/home-main@3x.png"); } }
.hm-Home_Title {
color: #333;
font-size: 24px;
font-weight: 400;
line-height: 1.2;
margin: 0 0 24px; }
.hm-Home_Text {
color: #777;
font-size: 14px;
font-weight: 400;
line-height: 1.71;
margin: 0 0 30px; }
.sw-LogoPOA {
display: block;
text-decoration: none; }

3
src/components/ButtonGenerate/icon.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="16">
<path fill="#FFF" fill-rule="evenodd" d="M13 10a4.974 4.974 0 0 1-2.797-.855l-3.33 3.33c-.044.084-.088.169-.159.239-.07.071-.155.115-.239.159l-2.602 2.602c-.044.084-.088.169-.159.239a.956.956 0 0 1-.733.275.949.949 0 0 1-.694-.275c-.048-.049-.073-.109-.109-.165L.286 13.657a.969.969 0 1 1 1.371-1.371l1.356 1.356 1.629-1.629-1.356-1.356a.969.969 0 1 1 1.371-1.371l1.356 1.356 2.843-2.844A5 5 0 1 1 13 10zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 516 B

16
src/components/ButtonGenerate/index.js Normal file
View File

@ -0,0 +1,16 @@
import React from 'react'
import icon from './icon.svg'
export const ButtonGenerate = ({ extraClassName = '', networkBranch = '', onClick = null, disabled = false }) => {
return (
<button
className={`sw-ButtonGenerate ${extraClassName} ${networkBranch ? 'sw-ButtonGenerate-' + networkBranch : ''}`}
disabled={disabled}
onClick={onClick}
type="button"
>
<span className="sw-ButtonGenerate_Text">Generate Keys</span>
<img src={icon} alt="" className="sw-ButtonGenerate_Icon" />
</button>
)
}

6
src/components/Footer/index.js
View File

@ -4,11 +4,11 @@ import { Logo } from '../Logo'
import { SocialIcons } from '../SocialIcons'
import { constants } from '../../utils/constants'
export const Footer = ({ extraClassName = '', isTestnet = false }) => {
export const Footer = ({ extraClassName = '', networkBranch = false }) => {
return (
<footer className={`sw-Footer ${extraClassName} ${isTestnet ? 'sw-Footer-test' : ''}`}>
<footer className={`sw-Footer ${extraClassName} ${networkBranch ? 'sw-Footer-' + networkBranch : ''}`}>
<div className="sw-Footer_Content">
<Logo isTestnet={isTestnet} href={constants.baseURL} />
<Logo networkBranch={networkBranch} href={constants.baseURL} />
<p className="sw-Footer_Text">{moment().format('YYYY')} POA Network. All rights reserved.</p>
<SocialIcons />
</div>

6
src/components/Header/index.js
View File

@ -2,11 +2,11 @@ import React from 'react'
import { constants } from '../../utils/constants'
import { Logo } from '../Logo'
export const Header = ({ extraClassName = '', isTestnet = false }) => {
export const Header = ({ extraClassName = '', networkBranch = '' }) => {
return (
<header className={`sw-Header ${extraClassName} ${isTestnet ? 'sw-Header-test' : ''}`}>
<header className={`sw-Header ${extraClassName} ${networkBranch ? 'sw-Header-' + networkBranch : ''}`}>
<div className="sw-Header_Content">
<Logo isTestnet={isTestnet} href={constants.baseURL} />
<Logo networkBranch={networkBranch} href={constants.baseURL} />
</div>
</header>
)

17
src/components/Home/index.js
View File

@ -1,19 +1,16 @@
import React from 'react'
import { ButtonGenerate } from '../ButtonGenerate'
export const Home = ({ extraClassName = '', isTestnet = false }) => {
export const Home = ({ extraClassName = '', networkBranch = false, onClick = null, disabled = false }) => {
return (
<div className={`hm-Home ${extraClassName} ${isTestnet ? 'hm-Home-test' : ''}`}>
<div className={`hm-Home ${extraClassName}`}>
<div className="hm-Home_TextContainer">
<h1>Create keys from initial key</h1>
<h2>
<h1 className="hm-Home_Title">Create keys from initial key</h1>
<p className="hm-Home_Text">
In this application, you will create mining, payout and voting keys. The app will make your initial key
unusable after the process. Please proceed with care, don't lose your keys and follow instructions.
</h2>
<div className="create-keys-button-container">
{/* <button className="create-keys-button" onClick={this.onClick} disabled={this.state.isDisabledBtn}>
Generate keys
</button> */}
</div>
</p>
<ButtonGenerate onClick={onClick} disabled={disabled} networkBranch={networkBranch} />
</div>
<div className="hm-Home_ImageContainer">
<div className="hm-Home_Image">

14
src/components/Logo/index.js
View File

@ -1,7 +1,17 @@
import React from 'react'
import { LogoPOA } from '../LogoPOA'
import { LogoSokol } from '../LogoSokol'
import { LogoDai } from '../LogoDai'
export const Logo = ({ href = null, extraClass = '', isTestnet = false }) => {
return isTestnet ? <LogoSokol href={href} extraClass={extraClass} /> : <LogoPOA href={href} extraClass={extraClass} />
export const Logo = ({ href = null, extraClass = '', networkBranch = '' }) => {
switch (networkBranch) {
case 'sokol':
return <LogoSokol href={href} extraClass={extraClass} />
case 'dai':
case 'dai-test':
return <LogoDai href={href} extraClass={extraClass} />
case 'poa':
default:
return <LogoPOA href={href} extraClass={extraClass} />
}
}

10
src/components/LogoDai/index.js Normal file
View File

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

32
src/components/LogoDai/logo.svg Normal file
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"
>Dai Logo Replace</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>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

12
src/utils/utils.js
View File

@ -3,3 +3,15 @@ import { constants } from './constants'
export const isTestnet = netId => {
return netId in constants.NETWORKS && constants.NETWORKS[netId].TESTNET
}
export const isValidNetwork = netId => {
return netId in constants.NETWORKS
}
export const getNetworkBranch = netId => {
return constants.NETWORKS[netId].BRANCH
}
export const getNetworkName = netId => {
return constants.NETWORKS[netId].NAME
}