From ad385490bc249da6f634a8add1de33f897dc9966 Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Mon, 17 Feb 2020 10:44:52 +0100
Subject: [PATCH] follow @mattwr18 PR review - replace magic numbers with
 tokens - remove unused name attribute - use slot shorthand (for the slots
 added in this PR)

---
 webapp/assets/_new/styles/tokens.scss         | 21 ++++++++++++-
 webapp/components/CommentCard/CommentCard.vue |  2 +-
 .../ContributionForm/ContributionForm.vue     |  4 +--
 webapp/components/Editor/SuggestionList.vue   |  2 +-
 webapp/components/FilterMenu/FilterMenu.vue   |  1 -
 webapp/components/LoginForm/LoginForm.vue     |  4 +--
 .../components/Notification/Notification.vue  |  2 +-
 webapp/components/PostTeaser/PostTeaser.vue   |  6 ++--
 webapp/components/TeaserImage/TeaserImage.vue | 30 +++++++++----------
 .../components/UserTeaser/UserTeaser.story.js |  2 +-
 .../_new/generic/BaseCard/BaseCard.story.js   |  8 ++---
 .../_new/generic/BaseCard/BaseCard.vue        |  2 +-
 webapp/pages/password-reset.vue               |  4 +--
 webapp/pages/post/_id/_slug/index.vue         |  6 ++--
 webapp/pages/registration.vue                 |  4 +--
 15 files changed, 58 insertions(+), 40 deletions(-)

diff --git a/webapp/assets/_new/styles/tokens.scss b/webapp/assets/_new/styles/tokens.scss
index f56d75485..4ab30177b 100644
--- a/webapp/assets/_new/styles/tokens.scss
+++ b/webapp/assets/_new/styles/tokens.scss
@@ -211,7 +211,8 @@ $letter-spacing-x-small: -0.015em;
  * @presenter Opacity
  */
 
-$opacity-soft: 0.65;
+$opacity-base: 1;
+$opacity-soft: 0.7;
 $opacity-disabled: 0.5;
 
 /**
@@ -264,12 +265,23 @@ $size-avatar-large: 114px;
  $size-button-base: 36px;
  $size-button-small: 26px;
 
+/**
+ * @tokens Size Images
+ * @presenter Spacing
+ */
+
+$size-image-max-height: 2000px;
+$size-image-cropper-max-height: 600px;
+$size-image-cropper-min-height: 400px;
+$size-image-uploader-min-height: 200px;
+
 /**
  * @tokens Size Icons
  * @presenter Spacing
  */
 
  $size-icon-base: 16px;
+ $size-icon-large: 60px;
 
 /**
  * @tokens Shadow
@@ -285,6 +297,12 @@ $box-shadow-active: 0 0 6px 1px rgba(20, 100, 160, 0.5);
 $box-shadow-inset: inset 0 0 20px 1px rgba(0,0,0,.15);
 $box-shadow-small-inset: inset 0 0 0 1px rgba(0,0,0,.05);
 
+/**
+ * @tokens Effects
+ */
+
+$blur-radius: 22px;
+
 /**
  * @tokens Animation Duration
  */
@@ -317,6 +335,7 @@ $z-index-page-header: 2000;
 $z-index-page-sidebar: 1500;
 $z-index-sticky: 100;
 $z-index-post-teaser-link: 5;
