(fix) some general tweaks and fixes

src/assets/stylesheets/base/_display.scss

@@ -1,6 +1,5 @@
 .hidden {
-    // TODO: Reset when done
-    // display: none;
+    display: none;
 }
 
 .display-block {

src/assets/stylesheets/base/_effects.scss

@@ -1,16 +0,0 @@
-.background-blur {
-    animation-duration: 0.25s;
-    animation-fill-mode: forwards;
-    animation-iteration-count: 1;
-    animation-name: sw-ModalAnimation_in;
-    animation-timing-function: linear;
-}
-
-@keyframes sw-ModalAnimation_in {
-    0% {
-        filter: blur(0);
-    }
-    100% {
-        filter: blur(2px);
-    }
-}

src/assets/stylesheets/components/_ButtonNewBallot.scss

@@ -20,6 +20,7 @@ $sw-ButtonNewBallot-height: 36px;
         background-color: $poa-green-color;
         color: #fff;
 
+        &:active,
         &:hover {
             background-color: darken($poa-green-color, 10%);
         }
@@ -29,6 +30,7 @@ $sw-ButtonNewBallot-height: 36px;
         background-color: #fff;
         color: $sokol-cyan;
 
+        &:active,
         &:hover {
             background-color: darken(#fff, 5%);
         }
@@ -38,6 +40,7 @@ $sw-ButtonNewBallot-height: 36px;
         background-color: $xdai-menu-icon-color;
         color: #fff;
 
+        &:active,
         &:hover {
             background-color: lighten($xdai-menu-icon-color, 5%);
         }
@@ -48,7 +51,8 @@ $sw-ButtonNewBallot-height: 36px;
     }
 
     .hd-MobileMenuLinks & {
-        max-width: fit-content;
-        margin: 0 auto;
+        height: 50px;
+        justify-content: center;
+        margin: 0;
     }
 }

src/assets/stylesheets/components/_MobileMenuLinks.scss

