console: Adjust dropdown style

TheThingsNetwork · Jan 16, 2024 · e6b5607 · e6b5607
1 parent 63d4487
commit e6b5607
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git 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
+    overflow: auto
+
+  .preview-content
+    line-height: normal
+    margin-bottom: $cs.xxs
diff --git 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}