+$z-index-surface: 1;
 
 /**
  * @tokens Media Query
diff --git a/webapp/components/CommentCard/CommentCard.vue b/webapp/components/CommentCard/CommentCard.vue
index 573d1417b..d805d26ee 100644
--- a/webapp/components/CommentCard/CommentCard.vue
+++ b/webapp/components/CommentCard/CommentCard.vue
@@ -8,7 +8,7 @@
   <base-card v-else :class="commentClass" :id="anchor">
     <header class="header">
       <user-teaser :user="comment.author" :date-time="comment.createdAt">
-        <template v-if="wasEdited" v-slot:dateTime>
+        <template v-if="wasEdited" #dateTime>
           <span>({{ $t('comment.edited') }})</span>
         </template>
       </user-teaser>
diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue
index b1706990c..95fccffbc 100644
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@@ -8,7 +8,7 @@
   >
     <template slot-scope="{ errors }">
       <base-card>
-        <template v-slot:heroImage>
+        <template #heroImage>
           <img
             v-if="showHeroImage"
             :src="contribution.image | proxyApiUrl"
@@ -276,7 +276,7 @@ export default {
   }
 
   .image.--blur-image {
-    filter: blur(22px);
+    filter: blur($blur-radius);
   }
 
   > .ds-form-item {
diff --git a/webapp/components/Editor/SuggestionList.vue b/webapp/components/Editor/SuggestionList.vue
index 3d480d187..5e9c146a0 100644
--- a/webapp/components/Editor/SuggestionList.vue
+++ b/webapp/components/Editor/SuggestionList.vue
@@ -89,7 +89,7 @@ export default {
   }
 
   &.hint {
-    opacity: 0.7;
+    opacity: $opacity-soft;
     pointer-events: none;
   }
 }
diff --git a/webapp/components/FilterMenu/FilterMenu.vue b/webapp/components/FilterMenu/FilterMenu.vue
index c294763b5..afe6a3d7a 100644
--- a/webapp/components/FilterMenu/FilterMenu.vue
+++ b/webapp/components/FilterMenu/FilterMenu.vue
@@ -2,7 +2,6 @@
   <base-card class="filter-menu">
     <h2>{{ $t('filter-menu.hashtag-search', { hashtag }) }}</h2>
     <base-button
-      name="clear-search-button"
       icon="close"
       circle
       :title="this.$t('filter-menu.clearSearch')"
diff --git a/webapp/components/LoginForm/LoginForm.vue b/webapp/components/LoginForm/LoginForm.vue
index 827fc32b7..eb771a5b2 100644
--- a/webapp/components/LoginForm/LoginForm.vue
+++ b/webapp/components/LoginForm/LoginForm.vue
@@ -5,7 +5,7 @@
       <b>- {{ $t('quotes.african.author') }}</b>
     </blockquote>
     <base-card>
-      <template v-slot:imageColumn>
+      <template #imageColumn>
         <a :href="$t('login.moreInfoURL')" :title="$t('login.moreInfo')" target="_blank">
           <img class="image" alt="Human Connection" src="/img/sign-up/humanconnection.svg" />
         </a>
@@ -40,7 +40,7 @@
           <nuxt-link to="/registration/signup">{{ $t('login.register') }}</nuxt-link>
         </p>
       </form>
-      <template v-slot:topMenu>
+      <template #topMenu>
         <locale-switch offset="5" />
       </template>
     </base-card>
diff --git a/webapp/components/Notification/Notification.vue b/webapp/components/Notification/Notification.vue
index 346a14b4a..acb83b028 100644
--- a/webapp/components/Notification/Notification.vue
+++ b/webapp/components/Notification/Notification.vue
@@ -64,7 +64,7 @@ export default {
   }
 
   &.--read {
-    opacity: 0.5;
+    opacity: $opacity-disabled;
   }
 
   > .description {
diff --git a/webapp/components/PostTeaser/PostTeaser.vue b/webapp/components/PostTeaser/PostTeaser.vue
index a680588a3..ace3850f4 100644
--- a/webapp/components/PostTeaser/PostTeaser.vue
+++ b/webapp/components/PostTeaser/PostTeaser.vue
@@ -11,7 +11,7 @@
       }"
       :highlight="isPinned"
     >
-      <template v-if="post.image" v-slot:heroImage>
+      <template v-if="post.image" #heroImage>
         <img :src="post.image | proxyApiUrl" class="image" />
       </template>
       <client-only>
@@ -158,7 +158,7 @@ export default {
   height: 100%;
 
   &.--blur-image > .hero-image > .image {
-    filter: blur(22px);
+    filter: blur($blur-radius);
   }
 
   > .content {
@@ -178,7 +178,7 @@ export default {
     > .counter-icon {
       display: block;
       margin-right: $space-small;
-      opacity: 0.5;
+      opacity: $opacity-disabled;
     }
 
     > .content-menu {
diff --git a/webapp/components/TeaserImage/TeaserImage.vue b/webapp/components/TeaserImage/TeaserImage.vue
index d5d07cfc1..f1d1e7128 100644
--- a/webapp/components/TeaserImage/TeaserImage.vue
+++ b/webapp/components/TeaserImage/TeaserImage.vue
@@ -105,7 +105,7 @@ export default {
 <style lang="scss">
 .image-uploader {
   position: relative;
-  min-height: 200px;
+  min-height: $size-image-uploader-min-height;
   cursor: pointer;
 
   .image + & {
@@ -125,20 +125,20 @@ export default {
   }
 
   &.--blur-image .preview-image {
-    filter: blur(22px);
+    filter: blur($blur-radius);
   }
 
   .preview-image {
     width: 100%;
-    max-height: 2000px;
+    max-height: $size-image-max-height;
     object-fit: contain;
   }
 
   > .crop-overlay {
     width: 100%;
     height: 100%;
-    min-height: 400px;
-    max-height: 600px;
+    min-height: $size-image-cropper-min-height;
+    max-height: $size-image-cropper-max-height;
     font-size: $font-size-base;
 
     > .img {
@@ -148,16 +148,16 @@ export default {
 
     > .crop-confirm {
       position: absolute;
-      left: 10px;
-      top: 10px;
-      z-index: 1;
+      left: $space-x-small;
+      top: $space-x-small;
+      z-index: $z-index-surface;
     }
 
     > .crop-cancel {
       position: absolute;
-      right: 10px;
-      top: 10px;
-      z-index: 1;
+      right: $space-x-small;
+      top: $space-x-small;
+      z-index: $z-index-surface;
     }
   }
 
@@ -168,11 +168,11 @@ export default {
     align-items: center;
     width: 100%;
     height: 100%;
-    z-index: 1;
+    z-index: $z-index-surface;
 
     &:hover {
       > .base-icon {
-        opacity: 1;
+        opacity: $opacity-base;
       }
     }
 
@@ -182,8 +182,8 @@ export default {
       border-radius: 100%;
       border: $border-size-base dashed $color-neutral-20;
       background-color: $color-neutral-95;
-      font-size: 60px;
-      opacity: 0.7;
+      font-size: $size-icon-large;
+      opacity: $opacity-soft;
     }
   }
 }
diff --git a/webapp/components/UserTeaser/UserTeaser.story.js b/webapp/components/UserTeaser/UserTeaser.story.js
index 488576bd5..73b34cb76 100644
--- a/webapp/components/UserTeaser/UserTeaser.story.js
+++ b/webapp/components/UserTeaser/UserTeaser.story.js
@@ -80,7 +80,7 @@ storiesOf('UserTeaser', module)
     }),
     template: `
     <user-teaser :user="user" :date-time="new Date()">
-      <template v-slot:dateTime>
+      <template #dateTime>
         - HEY! I'm edited
       </template>
     </user>
diff --git a/webapp/components/_new/generic/BaseCard/BaseCard.story.js b/webapp/components/_new/generic/BaseCard/BaseCard.story.js
index 7ed32d067..1d7f3de51 100644
--- a/webapp/components/_new/generic/BaseCard/BaseCard.story.js
+++ b/webapp/components/_new/generic/BaseCard/BaseCard.story.js
@@ -19,7 +19,7 @@ storiesOf('Generic/BaseCard', module)
     components: { BaseCard },
     template: `
       <base-card style="width: 400px;">
-        <template v-slot:heroImage>
+        <template #heroImage>
           <img class="image" src="https://unsplash.com/photos/R4y_E5ZQDPg/download" />
         </template>
         <h2 class="title">I am a card heading</h2>
@@ -32,7 +32,7 @@ storiesOf('Generic/BaseCard', module)
     components: { BaseCard },
     template: `
       <base-card style="width: 600px;">
-        <template v-slot:imageColumn>
+        <template #imageColumn>
           <img class="image" src="/img/sign-up/humanconnection.svg" />
         </template>
         <h2 class="title">I am a card heading</h2>
@@ -45,12 +45,12 @@ storiesOf('Generic/BaseCard', module)
     components: { BaseCard },
     template: `
       <base-card style="width: 600px;">
-        <template v-slot:imageColumn>
+        <template #imageColumn>
           <img class="image" src="/img/sign-up/humanconnection.svg" />
         </template>
         <h2 class="title">I am a card heading</h2>
         <p>And I am a paragraph.</p>
-        <template v-slot:topMenu>
+        <template #topMenu>
           <base-button size="small">Menu</base-button>
         </template>
       </base-card>
diff --git a/webapp/components/_new/generic/BaseCard/BaseCard.vue b/webapp/components/_new/generic/BaseCard/BaseCard.vue
index 92f9a99d1..b787d3618 100644
--- a/webapp/components/_new/generic/BaseCard/BaseCard.vue
+++ b/webapp/components/_new/generic/BaseCard/BaseCard.vue
@@ -84,7 +84,7 @@ export default {
 
   > .hero-image {
     width: calc(100% + (2 * #{$space-base}));
-    max-height: 2000px;
+    max-height: $size-image-max-height;
     margin: -$space-base;
     margin-bottom: $space-base;
     overflow: hidden;
diff --git a/webapp/pages/password-reset.vue b/webapp/pages/password-reset.vue
index 930a298fe..3d19f2e35 100644
--- a/webapp/pages/password-reset.vue
+++ b/webapp/pages/password-reset.vue
@@ -1,11 +1,11 @@
 <template>
   <ds-container width="small" class="password-reset">
     <base-card>
-      <template v-slot:imageColumn>
+      <template #imageColumn>
         <img alt="Human Connection" src="/icon.png" class="image" />
       </template>
       <nuxt-child />
-      <template v-slot:topMenu>
+      <template #topMenu>
         <locale-switch offset="5" />
       </template>
     </base-card>
diff --git a/webapp/pages/post/_id/_slug/index.vue b/webapp/pages/post/_id/_slug/index.vue
index 0b0ed54f7..b9100a48c 100644
--- a/webapp/pages/post/_id/_slug/index.vue
+++ b/webapp/pages/post/_id/_slug/index.vue
@@ -9,7 +9,7 @@
         '--blur-image': blurred,
       }"
     >
-      <template v-slot:heroImage>
+      <template #heroImage>
         <img :src="post.image | proxyApiUrl" class="image" />
         <aside v-show="post.imageBlurred" class="blur-toggle">
           <img v-show="blurred" :src="post.image | proxyApiUrl" class="preview" />
@@ -23,7 +23,7 @@
       </template>
       <section class="menu">
         <user-teaser :user="post.author" :date-time="post.createdAt">
-          <template v-slot:dateTime>
+          <template #dateTime>
             <ds-text v-if="post.createdAt !== post.updatedAt">({{ $t('post.edited') }})</ds-text>
           </template>
         </user-teaser>
@@ -249,7 +249,7 @@ export default {
   }
 
   &.--blur-image > .hero-image > .image {
-    filter: blur(22px);
+    filter: blur($blur-radius);
   }
 
   .blur-toggle {
diff --git a/webapp/pages/registration.vue b/webapp/pages/registration.vue
index fbcdcb448..70ddbbf25 100644
--- a/webapp/pages/registration.vue
+++ b/webapp/pages/registration.vue
@@ -1,11 +1,11 @@
 <template>
   <ds-container width="medium">
     <base-card>
-      <template v-slot:imageColumn>
+      <template #imageColumn>
         <img alt="Human Connection" src="/img/sign-up/nicetomeetyou.svg" />
       </template>
       <nuxt-child />
-      <template v-slot:topMenu>
+      <template #topMenu>
         <locale-switch offset="5" />
       </template>
     </base-card>