From 7564908456dbb54860b3594409786d318a4dbe2b Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Wed, 30 Oct 2019 15:34:17 +0100
Subject: [PATCH] Refactor to follow @alina-beck suggestions

- Update CSS
- Use design tokens where possible
- Update spec description
- Avoid scoped scss as it's more expensive
- did not change the next and back button as they weren't really visible
without the primary class
- Fix German translation
---
 webapp/components/AvatarMenu/AvatarMenu.spec.js  |  2 +-
 webapp/components/AvatarMenu/AvatarMenu.vue      | 16 +++++-----------
 webapp/components/Notification/Notification.vue  |  5 ++---
 .../NotificationsTable/NotificationsTable.vue    |  3 +--
 webapp/locales/de.json                           |  2 +-
 webapp/pages/notifications/index.vue             |  8 ++++----
 6 files changed, 14 insertions(+), 22 deletions(-)

diff --git a/webapp/components/AvatarMenu/AvatarMenu.spec.js b/webapp/components/AvatarMenu/AvatarMenu.spec.js
index 17237d37e..8b56c5fc6 100644
--- a/webapp/components/AvatarMenu/AvatarMenu.spec.js
+++ b/webapp/components/AvatarMenu/AvatarMenu.spec.js
@@ -76,7 +76,7 @@ describe('AvatarMenu.vue', () => {
       })
     })
 
-    describe('routes', () => {
+    describe('menu items', () => {
       beforeEach(() => {
         getters = {
           'auth/user': () => {
diff --git a/webapp/components/AvatarMenu/AvatarMenu.vue b/webapp/components/AvatarMenu/AvatarMenu.vue
index 18865f457..59d654c07 100644
--- a/webapp/components/AvatarMenu/AvatarMenu.vue
+++ b/webapp/components/AvatarMenu/AvatarMenu.vue
@@ -118,9 +118,9 @@ export default {
   },
 }
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
 .avatar-menu {
-  margin: 2px 0px 0px 5px;
+  margin: $space-xxx-small 0px 0px $space-xx-small;
 }
 .avatar-menu-trigger {
   user-select: none;
@@ -129,21 +129,15 @@ export default {
   padding-left: $space-xx-small;
 }
 .avatar-menu-popover {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+  padding-top: $space-x-small;
+  padding-bottom: $space-x-small;
   hr {
     color: $color-neutral-90;
     background-color: $color-neutral-90;
   }
   .logout-link {
-    margin-left: -$space-small;
-    margin-right: -$space-small;
-    margin-top: -$space-xxx-small;
-    margin-bottom: -$space-x-small;
-    padding: $space-x-small $space-small;
-    // subtract menu border with from padding
-    padding-left: $space-small - 2;
     color: $text-color-base;
+    padding-top: $space-xx-small;
     &:hover {
       color: $text-color-link-active;
     }
diff --git a/webapp/components/Notification/Notification.vue b/webapp/components/Notification/Notification.vue
index 321d1df39..446c5321a 100644
--- a/webapp/components/Notification/Notification.vue
+++ b/webapp/components/Notification/Notification.vue
@@ -69,10 +69,9 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .notification.read {
-  opacity: 0.6; /* Real browsers */
-  filter: alpha(opacity = 60); /* MSIE */
+  opacity: $opacity-soft;
 }
 .notifications-card {
   min-width: 500px;
diff --git a/webapp/components/NotificationsTable/NotificationsTable.vue b/webapp/components/NotificationsTable/NotificationsTable.vue
index 55a1ecf34..17d062cf8 100644
--- a/webapp/components/NotificationsTable/NotificationsTable.vue
+++ b/webapp/components/NotificationsTable/NotificationsTable.vue
@@ -105,7 +105,6 @@ export default {
 </script>
 <style lang="scss">
 .notification-status {
-  opacity: 0.6; /* Real browsers */
-  filter: alpha(opacity = 60); /* MSIE */
+  opacity: $opacity-soft;
 }
 </style>
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index c5ea3d818..f5100ad49 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -183,7 +183,7 @@
     "content": "Inhalt",
     "filterLabel": {
       "all": "Alle",
-      "read": "Lesen  ",
+      "read": "Gelesen  ",
       "unread": "Ungelesen"
     },
     "empty": "Sorry, du hast im Moment keine Benachrichtigungen."
diff --git a/webapp/pages/notifications/index.vue b/webapp/pages/notifications/index.vue
index 59d63b5e3..7c798010d 100644
--- a/webapp/pages/notifications/index.vue
+++ b/webapp/pages/notifications/index.vue
@@ -1,10 +1,10 @@
 <template>
   <ds-card space="small">
-    <ds-flex>
+    <ds-flex class="notifications-page-flex">
       <ds-flex-item :width="{ lg: '85%' }">
         <ds-heading tag="h3">{{ $t('notifications.title') }}</ds-heading>
       </ds-flex-item>
-      <ds-flex-item class="sorting-dropdown">
+      <ds-flex-item width="100px">
         <client-only>
           <notifications-dropdown-filter @filterNotifications="filterNotifications" />
         </client-only>
@@ -100,7 +100,7 @@ export default {
 }
 </script>
 <style lang="scss">
-.sorting-dropdown {
-  float: right;
+.notifications-page-flex {
+  justify-content: space-between;
 }
 </style>