From 08bb284f9c743b9be878abdc7ce55f5c4e9b3de6 Mon Sep 17 00:00:00 2001
From: Janne Koivistoinen <janne@sharetribe.com>
Date: Fri, 21 Jul 2017 16:31:28 +0300
Subject: [PATCH] auth page and marketplace variable

---
 .../HeroSection => assets}/background.jpg     | Bin
 src/components/HeroSection/HeroSection.css    |  16 +------------
 src/components/TabNav/TabNav.css              |   8 +++++++
 .../AuthenticationPage/AuthenticationPage.css |  10 +++++----
 src/containers/LoginForm/LoginForm.css        |   4 ++++
 src/containers/SignupForm/SignupForm.css      |   4 ++++
 src/marketplace.css                           |  21 ++++++++++++++++++
 7 files changed, 44 insertions(+), 19 deletions(-)
 rename src/{components/HeroSection => assets}/background.jpg (100%)

diff --git a/src/components/HeroSection/background.jpg b/src/assets/background.jpg
similarity index 100%
rename from src/components/HeroSection/background.jpg
rename to src/assets/background.jpg
diff --git a/src/components/HeroSection/HeroSection.css b/src/components/HeroSection/HeroSection.css
index 59c781c5..ba95af89 100644
--- a/src/components/HeroSection/HeroSection.css
+++ b/src/components/HeroSection/HeroSection.css
@@ -5,25 +5,11 @@
 }
 
 .root {
+  @apply --backgroundImage;
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 100%;
-  background-color: var(--matterColor);
-  background-image: url(./background.jpg);
-  background-size: cover;
-  background-position-y: center;
-
-  /*
-   This value is specific to the given image. The value is the
-   relative position of the interesting area in the x axis, counted
-   from the left side of the image.
-
-   In the default image, this means the person sitting in the
-   sauna. This value ensures the person is approximately centered in
-   the viewport when the browser width changes.
-  */
-  background-position-x: 80%;
 
   /* Text positioning is done with paddings */
   padding: 0 24px 98px 24px;
diff --git a/src/components/TabNav/TabNav.css b/src/components/TabNav/TabNav.css
index e0347a7e..160c53a2 100644
--- a/src/components/TabNav/TabNav.css
+++ b/src/components/TabNav/TabNav.css
@@ -12,6 +12,10 @@
   &:first-child {
     margin-left: 0;
   }
+
+  @media (--viewportMedium) {
+    margin-left: 24px;
+  }
 }
 
 .link {
@@ -40,6 +44,10 @@
 .selectedLink {
   border-bottom: 2px solid var(--matterColorDark);
   color: var(--matterColorDark);
+
+  @media (--viewportMedium) {
+    border-bottom: 3px solid var(--matterColorDark);
+  }
 }
 
 .disabled {
diff --git a/src/containers/AuthenticationPage/AuthenticationPage.css b/src/containers/AuthenticationPage/AuthenticationPage.css
index ba00167f..a5278c32 100644
--- a/src/containers/AuthenticationPage/AuthenticationPage.css
+++ b/src/containers/AuthenticationPage/AuthenticationPage.css
@@ -2,6 +2,8 @@
 @import '../../marketplace.css';
 
 .root {
+  @apply --backgroundImage;
+
   /* PageLayout is using flex: AuthenticationPage's .root takes all available space */
   flex-grow: 1;
 
@@ -11,8 +13,6 @@
   @media (--viewportMedium) {
     justify-content: center;
     align-items: flex-start;
-    margin-top: 12.5vh;
-    margin-bottom: 12.5vh;
   }
 }
 
@@ -22,13 +22,15 @@
   flex-direction: column;
   padding: 30px 24px 98px 24px;
   background-color: var(--matterColorLight);
+  border-radius: 2px;
 
   @media (--viewportMedium) {
     flex-basis: 480px;
     flex-grow: 0;
     min-height: 573px;
-    padding: 60px 60px 48px 60px;
-
+    padding: 60px;
+    margin-top: 7.5vh;
+    margin-bottom: 7.5vh;
   }
 }
 
diff --git a/src/containers/LoginForm/LoginForm.css b/src/containers/LoginForm/LoginForm.css
index 6637990f..1b17d7aa 100644
--- a/src/containers/LoginForm/LoginForm.css
+++ b/src/containers/LoginForm/LoginForm.css
@@ -19,4 +19,8 @@
 .button {
   margin-top: 24px;
   align-self: stretch;
+
+  @media (--viewportMedium) {
+    margin-top: 72px;
+  }
 }
diff --git a/src/containers/SignupForm/SignupForm.css b/src/containers/SignupForm/SignupForm.css
index a762cc2d..4490d4e1 100644
--- a/src/containers/SignupForm/SignupForm.css
+++ b/src/containers/SignupForm/SignupForm.css
@@ -37,4 +37,8 @@
 .button {
   margin-top: 24px;
   align-self: stretch;
+
+  @media (--viewportMedium) {
+    margin-top: 72px;
+  }
 }
diff --git a/src/marketplace.css b/src/marketplace.css
index 9b68bca1..f5d91285 100644
--- a/src/marketplace.css
+++ b/src/marketplace.css
@@ -12,6 +12,25 @@
    * Usage example: .root { @apply --marketplaceH1FontStyles; }
    */
 
+  /* Full screen Background image located in root-folder/src/assets */
+  --backgroundImage: {
+      background-image: url("../../assets/background.jpg");
+      background-color: var(--matterColor);
+      background-size: cover;
+      background-position-y: center;
+
+      /*
+       This value is specific to the given image. The value is the
+       relative position of the interesting area in the x axis, counted
+       from the left side of the image.
+
+       In the default image, this means the person sitting in the
+       sauna. This value ensures the person is approximately centered in
+       the viewport when the browser width changes.
+      */
+      background-position-x: 80%;
+  }
+
   /* Colors */
   --marketplaceColor: #C0392B;
   --marketplaceColorLight: #FF4C38;
@@ -132,6 +151,7 @@
     &:disabled {
       background-color: var(--matterColorNegative);
       color: var(--matterColorLight);
+      cursor: not-allowed;
     }
     &:enabled {
       cursor: pointer;
@@ -308,6 +328,7 @@ label {
   @media (--viewportMedium) {
     margin-top: 0;
     margin-bottom: 0;
+    font-weight: var(--fontWeightSemiBold);
   }
 }