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}