Updating styles for Accept Invite page (#747)

frontend/components/AuthenticationFormWrapper/AuthenticationFormWrapper.jsx

@@ -1,5 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 
+const baseClass = 'auth-form-wrapper';
+
 class AuthenticationFormWrapper extends Component {
   static propTypes = {
     children: PropTypes.node,
@@ -9,8 +11,8 @@ class AuthenticationFormWrapper extends Component {
     const { children } = this.props;
 
     return (
-      <div className="auth-form-wrapper">
-        <img alt="Kolide text logo" src="/assets/images/kolide-logo-text.svg" />
+      <div className={baseClass}>
+        <img alt="Kolide text logo" src="/assets/images/kolide-logo-text.svg" className={`${baseClass}__logo`} />
         {children}
       </div>
     );

frontend/components/AuthenticationFormWrapper/_styles.scss

@@ -1,6 +1,11 @@
 .auth-form-wrapper {
   @include display(flex);
   @include flex-direction(column);
-  @include justify-content(center);
+  @include justify-content(flex-start);
   @include flex-grow(1);
+  padding: $base 0;
+
+  @include breakpoint(desktop) {
+    @include justify-content(center);
+  }
 }

frontend/components/LoginRoutes/_styles.scss

@@ -4,5 +4,5 @@
   @include flex-direction(column);
   @include justify-content(center);
   position: relative;
-  height: calc(100vh - #{$footer-height});
+  min-height: calc(100vh - #{$footer-height});
 }

frontend/pages/ConfirmInvitePage/_styles.scss

@@ -25,6 +25,7 @@
     height: 459px;
     padding: 35px;
     width: 500px;
+    margin-bottom: 110px;
   }
 
   &__form {