@@ -1,7 +1,6 @@
 .hd-MobileMenuLinks {
     background-color: $poa-purple-darker;
-    // height: $header-mobile-menu-container-height;
-    padding-bottom: 20px;
+    padding: 10px;
     width: 100%;
 
     &#{ & }-core {

src/assets/stylesheets/vendors/select/_control.scss

@@ -4,268 +4,267 @@
 @import 'spinner';
 @import 'mixins';
 .Select {
-  position: relative; // disable some browser-specific behaviours that break the input
-  input::-webkit-contacts-auto-fill-button,
-  input::-webkit-credentials-auto-fill-button {
-    display: none !important;
-  }
-  input::-ms-clear {
-    display: none !important;
-  }
-  input::-ms-reveal {
-    display: none !important;
-  } // preferred box model
-  &,
-  & div,
-  & input,
-  & span {
-    @include box-sizing(border-box);
-  } // handle disabled state
-  &.is-disabled {
-    .Select-arrow-zone {
-      cursor: default;
-      pointer-events: none;
+    position: relative; // disable some browser-specific behaviours that break the input
+    input::-webkit-contacts-auto-fill-button,
+    input::-webkit-credentials-auto-fill-button {
+        display: none !important;
     }
-    >.Select-control {
-      background-color: $select-input-bg-disabled;
-      &:hover {
-        box-shadow: none;
-      }
+    input::-ms-clear {
+        display: none !important;
+    }
+    input::-ms-reveal {
+        display: none !important;
+    } // preferred box model
+    &,
+    & div,
+    & input,
+    & span {
+        @include box-sizing(border-box);
+    } // handle disabled state
+    &.is-disabled {
+        .Select-arrow-zone {
+            cursor: default;
+            pointer-events: none;
+        }
+        >.Select-control {
+            background-color: $select-input-bg-disabled;
+            &:hover {
+                box-shadow: none;
+            }
+        }
+    }
+    &.is-searchable {
+        &.is-open>.Select-control {
+            cursor: text;
+        }
+        &.is-focused:not(.is-open)>.Select-control {
+            cursor: text;
+        }
     }
-  }
-  &.is-searchable {
     &.is-open>.Select-control {
-      cursor: text;
+        @include border-bottom-radius( 0);
+        background: $select-input-bg;
+        .Select-arrow {
+            top: -2px;
+            border-color: transparent transparent $select-arrow-color;
+            border-width: 0 $select-arrow-width $select-arrow-width;
+        }
+    }
+    &.is-focused>.Select-control {
+        background: $select-input-bg-focus;
     }
     &.is-focused:not(.is-open)>.Select-control {
-      cursor: text;
+        border-color: $select-input-border-focus lighten($select-input-border-focus, 5%) lighten($select-input-border-focus, 5%);
+        box-shadow: $select-input-box-shadow-focus;
     }
-  }
-  &.is-open>.Select-control {
-    @include border-bottom-radius( 0);
-    background: $select-input-bg;
-    border-color: darken($select-input-border-color, 10%) $select-input-border-color lighten($select-input-border-color, 5%); // flip the arrow so its pointing up when the menu is open
-    .Select-arrow {
-      top: -2px;
-      border-color: transparent transparent $select-arrow-color;
-      border-width: 0 $select-arrow-width $select-arrow-width;
+    &.has-value.is-clearable.Select--single>.Select-control .Select-value {
+        padding-right: ($select-clear-width + $select-arrow-width * 5);
     }
-  }
-  &.is-focused>.Select-control {
-    background: $select-input-bg-focus;
-  }
-  &.is-focused:not(.is-open)>.Select-control {
-    border-color: $select-input-border-focus lighten($select-input-border-focus, 5%) lighten($select-input-border-focus, 5%);
-    box-shadow: $select-input-box-shadow-focus;
-  }
-  &.has-value.is-clearable.Select--single>.Select-control .Select-value {
-    padding-right: ($select-clear-width + $select-arrow-width * 5);
-  }
-  &.has-value.Select--single>.Select-control .Select-value,
-  &.has-value.is-pseudo-focused.Select--single>.Select-control .Select-value {
-    .Select-value-label {
-      color: $select-text-color;
+    &.has-value.Select--single>.Select-control .Select-value,
+    &.has-value.is-pseudo-focused.Select--single>.Select-control .Select-value {
+        .Select-value-label {
+            color: $select-text-color;
+        }
+        a.Select-value-label {
+            cursor: pointer;
+            text-decoration: none;
+            &:hover,
+            &:focus {
+                color: $select-link-hover-color;
+                outline: none;
+                text-decoration: underline;
+            }
+            &:focus {
+                background: $select-input-bg-focus;
+            }
+        }
+    } // fake-hide the input when the control is pseudo-focused
+    &.has-value.is-pseudo-focused .Select-input {
+        opacity: 0;
     }
-    a.Select-value-label {
-      cursor: pointer;
-      text-decoration: none;
-      &:hover,
-      &:focus {
-        color: $select-link-hover-color;
-        outline: none;
-        text-decoration: underline;
-      }
-      &:focus {
-        background: $select-input-bg-focus;
-      }
+    &.is-open .Select-arrow,
+    .Select-arrow-zone:hover>.Select-arrow {
+        border-top-color: $select-arrow-color-hover;
+    }
+    &.Select--rtl {
+        direction: rtl;
+        text-align: right;
     }
-  } // fake-hide the input when the control is pseudo-focused
-  &.has-value.is-pseudo-focused .Select-input {
-    opacity: 0;
-  }
-  &.is-open .Select-arrow,
-  .Select-arrow-zone:hover>.Select-arrow {
-    border-top-color: $select-arrow-color-hover;
-  }
-  &.Select--rtl {
-    direction: rtl;
-    text-align: right;
-  }
 }
 
 // base
 .Select-control {
-  background-color: $select-input-bg;
-  border-collapse: separate;
-  border-color: lighten($select-input-border-color, 5%) $select-input-border-color darken($select-input-border-color, 10%);
-  border-radius: $select-input-border-radius;
-  border-spacing: 0;
-  border: $select-input-border-width solid $select-input-border-color;
-  color: $select-text-color;
-  cursor: default;
-  display: table;
-  height: $select-input-height;
-  outline: none;
-  overflow: hidden;
-  position: relative;
-  width: 100%;
-  &:hover {
-    box-shadow: $select-input-hover-box-shadow;
-  }
-  .Select-input:focus {
+    background-color: $select-input-bg;
+    border-collapse: separate;
+    border-color: lighten($select-input-border-color, 5%) $select-input-border-color darken($select-input-border-color, 10%);
+    border-radius: $select-input-border-radius;
+    border-spacing: 0;
+    border: $select-input-border-width solid $select-input-border-color;
+    color: $select-text-color;
+    cursor: default;
+    display: table;
+    height: $select-input-height;
     outline: none;
-    background: $select-input-bg-focus;
-  }
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+    &:hover {
+        box-shadow: $select-input-hover-box-shadow;
+    }
+    .Select-input:focus {
+        outline: none;
+        background: $select-input-bg-focus;
+    }
 }
 
 // placeholder
 .Select-placeholder,
-.Select--single > .Select-control .Select-value {
-  bottom: 0;
-  color: $select-input-placeholder;
-  left: 0;
-  line-height: $select-input-internal-height;
-  padding-left: $select-padding-horizontal;
-  padding-right: $select-padding-horizontal;
-  position: absolute;
-  right: 0;
-  top: 0; // crop text
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.Select--single>.Select-control .Select-value {
+    bottom: 0;
+    color: $select-input-placeholder;
+    left: 0;
+    line-height: $select-input-internal-height;
+    padding-left: $select-padding-horizontal;
+    padding-right: $select-padding-horizontal;
+    position: absolute;
+    right: 0;
+    top: 0; // crop text
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 // the <input> element users type in
 .Select-input {
-  // inherits `display: inline-block` from "react-input-autosize"
-  height: $select-input-internal-height;
-  padding-left: $select-padding-horizontal;
-  padding-right: $select-padding-horizontal;
-  vertical-align: middle;
-  >input {
-    background: none transparent;
-    border: 0 none;
-    box-shadow: none;
-    cursor: default;
-    display: inline-block;
-    font-family: inherit;
-    font-size: inherit; // height: $select-input-internal-height;
-    margin: 0;
-    outline: none; // padding: 0;
-    line-height: 17px;
-    /* For IE 8 compatibility */
-    padding: (($select-input-internal-height - 14) / 2 - 2) 0 (($select-input-internal-height - 14) / 2 + 2);
-    /* For IE 8 compatibility */
-    -webkit-appearance: none;
-    .is-focused & {
-      cursor: text;
+    // inherits `display: inline-block` from "react-input-autosize"
+    height: $select-input-internal-height;
+    padding-left: $select-padding-horizontal;
+    padding-right: $select-padding-horizontal;
+    vertical-align: middle;
+    >input {
+        background: none transparent;
+        border: 0 none;
+        box-shadow: none;
+        cursor: default;
+        display: inline-block;
+        font-family: inherit;
+        font-size: inherit; // height: $select-input-internal-height;
+        margin: 0;
+        outline: none; // padding: 0;
+        line-height: 17px;
+        /* For IE 8 compatibility */
+        padding: (($select-input-internal-height - 14) / 2 - 2) 0 (($select-input-internal-height - 14) / 2 + 2);
+        /* For IE 8 compatibility */
+        -webkit-appearance: none;
+        .is-focused & {
+            cursor: text;
+        }
     }
-  }
 }
 
 // fake input
 .Select-control:not(.is-searchable)>.Select-input {
-  outline: none;
+    outline: none;
 }
 
 // loading indicator
 .Select-loading-zone {
-  cursor: pointer;
-  display: table-cell;
-  position: relative;
-  text-align: center;
-  vertical-align: middle;
-  width: $select-loading-size;
+    cursor: pointer;
+    display: table-cell;
+    position: relative;
+    text-align: center;
+    vertical-align: middle;
+    width: $select-loading-size;
 }
 
 .Select-loading {
-  @include Select-spinner($select-loading-size, $select-loading-color-bg, $select-loading-color);
-  vertical-align: middle;
+    @include Select-spinner($select-loading-size, $select-loading-color-bg, $select-loading-color);
+    vertical-align: middle;
 }
 
 // the little cross that clears the field
 .Select-clear-zone {
-  @include animation( Select-animation-fadeIn 200ms);
-  color: $select-clear-color;
-  cursor: pointer;
-  display: table-cell;
-  position: relative;
-  text-align: center;
-  vertical-align: middle;
-  width: $select-clear-width;
-  &:hover {
-    color: $select-clear-hover-color;
-  }
+    @include animation( Select-animation-fadeIn 200ms);
+    color: $select-clear-color;
+    cursor: pointer;
+    display: table-cell;
+    position: relative;
+    text-align: center;
+    vertical-align: middle;
+    width: $select-clear-width;
+    &:hover {
+        color: $select-clear-hover-color;
+    }
 }
 
 .Select-clear {
-  display: inline-block;
-  font-size: $select-clear-size;
-  line-height: 1;
+    display: inline-block;
+    font-size: $select-clear-size;
+    line-height: 1;
 }
 
 .Select--multi .Select-clear-zone {
-  width: $select-clear-width;
+    width: $select-clear-width;
 }
 
 .Select--multi .Select-multi-value-wrapper {
-  display: inline-block;
+    display: inline-block;
 }
 
 .Select .Select-aria-only {
-  position: absolute;
-  display: inline-block;
-  height: 1px;
-  width: 1px;
-  margin: -1px;
-  clip: rect(0, 0, 0, 0);
-  overflow: hidden;
-  float: left;
+    position: absolute;
+    display: inline-block;
+    height: 1px;
+    width: 1px;
+    margin: -1px;
+    clip: rect(0, 0, 0, 0);
+    overflow: hidden;
+    float: left;
 }
 
 // arrow indicator
 .Select-arrow-zone {
-  cursor: pointer;
-  display: table-cell;
-  position: relative;
-  text-align: center;
-  vertical-align: middle;
-  width: ($select-arrow-width * 5);
-  padding-right: $select-arrow-width;
-  .Select--rtl & {
-    padding-right: 0;
-    padding-left: $select-arrow-width;
-  }
+    cursor: pointer;
+    display: table-cell;
+    position: relative;
+    text-align: center;
+    vertical-align: middle;
+    width: ($select-arrow-width * 5);
+    padding-right: $select-arrow-width;
+    .Select--rtl & {
+        padding-right: 0;
+        padding-left: $select-arrow-width;
+    }
 }
 
 .Select-arrow {
-  border-color: $select-arrow-color transparent transparent;
-  border-style: solid;
-  border-width: $select-arrow-width $select-arrow-width ($select-arrow-width / 2);
-  display: inline-block;
-  height: 0;
-  width: 0;
-  position: relative;
+    border-color: $select-arrow-color transparent transparent;
+    border-style: solid;
+    border-width: $select-arrow-width $select-arrow-width ($select-arrow-width / 2);
+    display: inline-block;
+    height: 0;
+    width: 0;
+    position: relative;
 }
 
 // Animation
 // ------------------------------
 // fade in
 @-webkit-keyframes Select-animation-fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
 }
 
 @keyframes Select-animation-fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
 }

src/assets/stylesheets/vendors/select/_select.scss

@@ -15,7 +15,7 @@ $select-input-bg-disabled:          #f9f9f9 !default;
 $select-input-bg-focus:             #fff !default;
 $select-input-border-color:         $base-border-color !default;
 $select-input-border-radius:        3px !default;
-$select-input-border-focus:         $poa-purple !default;
+$select-input-border-focus:         darken($base-border-color, 10%) !default;
 $select-input-box-shadow-focus:     none !default;
 $select-input-border-width:         1px !default;
 $select-input-height:               40px !default;
@@ -34,12 +34,12 @@ $select-menu-max-height:            200px !default;
 $select-menu-box-shadow:            $select-input-hover-box-shadow !default;
 
 $select-option-color:               lighten($select-text-color, 20%) !default;
-$select-option-bg:                  $select-input-bg !default;
+$select-option-bg:                  #fff !default;
 $select-option-focused-color:       $select-text-color !default;
-$select-option-focused-bg:          #f2f9fc !default; // pale blue
-$select-option-selected-color:      $select-text-color !default;
-$select-option-selected-bg:         #f5faff !default; // lightest blue
-$select-option-disabled-color:      lighten($select-text-color, 60%) !default;
+$select-option-focused-bg:          $base-border-color !default; // pale blue
+$select-option-selected-color:      #000 !default;
+$select-option-selected-bg:         lighten($base-border-color, 5%) !default; // lightest blue
+$select-option-disabled-color:      lighten($base-border-color, 60%) !default;
 
 $select-noresults-color:            lighten($select-text-color, 40%) !default;
 
@@ -65,11 +65,11 @@ $select-item-gutter:                5px !default;
 $select-item-padding-vertical:      2px !default;
 $select-item-padding-horizontal:    5px !default;
 $select-item-font-size:             .9em !default;
-$select-item-color:                 #08c !default; // pale blue
+$select-item-color:                 #000 !default; // pale blue
 $select-item-bg:                    #f2f9fc !default;
 $select-item-border-color:          #e5eef9 !default;
-$select-item-hover-color:           darken($select-item-color, 5%) !default; // pale blue
-$select-item-hover-bg:              darken($select-item-bg, 5%) !default;
-$select-item-disabled-color:        #333 !default;
+$select-item-hover-color:           darken($base-border-color, 10%)  !default; // pale blue
+$select-item-hover-bg:              darken($base-border-color, 10%)  !default;
+$select-item-disabled-color:        #999 !default;
 $select-item-disabled-bg:           #fcfcfc !default;
 $select-item-disabled-border-color: darken($select-item-disabled-bg, 10%) !default;

src/components/NewBallot/index.js

@@ -334,6 +334,7 @@ export class NewBallot extends React.Component {
       let methodToCreateBallot
       let contractType
       let contractInstance
+
       switch (ballotStore.ballotType) {
         case ballotStore.BallotType.keys:
           methodToCreateBallot = this.createBallotForKeys