Add new link to read only banner

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>