Revert "fix #5107"biest-5044

This reverts commit 5ad1fb5b6dd0a801e2f5d9fc6c0d59db831a4fd0.

10 files changed, 142 insertions, 123 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};
diff --git a/templates/header.php b/templates/header.php
index a3ecc99..2f1d509 100644
--- a/templates/header.php
+++ b/templates/header.php
@@ -122,94 +122,90 @@ if ($navigation) {
             <? $active = Navigation::getItem('/profile')?->isActive() ?? false; ?>
 
             <? if ($GLOBALS['perm']->have_perm('autor')) : ?>
-
+                <li id="avatar-menu-container"
+                    class="header_avatar_container <?= PersonalNotifications::hasUnseenNotifications() ? 'alert' : '' ?>"
+                >
                 <? if (PersonalNotifications::isActivated()): ?>
-                    <li id="notification-wrapper">
-                        <? $notifications = PersonalNotifications::getMyNotifications() ?>
-                        <div id="notification-container"  <?= count($notifications) > 0 ? ' class="hoverable"' : '' ?>>
-                            <button id="notification_marker"
-                                    data-toggles="#notification_checkbox"
-                                    title="<?= sprintf(
-                                        ngettext('%u Benachrichtigung', '%u Benachrichtigungen', count($notifications)),
-                                        count($notifications)
-                                    ) ?>"
-                                    aria-controls="notification-list"
-                                    data-lastvisit="<?= UserConfig::get($GLOBALS['user']->id)->getValue('NOTIFICATIONS_SEEN_LAST_DATE') ?>"
-                                    <? if (count($notifications) === 0) echo 'disabled'; ?>
-                                    class="<?= PersonalNotifications::hasUnseenNotifications() ? 'alert' : '' ?>"
-                                    aria-expanded="false"
+                    <? $notifications = PersonalNotifications::getMyNotifications() ?>
+                    <div id="notification-container"  <?= count($notifications) > 0 ? ' class="hoverable"' : '' ?>>
+                        <button id="notification_marker"
+                                data-toggles="#notification_checkbox"
+                                title="<?= sprintf(
+                                    ngettext('%u Benachrichtigung', '%u Benachrichtigungen', count($notifications)),
+                                    count($notifications)
+                                ) ?>"
+                                aria-controls="notification-list"
+                                data-lastvisit="<?= UserConfig::get($GLOBALS['user']->id)->getValue('NOTIFICATIONS_SEEN_LAST_DATE') ?>"
+                                <? if (count($notifications) === 0) echo 'disabled'; ?>
+                                <? if (PersonalNotifications::hasUnseenNotifications()) echo 'class="alert"'; ?>
+                                aria-expanded="false"
+                        >
+                            <span class="count" aria-hidden="true"><?= count($notifications) ?></span>
+                        </button>
+                        <input type="checkbox" id="notification_checkbox">
+                        <div class="list below" id="notification_list">
+                            <a class="mark-all-as-read <? if (count($notifications) < 2) echo 'invisible'; ?>"
+                               href="<?= URLHelper::getLink('dispatch.php/jsupdater/mark_notification_read/all', ['return_to' => $_SERVER['REQUEST_URI']]) ?>"
                             >
-                                <span class="count" aria-hidden="true"><?= count($notifications) ?></span>
-                                <? $icon_role =  PersonalNotifications::hasUnseenNotifications() ? ICON::ROLE_INFO_ALT : ICON::ROLE_CLICKABLE ?>
-                                <?= Icon::create('notification2', $icon_role)->asImg() ?>
-                            </button>
-                            <input type="checkbox" id="notification_checkbox">
-                            <div class="list below" id="notification_list">
-                                <a class="mark-all-as-read <? if (count($notifications) < 2) echo 'invisible'; ?>"
-                                href="<?= URLHelper::getLink('dispatch.php/jsupdater/mark_notification_read/all', ['return_to' => $_SERVER['REQUEST_URI']]) ?>"
-                                >
-                                    <?= _('Alle Benachrichtigungen als gelesen markieren') ?>
-                                </a>
-                                <a class="enable-desktop-notifications" href="#" style="display: none;">
-                                    <?= _('Desktop-Benachrichtigungen aktivieren') ?>
-                                </a>
-                                <ul>
-                                <? foreach ($notifications as $notification) : ?>
-                                    <?= $notification->getLiElement() ?>
-                                <? endforeach ?>
-                                </ul>
-                            </div>
-                        <? if (PersonalNotifications::isAudioActivated()): ?>
-                            <audio id="audio_notification" preload="none">
-                                <source src="<?= Assets::url('sounds/blubb.ogg') ?>" type="audio/ogg">
-                                <source src="<?= Assets::url('sounds/blubb.mp3') ?>" type="audio/mpeg">
-                            </audio>
-                        <? endif; ?>
+                                <?= _('Alle Benachrichtigungen als gelesen markieren') ?>
+                            </a>
+                            <a class="enable-desktop-notifications" href="#" style="display: none;">
+                                <?= _('Desktop-Benachrichtigungen aktivieren') ?>
+                            </a>
+                            <ul>
+                            <? foreach ($notifications as $notification) : ?>
+                                <?= $notification->getLiElement() ?>
+                            <? endforeach ?>
+                            </ul>
                         </div>
