(add) new ballot button component
This commit is contained in:
parent
a2fc1a466b
commit
8b2b130678
|
@ -46,13 +46,13 @@ textarea {
|
||||||
transition: 0.15s background-color;
|
transition: 0.15s background-color;
|
||||||
|
|
||||||
@include make-themed-btn('btn-primary', $poa-purple, (92, 52, 162, 0.3));
|
@include make-themed-btn('btn-primary', $poa-purple, (92, 52, 162, 0.3));
|
||||||
@include make-themed-btn('btn-success', $poa-success-color, (96, 219, 151, 0.3));
|
@include make-themed-btn('btn-success', $poa-green-color, (96, 219, 151, 0.3));
|
||||||
@include make-themed-btn('btn-danger', $poa-danger-color, (242, 27, 87, 0.3));
|
@include make-themed-btn('btn-danger', $poa-danger-color, (242, 27, 87, 0.3));
|
||||||
@include make-themed-btn('btn-freeze', $poa-freeze-color, (80, 187, 218, 0.3));
|
@include make-themed-btn('btn-freeze', $poa-freeze-color, (80, 187, 218, 0.3));
|
||||||
|
|
||||||
.sokol & {
|
.sokol & {
|
||||||
@include make-themed-btn('btn-primary', $sokol-cyan, (106, 201, 185, 0.3));
|
@include make-themed-btn('btn-primary', $sokol-cyan, (106, 201, 185, 0.3));
|
||||||
@include make-themed-btn('btn-success', $sokol-success-color, (96, 219, 151, 0.3));
|
@include make-themed-btn('btn-success', $sokol-cyan, (96, 219, 151, 0.3));
|
||||||
@include make-themed-btn('btn-danger', $sokol-danger-color, (242, 76, 103, 0.33));
|
@include make-themed-btn('btn-danger', $sokol-danger-color, (242, 76, 103, 0.33));
|
||||||
@include make-themed-btn('btn-freeze', $sokol-freeze-color, (80, 187, 218, 0.3));
|
@include make-themed-btn('btn-freeze', $sokol-freeze-color, (80, 187, 218, 0.3));
|
||||||
}
|
}
|
||||||
|
|
|
@ -22,16 +22,16 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&_yes {
|
&_yes {
|
||||||
background-color: $poa-success-color;
|
background-color: $poa-green-color;
|
||||||
.sokol & {
|
.sokol & {
|
||||||
background-color: $sokol-success-color;
|
background-color: $sokol-cyan;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&_send {
|
&_send {
|
||||||
background-color: $poa-success-color;
|
background-color: $poa-green-color;
|
||||||
.sokol & {
|
.sokol & {
|
||||||
background-color: $sokol-success-color;
|
background-color: $sokol-cyan;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -127,8 +127,8 @@ textarea {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.color-success {
|
.color-success {
|
||||||
color: $poa-success-color;
|
color: $poa-green-color;
|
||||||
.sokol & {
|
.sokol & {
|
||||||
color: $sokol-success-color;
|
color: $sokol-cyan;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,50 @@
|
||||||
|
$sw-ButtonNewBallot-height: 36px;
|
||||||
|
|
||||||
|
.sw-ButtonNewBallot {
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 3px;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
height: $sw-ButtonNewBallot-height;
|
||||||
|
line-height: $sw-ButtonNewBallot-height;
|
||||||
|
opacity: 1;
|
||||||
|
outline: none;
|
||||||
|
padding: 0 15px;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: 0.15s background-color;
|
||||||
|
|
||||||
|
&#{ & }-core {
|
||||||
|
background-color: $poa-green-color;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: darken($poa-green-color, 10%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&#{ & }-sokol {
|
||||||
|
background-color: #fff;
|
||||||
|
color: $sokol-cyan;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: darken(#fff, 5%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&#{ & }-dai {
|
||||||
|
background-color: $xdai-menu-icon-color;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: lighten($poa-green-color, 5%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sw-Header_Links & {
|
||||||
|
margin-left: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -15,11 +15,6 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
z-index: 124;
|
z-index: 124;
|
||||||
|
|
||||||
// @media (min-width: $mobile-width) {
|
|
||||||
// position: relative;
|
|
||||||
// z-index: 9999;
|
|
||||||
// }
|
|
||||||
|
|
||||||
&#{ & }-menu-open {
|
&#{ & }-menu-open {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
@ -37,24 +32,6 @@
|
||||||
background-color: $xdai-gray;
|
background-color: $xdai-gray;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn.btn-new-ballot {
|
|
||||||
height: 36px;
|
|
||||||
line-height: 36px;
|
|
||||||
opacity: 1;
|
|
||||||
.link-icon {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.sokol {
|
|
||||||
.btn.btn-new-ballot {
|
|
||||||
background-color: #fff;
|
|
||||||
background-image: url('#{ $base-images-path }/icons/icon-add-sokol.svg');
|
|
||||||
color: $sokol-cyan;
|
|
||||||
&:hover {
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sw-Header_Content {
|
.sw-Header_Content {
|
||||||
|
|
|
@ -0,0 +1,19 @@
|
||||||
|
.sw-IconAdd {
|
||||||
|
.sw-ButtonNewBallot & {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sw-IconAdd_Path {
|
||||||
|
&#{ & }-core {
|
||||||
|
fill: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&#{ & }-sokol {
|
||||||
|
fill: $sokol-cyan;;
|
||||||
|
}
|
||||||
|
|
||||||
|
&#{ & }-dai {
|
||||||
|
fill: #fff;
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,9 +1,11 @@
|
||||||
@import "App";
|
@import "App";
|
||||||
@import "BaseLoader";
|
@import "BaseLoader";
|
||||||
|
@import "ButtonNewBallot";
|
||||||
@import "Footer";
|
@import "Footer";
|
||||||
@import "Header";
|
@import "Header";
|
||||||
@import "IconAFinalize";
|
@import "IconAFinalize";
|
||||||
@import "IconActive";
|
@import "IconActive";
|
||||||
|
@import "IconAdd";
|
||||||
@import "IconAll";
|
@import "IconAll";
|
||||||
@import "IconGithub";
|
@import "IconGithub";
|
||||||
@import "IconMobileMenu";
|
@import "IconMobileMenu";
|
||||||
|
|
|
@ -5,20 +5,19 @@ $poa-purple: #5c34a2;
|
||||||
$poa-purple-darker: #45277a;
|
$poa-purple-darker: #45277a;
|
||||||
$poa-freeze-color: #50bbda;
|
$poa-freeze-color: #50bbda;
|
||||||
$poa-danger-color: #f21b57;
|
$poa-danger-color: #f21b57;
|
||||||
$poa-success-color: #60db97;
|
$poa-green-color: #60db97;
|
||||||
$poa-menu-icon-color: #60db97;
|
$poa-menu-icon-color: #60db97;
|
||||||
|
|
||||||
$sokol-cyan: #6ac9b9;
|
$sokol-cyan: #6ac9b9;
|
||||||
$sokol-cyan-darker: #41b19e;
|
$sokol-cyan-darker: #41b19e;
|
||||||
$sokol-freeze-color: #50bbda;
|
$sokol-freeze-color: #50bbda;
|
||||||
$sokol-danger-color: #f24c67;
|
$sokol-danger-color: #f24c67;
|
||||||
$sokol-success-color: #6ac9b9;
|
$sokol-menu-icon-color: #fff;
|
||||||
$sokol-menu-icon-color: #ffffff;
|
|
||||||
|
|
||||||
$xdai-orange: #fec042;
|
$xdai-orange: #fec042;
|
||||||
$xdai-gray-darker: #eaeef0;
|
$xdai-gray-darker: #eaeef0;
|
||||||
$xdai-gray: #f2f6f8;
|
$xdai-gray: #f2f6f8;
|
||||||
$xdai-menu-icon-color: #333333;
|
$xdai-menu-icon-color: #333;
|
||||||
|
|
||||||
// colors
|
// colors
|
||||||
$gray-text-color: #333;
|
$gray-text-color: #333;
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -0,0 +1,14 @@
|
||||||
|
import React from 'react'
|
||||||
|
import { constants } from '../../utils/constants'
|
||||||
|
import { IconAdd } from '../IconAdd'
|
||||||
|
|
||||||
|
export const ButtonNewBallot = ({ extraClassName = '', networkBranch }) => {
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
href={`${constants.rootPath}/new`}
|
||||||
|
className={`sw-ButtonNewBallot ${extraClassName} sw-ButtonNewBallot-${networkBranch}`}
|
||||||
|
>
|
||||||
|
New Ballot <IconAdd networkBranch={networkBranch} />
|
||||||
|
</a>
|
||||||
|
)
|
||||||
|
}
|
|
@ -6,7 +6,7 @@ import { constants } from '../../utils/constants'
|
||||||
|
|
||||||
export const Footer = ({ extraClassName = '', networkBranch = false }) => {
|
export const Footer = ({ extraClassName = '', networkBranch = false }) => {
|
||||||
return (
|
return (
|
||||||
<footer className={`sw-Footer ${extraClassName} ${networkBranch ? 'sw-Footer-' + networkBranch : ''}`}>
|
<footer className={`sw-Footer ${extraClassName} sw-Footer-${networkBranch}`}>
|
||||||
<div className="sw-Footer_Content">
|
<div className="sw-Footer_Content">
|
||||||
<Logo networkBranch={networkBranch} href={constants.baseURL} />
|
<Logo networkBranch={networkBranch} href={constants.baseURL} />
|
||||||
<p className="sw-Footer_Text">{moment().format('YYYY')} POA Network. All rights reserved.</p>
|
<p className="sw-Footer_Text">{moment().format('YYYY')} POA Network. All rights reserved.</p>
|
||||||
|
|
|
@ -1,8 +1,9 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
import { ButtonNewBallot } from '../ButtonNewBallot'
|
||||||
|
import { IconMobileMenu } from '../IconMobileMenu'
|
||||||
import { Logo } from '../Logo'
|
import { Logo } from '../Logo'
|
||||||
import { MobileMenuLinks } from '../MobileMenuLinks'
|
import { MobileMenuLinks } from '../MobileMenuLinks'
|
||||||
import { NavigationLinks } from '../NavigationLinks'
|
import { NavigationLinks } from '../NavigationLinks'
|
||||||
import { IconMobileMenu } from '../IconMobileMenu'
|
|
||||||
|
|
||||||
export const Header = ({
|
export const Header = ({
|
||||||
baseRootPath,
|
baseRootPath,
|
||||||
|
@ -18,6 +19,7 @@ export const Header = ({
|
||||||
<Logo networkBranch={networkBranch} href={baseRootPath} />
|
<Logo networkBranch={networkBranch} href={baseRootPath} />
|
||||||
<div className="sw-Header_Links">
|
<div className="sw-Header_Links">
|
||||||
<NavigationLinks networkBranch={networkBranch} navigationData={navigationData} />
|
<NavigationLinks networkBranch={networkBranch} navigationData={navigationData} />
|
||||||
|
<ButtonNewBallot networkBranch={networkBranch} />
|
||||||
</div>
|
</div>
|
||||||
<IconMobileMenu networkBranch={networkBranch} isOpen={showMobileMenu} onClick={onMenuToggle} />
|
<IconMobileMenu networkBranch={networkBranch} isOpen={showMobileMenu} onClick={onMenuToggle} />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -0,0 +1,13 @@
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
export const IconAdd = ({ networkBranch }) => {
|
||||||
|
return (
|
||||||
|
<svg className="sw-IconAdd" xmlns="http://www.w3.org/2000/svg" width="14" height="14">
|
||||||
|
<path
|
||||||
|
className={`sw-IconAdd_Path sw-IconAdd_Path-${networkBranch}`}
|
||||||
|
d="M13 8H8v5a1 1 0 0 1-2 0V8H1a1 1 0 0 1 0-2h5V1a1 1 0 0 1 2 0v5h5a1 1 0 0 1 0 2z"
|
||||||
|
fillRule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
}
|
Loading…
Reference in New Issue