Signup Ui changes

1 files changed, 116 insertions, 35 deletions

diff --git a/web/sass-files/sass/partials/_signup.scss b/web/sass-files/sass/partials/_signup.scss
index 5996306d2..1a0c55f39 100644
--- a/web/sass-files/sass/partials/_signup.scss
+++ b/web/sass-files/sass/partials/_signup.scss
@@ -9,65 +9,108 @@
     max-width: 380px;
     margin: 0 auto;
     position: relative;
+    &.padding--less {
+        padding-top: 50px;
+    }
+
     h1, h2, h3, h4, h5, h6, p {
         line-height: 1.3;
     }
+
+    h1 {
+        font-weight: 600;
+    }
+
     h2 {
         font-weight: 600;
-        margin-bottom: 0.5em;
+        margin-bottom: 0.8em;
         letter-spacing: -0.5px;
         font-size: em(30px);
     }
+
     h3 {
         font-weight: 600;
         margin: 0 0 1.3em 0;
         font-size: 1.5em;
-        &.extra-margin {
-            margin-bottom: 2.5em;
-        }
     }
+
     h4 {
         font-size: em(20px);
         font-weight: 600;
         margin-bottom: 1em;
-        &.text--light {
-            font-weight: 300;
-            color: #999;
-        }
     }
+
+    h5 {
+        font-size: em(16px);
+    }
+
+    hr {
+        margin: 2em 0;
+    }
+
     p {
         color: #555;
         line-height: 1.5;
         margin-bottom: 1em;
-        .black, &.black {
-            color: #000;
-        }
     }
+
+    .inner__content {
+        padding: 0 15px;
+        margin: 30px 0 20px;
+    }
+
+    .block--gray {
+        background: #f2f2f2;
+        display: inline-block;
+        padding: 0.85em 1.2em;
+        font-weight: 600;
+        @include border-radius(3px);
+    }
+
     form {
         margin-bottom: 0.8em;
     }
+
     .form__hint {
         font-size: 0.95em;
         color: #999;
         margin: 10px 0;
     }
-    .external-link {
-        position: absolute;
-        bottom: 0;
-        left: 0;
+
+    .signup-team-confirm__container {
+        padding: 100px 0px 100px 0px;
+    }
+
+    .signup-team-logo {
+        display: none;
+        width: 210px;
+        margin: 0 0 2em 0;
+    }
+
+    .signup-team-login {
+        padding-bottom: 10px;
+        font-weight: 700;
     }
+
     .signup-team__name {
+        margin: 0.5em 0 0;
         font-size: 2.2em;
         font-weight: 600;
-        text-transform: uppercase;
+        padding-left: 1rem;
     }
+
     .signup-team__subdomain {
+        margin: 0.2em 0 1.2em;
         font-size: 1.5em;
-        padding-left: 1em;
+        padding-left: 1rem;
+        font-weight: 300;
+        text-transform: uppercase;
     }
+
     .form-control {
         height: em(38px);
     }
+
     .or__container {
         height: 1px;
         background: #dddddd;
@@ -84,6 +127,12 @@
             display: inline-block;
         }
     }
+
+    ul {
+        margin-bottom: 0;
+        padding-left: 18px;
+    }
+
     .btn {
         padding: em(7px) em(15px);
         font-weight: 600;
@@ -121,8 +170,8 @@
         }
         .glyphicon {
             &.glyphicon-ok, &.glyphicon-refresh {
-                margin-right: 0.3em;
-                left: -5px;
+                margin-right: 0.5em;
+                left: -2px;
                 font-size: 0.9em;
             }
             &.glyphicon-chevron-right {
@@ -137,6 +186,7 @@
             }
         }
     }
+
     .has-error {
         .control-label {
             background: #f2f2f2;
@@ -148,13 +198,14 @@
             color: #999;
             width: 100%;
             &:before {
-              @extend .fa;
-              content: "\f071";
-              margin-right: 4px;
-              color: #aaa;
+                @extend .fa;
+                content: "\f071";
+                margin-right: 4px;
+                color: #aaa;
             }
         }
     }
+
     .reset-form {
         @include border-radius(3px);
         position: relative;
@@ -163,19 +214,49 @@
             color: inherit;
         }
     }
-}
 
-.signup-team-confirm__container {
-    padding: 100px 0px 100px 0px;
-}
+    // Modifier Styles
+    h1, h2, h3, h4, h5, h6 {
+        &.margin--top-none {
+            margin-top: 0;
+        }
+        &.margin--bottom-none {
+            margin-bottom: 0;
+        }
+        &.margin--less {
+            margin-bottom: 0.3em;
+        }
+        &.sub-heading {
+            font-weight: 400;
+            margin-bottom: 0;
+        }
+        &.color--light {
+            font-weight: 300;
+        }
+    }
 
-.signup-team-logo {
-    display: none;
-    width: 210px;
-    margin: 0 0 2em 0;
-}
+    p {
+        &.margin--extra {
+            margin-bottom: 1.5em;
+        }
+        &.margin--less {
+            margin-bottom: 0.3em;
+        }
+        .black, &.black {
+            color: #000;
+        }
+    }
+
+    .color--light {
+        color: #777;
+    }
+
+    .margin--extra {
+        margin-top: 3em;
+    }
+
+    .margin--extra-2x {
+        margin-top: 6em;
+    }
 
-.signup-team-login {
-    padding-bottom: 10px;
-    font-weight: 700;
 }