From d22a77e513f89580f657dc0400ecc566c437947b Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 13 Feb 2020 15:51:50 +0100
Subject: [PATCH] Update styling on join class page

---
 client/src/pages/joinClass.vue | 22 +++++++++++++++-------
 client/src/pages/profile.vue   | 10 +++++-----
 client/src/router/index.js     |  2 +-
 3 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/client/src/pages/joinClass.vue b/client/src/pages/joinClass.vue
index d34eaca0..f923cd34 100644
--- a/client/src/pages/joinClass.vue
+++ b/client/src/pages/joinClass.vue
@@ -1,18 +1,23 @@
 <template>
   <div>
-    <h1>Schulklasse beitreten {{code}}</h1>
+    <h1>Zugangscode eingeben</h1>
     <div>
       <div v-if="error">
         {{error}}
       </div>
-      <input
-        class="skillbox-input"
-        data-cy="input-class-code"
-        :value="code"
-        @input="updateCode">
+      <div class="skillboxform-input">
+        <label for="join-code" class="skillboxform-input__label">Zugangscode</label>
+        <input
+          id="join-code"
+          class="skillbox-input skillboxform-input__input"
+          data-cy="input-class-code"
+          :value="code"
+          @input="updateCode">
+      </div>
 
       <div>
-        <a class="button" data-cy="join-class" @click="joinClass(code)">Beitreten</a>
+        <a class="button button--primary button--big" data-cy="join-class" @click="joinClass(code)">Klasse beitreten</a>
+        <a class="button button--big" data-cy="join-class-cancel" @click="cancel">Abbrechen</a>
       </div>
 
     </div>
@@ -59,6 +64,9 @@
           console.error(e.message)
           this.error = 'Code ist nicht gültig';
         })
+      },
+      cancel() {
+        this.$router.go(-1);
       }
     }
   }
diff --git a/client/src/pages/profile.vue b/client/src/pages/profile.vue
index 9acf1edd..36441f81 100644
--- a/client/src/pages/profile.vue
+++ b/client/src/pages/profile.vue
@@ -2,16 +2,16 @@
   <div class="profile">
     <nav class="top-navigation profile-submenu profile__submenu">
       <router-link to="/me/activity" active-class="top-navigation__link--active"
-                  class="top-navigation__link profile-submenu__item submenu-item">Aktivität
+                   class="top-navigation__link profile-submenu__item submenu-item">Aktivität
       </router-link>
       <router-link to="/me/myclasses" active-class="top-navigation__link--active"
-                  class="top-navigation__link profile-submenu__item submenu-item">Klassenliste
+                   class="top-navigation__link profile-submenu__item submenu-item">Klassenliste
       </router-link>
       <router-link to="/me/profile" active-class="top-navigation__link--active"
-                  class="top-navigation__link profile-submenu__item submenu-item">Profil
+                   class="top-navigation__link profile-submenu__item submenu-item">Profil
       </router-link>
-      <router-link to="/me/join-class" active-class="top-navigation__link--active" data-cy="join-class-link"
-                  class="top-navigation__link profile-submenu__item submenu-item">Klasse beitreten
+      <router-link :to="{name:'join-class'}" active-class="top-navigation__link--active" data-cy="join-class-link"
+                   class="top-navigation__link profile-submenu__item submenu-item">Klasse beitreten
       </router-link>
     </nav>
     <router-view></router-view>
diff --git a/client/src/router/index.js b/client/src/router/index.js
index 430c5378..15c22ab3 100644
--- a/client/src/router/index.js
+++ b/client/src/router/index.js
@@ -110,10 +110,10 @@ const routes = [
       {path: 'profile', name: 'profile', component: profile, meta: {isProfile: true}},
       {path: 'myclasses', name: 'my-classes', component: myClasses, meta: {isProfile: true}},
       {path: 'activity', name: 'activity', component: activity, meta: {isProfile: true}},
-      {path: 'join-class', name: 'join-class', component: joinClass, meta: {isProfile: true}},
       {path: '', name: 'profile-activity', component: activity, meta: {isProfile: true}},
     ]
   },
+  {path: 'join-class', name: 'join-class', component: joinClass, meta: {layout: 'simple'}},
   {
     path: '/survey/:id',
     component: surveyPage,