Revert "fix #5107"biest-5044

This reverts commit 5ad1fb5b6dd0a801e2f5d9fc6c0d59db831a4fd0.

7 files changed, 65 insertions, 42 deletions

diff --git a/resources/assets/javascripts/lib/personal_notifications.js b/resources/assets/javascripts/lib/personal_notifications.js
index a70e82e..798566f 100644
--- a/resources/assets/javascripts/lib/personal_notifications.js
+++ b/resources/assets/javascripts/lib/personal_notifications.js
@@ -170,11 +170,11 @@ const PersonalNotifications = {
         if (really_new > 0) {
             $('#notification_marker')
                 .data('seen', false);
-            $('#notification-wrapper')
+            $('#avatar-menu-container')
                 .addClass('alert');
             PageLayout.title_prefix = '(!) ';
         } else {
-            $('#notification-wrapper').removeClass('alert');
+            $('#avatar-menu-container').removeClass('alert');
             PageLayout.title_prefix = '';
         }
         if (count) {
@@ -227,7 +227,7 @@ const PersonalNotifications = {
         $.get(STUDIP.URLHelper.getURL('dispatch.php/jsupdater/notifications_seen')).then(time => {
             $('#notification_marker')
                 .data('lastvisit', time);
-            $('#notification-wrapper')
+            $('#avatar-menu-container')
                 .removeClass('alert');
                 
         });
diff --git a/resources/assets/stylesheets/mixins/colors.scss b/resources/assets/stylesheets/mixins/colors.scss
index 249a6df..cb6bce6 100644
--- a/resources/assets/stylesheets/mixins/colors.scss
+++ b/resources/assets/stylesheets/mixins/colors.scss
@@ -323,5 +323,3 @@ $color--info: $color--blue-2;
 $color--info-alternative: mix($color--info, $color--white, 20%);
 
 $color-image-placeholder-background: $color--gray-6;
-
-$color-header-inverted: $color--white;
\ No newline at end of file
diff --git a/resources/assets/stylesheets/scss/globalsearch.scss b/resources/assets/stylesheets/scss/globalsearch.scss
index 3ccd8ae..0d4052a 100644
--- a/resources/assets/stylesheets/scss/globalsearch.scss
+++ b/resources/assets/stylesheets/scss/globalsearch.scss
@@ -4,7 +4,7 @@
 #globalsearch-searchbar {
     display: flex;
     align-items: center;
-    border: thin solid var(--color--header-inverted);
+    border: thin solid var(--color--font-inverted);
     border-radius: var(--border-radius-search);
     background-color: var(--color--brand-primary);
     padding: 3px 5px 2px 5px;
@@ -77,7 +77,7 @@
 
     // List display
     #globalsearch-list {
-        background-color: var(--color--global-background);
+        background-color: var(--white);
         box-shadow: 1px 1px 1px var(--light-gray-color-80);
         color: var(--text-color);
         display: none;
@@ -118,7 +118,7 @@
         background-color: var(--white);
 
         #globalsearch-input {
-            background-color: var(--color--header-inverted);
+            background-color: var(--white);
             color: var(--color--font-primary);
 
             &::placeholder {
diff --git a/resources/assets/stylesheets/scss/header.scss b/resources/assets/stylesheets/scss/header.scss
index c16a790..0a04d64 100644
--- a/resources/assets/stylesheets/scss/header.scss
+++ b/resources/assets/stylesheets/scss/header.scss
@@ -45,7 +45,7 @@
             justify-content: space-between;
             list-style-type: none;
             height: 40px;
-            gap: 8px;
+            gap: 20px;
 
             > li {
 
@@ -188,26 +188,40 @@
     padding: 0 5px 0 0;
 }
 
-#avatar-wrapper {
+#avatar-menu-container {
+    display: inline-flex;
+
+    &.header_avatar_container {
+        align-items: end;
+        flex: 0;
+        border-radius: var(--border-radius-avatar-menu);
+        background-color: var(--color--global-background);
+
+        &.alert,
+        &.alert #notification_marker {
+            background-color: var(--color--warning);
+            color: var(--color--font-inverted);
+        }
+    }
+
     #avatar-menu {
-        height: 30px;
-        width: 30px;
+        height: 28px;
         margin: 0;
         z-index: 1003;
 
         .action-menu.avatar-menu {
             z-index: 1002;
+            padding: 1px 1px 1px 0;
 
             .action-menu-icon {
+                height: 26px;
                 position: relative;
-                height: 100%;
-                width: 100%;
+                width: 26px;
                 z-index: 1;
 
                 img {
-                    height: 28px;
-                    width: 28px;
-                    border: solid 1px var(--color--header-inverted);
+                    height: 26px;
+                    width: 26px;
                     border-radius: var(--border-radius-avatar-menu);
                 }
 
@@ -219,7 +233,7 @@
 
             .action-menu-content {
                 position: absolute;
-                top: 40px;
+                top: 41px;
                 right: 0;
                 background: var(--white);
                 box-shadow: 1px 1px 1px var(--dark-gray-color-60);
@@ -241,6 +255,13 @@
             }
         }
     }
+
+    #notification-container + #avatar-menu {
+        .action-menu-icon img {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+    }
 }
 
 // Fix header covering relevant other areas
diff --git a/resources/assets/stylesheets/scss/personal-notifications.scss b/resources/assets/stylesheets/scss/personal-notifications.scss
index 2b16e89..ada6054 100644
--- a/resources/assets/stylesheets/scss/personal-notifications.scss
+++ b/resources/assets/stylesheets/scss/personal-notifications.scss
@@ -1,34 +1,26 @@
 #notification_marker {
-    padding: 0 8px;
+    margin-left: 0px;
+    padding-left: 0px;
+    margin-right: 0px;
+    padding-right: 0px;
     width: 100%;
     height: 100%;
+    font-size: 12px;
     color: var(--color--font-primary);
     text-align: center;
-    line-height: 30px;
+    line-height: 28px;
     border: none;
     border-radius: var(--border-radius-avatar-menu);
-    background-color: var(--color--header-inverted);
-
-    &.alert {
-        background-color: var(--color--warning);
-        color: var(--color--font-inverted);
-    }
-
-    .count {
-        padding: 0 5px;
-    }
-
-    img {
-        vertical-align: middle;
-        margin-top: -3px;
-    }
+    background-color: var(--color--global-background);
 }
 
 #notification-container {
     $arrow-height: 10px;
     border-radius: var(--border-radius-avatar-menu);
     $list-width: 400px;
-    height: 30px;
+
+    width: 28px;
+    height: 28px;
     color: var(--base-color);
     vertical-align: text-bottom;
     position: relative;
diff --git a/resources/assets/stylesheets/scss/responsive.scss b/resources/assets/stylesheets/scss/responsive.scss
index d6c838c..35ffa7c 100644
--- a/resources/assets/stylesheets/scss/responsive.scss
+++ b/resources/assets/stylesheets/scss/responsive.scss
@@ -285,8 +285,7 @@ $sidebarOut: -330px;
     }
 
     #quicksearch_item,
