(fix) FF layout issues

src/assets/stylesheets/components/_ButtonFinalize.scss

@@ -18,23 +18,47 @@
 
     &#{ & }-core {
         background-color: $poa-purple;
+
+        &:active,
+        &:hover {
+            background-color: darken($poa-purple, 10%);
+        }
     }
 
     &#{ & }-sokol {
         background-color: $sokol-cyan;
+
+        &:active,
+        &:hover {
+            background-color: darken($sokol-cyan, 10%);
+        }
     }
 
     &#{ & }-dai {
         background-color: $xdai-orange;
+
+        &:active,
+        &:hover {
+            background-color: darken($xdai-orange, 10%);
+        }
     }
 
     &#{ & }-cancel {
-        background-color: #f21b57 !important;
+        &,
+        &:active,
+        &:hover {
+            background-color: #f21b57 !important;
+        }
     }
 
     &#{ & }-disabled {
-        background-color: #f0f0f0 !important;
+        &,
-        color: #333;
+        &:active,
+        &:hover {
+            cursor: default;
+            background-color: #f0f0f0 !important;
+            color: #333;
+        }
     }
 
     .bc-BallotFooter & {

src/assets/stylesheets/components/_ButtonLoadMore.scss

@@ -7,7 +7,7 @@
     color: $poa-purple;
     cursor: pointer;
     display: flex;
-    font-size: 17px;
+    font-size: 16px;
     font-weight: 400;
     height: 42px;
     justify-content: center;

src/assets/stylesheets/components/_ButtonNewBallot.scss

@@ -18,6 +18,7 @@ $sw-ButtonNewBallot-height: 36px;
 
     &#{ & }-core {
         background-color: $poa-green-color;
+        box-shadow: 0 5px 10px 0 rgba($poa-purple, 0.3);
         color: #fff;
 
         &:active,
@@ -28,6 +29,7 @@ $sw-ButtonNewBallot-height: 36px;
 
     &#{ & }-sokol {
         background-color: #fff;
+        box-shadow: 0 5px 10px 0 rgba($sokol-cyan, 0.3);
         color: $sokol-cyan;
 
         &:active,
@@ -38,6 +40,7 @@ $sw-ButtonNewBallot-height: 36px;
 
     &#{ & }-dai {
         background-color: $xdai-menu-icon-color;
+        box-shadow: 0 5px 10px 0 rgba($xdai-menu-icon-color, 0.3);
         color: #fff;
 
         &:active,
@@ -51,6 +54,7 @@ $sw-ButtonNewBallot-height: 36px;
     }
 
     .hd-MobileMenuLinks & {
+        box-shadow: none;
         height: 50px;
         justify-content: center;
         margin: 0;

src/assets/stylesheets/components/_FormHint.scss

@@ -5,6 +5,7 @@
     line-height: 1.38;
     margin: 0;
     padding-top: 12px;
+    word-break: break-all;  // hack for FF, leave it as it is
     word-break: break-word;
 
     &#{ & }-core {

src/assets/stylesheets/helpers/_brand-icons-mixins.scss

@@ -5,5 +5,10 @@
     font-size: 0;
     justify-content: center;
     line-height: 0;
-    transition: background-color 0.25s ease-out;
+    transition: box-shadow 0.15s ease-out;
+
+    &:active,
+    &:hover {
+        box-shadow: 0 0 15px 0 rgba(#666, 0.3);
+    }
 }

src/assets/stylesheets/helpers/_form-mixins.scss

@@ -24,10 +24,9 @@
         &:hover,
         &:active,
         &:focus {
-            border-color: darken($base-border-color, 10%);
+            background-color: #f9f9f9;
+            border-color: $base-border-color;
             color: $input-color;
-            cursor: not-allowed;
-            opacity: 0.5;
         }
     }
 }