From d2dd8d8c5ba9bc2960d2df3ecd266aadae734482 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Mon, 28 Feb 2022 12:35:46 +0100
Subject: [PATCH] Update styling for content block form

---
 .../content-block-form/AddContentLink.vue     |  8 ++++----
 .../ContentBlockElementChooserWidget.vue      | 19 +++++++++++--------
 .../src/components/content-forms/TipTap.vue   | 13 +++++++++++--
 client/src/components/icons/CrossIcon.vue     |  4 ++--
 client/src/styles/_buttons.scss               |  7 ++++++-
 client/src/styles/_mixins.scss                |  5 +++++
 client/src/styles/_variables.scss             |  1 +
 7 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/client/src/components/content-block-form/AddContentLink.vue b/client/src/components/content-block-form/AddContentLink.vue
index 8554e48b..406386e9 100644
--- a/client/src/components/content-block-form/AddContentLink.vue
+++ b/client/src/components/content-block-form/AddContentLink.vue
@@ -16,6 +16,7 @@
 <style scoped lang="scss">
     @import '~styles/helpers';
     $color: $color-silver-dark;
+    $icon-size: 14px;
 
     .add-content-link {
       display: inline-flex;
@@ -24,15 +25,14 @@
       cursor: pointer;
 
       &__icon {
-        width: 20px;
-        height: 20px;
+        width: $icon-size;
+        height: $icon-size;
         margin-right: $small-spacing;
         fill: $color;
       }
       &__text {
         // custom style, because the view needs this
-        @include link-base;
-        font-weight: $font-weight-semibold;
+        @include large-link;
         color: $color;
       }
     }
diff --git a/client/src/components/content-forms/ContentBlockElementChooserWidget.vue b/client/src/components/content-forms/ContentBlockElementChooserWidget.vue
index 5e392f6d..20808aa4 100644
--- a/client/src/components/content-forms/ContentBlockElementChooserWidget.vue
+++ b/client/src/components/content-forms/ContentBlockElementChooserWidget.vue
@@ -160,13 +160,13 @@
     }
     grid-template-columns: repeat(7, 1fr);
     -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-    grid-column-gap: 0px;
+    grid-column-gap: 0;
     font-family: $sans-serif-font-family;
     text-align: center;
     position: relative;
 
     // grid position in wrapper element
-    grid-column: 1 / span 2;
+    grid-column: 1 / -1;
 
     /*IE10+*/
     & > :nth-child(1) {
@@ -200,23 +200,26 @@
 
     &__wrapper {
       display: grid;
-      grid-template-columns: 1fr 50px;
+      grid-template-columns: 180px 1fr 50px;
+      align-items: center;
+      row-gap: $small-spacing;
     }
 
     &__remove-button {
-      grid-column: 2;
+      grid-column: 3;
     }
 
     &__heading {
-      @include heading-4;
-      margin-bottom: $medium-spacing;
+      @include heading-3;
+      margin-bottom: 0;
       grid-column: 1;
       grid-row: 1;
     }
 
     &__list-toggle {
-      margin-bottom: $medium-spacing;
-      grid-column: 1;
+      margin-bottom: 0;
+      grid-column: 2;
+      grid-row: 1;
     }
 
     &__link {
diff --git a/client/src/components/content-forms/TipTap.vue b/client/src/components/content-forms/TipTap.vue
index a0a15ac4..ef2db708 100644
--- a/client/src/components/content-forms/TipTap.vue
+++ b/client/src/components/content-forms/TipTap.vue
@@ -1,13 +1,16 @@
 <template>
   <div class="tip-tap">
+    <editor-content
+      class="tip-tap__editor-wrapper"
+      :editor="editor"
+    />
+
     <toggle
       :bordered="false"
       :checked="isList"
       label="Als Liste formatieren"
       @input="toggleList"
     />
-
-    <editor-content :editor="editor" />
   </div>
 </template>
 
@@ -112,9 +115,15 @@
 
 
   .tip-tap {
+
+    &__editor-wrapper {
+      margin-bottom: $medium-spacing;
+    }
+
     /deep/ &__editor {
       @include inputstyle;
       flex-direction: column;
+      min-height: 150px;
     }
 
     /deep/ ul {
diff --git a/client/src/components/icons/CrossIcon.vue b/client/src/components/icons/CrossIcon.vue
index fbb013b8..b644a11b 100644
--- a/client/src/components/icons/CrossIcon.vue
+++ b/client/src/components/icons/CrossIcon.vue
@@ -2,7 +2,7 @@
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 100 100"
-    class="cross"
+    class="cross-icon"
   >
     <path
       d="M53.91,50,87.19,16.73a2.77,2.77,0,1,0-3.91-3.91L50,46.09,16.73,12.81a2.77,2.77,0,1,0-3.91,3.91L46.09,50,12.81,83.27a2.77,2.77,0,1,0,3.91,3.91L50,53.91,83.27,87.19a2.77,2.77,0,0,0,3.91-3.91Z"
@@ -11,7 +11,7 @@
 </template>
 
 <style scoped lang="scss">
-  .cross {
+  .cross-icon {
     width: 30px;
     height: 30px;
     opacity: 0.5;
diff --git a/client/src/styles/_buttons.scss b/client/src/styles/_buttons.scss
index 438088f9..415004c3 100644
--- a/client/src/styles/_buttons.scss
+++ b/client/src/styles/_buttons.scss
@@ -49,7 +49,7 @@
   border: 0;
   background: transparent;
 
-  &__icon {
+  & > &__icon { // need to be specific, to override local svg component styles
     @include default-icon;
     cursor: pointer;
     justify-self: center;
@@ -57,5 +57,10 @@
     &--subtle {
        fill: $color-silver-dark;
     }
+
+    &--small {
+      @include small-icon;
+    }
+
   }
 }
diff --git a/client/src/styles/_mixins.scss b/client/src/styles/_mixins.scss
index a1316e17..fd800343 100644
--- a/client/src/styles/_mixins.scss
+++ b/client/src/styles/_mixins.scss
@@ -240,3 +240,8 @@
   width: $default-icon-dimension;
   height: $default-icon-dimension;
 }
+
+@mixin small-icon {
+  width: $small-icon-dimension;
+  height: $small-icon-dimension;
+}
diff --git a/client/src/styles/_variables.scss b/client/src/styles/_variables.scss
index 92128c56..c9929bca 100644
--- a/client/src/styles/_variables.scss
+++ b/client/src/styles/_variables.scss
@@ -84,3 +84,4 @@ $news-width: 550px;
 $screen-width: 1200px;
 
 $default-icon-dimension: 25px;
+$small-icon-dimension: 14px;