From e6b56077840decc570f3b2c042d0b868a6e6f5c7 Mon Sep 17 00:00:00 2001 From: Darya Plotnytska <d.plotnytska.s@gmail.com> Date: Tue, 16 Jan 2024 15:58:16 +0100 Subject: [PATCH] console: Adjust dropdown style --- pkg/webui/console/containers/header/header.styl | 14 +++++++++----- .../containers/header/notifications-dropdown.js | 9 +++++++-- 2 files changed, 16 insertions(+), 7 deletions(-) diff --git a/pkg/webui/console/containers/header/header.styl b/pkg/webui/console/containers/header/header.styl index 0857b59ceba..bcee4cd69ce 100644 --- a/pkg/webui/console/containers/header/header.styl +++ b/pkg/webui/console/containers/header/header.styl @@ -20,7 +20,8 @@ font-weight: $fw.bold .link - align-items: center + align-items: start + justify-content: center gap: $cs.m text-decoration: none border-bottom: 1px solid $c.grey-200 @@ -35,9 +36,6 @@ .icon width: 1.29rem height: 1.29rem - display: flex - align-items: center - justify-content: center border-radius: 8px border: 1px solid $c.grey-300 background: $c.white @@ -47,6 +45,12 @@ .title overflow: hidden text-overflow: ellipsis + line-height: normal + margin-bottom: $cs.xxs .notification-container - overflow: auto \ No newline at end of file + overflow: auto + + .preview-content + line-height: normal + margin-bottom: $cs.xxs \ No newline at end of file diff --git a/pkg/webui/console/containers/header/notifications-dropdown.js b/pkg/webui/console/containers/header/notifications-dropdown.js index d067602e455..e9de92b6329 100644 --- a/pkg/webui/console/containers/header/notifications-dropdown.js +++ b/pkg/webui/console/containers/header/notifications-dropdown.js @@ -76,7 +76,7 @@ const NotificationsDropdown = () => { <li className={style.header}> <span> <Message content={sharedMessages.notifications} />{' '} - <Message className="c-grey-500 fw-normal" content={`(${totalNotifications})`} /> + <Message className="c-grey-500 fw-normal fs-m" content={`(${totalNotifications})`} /> </span> </li> {notificationItems.map(notification => ( @@ -93,7 +93,12 @@ const NotificationsDropdown = () => { notificationType={notification.notification_type} /> </div> - <div className={notificationStyle.notificationPreviewContent}> + <div + className={classnames( + notificationStyle.notificationPreviewContent, + style.previewContent, + )} + > <Notification.Preview data={notification} notificationType={notification.notification_type}