-    #notification-wrapper,
-    #avatar-wrapper,
+    #avatar-menu-container,
     #current-page-structure {
         display: none;
     }
@@ -303,8 +302,8 @@ $sidebarOut: -330px;
             }
         }
 
-        #notification-wrapper,
-        #avatar-wrapper,
+        #notification-container,
+        .header_avatar_container,
         #sidebar-menu {
             display: none;
         }
@@ -761,6 +760,21 @@ html:not(.responsive-display):not(.fullscreen-mode) {
             line-height: 20px;
         }
 
+        #avatar-menu-container {
+            position: relative;
+            bottom: 0px;
+            right: 0px;
+            line-height: 20px !important;
+
+            #avatar-menu {
+                display: none;
+            }
+
+            &::after {
+                display: none !important;
+            }
+        }
+
         #top-bar {
             box-sizing: border-box;
             height: $header-bar-container-height;
diff --git a/resources/assets/stylesheets/scss/variables.scss b/resources/assets/stylesheets/scss/variables.scss
index c3565dd..2941fe6 100644
--- a/resources/assets/stylesheets/scss/variables.scss
+++ b/resources/assets/stylesheets/scss/variables.scss
@@ -299,8 +299,6 @@ $grid-gap: 0;
 
     --color-image-placeholder-background: #{$color-image-placeholder-background};
 
-    --color--header-inverted: #{$color-header-inverted};
-
     --border-radius-default: #{$border-radius};
     --border-radius-avatar-menu: #{$border-radius-avatar-menu};
     --border-radius-search: #{$border-radius-search};