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

@@ -76,7 +76,7 @@ describe('AvatarMenu.vue', () => {
       })
     })
 
-    describe('routes', () => {
+    describe('menu items', () => {
       beforeEach(() => {
         getters = {
           'auth/user': () => {

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;
     }

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;

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>

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."

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>