From f78fabbb4731c110c7aedb6bce5a9bb395046af1 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Tue, 11 Oct 2022 11:45:45 +0200
Subject: [PATCH] Changes according to Stephs tests

---
 client/src/components/MainNavigationBar.vue    |  4 ++--
 .../components/learningPath/CircleDiagram.vue  |  2 +-
 .../components/learningPath/CircleOverview.vue |  6 +++---
 .../learningPath/LearningContent.vue           | 10 +++++-----
 .../learningPath/LearningSequence.vue          |  2 +-
 .../components/learningPath/SelfEvaluation.vue |  8 ++++----
 .../components/mediaLibrary/OverviewCard.vue   |  4 ++--
 .../pages/competence/CompetenceIndexPage.vue   |  6 +++---
 .../pages/competence/CompetenceListPage.vue    |  4 ++--
 .../competence/PerformanceCriteriaPage.vue     |  6 +++---
 client/src/pages/learningPath/CirclePage.vue   |  2 +-
 .../pages/learningPath/LearningPathPage.vue    |  2 +-
 .../mediaLibrary/MLCategoryDetailPage.vue      | 18 ++++++++++++------
 .../src/pages/mediaLibrary/MLMediaListPage.vue |  4 ++--
 client/tailwind.css                            |  3 ++-
 15 files changed, 44 insertions(+), 37 deletions(-)

diff --git a/client/src/components/MainNavigationBar.vue b/client/src/components/MainNavigationBar.vue
index c3f0d358..4bb0d802 100644
--- a/client/src/components/MainNavigationBar.vue
+++ b/client/src/components/MainNavigationBar.vue
@@ -106,9 +106,9 @@ const profileDropdownData = [
         <nav class="px-8 py-2 mx-auto lg:flex lg:justify-start lg:items-center lg:py-4">
           <div class="flex items-center justify-between">
             <div class="flex items-center">
-              <a href="https://www.vbv.ch" class="flex">
+              <router-link to="/" class="flex">
                 <it-icon-vbv class="h-8 w-16 mr-3 -mt-6 -ml-3" />
-              </a>
+              </router-link>
               <router-link to="/" class="flex">
                 <div class="text-white text-2xl pr-10 pl-3 ml-1 border-l border-white">
                   myVBV
diff --git a/client/src/components/learningPath/CircleDiagram.vue b/client/src/components/learningPath/CircleDiagram.vue
index 9fa07a4b..fe04d657 100644
--- a/client/src/components/learningPath/CircleDiagram.vue
+++ b/client/src/components/learningPath/CircleDiagram.vue
@@ -178,7 +178,7 @@ function render() {
       translate = [translate[0], translate[1] + 20];
       return "translate(" + translate + ")";
     })
-    .attr("class", "circlesText text-xl font-bold")
+    .attr("class", "circlesText text-large font-bold")
     .style("text-anchor", "middle");
 
   const iconWidth = 25;
