UX: Update brand color, some login adjustments

app/assets/stylesheets/common/components/buttons.scss

@@ -200,24 +200,43 @@
     .d-icon {
       opacity: 0.9;
     }
+    &:hover {
+      color: currentColor;
+      background: darken($google, 5%);
+    }
   }
   &.instagram {
     background: $instagram;
+    &:hover {
+      background: darken($instagram, 15%);
+    }
   }
   &.facebook {
     background: $facebook;
+    &:hover {
+      background: darken($facebook, 15%);
+    }
   }
   &.cas {
     background: $cas;
   }
   &.twitter {
     background: $twitter;
+    &:hover {
+      background: darken($twitter, 10%);
+    }
   }
   &.yahoo {
     background: $yahoo;
+    &:hover {
+      background: darken($yahoo, 10%);
+    }
   }
   &.github {
     background: $github;
+    &:hover {
+      background: lighten($github, 20%);
+    }
   }
 }
 

app/assets/stylesheets/common/foundation/spacing.scss

@@ -8,10 +8,14 @@ $base-space: 4px;
   $spaces: ();
   @each $size in $sizes {
     @if ($size == 0) {
-      // strip units from 0 values
-      @return $size / ($size * 0 + 1);
+      // Strip units if 0
+      $size: $size * $base-space;
+      $size: $size / ($size * 0 + 1);
+    } @else {
+      $size: $size * $base-space;
     }
-    $spaces: append($spaces, ($size * $base-space));
+
+    $spaces: append($spaces, $size);
   }
   @return $spaces;
 }

app/assets/stylesheets/common/foundation/variables.scss

@@ -18,12 +18,12 @@ $topic-avatar-width: 45px;
 // --------------------------------------------------
 
 $google: #ffffff !default;
-$instagram: #125688 !default;
-$facebook: #3b5998 !default;
+$instagram: #e1306c !default;
+$facebook: #4267b2 !default;
 $cas: #70ba61 !default;
-$twitter: #00bced !default;
+$twitter: #1da1f2 !default;
 $yahoo: #810293 !default;
-$github: #6d6d6d !default;
+$github: #100e0f !default;
 
 // Badge color variables
 // --------------------------------------------------

app/assets/stylesheets/desktop/login.scss

@@ -5,23 +5,37 @@
 .create-account {
   #login-buttons:not(.hidden) {
     display: flex;
+    flex: 0;
     flex-direction: column;
-    flex-basis: 40%;
-    align-items: center;
+    align-items: stretch;
     min-height: 175px;
     border-left: 1px solid $primary-low;
-    padding: 0 15px;
+    padding: s(0 6);
     order: 2;
 
     button {
+      text-align: left;
       margin: 0.35em;
-      width: 160px;
+      white-space: nowrap;
       &:lang(zh_CN) {
         min-width: 200px;
       }
     }
   }
 
+  .modal-inner-container {
+    max-width: 450px;
+  }
+
+  form {
+    min-width: 300px;
+  }
+
+  #modal-alert {
+    max-width: 500px;
+    padding: s(2 4);
+  }
+
   .login-modal {
     #login-buttons:not(.hidden) {
       button {
@@ -43,8 +57,9 @@
   }
 
   #login-form {
+    box-sizing: border-box;
     flex: 1 0 auto;
-    padding: 0 15px;
+    padding: s(0 6);
   }
 
   tr:not(.instructions) {
@@ -140,7 +155,7 @@
     }
     form {
       box-sizing: border-box;
-      padding: 15px;
+      padding: s(4 6);
       margin-bottom: 5px;
       max-height: 475px;
       @media screen and (max-height: 768px) {

app/assets/stylesheets/mobile/login.scss

@@ -23,7 +23,7 @@
       flex: 1 1 47%;
       max-width: 70%;
       margin: 1% 0 1% 2%;
-      font-size: $font-up-1;
+      font-size: $font-0;
       white-space: nowrap;
       @media screen and (max-width: 360px) {
         font-size: $font-0;