From 673e05d6a6fb6067c674fca97d0b999ad811118c Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 23 Aug 2018 11:22:22 +0200
Subject: [PATCH] Adjust styles to be more consistent

---
 client/src/components/ContentBlock.vue                | 2 +-
 client/src/components/content-blocks/ImageBlock.vue   | 3 +++
 client/src/components/content-blocks/ModalText.vue    | 8 +++++++-
 client/src/components/content-blocks/StudentEntry.vue | 5 ++++-
 client/src/components/content-blocks/Task.vue         | 2 ++
 client/src/components/content-blocks/TextBlock.vue    | 8 +++++++-
 client/src/components/modules/Module.vue              | 3 ++-
 client/src/components/modules/ObjectiveGroup.vue      | 1 -
 client/src/components/rooms/RoomEntry.vue             | 2 +-
 client/src/components/rooms/RoomWidget.vue            | 6 ++++--
 client/src/styles/_typography.scss                    | 7 +++++++
 11 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/client/src/components/ContentBlock.vue b/client/src/components/ContentBlock.vue
index dace819e..87ac9f9d 100644
--- a/client/src/components/ContentBlock.vue
+++ b/client/src/components/ContentBlock.vue
@@ -33,7 +33,6 @@
     margin-bottom: 2.5em;
 
     /deep/ p {
-      font-size: 1.125rem;
       line-height: 1.5;
       margin-bottom: 1em;
 
@@ -41,5 +40,6 @@
         margin-bottom: 0;
       }
     }
+
   }
 </style>
diff --git a/client/src/components/content-blocks/ImageBlock.vue b/client/src/components/content-blocks/ImageBlock.vue
index 18c3608d..63d3534c 100644
--- a/client/src/components/content-blocks/ImageBlock.vue
+++ b/client/src/components/content-blocks/ImageBlock.vue
@@ -6,5 +6,8 @@
   .image-block {
     width: 100%;
     max-width: 100%;
+    border-radius: 13px;
+
+    margin-bottom: 30px;
   }
 </style>
diff --git a/client/src/components/content-blocks/ModalText.vue b/client/src/components/content-blocks/ModalText.vue
index 443cc968..114c7427 100644
--- a/client/src/components/content-blocks/ModalText.vue
+++ b/client/src/components/content-blocks/ModalText.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="modal-text">
     <div v-html="value.description"></div>
     <a :href="value.url">{{value.url}}</a>
   </div>
@@ -10,3 +10,9 @@
     props: ['value']
   }
 </script>
+
+<style scoped lang="scss">
+  .modal-text {
+    margin-bottom: 30px;
+  }
+</style>
diff --git a/client/src/components/content-blocks/StudentEntry.vue b/client/src/components/content-blocks/StudentEntry.vue
index 92d48564..a072ae67 100644
--- a/client/src/components/content-blocks/StudentEntry.vue
+++ b/client/src/components/content-blocks/StudentEntry.vue
@@ -2,7 +2,7 @@
   <div class="student-entry">
     <p v-html="value.task_text"></p>
     <textarea class="student-entry__input" placeholder="Text schreiben"></textarea>
-    <div class="student-entry__dropzone-dummy">drag & drop | Dokument wählen</div>
+    <div class="student-entry__dropzone-dummy">Dokument hier hinziehen oder hier klicken</div>
     <button class="student-entry__submit">Ergebnis teilen</button>
   </div>
 </template>
@@ -54,8 +54,11 @@
     &__dropzone-dummy {
       padding: 15px;
       border: 1px dashed #C5C5C5;
+      font-family: $sans-serif-font-family;
+      font-weight: 500;
       margin-bottom: 12px;
       border-radius: 3px;
+      opacity: 0.6;
     }
 
     &__submit {
diff --git a/client/src/components/content-blocks/Task.vue b/client/src/components/content-blocks/Task.vue
index 9071653e..2fed6bba 100644
--- a/client/src/components/content-blocks/Task.vue
+++ b/client/src/components/content-blocks/Task.vue
@@ -11,5 +11,7 @@
 <style scoped lang="scss">
   .task {
     padding-left: 30px;
+
+    margin-bottom: 30px;
   }
 </style>
diff --git a/client/src/components/content-blocks/TextBlock.vue b/client/src/components/content-blocks/TextBlock.vue
index b5ad952e..7e937489 100644
--- a/client/src/components/content-blocks/TextBlock.vue
+++ b/client/src/components/content-blocks/TextBlock.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-html="value.text"></div>
+  <div class="text-block" v-html="value.text"></div>
 </template>
 
 <script>
@@ -7,3 +7,9 @@
     props: ['value']
   }
 </script>
