From 490ce15db2947c44708142d4d221e0f2578fd166 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Mon, 4 May 2020 16:12:37 +0200
Subject: [PATCH] Fix public layout

---
 client/cypress/integration/beta-login.spec.js |  5 +-
 client/src/layouts/PublicLayout.vue           | 47 +++++++++++++++----
 2 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/client/cypress/integration/beta-login.spec.js b/client/cypress/integration/beta-login.spec.js
index 4c0dd2db..c8618595 100644
--- a/client/cypress/integration/beta-login.spec.js
+++ b/client/cypress/integration/beta-login.spec.js
@@ -48,7 +48,10 @@ describe('The Login Page', () => {
 
     cy.get('[data-cy=logout]').click();
 
-    cy.visit('/beta-login');
+    cy.get('[data-cy=email-input]').should('exist').within(() => {
+      cy.visit('/beta-login');
+    });
+
     cy.login(user, pw);
 
     cy.get('[data-cy=header-user-widget]').should('exist').within(() => {
diff --git a/client/src/layouts/PublicLayout.vue b/client/src/layouts/PublicLayout.vue
index ba228ecc..a2b2c82c 100644
--- a/client/src/layouts/PublicLayout.vue
+++ b/client/src/layouts/PublicLayout.vue
@@ -1,17 +1,22 @@
 <template>
   <div class="layout layout--public public">
-    <logo class="public__logo"></logo>
-    <router-view class="layout__content"></router-view>
-    <footer class="layout__footer">Footer</footer>
+    <div class="public__logo">
+      <logo></logo>
+    </div>
+    <router-view class="public__content"></router-view>
+    <default-footer class="skillbox__footer public__footer footer"></default-footer>
   </div>
 </template>
-
 <script>
 
 import Logo from '@/components/icons/Logo';
+import DefaultFooter from '@/layouts/DefaultFooter';
 
   export default {
-    components: {Logo},
+    components: {
+      Logo,
+      DefaultFooter
+    },
   }
 </script>
 
@@ -20,16 +25,38 @@ import Logo from '@/components/icons/Logo';
   @import "@/styles/_mixins.scss";
   @import "@/styles/_default-layout.scss";
 
-  .public {
+  @mixin content-block {
+    padding-right: $medium-spacing;
+    padding-left: $medium-spacing;
     max-width: 800px;
     min-width: 320px;
-    padding-top: 4*$large-spacing;
+    width: 100%;
+    margin: 0 auto;
+  }
+
+  .logo {
+    position: relative;
+
+    width: 260px;
+    height: 43px;
+  }
+
+  .public {
+    grid-template-areas: "h" "c" "f";
+
+    &__content {
+      @include content-block();
+      margin-bottom: $large-spacing;
+    }
 
     &__logo {
-      position: relative;
+      @include content-block();
+      margin-top: $medium-spacing
+    }
 
-      width: 260px;
-      height: 43px;
+    &__footer {
+      background-color: $color-silver-light;
+      display: block;
     }
   }