From 4a834b81403b452ec65881abeee9936d87e7a8cd Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Tue, 12 Mar 2019 10:35:51 +0100
Subject: [PATCH] Add play icon to topic page

---
 client/src/components/icons/Play.vue |  5 +++++
 client/src/pages/topic.vue           | 12 +++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)
 create mode 100644 client/src/components/icons/Play.vue

diff --git a/client/src/components/icons/Play.vue b/client/src/components/icons/Play.vue
new file mode 100644
index 00000000..ff5356bd
--- /dev/null
+++ b/client/src/components/icons/Play.vue
@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <path d="M50,0a50,50,0,1,0,50,50A50,50,0,0,0,50,0ZM38,74V26L70,50Z" style="fill:#17a887"/>
+  </svg>
+</template>
diff --git a/client/src/pages/topic.vue b/client/src/pages/topic.vue
index 8d3511bc..1cff30bf 100644
--- a/client/src/pages/topic.vue
+++ b/client/src/pages/topic.vue
@@ -5,6 +5,7 @@
       {{topic.teaser}}
     </p>
     <div v-if="topic.vimeoId" class="topic__video-link" @click="openVideo">
+      <play class="topic__video-link-icon"></play>
       <span class="topic__video-link-description">Video schauen</span>
     </div>
     <div class="topic__modules">
@@ -15,11 +16,13 @@
 
 <script>
   import ModuleTeaser from '@/components/modules/ModuleTeaser.vue';
+  import Play from '@/components/icons/Play';
   import TOPIC_QUERY from '@/graphql/gql/topicQuery.gql';
 
   export default {
     components: {
-      ModuleTeaser
+      ModuleTeaser,
+      Play
     },
 
     apollo: {
@@ -75,6 +78,13 @@
     &__video-link {
       margin-bottom: $large-spacing;
       cursor: pointer;
+      display: flex;
+      align-items: center;
+    }
+
+    &__video-link-icon {
+      width: 40px;
+      margin-right: $medium-spacing;
     }
 
     &__video-link-description {