+
+<style scoped lang="scss">
+  .text-block {
+    margin-bottom: 30px;
+  }
+</style>
diff --git a/client/src/components/modules/Module.vue b/client/src/components/modules/Module.vue
index 54becad9..4d082fca 100644
--- a/client/src/components/modules/Module.vue
+++ b/client/src/components/modules/Module.vue
@@ -46,6 +46,7 @@
 
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
+  @import "@/styles/_functions.scss";
 
   .module {
     display: flex;
@@ -70,11 +71,11 @@
     }
 
     &__intro {
-      font-size: 1.5625rem;
       line-height: 1.5;
       margin-bottom: 3em;
 
       > /deep/ p {
+        font-size: toRem(25px);
         margin-bottom: 1.5em;
 
         &:last-child {
diff --git a/client/src/components/modules/ObjectiveGroup.vue b/client/src/components/modules/ObjectiveGroup.vue
index 96a8d9fe..3c2e07cc 100644
--- a/client/src/components/modules/ObjectiveGroup.vue
+++ b/client/src/components/modules/ObjectiveGroup.vue
@@ -41,7 +41,6 @@
     }
 
     &__objective {
-      font-size: 1.2857142857142858rem;
       margin-bottom: 28px;
       line-height: 1.5;
     }
diff --git a/client/src/components/rooms/RoomEntry.vue b/client/src/components/rooms/RoomEntry.vue
index c287d233..f95e846b 100644
--- a/client/src/components/rooms/RoomEntry.vue
+++ b/client/src/components/rooms/RoomEntry.vue
@@ -37,6 +37,7 @@
     page-break-inside: avoid; /* Firefox */
     break-inside: avoid; /* IE 10+ */
     margin-bottom: 25px;
+    cursor: pointer;
 
     &__image {
       max-width: 100%;
@@ -52,7 +53,6 @@
     }
 
     &__teaser {
-      font-size: toRem(18px);
       line-height: 1.5;
       margin-bottom: 10px;
     }
diff --git a/client/src/components/rooms/RoomWidget.vue b/client/src/components/rooms/RoomWidget.vue
index c39fb7be..056e14c4 100644
--- a/client/src/components/rooms/RoomWidget.vue
+++ b/client/src/components/rooms/RoomWidget.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="room-widget" :class="roomClass">
+  <router-link to="/room" tag="div" class="room-widget" :class="roomClass">
     <div class="room-widget__content">
       <h2 class="room-widget__title">{{title}}</h2>
       <room-group-widget :group="group"></room-group-widget>
@@ -10,7 +10,7 @@
         <ellipses></ellipses>
       </router-link>
     </div>
-  </div>
+  </router-link>
 
 </template>
 
@@ -51,6 +51,8 @@
     overflow: hidden;
     @include widget-shadow;
 
+    cursor: pointer;
+
     /*
      * For IE10+
      */
diff --git a/client/src/styles/_typography.scss b/client/src/styles/_typography.scss
index e8c6bd45..39d6b8fd 100644
--- a/client/src/styles/_typography.scss
+++ b/client/src/styles/_typography.scss
@@ -1,8 +1,10 @@
 @import "variables";
+@import "functions";
 
 * {
   font-size: $base-font-size;
   font-weight: 400;
+  color: $color-darkgrey-1;
 }
 
 h1, h2, h3, h4, h5 {
@@ -12,9 +14,14 @@ h1, h2, h3, h4, h5 {
 
 p, a, li {
   font-family: $serif-font-family;
+  font-size: toRem(18px);
   font-weight: 300;
 }
 
+a {
+  font-size: toRem(18px);
+}
+
 h1 {
   font-size: 4rem; // 64px
   font-weight: 800;