console: Adjust styling

TheThingsNetwork · Jan 17, 2024 · 5d820a5 · 5d820a5
1 parent 9ee472f
commit 5d820a5
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 46 deletions.
diff --git a/pkg/webui/console/containers/header/header.styl b/pkg/webui/console/containers/header/header.styl
@@ -12,45 +12,46 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-.header
-  font-size: $fs.l
-  padding: 1.5rem 1.25rem
-  border-bottom: 1px solid $c.grey-200
-  margin-bottom: 0
-  font-weight: $fw.bold
-
-.link
-  align-items: start
-  justify-content: center
-  gap: $cs.m
-  text-decoration: none
-  border-bottom: 1px solid $c.grey-200
-  padding: $cs.m 1.25rem
-
-  &:visited
-    color: initial
-
-  &:hover
-    background: $c.tts-primary-100
-
-  .icon
-    width: 1.29rem
-    height: 1.29rem
-    border-radius: 8px
-    border: 1px solid $c.grey-300
-    background: $c.white
-    color: $c.tts-primary
-    padding: $cs.m
-
-  .title
-    overflow: hidden
-    text-overflow: ellipsis
-    line-height: normal
-    margin-bottom: $cs.xxs
-
-  .notification-container
-    overflow: auto
-
-  .preview-content
-    line-height: normal
-    margin-bottom: $cs.xxs
+.notifications-dropdown
+  &-header
+    font-size: $fs.l
+    padding: $cs.l $cs.m
+    border-bottom: 1px solid $c.grey-200
+    margin-bottom: 0
+    font-weight: $fw.bold
+
+  &-link
+    align-items: start
+    justify-content: center
+    gap: $cs.m
+    text-decoration: none
+    border-bottom: 1px solid $c.grey-200
+    padding: $cs.m 1.25rem
+
+    &:visited
+      color: initial
+
+    &:hover
+      background: $c.tts-primary-100
+
+    &-icon
+      width: 1.29rem
+      height: 1.29rem
+      border-radius: $br.m
+      border: 1px solid $c.grey-300
+      background: $c.white
+      color: $c.tts-primary
+      padding: $cs.m
+
+    .title
+      overflow: hidden
+      text-overflow: ellipsis
+      line-height: normal
+      margin-bottom: $cs.xxs
+
+    .notification-container
+      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
@@ -73,7 +73,7 @@ const NotificationsDropdown = () => {
 
   return (
     <React.Fragment>
-      <div className={style.header}>
+      <div className={style.notificationsDropdownHeader}>
         <span>
           <Message content={sharedMessages.notifications} />{' '}
           <Message className="c-grey-500 fw-normal fs-m" content={`(${totalNotifications})`} />
@@ -83,9 +83,9 @@ const NotificationsDropdown = () => {
         <Link
           to="/notifications"
           key={notification.id}
-          className={classnames(style.link, 'd-flex')}
+          className={classnames(style.notificationsDropdownLink, 'd-flex')}
         >
-          <Icon icon="key" className={style.icon} />
+          <Icon icon="key" className={style.notificationsDropdownLinkIcon} />
           <div className={style.notificationContainer}>
             <div className={classnames(style.title, 'fw-bold')}>
               <Notification.Title

diff --git a/pkg/webui/console/containers/notifications/notifications.styl b/pkg/webui/console/containers/notifications/notifications.styl
@@ -52,7 +52,7 @@
         display: block
 
   .total-notifications
-    border-radius: 45%
+    border-radius: $br.l
     background-color: $c.tts-primary
     color: $c.white
     padding: 0 0.45rem