From e77cb477c5976fc89dbd061ba4cd8ddab2d65a42 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 22 Sep 2021 11:39:12 +0200
Subject: [PATCH] Add new link to read only banner

---
 client/src/components/ReadOnlyBanner.vue | 49 +++++++++++++++++-------
 1 file changed, 35 insertions(+), 14 deletions(-)

diff --git a/client/src/components/ReadOnlyBanner.vue b/client/src/components/ReadOnlyBanner.vue
index d3a84608..14bdfed3 100644
--- a/client/src/components/ReadOnlyBanner.vue
+++ b/client/src/components/ReadOnlyBanner.vue
@@ -3,14 +3,25 @@
     class="read-only-banner"
     data-cy="read-only-banner"
     v-if="me.readOnly || me.selectedClass.readOnly">
-    <p class="read-only-banner__text">
-      {{ readOnlyText }} Sie können Inhalte lesen, aber nicht
-      bearbeiten. <router-link
-        :to="licenseActivationLink"
-        data-cy="license-activation-link"
-        class="read-only-banner__link"
-        v-if="me.readOnly">Neuen Lizenzcode eingeben</router-link>
-    </p>
+    <div class="read-only-banner__content">
+      <p class="read-only-banner__text">
+        {{ readOnlyText }} Sie können Inhalte lesen, aber nicht
+        bearbeiten.
+      </p>
+      <div class="read-only-banner__buttons">
+        <router-link
+          :to="licenseActivationLink"
+          data-cy="license-activation-link"
+          class="read-only-banner__link button button--primary"
+          v-if="me.readOnly">Neuen Lizenzcode eingeben
+        </router-link>
+        <a
+          target="_blank"
+          href="https://myskillbox.ch/lesemodus"
+          class="button button--secondary">Mehr Informationen zum Lesemodus</a>
+      </div>
+
+    </div>
   </div>
 </template>
 
@@ -28,8 +39,8 @@
           },
         },
         licenseActivationLink: {
-          name: LICENSE_ACTIVATION
-        }
+          name: LICENSE_ACTIVATION,
+        },
       };
     },
 
@@ -52,11 +63,11 @@
               readOnly: false,
               selectedClass: {
                 readOnly: false,
-              }
+              },
             };
           }
           return me;
-        }
+        },
       },
     },
 
@@ -75,15 +86,25 @@
     background-color: $color-brand-light;
     display: flex;
     justify-content: center;
+    padding: $small-spacing 0;
+
+    &__content {
+      max-width: $screen-width;
+    }
 
     &__text {
-      padding: $small-spacing 0;
+      padding: 0;
       @include regular-text;
-      max-width: $screen-width;
+      margin-bottom: $small-spacing;
+    }
+
+    &__buttons {
+
     }
 
     &__link {
       @include default-link;
+      margin-right: $small-spacing;
     }
   }
 </style>