auth page and marketplace variable

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;

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 {

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;
   }
 }
 

src/containers/LoginForm/LoginForm.css

@@ -19,4 +19,8 @@
 .button {
   margin-top: 24px;
   align-self: stretch;
+
+  @media (--viewportMedium) {
+    margin-top: 72px;
+  }
 }

src/containers/SignupForm/SignupForm.css

@@ -37,4 +37,8 @@
 .button {
   margin-top: 24px;
   align-self: stretch;
+
+  @media (--viewportMedium) {
+    margin-top: 72px;
+  }
 }

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);
   }
 }