(add) keys radio buttons component

2019-01-02 16:43:40 -03:00 · 2019-01-02 16:43:40 -03:00 · 744f3a1ff5
parent 1b39f7b6dc
commit 744f3a1ff5
20 changed files with 258 additions and 268 deletions
--- a/src/App.js
+++ b/src/App.js
@ -90,12 +90,20 @@ class App extends Component {
    return netId in constants.NETWORKS && constants.NETWORKS[netId].TESTNET ? 'sokol' : ''
  }

+  isNewBallotPage() {
+    return `${constants.rootPath}/new` === this.props.location.pathname
+  }
+
  render() {
    const { commonStore, contractsStore } = this.props
    const networkBranch = this.getVotingNetworkBranch()

    return networkBranch ? (
-      <div className={`lo-App ${this.state.showMobileMenu ? 'lo-App-menu-open' : ''}`}>
+      <div
+        className={`lo-App ${this.isNewBallotPage() ? 'lo-App-no-search-bar' : ''} ${
+          this.state.showMobileMenu ? 'lo-App-menu-open' : ''
+        }`}
+      >
        {commonStore.loading ? <Loading networkBranch={networkBranch} /> : null}
        <Header
          baseRootPath={commonStore.rootPath}
--- a/src/assets/stylesheets/application/_base.scss
+++ b/src/assets/stylesheets/application/_base.scss
@ -31,15 +31,6 @@ a {
  }
 }

-hr {
-  display: block;
-  width: 100%;
-  height: 1px;
-  margin: 10px 0 30px;
-  border: 0;
-  background-color: $base-border-color;
-}
-
 .center {
  text-align: center;
 }
@ -80,19 +71,3 @@ hr {
    padding: 0 10px;
  }
 }
-
-.title {
-  margin-top: 30px;
-  margin-bottom: 30px;
-  color: #38454f;
-  font-size: 30px;
-  font-weight: normal;
-
-  @media screen and (max-width: $breakpoint-md) {
-    font-size: 28px;
-  }
-
-  @media screen and (max-width: $mobile-width) {
-    font-size: 26px;
-  }
-}
--- a/src/assets/stylesheets/application/_controls.scss
+++ b/src/assets/stylesheets/application/_controls.scss
@ -1,77 +1,5 @@


