From 37666c3d18d28e1b8c3df390c20ab3d4025783e9 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Wed, 13 Feb 2019 21:07:34 -0500
Subject: [PATCH] UX: Signup form labels were too constrained, minor cleanup

---
 app/assets/stylesheets/common/base/login.scss | 31 +++++--------------
 app/assets/stylesheets/desktop/login.scss     |  1 +
 app/assets/stylesheets/mobile/login.scss      |  2 +-
 3 files changed, 9 insertions(+), 25 deletions(-)

diff --git a/app/assets/stylesheets/common/base/login.scss b/app/assets/stylesheets/common/base/login.scss
index 72bd4357f6e..fa767cd394e 100644
--- a/app/assets/stylesheets/common/base/login.scss
+++ b/app/assets/stylesheets/common/base/login.scss
@@ -17,7 +17,7 @@
     width: 100%;
   }
   a {
-    color: dark-light-choose($primary-high, $secondary-low);
+    color: $primary-high;
   }
   td {
     padding-right: 5px;
@@ -33,9 +33,6 @@
   cursor: pointer;
 }
 
-$label-width: 92px;
-$input-width: 220px;
-
 .login-modal,
 .create-account {
   tr {
@@ -61,25 +58,13 @@ $input-width: 220px;
 }
 
 .create-account {
-  table {
-    td.label {
-      width: $label-width;
-    }
-
-    td input {
-      width: $input-width;
-    }
-  }
-
   .disclaimer {
-    color: dark-light-choose($primary-medium, $secondary-medium);
+    color: $primary-medium;
     margin-top: 0.5em;
   }
 
   .user-field {
     > label {
-      width: $label-width;
-      float: left;
       margin-top: 0.75em;
       margin-bottom: 0;
       padding-top: 5px;
@@ -99,7 +84,6 @@ $input-width: 220px;
 
     .controls {
       padding-top: 5px;
-      margin-left: $label-width;
       label {
         width: auto;
         text-align: left;
@@ -107,18 +91,17 @@ $input-width: 220px;
       }
       .instructions {
         margin-top: 0.15em;
-        color: dark-light-choose($primary-medium, $secondary-medium);
+        color: $primary-medium;
         line-height: $line-height-medium;
       }
     }
-    clear: both;
   }
 }
 
 .password-reset {
   .instructions {
     label {
-      color: dark-light-choose($primary-medium, $secondary-medium);
+      color: $primary-medium;
     }
   }
 }
@@ -150,7 +133,7 @@ $input-width: 220px;
       margin-bottom: 10px;
     }
     .instructions {
-      color: dark-light-choose($primary-medium, $secondary-medium);
+      color: $primary-medium;
       margin: 0;
       font-size: $font-down-1;
       font-weight: normal;
@@ -171,7 +154,7 @@ $input-width: 220px;
   flex-direction: column;
   margin-top: 0.15em;
   label {
-    color: dark-light-choose($primary-medium, $secondary-medium);
+    color: $primary-medium;
   }
 }
 
@@ -180,5 +163,5 @@ $input-width: 220px;
 button#login-link,
 button#new-account-link {
   background: transparent;
-  color: dark-light-choose($primary-high, $secondary-low);
+  color: $primary-high;
 }
diff --git a/app/assets/stylesheets/desktop/login.scss b/app/assets/stylesheets/desktop/login.scss
index f662677fa48..09b512beae2 100644
--- a/app/assets/stylesheets/desktop/login.scss
+++ b/app/assets/stylesheets/desktop/login.scss
@@ -129,6 +129,7 @@
       padding: 15px;
       margin-bottom: 5px;
       max-height: 475px;
+      max-width: 350px;
       @media screen and (max-height: 768px) {
         max-height: 60vh;
       }
diff --git a/app/assets/stylesheets/mobile/login.scss b/app/assets/stylesheets/mobile/login.scss
index 196deffe8ab..b8930a44dcd 100644
--- a/app/assets/stylesheets/mobile/login.scss
+++ b/app/assets/stylesheets/mobile/login.scss
@@ -20,7 +20,7 @@
     margin-left: -2%;
 
     button {
-      flex: 1 1 48%;
+      flex: 1 1 47%;
       max-width: 70%;
       margin: 1% 0 1% 2%;
       font-size: $font-up-1;