Design and code refactor to fit on new code and styles

app/partials/auth/invitation.jade

@@ -1,11 +1,8 @@
-doctype html
-
 div.wrapper
     div.invitation-main
-        div.invitation-container(tg-invitation)
+        div.centered.invitation-container(tg-invitation)
-            figure.avatar
+            a.avatar(href="", tg-bo-title="invitation.invited_by.full_name_display")
-                a(href="", tg-bo-title="invitation.invited_by.full_name_display")
+                img(tg-bo-src="invitation.invited_by.photo",
-                    img.avatar(tg-bo-src="invitation.invited_by.photo",
                            tg-bo-alt="invitation.invited_by.full_name_display")
                 span.person-name(tg-bo-bind="invitation.invited_by.full_name_display")
 

app/partials/includes/modules/invitation-login-form.jade

@@ -13,7 +13,7 @@ form.login-form
                       translate="LOGIN_COMMON.LINK_FORGOT_PASSWORD")
 
     fieldset
-        button.button-login.button-gray.submit-button(type="submit",
+        a.button-login.button-blackish.submit-button(type="submit",
                                                       title="{{'LOGIN_COMMON.ACTION_ENTER' | translate}}",
                                                       translate="LOGIN_COMMON.ACTION_ENTER")
 

app/partials/includes/modules/invitation-register-form.jade

@@ -20,6 +20,6 @@ form.register-form
             placeholder="{{'REGISTER_FORM.PLACEHOLDER_PASSWORD' | translate}}")
 
     fieldset
-        button.button-register.button-gray.submit-button(type="submit", title="{{'REGISTER_FORM.ACTION_SIGN_UP' | translate}}", translate="REGISTER_FORM.ACTION_SIGN_UP")
+        a.button-register.button-blackish.submit-button(type="submit", title="{{'REGISTER_FORM.ACTION_SIGN_UP' | translate}}", translate="REGISTER_FORM.ACTION_SIGN_UP")
 
     tg-terms-notice

app/styles/layout/invitation.scss

@@ -2,63 +2,48 @@
     @extend %background-taiga;
     align-content: center;
     align-items: center;
-    bottom: 0;
+    background-size: cover;
     display: flex;
+    flex: 1;
     justify-content: center;
-    left: 0;
-    position: fixed;
-    right: 0;
-    top: 0;
     z-index: 999;
     .invitation-container {
-        flex-basis: 650px;
+        align-items: center;
-        width: 650px;
+        display: flex;
-    }
+        flex-direction: column;
-    .logo {
-        margin: 1rem auto;
-        width: 150px;
     }
     .avatar {
-        margin: 0 auto 1rem;
+        align-items: center;
-        text-align: center;
+        display: flex;
-        width: 250px;
+        flex-direction: column;
         .person-name {
-            @extend %xlarge;
+            @extend %large;
-            @extend %title;
+            @extend %light;
             color: $white;
-            text-transform: uppercase;
         }
         img {
-            display: block;
+            margin-bottom: .5rem;
-            text-align: center;
             width: 50px;
         }
     }
     .invitation-text {
-        @extend %xlarge;
+        @extend %larger;
-        @extend %title;
+        @extend %light;
         color: $white;
-        line-height: 2rem;
         text-align: center;
-        text-transform: uppercase;
         .project-name {
             @extend %xxlarge;
             display: block;
+            text-transform: uppercase;
         }
     }
     .invitation-form {
         display: flex;
+        flex-basis: 100%;
+        width: 100%;
         fieldset {
             margin-bottom: .5rem;
         }
-        input {
-            background: $white;
-            color: $gray;
-            position: relative;
-            @include placeholder {
-                color: $gray-light;
-            }
-        }
         input:focus {
             +.forgot-pass {
                 opacity: 0;
@@ -78,29 +63,16 @@
                 transition: color .3s linear;
             }
         }
-        .button {
-            color: $white;
-            display: block;
-            text-align: center;
-            &:hover {
-                background: $fresh-taiga;
-            }
-        }
-        .button-github {
-            &:hover {
-                background: $black;
-            }
-        }
     }
     .login-form,
     .register-form {
-        flex-basis: 200px;
+        flex: 1;
-        flex-grow: 1;
+        padding: 1rem 3rem;
-        padding: 1rem;
         text-align: center;
-        width: 200px;
         .form-header {
-            color: $gray-light;
+            @extend %large;
+            @extend %light;
+            color: $white;
         }
     }
     .register-form {
@@ -110,17 +82,12 @@
             }
         }
     }
-    .register-text {
+    .button-blackish {
-        @extend %small;
-        color: $white;
-        a {
-            color: $green-taiga;
         &:hover {
-                color: $fresh-taiga;
+            background: $green-taiga;
-            }
         }
     }
     .login-form {
-        border-right: 1px solid $white;
+        border-right: 1px solid rgba($white, .3);
     }
 }