SUP-1790, [Login] Apply mobile design

Applied mobile design. Remaining error styles.

Author: vikasrohit

app/account/login/login.jade

@@ -27,21 +27,21 @@
     p ------------ Or Log in With ------------
 
     .social-icons
-      .github
+      .network.github
         .ico(ng-click="vm.socialLogin('github')")
         p Github
-      .google-plus
+      .network.google-plus
         .ico(ng-click="vm.socialLogin('google-oauth2')")
         p Google
-      .facebook
+      .network.facebook
         .ico(ng-click="vm.socialLogin('facebook')")
         p Facebook
-      .twitter
+      .network.twitter
         .ico(ng-click="vm.socialLogin('twitter')")
         p Twitter
 
-  .join-topcoder
-    span Not a member yet? 
-    p.redirect
-      a(ui-sref="register(vm.$stateParams)") Join now
+.join-topcoder
+  span Not a member yet? 
+  p.redirect
+    a(ui-sref="register(vm.$stateParams)") Join now
 

app/account/register/register.jade

@@ -97,13 +97,13 @@
     p ------------ Or Register With ------------
 
     .social-icons
-      .github
+      .network.github
         .ico(ng-click="vm.socialRegister('github')")
         p Github
-      .google-plus
+      .network.google-plus
         .ico(ng-click="vm.socialRegister('google-oauth2')")
         p Google
-      .facebook
+      .network.facebook
         .ico(ng-click="vm.socialRegister('facebook')")
         p Facebook
 

assets/css/account/account.scss

@@ -6,7 +6,7 @@
   display: flex;
   flex-direction: column;
   text-align: center;
-  justify-content: center;
+  justify-content: flex-start;
   @include source-sans-regular;
   background-color: white;
 
@@ -16,7 +16,6 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-bottom: 30px;
 
     .arrow {
       background-image: url(/images/ico-arrow.png);
@@ -32,7 +31,8 @@
 
   // Basic element stylings
   h1 {
-    margin-bottom: 30px;
+    margin-top: 39px;
+    margin-bottom: 40px;
     @include ui-h1;
     color: #3D3D3D;
     line-height: 30px;
@@ -106,21 +106,27 @@
       justify-content: center;
       padding: 0px 10px;
 
-      p {
-        color: #A3A3AE;
-        font-size: 10px;
-        line-height: 13px;
-        @include sofia-pro-medium;
-        text-transform: uppercase;
-        cursor: pointer;
-      }
+      .network {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        p {
+          color: #A3A3AE;
+          font-size: 10px;
+          line-height: 13px;
+          @include sofia-pro-medium;
+          text-transform: uppercase;
+          cursor: pointer;
+          margin-top: 10px;
+        }
 
-      .ico {
-        margin: 7px;
-        margin-top: 22px;
-        width: 40px;
-        height: 40px;
-        cursor: pointer;
+        .ico {
+          margin-top: 22px;
+          width: 40px;
+          height: 40px;
+          cursor: pointer;
+        }
       }
 
       .github {
@@ -131,15 +137,15 @@
         }
       }
       .facebook {
-        margin-left: 40px;
+        margin-left: 41px;
         .ico {
           color: #0D72B9;
           background-image: url(/images/svg/facebook.svg);
           background-repeat: no-repeat;
         }
       }
       .google-plus {
-        margin-left: 40px;
+        margin-left: 43px;
         .ico {
           border: 1px solid #D1D3D4;
           border-radius: 4px;

assets/css/account/login.scss

@@ -1,7 +1,6 @@
 @import '../partials/combined';
 
 .login-container {
-  height: 590px;
 
   box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
 
@@ -27,6 +26,10 @@
         border: none;
       }
     }
+
+    button {
+      margin-top: 40px;
+    }
   }
 
   .form-errors {
@@ -48,4 +51,64 @@
       font-size: 12px;
     }
   }
+
+}
+
+.join-topcoder {
+  .redirect{
+    width: 111px;
+    padding: 8px 10px;
+  }
+}
+
+@media (min-width: 768px) {
+
+  .login-container {
+    section.social {
+      margin-bottom: 60px;
+    }
+  }
+}
+@media (max-width: 767px) {
+
+  .login-container {
+
+    h1 {
+      margin-top: 30px;
+      margin-bottom: 30px;
+    }
+
+    form {
+
+    }
+
+    section.social {
+      margin-bottom: 41px;
+
+      .social-icons {
+        .network {
+          &.github {
+
+          }
+
+          &.facebook {
+            margin-left: 30px;
+          }
+
+          &.google-plus {
+            margin-left: 32px;
+          }
+
+          &.twitter {
+            margin-left: 30px;
+          }
+        }
+      }
+    }
+  }
+
+  .join-topcoder {
+    position: initial;
+    margin-top: 30px;
+  }
 }

assets/css/account/register.scss

@@ -75,6 +75,20 @@
       i {
         cursor: pointer;
       }
+
+      .network {
+        &.github {
+
+        }
+
+        &.facebook {
+          margin-left: 41px;
+        }
+
+        &.google-plus {
+          margin-left: 43px;
+        }
+      }
     }
   }
 
@@ -140,6 +154,10 @@
         }
       }
     }
+
+    section.social {
+      margin-bottom: 41px;
+    }
   }
 
   .join-topcoder {