(add) new ballot button component
This commit is contained in:
parent
a2fc1a466b
commit
8b2b130678
|
@ -46,13 +46,13 @@ textarea {
|
|||
transition: 0.15s background-color;
|
||||
|
||||
@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-freeze', $poa-freeze-color, (80, 187, 218, 0.3));
|
||||
|
||||
.sokol & {
|
||||
@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-freeze', $sokol-freeze-color, (80, 187, 218, 0.3));
|
||||
}
|
||||
|
|
|
@ -22,16 +22,16 @@
|
|||
}
|
||||
|
||||
&_yes {
|
||||
background-color: $poa-success-color;
|
||||
background-color: $poa-green-color;
|
||||
.sokol & {
|
||||
background-color: $sokol-success-color;
|
||||
background-color: $sokol-cyan;
|
||||
}
|
||||
}
|
||||
|
||||
&_send {
|
||||
background-color: $poa-success-color;
|
||||
background-color: $poa-green-color;
|
||||
.sokol & {
|
||||
background-color: $sokol-success-color;
|
||||
background-color: $sokol-cyan;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -127,8 +127,8 @@ textarea {
|
|||
}
|
||||
}
|
||||
.color-success {
|
||||
color: $poa-success-color;
|
||||
color: $poa-green-color;
|
||||
.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%;
|
||||
z-index: 124;
|
||||
|
||||
// @media (min-width: $mobile-width) {
|
||||
// position: relative;
|
||||
// z-index: 9999;
|
||||
// }
|
||||
|
||||
&#{ & }-menu-open {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
|
@ -37,24 +32,6 @@
|
|||
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 {
|
||||
|
|
|
@ -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 "BaseLoader";
|
||||
@import "ButtonNewBallot";
|
||||
@import "Footer";
|
||||
@import "Header";
|
||||
@import "IconAFinalize";
|
||||
@import "IconActive";
|
||||
@import "IconAdd";
|
||||
@import "IconAll";
|
||||
@import "IconGithub";
|
||||
@import "IconMobileMenu";
|
||||
|
|
|
@ -5,20 +5,19 @@ $poa-purple: #5c34a2;
|
|||
$poa-purple-darker: #45277a;
|
||||
$poa-freeze-color: #50bbda;
|
||||
$poa-danger-color: #f21b57;
|
||||
$poa-success-color: #60db97;
|
||||
$poa-green-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;
|
||||
$sokol-menu-icon-color: #fff;
|
||||
|
||||
$xdai-orange: #fec042;
|
||||
$xdai-gray-darker: #eaeef0;
|
||||
$xdai-gray: #f2f6f8;
|
||||
$xdai-menu-icon-color: #333333;
|
||||
$xdai-menu-icon-color: #333;
|
||||
|
||||
// colors
|
||||
$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 }) => {
|
||||
return (
|
||||
<footer className={`sw-Footer ${extraClassName} ${networkBranch ? 'sw-Footer-' + networkBranch : ''}`}>
|
||||
<footer className={`sw-Footer ${extraClassName} sw-Footer-${networkBranch}`}>
|
||||
<div className="sw-Footer_Content">
|
||||
<Logo networkBranch={networkBranch} href={constants.baseURL} />
|
||||
<p className="sw-Footer_Text">{moment().format('YYYY')} POA Network. All rights reserved.</p>
|
||||
|
|
|
@ -1,8 +1,9 @@
|
|||
import React from 'react'
|
||||
import { ButtonNewBallot } from '../ButtonNewBallot'
|
||||
import { IconMobileMenu } from '../IconMobileMenu'
|
||||
import { Logo } from '../Logo'
|
||||
import { MobileMenuLinks } from '../MobileMenuLinks'
|
||||
import { NavigationLinks } from '../NavigationLinks'
|
||||
import { IconMobileMenu } from '../IconMobileMenu'
|
||||
|
||||
export const Header = ({
|
||||
baseRootPath,
|
||||
|
@ -18,6 +19,7 @@ export const Header = ({
|
|||
<Logo networkBranch={networkBranch} href={baseRootPath} />
|
||||
<div className="sw-Header_Links">
|
||||
<NavigationLinks networkBranch={networkBranch} navigationData={navigationData} />
|
||||
<ButtonNewBallot networkBranch={networkBranch} />
|
||||
</div>
|
||||
<IconMobileMenu networkBranch={networkBranch} isOpen={showMobileMenu} onClick={onMenuToggle} />
|
||||
</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