Merge pull request #807 from mrfelton/fix/login-button-styles

fix(ui): improve login button style

app/components/Onboarding/Login/Login.js

@@ -32,15 +32,17 @@ const Login = ({
 
     <section className={styles.buttons}>
       <div>
-        <span
+        <span className={styles.button}>
-          className={`${!unlockingWallet ? styles.active : undefined} ${styles.button}`}
+          <span
-          onClick={() => unlockWallet(password)}
+            className={`${!unlockingWallet ? styles.active : undefined} ${styles.button}`}
-        >
+            onClick={() => unlockWallet(password)}
-          {unlockingWallet ? (
+          >
-            <i className={styles.spinner} />
+            {unlockingWallet ? (
-          ) : (
+              <i className={styles.spinner} />
-            <FormattedMessage {...messages.unlock} />
+            ) : (
-          )}
+              <FormattedMessage {...messages.unlock} />
+            )}
+          </span>
         </span>
       </div>
     </section>

app/components/Onboarding/Login/Login.scss

@@ -43,42 +43,27 @@
 
   div {
     color: var(--primaryText);
-
+    text-align: center;
-    &:nth-child(1) {
+    margin-bottom: 40px;
-      text-align: center;
+
-      margin-bottom: 40px;
+    .button {
-
+      padding: 15px 35px;
-      span {
+      background: var(--lightningOrange);
-        padding: 15px 35px;
+      font-size: 14px;
-        background: var(--lightningOrange);
+      transition: all 0.25s;
-        font-size: 14px;
+      border-radius: 5px;
-        opacity: 0.5;
+
-        transition: all 0.25s;
+      &.button {
-        border-radius: 5px;
+        position: relative;
-
-        &.button {
-          position: relative;
-        }
-
-        &.active {
-          opacity: 1;
-          cursor: pointer;
-
-          &:hover {
-            opacity: 0.5;
-          }
-        }
       }
-    }
 
-    &:nth-child(2),
+      &.active {
-    &:nth-child(3) {
+        opacity: 1;
-      font-size: 12px;
+        cursor: pointer;
-      cursor: pointer;
-      margin: 10px 0;
 
-      &:hover {
+        &:hover {
-        text-decoration: underline;
+          opacity: 0.5;
+        }
       }
     }
   }