-.radio-button {
-  position: relative;
-
-  &-label {
-    @include not-selectable-text();
-    border-radius: 3px;
-    border: 1px solid $base-border-color;
-    color: $gray-text-color;
-    cursor: pointer;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 50px;
-    margin: 0;
-    outline: none;
-    padding: 0 15px;
-    text-decoration: none;
-    text-transform: capitalize;
-    text-align: center;
-    transition: 0.25s background-color;
-    position: relative;
-    z-index: 1;
-  }
-
-  input[type='radio'] {
-    height: 100%;
-    position: absolute;
-    visibility: hidden;
-    width: 100%;
-    z-index: 12;
-  }
-
-  input[type='radio']:checked + &-label {
-    background-color: $poa-purple;
-    border-color: $poa-purple;
-    box-shadow: 0px 5px 10px 0 rgba(92, 52, 162, 0.3);
-    color: #fff;
-    .sokol & {
-      background-color: $sokol-cyan;
-      border-color: $sokol-cyan;
-      box-shadow: 0px 5px 10px 0 rgba(106, 201, 185, 0.3);
-    }
-  }
-}
-
-.keys-radio-button-tr {
-  display: flex;
-  margin-bottom: 30px;
-  @media screen and (max-width: $breakpoint-md) {
-    flex-direction: column;
-  }
-}
-
-.keys-radio-button-td {
-  min-width: 30%;
-  margin-right: 5%;
-  &:last-child {
-    margin-right: 0;
-  }
-  .radio-button-label {
-    display: flex;
-    justify-content: center;
-  }
-  @media screen and (max-width: $breakpoint-md) {
-    margin-bottom: 15px;
-    margin-right: 0;
-    min-width: 100%;
-  }
-}
-
-// .form-el {
-//   margin-bottom: 30px;
-// }

 .hint {
  color: #777;
--- a/src/assets/stylesheets/application/_new.scss
+++ b/src/assets/stylesheets/application/_new.scss
@ -1,52 +0,0 @@
-.new {
-  &-form {
-    @extend %white-block;
-    display: flex;
-    overflow: hidden;
-    padding: 0;
-
-    @media screen and (max-width: $breakpoint-md) {
-      display: block;
-    }
-
-    &-side {
-      box-sizing: border-box;
-      padding-bottom: 30px;
-      padding-top: 30px;
-
-      @media screen and (max-width: $breakpoint-md) {
-        width: 100% !important;
-      }
-
-      &_left {
-        background-color: #f8f8f8;
-        padding-top: 0;
-        width: 30%;
-
-        @media screen and (max-width: $breakpoint-md) {
-          margin-bottom: 30px;
-          padding-bottom: 0;
-        }
-      }
-
-      &_right {
-        border-left: 1px solid $base-border-color;
-        padding-left: 30px;
-        padding-right: 30px;
-        width: 70%;
-
-        @media screen and (max-width: $breakpoint-md) {
-          border: 0;
-          padding-top: 0;
-        }
-      }
-    }
-  }
-
-  .add-ballot {
-    white-space: nowrap;
-    @media screen and (max-width: $mobile-width) {
-      margin-top: 20px;
-    }
-  }
-}
--- a/src/assets/stylesheets/base/_forms.scss
+++ b/src/assets/stylesheets/base/_forms.scss
@ -1,11 +1,11 @@
 .lo-FormElement {
-    margin-bottom: 30px;
+    margin-bottom: $base-grid-gap;
 }

 label {
    color: $gray-text-color;
    display: inline-block;
-    font-size: 13px;
+    font-size: 14px;
    line-height: 1.2;
    margin-bottom: 15px;
 }
--- a/src/assets/stylesheets/components/_App.scss
+++ b/src/assets/stylesheets/components/_App.scss
@ -5,6 +5,10 @@
    height: 100%;
    padding-top: $header-height + $search-container-height;
    width: 100%;
+
+    &#{ & }-no-search-bar {
+        padding-top: $header-height;
+    }
 }

 .lo-App_Content {
--- a/src/assets/stylesheets/components/_FormHint.scss
+++ b/src/assets/stylesheets/components/_FormHint.scss
@ -0,0 +1,27 @@
+.frm-FormHint {
+    color: #777;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 1.38;
+    margin: 0;
+    padding-top: 12px;
+    word-break: break-word;
+
+    &#{ & }-core {
+        a {
+            color: $poa-purple;
+        }
+    }
+
+    &#{ & }-sokol {
+        a {
+            color: $sokol-cyan;
+        }
+    }
+
+    &#{ & }-dai {
+        a {
+            color: $xdai-orange;
+        }
+    }
+}
--- a/src/assets/stylesheets/components/_KeysTypes.scss
+++ b/src/assets/stylesheets/components/_KeysTypes.scss
@ -0,0 +1,97 @@
+.frm-KeysTypes {
+    margin-bottom: $base-grid-gap;
+}
+
+.frm-KeysTypes_Row {
+    margin-bottom: $base-grid-gap;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+
+    @media (min-width: $breakpoint-md) {
+        display: grid;
+        grid-column-gap: $base-grid-gap;
+        grid-template-columns: 1fr 1fr 1fr;
+    }
+}
+
+.frm-KeysTypes_Td {
+    margin-bottom: $base-grid-gap;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+
+    @media (min-width: $breakpoint-md) {
+        margin-bottom: 0;
+    }
+}
+
+.frm-KeysTypes_Button {
+    position: relative;
+}
+
+.frm-KeysTypes_Label {
+    @include not-selectable-text();
+    border-radius: 3px;
+    border: 1px solid $base-border-color;
+    color: $gray-text-color;
+    cursor: pointer;
+    display: block;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 50px;
+    margin: 0;
+    outline: none;
+    padding: 0 15px;
+    text-decoration: none;
+    text-transform: capitalize;
+    text-align: center;
+    transition: 0.15s background-color ease-out, 0.15s border-color ease-out;
+    position: relative;
+    white-space: nowrap;
+    z-index: 1;
+
+    &:hover {
+        border-color: darken($base-border-color, 15%);
+    }
+
+    .frm-KeysTypes_Radio:checked + &#{ & }-core {
+        &,
+        &:hover {
+            background-color: $poa-purple;
+            border-color: $poa-purple;
+            box-shadow: 0 5px 10px 0 rgba($poa-purple, 0.3);
+            color: #fff;
+        }
+    }
+
+    .frm-KeysTypes_Radio:checked + &#{ & }-sokol {
+        &,
+        &:hover {
+            background-color: $sokol-cyan;
+            border-color: $sokol-cyan;
+            box-shadow: 0 5px 10px 0 rgba($sokol-cyan, 0.3);
+            color: #fff;
+        }
+    }
+
+    .frm-KeysTypes_Radio:checked + &#{ & }-dai {
+        &,
+        &:hover {
+            background-color: $xdai-orange;
+            border-color: $xdai-orange;
+            box-shadow: 0 5px 10px 0 rgba($xdai-orange, 0.3);
+            color: #fff;
+        }
+    }
+}
+
+.frm-KeysTypes_Radio {
+    height: 100%;
+    position: absolute;
+    visibility: hidden;
+    width: 100%;
+    z-index: 12;
+}
--- a/src/assets/stylesheets/components/_NewBallotMenu.scss
+++ b/src/assets/stylesheets/components/_NewBallotMenu.scss
@ -11,14 +11,9 @@
    cursor: pointer;
    font-size: 16px;
    font-weight: 400;
