diff --git a/src/bundle/Resources/public/scss/_header-user-menu.scss b/src/bundle/Resources/public/scss/_header-user-menu.scss index 53120d8f0b..c4f0ba370c 100644 --- a/src/bundle/Resources/public/scss/_header-user-menu.scss +++ b/src/bundle/Resources/public/scss/_header-user-menu.scss @@ -7,8 +7,7 @@ &__popup-menu { z-index: 1060; - top: calculateRem(65px); - right: calculateRem(24px); + top: calculateRem(53px); min-width: calculateRem(200px); padding: 0; @@ -25,50 +24,38 @@ font-size: $ibexa-text-font-size-small; } + .ibexa-focus-mode-form { + color: $ibexa-color-dark; + margin-top: calculateRem(12px); + } + &__toggler { display: flex; align-items: center; position: relative; margin-left: calculateRem(16px); - padding: calculateRem(2px) calculateRem(20px) calculateRem(2px) calculateRem(2px); + padding: calculateRem(2px); border-radius: calculateRem(12px); - border: calculateRem(1px) solid transparent; + border: 0; background: rgba($ibexa-color-white, 0.1); - &::before, - &::after { - content: ''; - position: absolute; - z-index: 1; - width: calculateRem(7px); - height: calculateRem(1px); - background: $ibexa-color-white; - } - - &::before { - transform: rotate(135deg); - right: calculateRem(5px); - } - - &::after { - transform: rotate(-135deg); - right: calculateRem(10px); - } - - &:hover { - &::before, - &::after { - background: $ibexa-color-info; - } + .ibexa-icon { + fill: $ibexa-color-white; + margin-left: calculateRem(5px); + margin-right: calculateRem(4px); + transform: rotate(0deg); + transition: all $ibexa-admin-transition-duration $ibexa-admin-transition; } &--expanded { - &::before { - transform: rotate(45deg); + .ibexa-icon { + transform: rotate(-180deg); } + } - &::after { - transform: rotate(-45deg); + &:hover { + .ibexa-icon { + fill: $ibexa-color-info; } } } @@ -76,6 +63,11 @@ &__thumbnail-wrapper { display: flex; border-radius: 50%; + + .ibexa-user-thumbnail { + width: calculateRem(22px); + height: calculateRem(22px); + } } &__notifications-toggler { diff --git a/src/bundle/Resources/public/scss/_popup-menu.scss b/src/bundle/Resources/public/scss/_popup-menu.scss index 5ecf0ecce4..ec6eb738a6 100644 --- a/src/bundle/Resources/public/scss/_popup-menu.scss +++ b/src/bundle/Resources/public/scss/_popup-menu.scss @@ -73,7 +73,7 @@ width: 100%; cursor: pointer; padding: calculateRem(9px); - color: $ibexa-color-black; + color: $ibexa-color-dark; font-size: calculateRem(14px); text-align: left; text-decoration: none; diff --git a/src/bundle/Resources/views/themes/admin/ui/focus_mode_form.html.twig b/src/bundle/Resources/views/themes/admin/ui/focus_mode_form.html.twig index 8652752dfc..3aa6e31222 100644 --- a/src/bundle/Resources/views/themes/admin/ui/focus_mode_form.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/focus_mode_form.html.twig @@ -2,6 +2,6 @@ {% form_theme form '@ibexadesign/ui/form_fields.html.twig' %} -{{ form_start(form, { attr: { class: 'mt-2'}}) }} +{{ form_start(form, { attr: { class: 'ibexa-focus-mode-form' }}) }} {{ form_widget(form.enabled) }} {{ form_end(form) }} diff --git a/src/bundle/Resources/views/themes/admin/ui/menu/user.html.twig b/src/bundle/Resources/views/themes/admin/ui/menu/user.html.twig index 52354189f2..70c79cf967 100644 --- a/src/bundle/Resources/views/themes/admin/ui/menu/user.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/menu/user.html.twig @@ -21,6 +21,9 @@ user_content: user.content, } %} + + + {{ include('@ibexadesign/account/notifications/modal.html.twig') }}