-                    </li>
+                    <? if (PersonalNotifications::isAudioActivated()): ?>
+                        <audio id="audio_notification" preload="none">
+                            <source src="<?= Assets::url('sounds/blubb.ogg') ?>" type="audio/ogg">
+                            <source src="<?= Assets::url('sounds/blubb.mp3') ?>" type="audio/mpeg">
+                        </audio>
+                    <? endif; ?>
+                    </div>
                 <? endif; ?>
 
                 <? if (Navigation::hasItem('/avatar')): ?>
-                    <li id="avatar-wrapper">
-                        <form id="avatar-menu" method="post">
-                        <?php
-                            $action_menu = ContentGroupMenu::get();
-                            $action_menu->addCSSClass('avatar-menu');
-                            $action_menu->addAttribute('data-action-menu-reposition', 'false');
-                            $action_menu->setLabel(User::findCurrent()->getFullName());
-                            $action_menu->setAriaLabel(_('Profilmenü'));
-                            $action_menu->setIcon(
-                                Avatar::getAvatar(User::findCurrent()->id)->getImageTag(),
-                                ['id' => 'header_avatar_image_link']
-                            );
+                    <form id="avatar-menu" method="post">
+                    <?php
+                        $action_menu = ContentGroupMenu::get();
+                        $action_menu->addCSSClass('avatar-menu');
+                        $action_menu->addAttribute('data-action-menu-reposition', 'false');
+                        $action_menu->setLabel(User::findCurrent()->getFullName());
+                        $action_menu->setAriaLabel(_('Profilmenü'));
+                        $action_menu->setIcon(
+                            Avatar::getAvatar(User::findCurrent()->id)->getImageTag(),
+                            ['id' => 'header_avatar_image_link']
+                        );
 
-                            foreach (Navigation::getItem('/avatar') as $subnav) {
-                                if ($subnav->getRenderAsButton()) {
-                                    $action_menu->addButton(
-                                        'logout',
-                                        $subnav->getTitle(),
-                                        $subnav->getImage(),
-                                        array_merge(
-                                            $subnav->getLinkAttributes(),
-                                            ['formaction' => URLHelper::getURL($subnav->getURL(), [], true)]
-                                        )
-                                    );
-                                } else {
-                                    $action_menu->addLink(
-                                        URLHelper::getURL($subnav->getURL(), [], true),
-                                        $subnav->getTitle(),
-                                        $subnav->getImage(),
-                                        $subnav->getLinkAttributes()
-                                    );
-                                }
+                        foreach (Navigation::getItem('/avatar') as $subnav) {
+                            if ($subnav->getRenderAsButton()) {
+                                $action_menu->addButton(
+                                    'logout',
+                                    $subnav->getTitle(),
+                                    $subnav->getImage(),
+                                    array_merge(
+                                        $subnav->getLinkAttributes(),
+                                        ['formaction' => URLHelper::getURL($subnav->getURL(), [], true)]
+                                    )
+                                );
+                            } else {
+                                $action_menu->addLink(
+                                    URLHelper::getURL($subnav->getURL(), [], true),
+                                    $subnav->getTitle(),
+                                    $subnav->getImage(),
+                                    $subnav->getLinkAttributes()
+                                );
                             }
-                            SkipLinks::addIndex(_('Profilmenü'), 'header_avatar_image_link', 1, false);
-                        ?>
-                        <?= $action_menu->render(); ?>
-                        </form>
-                    </li>
+                        }
+                        SkipLinks::addIndex(_('Profilmenü'), 'header_avatar_image_link', 1, false);
+                    ?>
+                    <?= $action_menu->render(); ?>
+                    </form>
                 <? endif; ?>
-                
+                </li>
             <? endif; ?>
         <? else: ?>
                 <li>
diff --git a/tests/e2e/login.spec.ts b/tests/e2e/login.spec.ts
index f646272..2e859dd 100644
--- a/tests/e2e/login.spec.ts
+++ b/tests/e2e/login.spec.ts
@@ -55,7 +55,7 @@ test.describe('Loggin In - HTML Web Form @auth', () => {
             await benutzername.fill(credentials.autor.username);
             await passwort.fill(credentials.autor.password);
             await submit.click();
-            await expect(page.locator('#notification-wrapper')).toBeVisible();
+            await expect(page.locator('#avatar-menu-container')).toBeVisible();
             await expect(page).toHaveURL(`${baseURL}dispatch.php/start`);
         });
     });
diff --git a/tests/e2e/logout.spec.ts b/tests/e2e/logout.spec.ts
index f969df9..bd87e0b 100644
--- a/tests/e2e/logout.spec.ts
+++ b/tests/e2e/logout.spec.ts
@@ -7,7 +7,7 @@ test.describe('Logging Out', () => {
 
     test('should take us back to the homepage', async ({ page, baseURL }) => {
         await page.goto(baseURL);
-        await expect(page.locator('#notification-wrapper')).toBeVisible();
+        await expect(page.locator('#avatar-menu-container')).toBeVisible();
         await page.getByTitle('Testaccount Dozent').click();
         await page.getByRole('link', { name: 'Logout' }).click();
         await expect(page).toHaveURL(/index\.php.*logout=true/);