-    line-height: 30px;
-    margin-bottom: 10px;
+    line-height: 45px;
    position: relative;

-    &:last-child {
-        margin-bottom: 0;
-    }
-
    &::before {
        background-color: transparent;
        border-bottom-right-radius: 5px;
--- a/src/assets/stylesheets/components/_NewBallotMenuInfo.scss
+++ b/src/assets/stylesheets/components/_NewBallotMenuInfo.scss
@ -6,7 +6,7 @@
    color: #333;
    font-size: 16px;
    font-weight: 400;
-    margin-bottom: 30px;
+    margin: 0 0 30px;
    padding-left: 25px;
    position: relative;

--- a/src/assets/stylesheets/components/_Separator.scss
+++ b/src/assets/stylesheets/components/_Separator.scss
@ -0,0 +1,8 @@
+.sw-Separator {
+    background-color: $base-border-color;
+    border: 0;
+    display: block;
+    height: 1px;
+    margin: 30px 0;
+    width: 100%;
+}
--- a/src/assets/stylesheets/components/_index.scss
+++ b/src/assets/stylesheets/components/_index.scss
@ -12,6 +12,7 @@
@import "ButtonNewBallot";
@import "ButtonVoting";
@import "Footer";
+@import "FormHint";
@import "Header";
@import "IconActive";
@import "IconAdd";
@ -24,6 +25,7 @@
@import "IconTelegram";
@import "IconToFinalize";
@import "IconTwitter";
+@import "KeysTypes";
@import "LoadMore";
@import "Loading";
@import "LogoDai";
@ -36,6 +38,7 @@
@import "NewBallotMenu";
@import "NewBallotMenuInfo";
@import "SearchBar";
+@import "Separator";
@import "SocialIcons";
@import "VoteProgressBar";
@import "Votes";
--- a/src/assets/stylesheets/helpers/_form-mixins.scss
+++ b/src/assets/stylesheets/helpers/_form-mixins.scss
@ -5,6 +5,7 @@
    border: 1px solid $base-border-color;
    box-sizing: border-box;
    color: $input-color;
+    display: block;
    font-size: 14px;
    outline: none;
    padding: 0 10px;
--- a/src/assets/stylesheets/helpers/_variables.scss
+++ b/src/assets/stylesheets/helpers/_variables.scss
@ -82,4 +82,7 @@ $voting-positive-sokol: #6ac9b9;

 $voting-negative-dai: #f21b57;
 $voting-neutral-dai: #50bbda;
-$voting-positive-dai: #60db97;
+$voting-positive-dai: #60db97;
+
+// grid stuff
+$base-grid-gap: 30px;
--- a/src/assets/stylesheets/index.css
+++ b/src/assets/stylesheets/index.css
--- a/src/assets/stylesheets/index.scss
+++ b/src/assets/stylesheets/index.scss
@ -8,4 +8,3 @@
 // @import 'application/base';
 // @import 'application/buttons';
@import 'application/controls';
-@import 'application/new';
--- a/src/components/FormHint/index.js
+++ b/src/components/FormHint/index.js
@ -0,0 +1,5 @@
+import React from 'react'
+
+export const FormHint = ({ extraClassName = '', networkBranch, text }) => {
+  return <p className={`frm-FormHint frm-FormHint-${networkBranch} ${extraClassName}`}>{text}</p>
+}
--- a/src/components/KeysTypes/index.js
+++ b/src/components/KeysTypes/index.js
@ -1,113 +1,98 @@
 import React from 'react'
 import { inject, observer } from 'mobx-react'
+import { FormHint } from '../FormHint'

@inject('ballotStore')
@observer
 export class KeysTypes extends React.Component {
  render() {
-    const { ballotStore } = this.props
+    const { ballotStore, networkBranch } = this.props
+    const keyButtons = [
+      [
+        {
+          checked: ballotStore.isAddKeysBallotType,
+          hint: 'Add new key.',
+          id: 'add-key',
+          name: 'key-control',
+          onChange: e => ballotStore.changeKeysBallotType(e, ballotStore.KeysBallotType.add),
+          text: 'Add key',
+          value: ballotStore.KeysBallotType.add
+        },
+        {
+          checked: ballotStore.isRemoveKeysBallotType,
+          hint: 'Remove existing key.',
+          id: 'remove-key',
+          name: 'key-control',
+          onChange: e => ballotStore.changeKeysBallotType(e, ballotStore.KeysBallotType.remove),
+          text: 'Remove key',
+          value: ballotStore.KeysBallotType.remove
+        },
+        {
+          checked: ballotStore.isSwapKeysBallotType,
+          hint: 'Remove existing key and add new key.',
+          id: 'swap-key',
+          name: 'key-control',
+          onChange: e => ballotStore.changeKeysBallotType(e, ballotStore.KeysBallotType.swap),
+          text: 'Swap key',
+          value: ballotStore.KeysBallotType.swap
+        }
+      ],
+      [
+        {
+          checked: ballotStore.isMiningKeyType,
+          hint: 'Mining key type.',
+          id: 'mining-key',
+          name: 'keys',
+          onChange: e => ballotStore.changeKeyType(e, ballotStore.KeyType.mining),
+          text: 'Mining Key',
+          value: ballotStore.KeyType.mining
+        },
+        {
+          checked: ballotStore.isPayoutKeyType,
+          hint: 'Payout key type.',
+          id: 'payout-key',
+          name: 'keys',
+          onChange: e => ballotStore.changeKeyType(e, ballotStore.KeyType.payout),
+          text: 'Payout Key',
+          value: ballotStore.KeyType.payout
+        },
+        {
+          checked: ballotStore.isVotingKeyType,
+          hint: 'Voting key type.',
+          id: 'voting-key',
+          name: 'keys',
+          onChange: e => ballotStore.changeKeyType(e, ballotStore.KeyType.voting),
+          text: 'Voting Key',
+          value: ballotStore.KeyType.voting
+        }
+      ]
+    ]
+
    return (
-      <div className="hidden">
-        <div className="keys-radio-button-tr">
-          <div className="keys-radio-button-td">
-            <div className="radio-button">
-              <input
-                type="radio"
-                name="key-control"
-                id="add-key"
-                value={ballotStore.KeysBallotType.add}
-                checked={ballotStore.isAddKeysBallotType}
-                onChange={e => ballotStore.changeKeysBallotType(e, ballotStore.KeysBallotType.add)}
-              />
-              <label className="radio-button-label" htmlFor="add-key">
-                Add key
-              </label>
-            </div>
-            <p className="hint">Add new key.</p>
+      <div className={`frm-KeysTypes frm-KeysTypes-${networkBranch}`}>
+        {keyButtons.map((row, index) => (
+          <div className="frm-KeysTypes_Row" key={index}>
+            {row.map((item, index) => (
+              <div className="frm-KeysTypes_Td" key={index}>
+                <div className="frm-KeysTypes_Button">
+                  <input
+                    checked={item.checked}
+                    className="frm-KeysTypes_Radio"
+                    id={item.id}
+                    name={item.name}
+                    onChange={item.onChange}
+                    type="radio"
+                    value={item.value}
+                  />
+                  <label className={`frm-KeysTypes_Label frm-KeysTypes_Label-${networkBranch}`} htmlFor={item.id}>
+                    {item.text}
+                  </label>
+                </div>
+                <FormHint text={item.hint} networkBranch={networkBranch} />
+              </div>
+            ))}
          </div>
-          <div className="keys-radio-button-td">
-            <div className="radio-button">
-              <input
-                type="radio"
-                name="key-control"
-                id="remove-key"
-                value={ballotStore.KeysBallotType.remove}
-                checked={ballotStore.isRemoveKeysBallotType}
-                onChange={e => ballotStore.changeKeysBallotType(e, ballotStore.KeysBallotType.remove)}
-              />
-              <label className="radio-button-label" htmlFor="remove-key">
-                Remove key
-              </label>
-            </div>
-            <p className="hint">Remove existing key.</p>
-          </div>
-          <div className="keys-radio-button-td">
-            <div className="radio-button">
-              <input
-                type="radio"
-                name="key-control"
-                id="swap-key"
-                value={ballotStore.KeysBallotType.swap}
-                checked={ballotStore.isSwapKeysBallotType}
-                onChange={e => ballotStore.changeKeysBallotType(e, ballotStore.KeysBallotType.swap)}
-              />
-              <label className="radio-button-label" htmlFor="swap-key">
-                Swap key
-              </label>
-            </div>
-            <p className="hint">Remove existing key and add new key.</p>
-          </div>
-        </div>
-        <div className="keys-radio-button-tr">
-          <div className="keys-radio-button-td">
-            <div className="radio-button">
-              <input
-                type="radio"
-                name="keys"
-                id="mining-key"
-                value={ballotStore.KeyType.mining}
-                checked={ballotStore.isMiningKeyType}
-                onChange={e => ballotStore.changeKeyType(e, ballotStore.KeyType.mining)}
-              />
-              <label className="radio-button-label" htmlFor="mining-key">
-                Mining Key
-              </label>
-            </div>
-            <p className="hint">Mining key type.</p>
-          </div>
-          <div className="keys-radio-button-td">
-            <div className="radio-button">
-              <input
-                type="radio"
-                name="keys"
-                id="payout-key"
-                value={ballotStore.KeyType.payout}
-                checked={ballotStore.isPayoutKeyType}
-                onChange={e => ballotStore.changeKeyType(e, ballotStore.KeyType.payout)}
-              />
-              <label className="radio-button-label" htmlFor="payout-key">
-                Payout Key
-              </label>
-            </div>
-            <p className="hint">Payout key type.</p>
-          </div>
-          <div className="keys-radio-button-td">
-            <div className="radio-button">
-              <input
-                type="radio"
-                name="keys"
-                id="voting-key"
-                value={ballotStore.KeyType.voting}
-                checked={ballotStore.isVotingKeyType}
-                onChange={e => ballotStore.changeKeyType(e, ballotStore.KeyType.voting)}
-              />
-              <label className="radio-button-label" htmlFor="voting-key">
-                Voting Key
-              </label>
-            </div>
-            <p className="hint">Voting key type.</p>
-          </div>
-        </div>
+        ))}
      </div>
    )
  }
--- a/src/components/NewBallot/index.js
+++ b/src/components/NewBallot/index.js
@ -9,6 +9,7 @@ import { ButtonAddBallot } from '../ButtonAddBallot'
 import { KeysTypes } from '../KeysTypes'
 import { NewBallotMenu } from '../NewBallotMenu'
 import { NewBallotMenuInfo } from '../NewBallotMenuInfo'
+import { Separator } from '../Separator'
 import { Validator } from '../Validator'
 import { constants } from '../../utils/constants'
 import { getNetworkBranch } from '../../utils/utils'
@ -459,12 +460,10 @@ export class NewBallot extends React.Component {
          <div className="new-NewBallot_FormContent">
            <div className="form-el">
              <label>Description of the ballot</label>
-              <div>
-                <textarea rows="4" value={ballotStore.memo} onChange={e => ballotStore.setMemo(e)} />
-              </div>
+              <textarea rows="4" value={ballotStore.memo} onChange={e => ballotStore.setMemo(e)} />
            </div>
-            <hr />
-            {ballotStore.isBallotForKey ? <KeysTypes /> : null}
+            <Separator />
+            {ballotStore.isBallotForKey ? <KeysTypes networkBranch={networkBranch} /> : null}
            {ballotStore.isNewValidatorPersonalData ? <Validator /> : null}
            {metadata}
            <ButtonAddBallot onClick={e => this.onClick(e)} networkBranch={networkBranch} />
--- a/src/components/Separator/index.js
+++ b/src/components/Separator/index.js
@ -0,0 +1,5 @@
+import React from 'react'
+
+export const Separator = ({ extraClassName = '' }) => {
+  return <hr className={`sw-Separator ${extraClassName}`} />
+}