Merge pull request #351 from LiskHQ/299-register-page-bugs

Fix Register page bugs - Closes #299
LiskHQ · Feb 14, 2018 · 2f15528 · 2f15528
2 parents d2f3fe7 + c546fcf
commit 2f15528
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 32 deletions.
diff --git a/src/components/delegateList/delegateList.css b/src/components/delegateList/delegateList.css
@@ -327,11 +327,6 @@
     &:first-child {
       display: none !important;
     }
-
-    &:nth-child(3) {
-      flex-basis: 58.3% !important;
-      max-width: 58.3% !important;
-    }
   }
 }
 
@@ -432,6 +427,14 @@
     & .filters .search {
       display: none;
     }
+
+    & .delegatesList {
+      & .row li:nth-child(3),
+      & .tableHead li:nth-child(3) {
+        flex-basis: 58.3% !important;
+        max-width: 58.3% !important;
+      }
+    }
   }
 
   .search input {

diff --git a/src/components/passphrase/confirm/confirm.css b/src/components/passphrase/confirm/confirm.css
@@ -53,6 +53,14 @@
     & h2.done {
       max-width: 320px;
     }
+
+    & h5 {
+      visibility: hidden;
+      opacity: 0;
+      font-size: 18px;
+      color: var(--color-error);
+      transition: all ease 500ms;
+    }
   }
 
   & .word {
@@ -151,12 +159,6 @@
     }
 
     & h5 {
-      visibility: hidden;
-      opacity: 0;
-      font-size: 18px;
-      color: var(--color-error);
-      transition: all ease 500ms;
-
       &.visible {
         visibility: visible;
         opacity: 1;

diff --git a/src/components/passphrase/create/index.js b/src/components/passphrase/create/index.js
@@ -71,7 +71,9 @@ class Create extends React.Component {
   }
 
   componentDidUpdate() {
-    this.moveTitle();
+    if (this.state.data) {
+      this.moveTitle();
+    }
   }
 
   componentWillUnmount() {

diff --git a/src/components/passphrase/safekeeping/safekeeping.css b/src/components/passphrase/safekeeping/safekeeping.css
@@ -292,7 +292,7 @@
       width: 330px !important;
       top: calc(50vh - 48px); /* stylelint-disable-line */
 
-      & div span {
+      & div > span:first-child {
         display: none;
       }
     }

diff --git a/src/components/toolbox/checkbox/checkbox.css b/src/components/toolbox/checkbox/checkbox.css
@@ -24,9 +24,10 @@
   & div {
     transition: all ease 300ms;
     width: calc(100% - calc(var(--element-height) / 2));
+    height: 100%;
     position: relative;
     text-indent: calc(var(--element-height) / 3);
-    flex-flow: row wrap;
+    flex-flow: row nowrap;
     font-weight: bold;
     text-align: center;
     display: flex;
@@ -42,28 +43,30 @@
       width: 100%;
     }
 
-    &::after {
-      content: 'chevron_right chevron_right chevron_right chevron_right chevron_right chevron_right chevron_right';
-      vertical-align: middle;
-      overflow: hidden;
-      letter-spacing: 8px;
-      text-indent: 20px;
-      font-size: 32px;
-      white-space: nowrap !important;
-      font-family: 'Material Icons';
-      position: relative;
-      z-index: 0;
-      flex: 3 0px;
-    }
-
-    & span {
-      text-indent: calc(var(--element-height) + 20px);
+    & > span {
+      text-indent: var(--element-height);
       flex: 0 auto;
       width: auto;
       font-size: var(--label-font-size);
     }
 
-    &:not(.hasArrows) {
+    & > span.arrows {
+      display: block;
+      text-indent: 0;
+      height: 100%;
+      overflow: hidden;
+
+      & span {
+        padding-left: 15px;
+        font-size: 20px;
+      }
+    }
+
+    & > span:not(.arrows) {
+      word-break: keep-all;
+      min-width: 200px;
+      z-index: 2;
+
       &::after,
       &::before {
         display: none !important;

diff --git a/src/components/toolbox/checkbox/index.js b/src/components/toolbox/checkbox/index.js
@@ -13,6 +13,7 @@ class SliderCheckbox extends React.Component {
 
     this.xOffset = 0;
     this.delta = 0;
+    this.arrows = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
   }
 
   // eslint-disable-next-line class-methods-use-this
@@ -129,8 +130,14 @@ class SliderCheckbox extends React.Component {
           </span>
         </span>
         { label ?
-          <div className={hasSlidingArrows ? theme.hasArrows : ''}>
+          <div>
             <span>{label}</span>
+            {
+              hasSlidingArrows ?
+                <span className={styles.arrows}>
+                  { this.arrows.map(key => <FontIcon key={key} value='arrow-right' />) }
+                </span> : null
+            }
           </div> : ''
         }
         {