diff --git a/client/src/components/learningPath/CircleOverview.vue b/client/src/components/learningPath/CircleOverview.vue
index f3986561..b26eff99 100644
--- a/client/src/components/learningPath/CircleOverview.vue
+++ b/client/src/components/learningPath/CircleOverview.vue
@@ -15,7 +15,7 @@ const props = defineProps<{
     <div v-if="circle" class="container-medium">
       <h1 class="">Überblick: Circle "{{ circle.title }}"</h1>
 
-      <p class="mt-8 text-xl">
+      <p class="mt-8 text-large">
         Hier zeigen wir dir, was du in diesem Circle lernen wirst.
       </p>
 
@@ -26,7 +26,7 @@ const props = defineProps<{
           <li
             v-for="goal in circle.goals"
             :key="goal.id"
-            class="text-xl flex items-center"
+            class="text-large flex items-center"
           >
             <it-icon-check
               class="mt-4 hidden lg:block w-12 h-12 text-sky-500 flex-none"
@@ -45,7 +45,7 @@ const props = defineProps<{
         <li
           v-for="jobSituation in circle.job_situations"
           :key="jobSituation.id"
-          class="job-situation border border-gray-500 p-4 text-xl flex items-center"
+          class="job-situation border border-gray-500 p-4 text-large flex items-center"
         >
           {{ jobSituation.value }}
         </li>
diff --git a/client/src/components/learningPath/LearningContent.vue b/client/src/components/learningPath/LearningContent.vue
index 91bfdd57..3df3426c 100644
--- a/client/src/components/learningPath/LearningContent.vue
+++ b/client/src/components/learningPath/LearningContent.vue
@@ -28,7 +28,7 @@ const block = computed(() => {
     >
       <button
         type="button"
-        class="btn-text inline-flex items-center px-3 py-2 font-normal"
+        class="btn-text inline-flex items-center px-3 py-2"
         data-cy="close-learning-content"
         @click="circleStore.closeLearningContent(props.learningContent)"
       >
@@ -36,7 +36,7 @@ const block = computed(() => {
         <span class="hidden lg:inline">zurück zum Circle</span>
       </button>
 
-      <h1 class="text-xl hidden lg:block" data-cy="ln-title">
+      <h1 class="text-large hidden lg:block" data-cy="ln-title">
         {{ learningContent.title }}
       </h1>
 
@@ -70,18 +70,18 @@ const block = computed(() => {
       <div v-else-if="block.type === 'media_library'" class="mt-4 lg:mt-12">
         <h1>{{ learningContent.title }}</h1>
 
-        <p class="text-xl my-4 lg:my-8">{{ block.value.description }}</p>
+        <p class="text-large my-4 lg:my-8">{{ block.value.description }}</p>
         <a :href="block.value.url" target="_blank" class="button btn-primary">
           Mediathek öffnen
         </a>
       </div>
 
       <div v-else-if="block.type === 'placeholder'" class="mt-4 lg:mt-12">
-        <p class="text-xl my-4">{{ block.value.description }}</p>
+        <p class="text-large my-4">{{ block.value.description }}</p>
         <h1>{{ learningContent.title }}</h1>
       </div>
 
-      <div v-else class="text-xl my-4">{{ block.value.description }}</div>
+      <div v-else class="text-large my-4">{{ block.value.description }}</div>
     </div>
   </div>
 </template>
diff --git a/client/src/components/learningPath/LearningSequence.vue b/client/src/components/learningPath/LearningSequence.vue
index 1fd65536..81016477 100644
--- a/client/src/components/learningPath/LearningSequence.vue
+++ b/client/src/components/learningPath/LearningSequence.vue
@@ -87,7 +87,7 @@ const learningSequenceBorderClass = computed(() => {
   <div :id="learningSequence.slug" class="mb-8 learning-sequence">
     <div class="flex items-center gap-4 mb-2 text-blue-900">
       <component :is="learningSequence.icon" />
-      <h3 class="text-xl font-semibold">
+      <h3 class="text-large font-semibold">
         {{ learningSequence.title }}
       </h3>
       <div>{{ humanizeDuration(learningSequence.minutes) }}</div>
diff --git a/client/src/components/learningPath/SelfEvaluation.vue b/client/src/components/learningPath/SelfEvaluation.vue
index d8c216bf..763db47b 100644
--- a/client/src/components/learningPath/SelfEvaluation.vue
+++ b/client/src/components/learningPath/SelfEvaluation.vue
@@ -38,14 +38,14 @@ function handleContinue() {
     >
       <button
         type="button"
-        class="btn-text inline-flex items-center px-3 py-2 font-normal"
+        class="btn-text inline-flex items-center px-3 py-2"
         @click="circleStore.closeSelfEvaluation(props.learningUnit)"
       >
         <it-icon-arrow-left class="-ml-1 mr-1 h-5 w-5"></it-icon-arrow-left>
         <span class="hidden lg:inline">zurück zum Circle</span>
       </button>
 
-      <h1 class="text-xl hidden lg:block" data-cy="ln-title">
+      <h1 class="text-large hidden lg:block" data-cy="ln-title">
         Selbsteinschätzung {{ learningUnit.title }}
       </h1>
 
@@ -64,7 +64,7 @@ function handleContinue() {
         Schritt {{ state.questionIndex + 1 }} von {{ questions.length }}
       </div>
 
-      <p class="text-xl mt-4">
+      <p class="text-large mt-4">
         Überprüfe, ob du in der Lernheinheit
         <span class="font-bold">"{{ learningUnit.title }}"</span> alles verstanden
         hast.<br />
@@ -88,7 +88,7 @@ function handleContinue() {
             @click="circleStore.markCompletion(currentQuestion, 'success')"
           >
             <it-icon-smiley-happy class="w-16 h-16 mr-4"></it-icon-smiley-happy>
-            <span class="font-bold text-xl"> Ja, ich kann das. </span>
+            <span class="font-bold text-large"> Ja, ich kann das. </span>
           </button>
           <button
             class="flex-1 inline-flex items-center text-left p-4 border"
diff --git a/client/src/components/mediaLibrary/OverviewCard.vue b/client/src/components/mediaLibrary/OverviewCard.vue
index aaf20820..b1fa1abc 100644
--- a/client/src/components/mediaLibrary/OverviewCard.vue
+++ b/client/src/components/mediaLibrary/OverviewCard.vue
@@ -16,8 +16,8 @@ const props = withDefaults(defineProps<Props>(), {
   <div class="bg-white p-8 flex justify-between">
     <div>
       <h3 class="mb-4">{{ title }}</h3>
-      <p class="mb-4 text-xl">{{ description }}</p>
-      <router-link :to="link" class="text-xl inline-flex items-center font-normal">
+      <p class="mb-4">{{ description }}</p>
+      <router-link :to="link" class="btn-text inline-flex items-center pl-0 pr-3 py-2">
         <span class="inline">{{ call2Action }}</span>
         <it-icon-arrow-right class="ml-1 h-5 w-5"></it-icon-arrow-right>
       </router-link>
diff --git a/client/src/pages/competence/CompetenceIndexPage.vue b/client/src/pages/competence/CompetenceIndexPage.vue
index 1d7b5fe6..9bbbffdb 100644
--- a/client/src/pages/competence/CompetenceIndexPage.vue
+++ b/client/src/pages/competence/CompetenceIndexPage.vue
@@ -82,7 +82,7 @@ const countStatus = computed(() => {
         </ul>
         <router-link
           :to="`${competenceStore.competenceProfilePage?.frontend_url}/competences`"
-          class="flex items-center"
+          class="btn-text inline-flex items-center pl-0 py-2"
         >
           <span>Alle anschauen</span>
           <it-icon-arrow-right></it-icon-arrow-right>
@@ -122,7 +122,7 @@ const countStatus = computed(() => {
       </ul>
       <router-link
         :to="`${competenceStore.competenceProfilePage?.frontend_url}/criteria`"
-        class="flex items-center"
+        class="btn-text inline-flex items-center pl-0 py-2"
       >
         <span>Alle anschauen</span>
         <it-icon-arrow-right></it-icon-arrow-right>
@@ -144,7 +144,7 @@ const countStatus = computed(() => {
       </ul>
       <router-link
         :to="`${competenceStore.competenceProfilePage?.frontend_url}/criteria`"
-        class="flex items-center"
+        class="btn-text inline-flex items-center pl-0 py-2"
       >
         <span>Alle anschauen</span>
         <it-icon-arrow-right></it-icon-arrow-right>
diff --git a/client/src/pages/competence/CompetenceListPage.vue b/client/src/pages/competence/CompetenceListPage.vue
index b7dded7f..89b22693 100644
--- a/client/src/pages/competence/CompetenceListPage.vue
+++ b/client/src/pages/competence/CompetenceListPage.vue
@@ -11,9 +11,9 @@ const competenceStore = useCompetenceStore();
 
 <template>
   <div class="container-large">
-    <nav class="lg:mt-4">
+    <nav class="py-4 lg:pb-8">
       <router-link
-        class="block mb-8 cursor-pointer flex items-center"
+        class="btn-text inline-flex items-center pl-0"
         :to="competenceStore.competenceProfilePage?.frontend_url"
       >
         <it-icon-arrow-left />
diff --git a/client/src/pages/competence/PerformanceCriteriaPage.vue b/client/src/pages/competence/PerformanceCriteriaPage.vue
index 77f20358..bb2e8c9b 100644
--- a/client/src/pages/competence/PerformanceCriteriaPage.vue
+++ b/client/src/pages/competence/PerformanceCriteriaPage.vue
@@ -21,10 +21,10 @@ const shownCriteria = computed(() => {
 
 <template>
   <div class="container-large">
-    <nav class="lg:mt-4">
+    <nav class="py-4 lg:pb-8">
       <router-link
-        class="block mb-8 cursor-pointer flex items-center"
-        :href="`${competenceStore.competenceProfilePage?.frontend_url}`"
+        class="btn-text inline-flex items-center pl-0"
+        :to="`${competenceStore.competenceProfilePage?.frontend_url}`"
       >
         <it-icon-arrow-left />
         <span>zurück</span>
diff --git a/client/src/pages/learningPath/CirclePage.vue b/client/src/pages/learningPath/CirclePage.vue
index 123d788a..78b11e2a 100644
--- a/client/src/pages/learningPath/CirclePage.vue
+++ b/client/src/pages/learningPath/CirclePage.vue
@@ -85,7 +85,7 @@ onMounted(async () => {
               <div class="flex-initial lg:w-128 px-4 py-4 lg:px-8 lg:pt-4 bg-white">
                 <router-link
                   :to="`/learn/${props.learningPathSlug}`"
-                  class="btn-text inline-flex items-center px-3 py-4 font-normal"
+                  class="btn-text inline-flex items-center px-3 py-4"
                   data-cy="back-to-learning-path-button"
                 >
                   <it-icon-arrow-left class="-ml-1 mr-1 h-5 w-5"></it-icon-arrow-left>
diff --git a/client/src/pages/learningPath/LearningPathPage.vue b/client/src/pages/learningPath/LearningPathPage.vue
index 9246d84c..6b580ec6 100644
--- a/client/src/pages/learningPath/LearningPathPage.vue
+++ b/client/src/pages/learningPath/LearningPathPage.vue
@@ -59,7 +59,7 @@ const createContinueUrl = (learningPath: LearningPath): [string, boolean] => {
         <div class="bg-white py-8 flex flex-col">
           <div class="flex justify-end p-3">
             <button
-              class="flex items-center"
+              class="btn-text inline-flex items-center px-3 py-2"
               data-cy="show-list-view"
               @click="learningPathStore.page = 'OVERVIEW'"
             >
diff --git a/client/src/pages/mediaLibrary/MLCategoryDetailPage.vue b/client/src/pages/mediaLibrary/MLCategoryDetailPage.vue
index 52cc37a4..6143f328 100644
--- a/client/src/pages/mediaLibrary/MLCategoryDetailPage.vue
+++ b/client/src/pages/mediaLibrary/MLCategoryDetailPage.vue
@@ -51,11 +51,11 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
     v-if="mediaCategory"
     class="fixed top-0 overflow-y-scroll bg-white h-full w-full"
   >
-    <div class="bg-gray-200">
+    <div class="bg-gray-200 pb-4 lg:pb-12">
       <div class="container-large">
-        <nav>
+        <nav class="py-4 lg:pb-8">
           <router-link
-            class="block my-9 cursor-pointer flex items-center"
+            class="btn-text inline-flex items-center pl-0"
             :to="`${mediaStore.mediaLibraryPage.frontend_url}/category`"
           >
             <it-icon-arrow-left />
@@ -64,7 +64,7 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
         </nav>
         <div class="flex justify-between">
           <div class="lg:w-6/12">
-            <h3 class="font-normal text-large mb-3">Handlungsfeld</h3>
+            <h3 class="font-normal text-large text-gray-900 mb-3">Handlungsfeld</h3>
             <h1 class="mb-4 lg:mb-8">{{ mediaCategory.title }}</h1>
             <p class="text-xl">{{ mediaCategory.introduction_text }}</p>
           </div>
@@ -108,6 +108,9 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
                 content_collection.value.contents[0].type
               ),
               'border-t': !displayAsCard(content_collection.value.contents[0].type),
+              'border-gray-500': !displayAsCard(
+                content_collection.value.contents[0].type
+              ),
               'mb-6': hasMoreItemsForType(
                 content_collection.value.contents[0].type,
                 content_collection.value.contents
@@ -130,7 +133,10 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
                 :link-text="mediaItem.value.link_display_text"
                 :open-window="mediaItem.value.open_window"
               />
-              <div v-else class="flex items-center justify-between border-b py-4">
+              <div
+                v-else
+                class="flex items-center justify-between border-b border-gray-500 py-4"
+              >
                 <h4 class="text-bold">{{ mediaItem.value.title }}</h4>
                 <media-link
                   :blank="mediaItem.value.open_window"
@@ -149,7 +155,7 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
               )
             "
             :to="`${mediaCategory.frontend_url}/media`"
-            class="flex items-center"
+            class="btn-text inline-flex items-center pl-0 py-2"
           >
             <span>Alle anschauen</span>
             <it-icon-arrow-right></it-icon-arrow-right>
diff --git a/client/src/pages/mediaLibrary/MLMediaListPage.vue b/client/src/pages/mediaLibrary/MLMediaListPage.vue
index 2bfe63e5..823d2d9e 100644
--- a/client/src/pages/mediaLibrary/MLMediaListPage.vue
+++ b/client/src/pages/mediaLibrary/MLMediaListPage.vue
@@ -40,9 +40,9 @@ const mediaList = computed(() => {
   >
     <div class="bg-gray-200">
       <div class="container-large">
-        <nav>
+        <nav class="py-4 lg:pb-8">
           <router-link
-            class="block my-9 cursor-pointer flex items-center"
+            class="btn-text inline-flex items-center pl-0"
             :to="mediaStore.mediaLibraryPage.frontend_url"
           >
             <it-icon-arrow-left />
diff --git a/client/tailwind.css b/client/tailwind.css
index b89819f6..7058ae4c 100644
--- a/client/tailwind.css
+++ b/client/tailwind.css
@@ -95,7 +95,8 @@ svg {
   }
 
   .btn-text {
-    @apply font-semibold py-2 px-4 align-middle inline-block
+    @apply font-normal py-2 px-4 align-middle inline-block
+    text-blue-900
     hover:text-gray-700
     disabled:opacity-50 disabled:cursor-not-allowed;
   }