Merge pull request #312 from sharetribe/authenticationpage-desktop

Authenticationpage desktop

src/components/TabNav/TabNav.css

@@ -33,6 +33,7 @@
   @media (--viewportMedium) {
     margin-top: 0;
     margin-bottom: 0;
+    padding-bottom: 7px;
   }
 }
 

src/containers/AuthenticationPage/AuthenticationPage.css

@@ -1,23 +1,61 @@
+@import '../../marketplaceFonts.css';
 @import '../../marketplace.css';
 
 .root {
+  /* PageLayout is using flex: AuthenticationPage's .root takes all available space */
+  flex-grow: 1;
+
+  /* AuthenticationPage's root uses flexbox */
+  display: flex;
+
+  @media (--viewportMedium) {
+    justify-content: center;
+    align-items: flex-start;
+    margin-top: 12.5vh;
+    margin-bottom: 12.5vh;
+  }
+}
+
+.content {
+  flex-grow: 1;
   display: flex;
   flex-direction: column;
-  flex: 1;
   padding: 30px 24px 98px 24px;
+  background-color: var(--matterColorLight);
+
+  @media (--viewportMedium) {
+    flex-basis: 480px;
+    flex-grow: 0;
+    min-height: 573px;
+    padding: 60px 60px 48px 60px;
+
+  }
 }
 
 .tabs {
   width: 200px;
 }
 
+.tabH2 {
+  /* Text works as main Heading (H1), but text style is dropped to H2 */
+  @media (--viewportMedium) {
+    @apply --marketplaceH2FontStyles;
+  }
+}
+
 .tab {
+  /* Text works as main Heading (H1), but text style is dropped to H2 */
+  composes: tabH2;
   margin-top: 0;
   margin-bottom: 0;
 }
 
 .form {
   margin-top: 49px;
+
+  @media (--viewportMedium) {
+    margin-top: 38px;
+  }
 }
 
 .error {

src/containers/AuthenticationPage/AuthenticationPage.js

@@ -131,11 +131,13 @@ export const AuthenticationPageComponent = props => {
         onManageDisableScrolling={onManageDisableScrolling}
       />
       <div className={css.root}>
-        <TabNav className={css.tabs} tabs={tabs} />
-        {loginOrSignupError}
-        {isLogin
-          ? <LoginForm className={css.form} onSubmit={submitLogin} inProgress={authInProgress} />
-          : <SignupForm className={css.form} onSubmit={submitSignup} inProgress={authInProgress} />}
+        <div className={css.content}>
+          <TabNav className={css.tabs} tabs={tabs} />
+          {loginOrSignupError}
+          {isLogin
+            ? <LoginForm className={css.form} onSubmit={submitLogin} inProgress={authInProgress} />
+            : <SignupForm className={css.form} onSubmit={submitSignup} inProgress={authInProgress} />}
+        </div>
       </div>
     </PageLayout>
   );

src/containers/AuthenticationPage/__snapshots__/AuthenticationPage.test.js.snap

@@ -25,48 +25,50 @@ exports[`AuthenticationPageComponent matches snapshot 1`] = `
     onLogout={[Function]}
     onManageDisableScrolling={[Function]} />
   <div>
-    <TabNav
-      className={null}
-      rootClassName={null}
-      tabs={
-        Array [
-          Object {
-            "linkProps": Object {
-              "name": "SignupPage",
-              "to": Object {
-                "state": Object {
-                  "from": "/protected",
+    <div>
+      <TabNav
+        className={null}
+        rootClassName={null}
+        tabs={
+          Array [
+            Object {
+              "linkProps": Object {
+                "name": "SignupPage",
+                "to": Object {
+                  "state": Object {
+                    "from": "/protected",
+                  },
                 },
               },
+              "selected": false,
+              "text": <h1>
+                <FormattedMessage
+                      id="AuthenticationPage.signupLinkText"
+                      values={Object {}} />
+          </h1>,
             },
-            "selected": false,
-            "text": <h1>
-              <FormattedMessage
-                    id="AuthenticationPage.signupLinkText"
-                    values={Object {}} />
-        </h1>,
-          },
-          Object {
-            "linkProps": Object {
-              "name": "LoginPage",
-              "to": Object {
-                "state": Object {
-                  "from": "/protected",
+            Object {
+              "linkProps": Object {
+                "name": "LoginPage",
+                "to": Object {
+                  "state": Object {
+                    "from": "/protected",
+                  },
                 },
               },
+              "selected": true,
+              "text": <h1>
+                <FormattedMessage
+                      id="AuthenticationPage.loginLinkText"
+                      values={Object {}} />
+          </h1>,
             },
-            "selected": true,
-            "text": <h1>
-              <FormattedMessage
-                    id="AuthenticationPage.loginLinkText"
-                    values={Object {}} />
-        </h1>,
-          },
-        ]
-      } />
-    <ReduxForm
-      inProgress={false}
-      onSubmit={[Function]} />
+          ]
+        } />
+      <ReduxForm
+        inProgress={false}
+        onSubmit={[Function]} />
+    </div>
   </div>
 </withRouter(PageLayout)>
 `;

src/containers/LoginForm/LoginForm.css

@@ -1,3 +1,5 @@
+@import '../../marketplace.css';
+
 .root {
   display: flex;
   flex-direction: column;
@@ -8,6 +10,10 @@
 
 .password {
   margin-top: 24px;
+
+  @media (--viewportMedium) {
+    margin-top: 30px;
+  }
 }
 
 .button {

src/containers/SignupForm/SignupForm.css

@@ -1,3 +1,5 @@
+@import '../../marketplace.css';
+
 .root {
   display: flex;
   flex-direction: column;
@@ -10,6 +12,10 @@
   display: flex;
   justify-content: space-between;
   margin-top: 24px;
+
+  @media (--viewportMedium) {
+    margin-top: 30px;
+  }
 }
 
 .firstNameRoot {
@@ -22,6 +28,10 @@
 
 .password {
   margin-top: 24px;
+
+  @media (--viewportMedium) {
+    margin-top: 30px;
+  }
 }
 
 .button {

src/marketplace.css

@@ -198,6 +198,10 @@
       border-bottom-color: var(--matterColor);
       outline: none;
     }
+
+    @media (--viewportMedium) {
+      padding: 6px 0 10px 0;
+    }
   }
 
   --marketplaceSelectStyles: {