Update assignment widget styling

client/src/components/content-blocks/Assignment.vue

@@ -1,14 +1,50 @@
 <template>
   <div class="assignment">
-    {{assignment.title}}
+    <h3 class="assignment__title">{{assignment.title}}</h3>
-    <p v-html="assignment.assignment"></p>
+    <p class="assignment__assignment-text">
-    <textarea
+      {{assignment.assignment}}
-      class="assignment__input"
+    </p>
-      placeholder="Text schreiben"
+
-      :value="assignment.submission.text"
+    <div class="assignment__toggle-input-container">
-      @input="saveInput"
+      <button
-    ></textarea>
+        class="assignment__toggle-input"
-    <button class="assignment__submit button">Ergebnis teilen</button>
+        @click="inputType = 'text'"
+        :class="{'assignment__toggle-input--active': inputType === 'text'}"
+      >Text
+        erfassen
+      </button>
+      <button
+        class="assignment__toggle-input"
+        @click="inputType = 'file'"
+        :class="{'assignment__toggle-input--active': inputType === 'file'}"
+      >Dokument hochladen
+      </button>
+    </div>
+
+    <div class="assignment__answer">
+
+      <div class="assignment__text-answer"
+           v-if="inputType === 'text'">
+      <textarea
+        class="assignment__textarea"
+        placeholder="Ergebnis erfassen"
+        :value="assignment.submission.text"
+        @input="saveInput"
+      ></textarea>
+        <div class="assignment__save-status">
+          <tick-circle-icon class="assignment__save-status-icon"></tick-circle-icon>
+          <span class="assignment__save-status-text">Alle Änderungen gespeichert</span>
+        </div>
+      </div>
+      <div
+        class="assignment__file-upload"
+        v-if="inputType === 'file'">
+        File Input goes here
+      </div>
+    </div>
+
+
+    <button class="assignment__submit button button--primary button--white-bg">Ergebnis mit Lehrperson teilen</button>
   </div>
 </template>
 
@@ -17,15 +53,17 @@
   import UPDATE_ASSIGNMENT_MUTATION from '@/graphql/gql/mutations/updateAssignmentMutation.gql';
   import debounce from 'debounce';
 
+  import TickCircleIcon from '@/components/icons/TickCircleIcon';
+
   export default {
     props: ['value'],
 
-    computed: {
+    components: {
-      loading() {
+      TickCircleIcon
-        return this.$apollo.loading;
-      }
     },
 
+    computed: {},
+
     methods: {
       saveInput: debounce(function (event) {
         this.$apollo.mutate({
@@ -59,7 +97,8 @@
           submission: {
             text: ''
           }
-        }
+        },
+        inputType: 'text'
       }
     }
   }
@@ -67,20 +106,82 @@
 
 <style scoped lang="scss">
   @import '@/styles/_variables.scss';
+  @import '@/styles/_functions.scss';
 
   .assignment {
     margin-bottom: 2em;
+    padding: 20px;
+    border-radius: $default-border-radius;
+    background-color: $color-brand-light;
 
-    &__input {
+    &__title {
+      font-size: toRem(17px);
+    }
+
+    &__toggle-input-container {
+      display: flex;
+      margin-bottom: 15px;
+    }
+
+    &__toggle-input {
+      border: 0;
+      font-family: $sans-serif-font-family;
+      background: transparent;
+      font-size: toRem(14px);
+      padding: 5px 0;
+      margin-right: 15px;
+      outline: 0;
+      color: $color-grey;
+      cursor: pointer;
+
+      &--active {
+        border-bottom: 2px solid $color-darkgrey-1;
+        color: $color-darkgrey-1;
+      }
+    }
+
+    &__answer {
+      margin-bottom: 12px;
+    }
+
+    &__textarea {
       display: block;
       width: 100%;
       border-radius: 3px;
       border: 1px solid #DBDBDB;
       padding: 13px;
-      box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.15);
+      box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.15);
       box-sizing: border-box;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
       line-height: 1.5;
-      margin-bottom: 12px;
+      border-bottom: 0;
+      min-height: 110px;
+    }
+
+    &__save-status {
+      background-color: $color-white;
+      font-family: $sans-serif-font-family;
+      padding: 13px;
+      border-radius: 3px;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      border: 1px solid #DBDBDB;
+      position: relative;
+      display: flex;
+      align-items: center;
+    }
+
+    &__save-status-icon {
+      width: 22px;
+      height: 22px;
+      fill: $color-grey;
+      margin-right: 8px;
+    }
+
+    &__save-status-text {
+      font-size: toRem(14px);
+      color: $color-grey;
     }
 
     &__submit {

client/src/components/icons/TickCircleIcon.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><title>
+    tick-circle</title>
+    <path
+      d="M50,6.48A43.62,43.62,0,0,0,6.56,47.08S6.5,48.46,6.5,50s.06,2.83.06,2.92A43.52,43.52,0,1,0,50,6.48Zm0,82.15A38.62,38.62,0,1,1,88.6,50,38.67,38.67,0,0,1,50,88.62Z"/>
+    <path d="M69.27,41a2.45,2.45,0,1,0-3.46-3.46L45,58.3,34.2,47.49A2.45,2.45,0,0,0,30.73,51L45,65.23Z"/>
+  </svg>
+</template>

client/src/styles/_buttons.scss

@@ -15,4 +15,8 @@
   &--primary {
     border-color: $color-brand;
   }
+
+  &--white-bg {
+    background-color: $color-white;
+  }
 }