From 4fb8220f7d8d62ead88d395a51413b7211a95aad Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Thu, 6 Sep 2018 15:30:59 +0200
Subject: [PATCH] Add help text styling

---
 .../components/content-forms/DocumentForm.vue  | 18 +++++-------------
 .../src/components/content-forms/VideoForm.vue | 16 ++++++----------
 client/src/styles/_help-text.scss              | 18 ++++++++++++++++++
 client/src/styles/main.scss                    |  1 +
 4 files changed, 30 insertions(+), 23 deletions(-)
 create mode 100644 client/src/styles/_help-text.scss

diff --git a/client/src/components/content-forms/DocumentForm.vue b/client/src/components/content-forms/DocumentForm.vue
index 7c076215..a9813922 100644
--- a/client/src/components/content-forms/DocumentForm.vue
+++ b/client/src/components/content-forms/DocumentForm.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="document-form">
 
-    <info-icon class="document-form__help-icon"></info-icon>
-    <p class="document-form__help-description">
-      Sie können Dokumente auf <a class="document-form__platform-link" href="https://onedrive.live.com/"
+    <info-icon class="document-form__help-icon help-text__icon"></info-icon>
+    <p class="document-form__help-description help-text__description">
+      Sie können Dokumente auf <a class="document-form__platform-link help-text__link" href="https://onedrive.live.com/"
                                   target="_blank">OneDrive</a> hochladen und anschliessen einen Link hier einfügen.
     </p>
 
@@ -36,22 +36,14 @@
     align-items: center;
 
     &__help-icon {
-      width: 40px;
-      height: 40px;
-      fill: $color-brand;
     }
 
     &__help-description {
-      font-family: $sans-serif-font-family;
-      font-size: toRem(17px);
-      font-weight: 500;
+
     }
 
     &__platform-link {
-      font-family: $sans-serif-font-family;
-      text-decoration: underline;
-      font-weight: 500;
-      font-size: toRem(17px);
+
     }
 
     &__document-link {
diff --git a/client/src/components/content-forms/VideoForm.vue b/client/src/components/content-forms/VideoForm.vue
index d8bf4aa2..ab0a7c61 100644
--- a/client/src/components/content-forms/VideoForm.vue
+++ b/client/src/components/content-forms/VideoForm.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="video-form">
 
-    <info-icon class="video-form__help-icon"></info-icon>
-    <p class="video-form__help-description">
-      Sie können Videos auf <a class="video-form__platform-link" href="https://youtube.com/" target="_blank">Youtube</a>
-      oder <a class="video-form__platform-link" href="https://vimeo.com/" target="_blank">Vimeo</a>
+    <info-icon class="video-form__help-icon help-text__icon"></info-icon>
+    <p class="video-form__help-description help-text__description">
+      Sie können Videos auf <a class="video-form__platform-link help-text__link" href="https://youtube.com/" target="_blank">Youtube</a>
+      oder <a class="video-form__platform-link help-text__link" href="https://vimeo.com/" target="_blank">Vimeo</a>
       hochladen und anschliessen einen Link hier einfügen.
     </p>
 
@@ -36,15 +36,11 @@
     align-items: center;
 
     &__help-icon {
-      width: 40px;
-      height: 40px;
-      fill: $color-brand;
+
     }
 
     &__help-description {
-      font-family: $sans-serif-font-family;
-      font-size: toRem(17px);
-      font-weight: 500;
+
     }
 
     &__platform-link {
diff --git a/client/src/styles/_help-text.scss b/client/src/styles/_help-text.scss
new file mode 100644
index 00000000..89c1e9f9
--- /dev/null
+++ b/client/src/styles/_help-text.scss
@@ -0,0 +1,18 @@
+.help-text {
+  &__icon {
+    width: 40px;
+    height: 40px;
+    fill: $color-brand;
+  }
+  &__description {
+    font-family: $sans-serif-font-family;
+    font-size: toRem(17px);
+    font-weight: 500;
+  }
+  &__link {
+    font-family: $sans-serif-font-family;
+    text-decoration: underline;
+    font-weight: 500;
+    font-size: toRem(17px);
+  }
+}
diff --git a/client/src/styles/main.scss b/client/src/styles/main.scss
index eb8a1665..7610ba7d 100644
--- a/client/src/styles/main.scss
+++ b/client/src/styles/main.scss
@@ -8,6 +8,7 @@
 @import "variables";
 @import "buttons";
 @import "forms";
+@import "help-text";