From 49857827ba07040c8a9d7b25f7b38d8c0120d57f Mon Sep 17 00:00:00 2001 From: Gabriel Rodriguez Alsina Date: Tue, 11 Dec 2018 16:02:00 -0300 Subject: [PATCH] (add) style support for multiple styles --- src/App.js | 13 ++- src/assets/stylesheets/base/_typography.scss | 2 +- .../components/_ButtonGenerate.scss | 41 +++++++++ .../stylesheets/components/_Footer.scss | 14 ++- .../stylesheets/components/_Header.scss | 14 ++- src/assets/stylesheets/components/_Home.scss | 23 +++++ src/assets/stylesheets/components/_index.scss | 1 + .../stylesheets/helpers/_button-mixins.scss | 54 +++++++++++ src/assets/stylesheets/helpers/_index.scss | 1 + .../stylesheets/helpers/_variables.scss | 10 +- src/assets/stylesheets/index.css | 91 +++++++++++++++++-- src/components/ButtonGenerate/icon.svg | 3 + src/components/ButtonGenerate/index.js | 16 ++++ src/components/Footer/index.js | 6 +- src/components/Header/index.js | 6 +- src/components/Home/index.js | 17 ++-- src/components/Logo/index.js | 14 ++- src/components/LogoDai/index.js | 10 ++ src/components/LogoDai/logo.svg | 32 +++++++ src/utils/utils.js | 12 +++ 20 files changed, 339 insertions(+), 41 deletions(-) create mode 100644 src/assets/stylesheets/components/_ButtonGenerate.scss create mode 100644 src/assets/stylesheets/helpers/_button-mixins.scss create mode 100644 src/components/ButtonGenerate/icon.svg create mode 100644 src/components/ButtonGenerate/index.js create mode 100644 src/components/LogoDai/index.js create mode 100644 src/components/LogoDai/logo.svg diff --git a/src/App.js b/src/App.js index 3b13cd7..5dcbeed 100644 --- a/src/App.js +++ b/src/App.js @@ -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 (
-
+
{loader}
{this.state.keysGenerated ? ( ) : ( - + )}
-
+
) } diff --git a/src/assets/stylesheets/base/_typography.scss b/src/assets/stylesheets/base/_typography.scss index 1a197ad..6209f2f 100644 --- a/src/assets/stylesheets/base/_typography.scss +++ b/src/assets/stylesheets/base/_typography.scss @@ -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; } \ No newline at end of file diff --git a/src/assets/stylesheets/components/_ButtonGenerate.scss b/src/assets/stylesheets/components/_ButtonGenerate.scss new file mode 100644 index 0000000..5d802d7 --- /dev/null +++ b/src/assets/stylesheets/components/_ButtonGenerate.scss @@ -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; +} \ No newline at end of file diff --git a/src/assets/stylesheets/components/_Footer.scss b/src/assets/stylesheets/components/_Footer.scss index 6fff506..0c3c793 100644 --- a/src/assets/stylesheets/components/_Footer.scss +++ b/src/assets/stylesheets/components/_Footer.scss @@ -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; } } diff --git a/src/assets/stylesheets/components/_Header.scss b/src/assets/stylesheets/components/_Header.scss index ddae39a..0e2ddc1 100644 --- a/src/assets/stylesheets/components/_Header.scss +++ b/src/assets/stylesheets/components/_Header.scss @@ -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; } } diff --git a/src/assets/stylesheets/components/_Home.scss b/src/assets/stylesheets/components/_Home.scss index 823054d..36484e5 100644 --- a/src/assets/stylesheets/components/_Home.scss +++ b/src/assets/stylesheets/components/_Home.scss @@ -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; } \ No newline at end of file diff --git a/src/assets/stylesheets/components/_index.scss b/src/assets/stylesheets/components/_index.scss index 654afe6..9842975 100644 --- a/src/assets/stylesheets/components/_index.scss +++ b/src/assets/stylesheets/components/_index.scss @@ -1,4 +1,5 @@ @import "App"; +@import "ButtonGenerate"; @import "Footer"; @import "Header"; @import "Home"; diff --git a/src/assets/stylesheets/helpers/_button-mixins.scss b/src/assets/stylesheets/helpers/_button-mixins.scss new file mode 100644 index 0000000..6f50e09 --- /dev/null +++ b/src/assets/stylesheets/helpers/_button-mixins.scss @@ -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; + } + +} \ No newline at end of file diff --git a/src/assets/stylesheets/helpers/_index.scss b/src/assets/stylesheets/helpers/_index.scss index 815ddb3..6d285d3 100644 --- a/src/assets/stylesheets/helpers/_index.scss +++ b/src/assets/stylesheets/helpers/_index.scss @@ -2,4 +2,5 @@ @import 'mixins'; @import 'typography'; +@import 'button-mixins'; @import 'content-layout'; \ No newline at end of file diff --git a/src/assets/stylesheets/helpers/_variables.scss b/src/assets/stylesheets/helpers/_variables.scss index 3b9374c..8110dec 100644 --- a/src/assets/stylesheets/helpers/_variables.scss +++ b/src/assets/stylesheets/helpers/_variables.scss @@ -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; diff --git a/src/assets/stylesheets/index.css b/src/assets/stylesheets/index.css index b4978cc..a36d42e 100644 --- a/src/assets/stylesheets/index.css +++ b/src/assets/stylesheets/index.css @@ -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; } diff --git a/src/components/ButtonGenerate/icon.svg b/src/components/ButtonGenerate/icon.svg new file mode 100644 index 0000000..919c861 --- /dev/null +++ b/src/components/ButtonGenerate/icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/ButtonGenerate/index.js b/src/components/ButtonGenerate/index.js new file mode 100644 index 0000000..090658c --- /dev/null +++ b/src/components/ButtonGenerate/index.js @@ -0,0 +1,16 @@ +import React from 'react' +import icon from './icon.svg' + +export const ButtonGenerate = ({ extraClassName = '', networkBranch = '', onClick = null, disabled = false }) => { + return ( + + ) +} diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js index e29a076..2fb5e9e 100644 --- a/src/components/Footer/index.js +++ b/src/components/Footer/index.js @@ -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 ( -