#25738 Adding styles

dotCMS · Jan 19, 2024 · 4489a02 · 4489a02
1 parent 81f720e
commit 4489a02
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 11 deletions.
diff --git a/...dot-toolbar/components/dot-toolbar-announcements/dot-toolbar-announcements.component.html b/...dot-toolbar/components/dot-toolbar-announcements/dot-toolbar-announcements.component.html
@@ -1,7 +1,8 @@
 <h5 class="announcements__title">{{ 'announcements' | dm }}</h5>
 <ul class="announcements__list">
     @for (item of announcements(); track item.identifier;) {
-    <li class="announcements__list-item">
+    <li class="announcements__list-item announcements__list-item--active">
+        <span class="badge" id="dot-toolbar-notifications-badge"></span>
         <span class="announcements__image pi" [ngClass]="typesIcons[item.type]"></span>
         <div class="announcements__content">
             <span class="announcements__label">{{ item.title }}</span>

diff --git a/...dot-toolbar/components/dot-toolbar-announcements/dot-toolbar-announcements.component.scss b/...dot-toolbar/components/dot-toolbar-announcements/dot-toolbar-announcements.component.scss
@@ -26,14 +26,18 @@
     display: flex;
     flex-direction: row;
     gap: $spacing-3;
-    padding: $spacing-3 $spacing-1;
-
+    padding: $spacing-2 $spacing-1;
+    margin-bottom: $spacing-1;
+    border-radius: $border-radius-md;
     &:hover {
-        border-radius: $spacing-0;
         background-color: $color-palette-primary-100;
     }
 }
 
+.announcements__list-item--active {
+    background-color: $color-palette-secondary-100;
+}
+
 .announcements__title {
     margin: 0;
     padding-bottom: $spacing-1;
@@ -80,6 +84,18 @@
     }
 }
 
+.badge {
+    background-color: $color-accessible-text-fuchsia;
+    border-radius: 50%;
+    color: $white;
+    font-size: $font-size-sm;
+    line-height: $font-size-sm;
+    padding: $spacing-0;
+    position: absolute;
+    left: 25px;
+    top: 0;
+}
+
 ::ng-deep {
     .toolbar-announcements__container {
         &.p-overlaypanel {

diff --git a/...dot-toolbar/components/dot-toolbar-notifications/dot-toolbar-notifications.component.html b/...dot-toolbar/components/dot-toolbar-notifications/dot-toolbar-notifications.component.html
@@ -1,18 +1,21 @@
 <ng-container *dotShowHideFeature="featureFlagAnnouncements">
     <p-button
+        class="dot-toolbar-notifications__button-active"
         (click)="op.toggle($event)"
         icon="pi pi-megaphone"
         styleClass="p-button-rounded p-button-text">
     </p-button>
+    <span class="badge" id="dot-toolbar-notifications-badge"></span>
 
     <p-overlayPanel #op styleClass="toolbar-announcements__container">
         <dot-toolbar-announcements (hideOverlayPanel)="op.hide()" />
     </p-overlayPanel>
 </ng-container>
 <div class="toolbar-notifications__container">
-    <span class="badge" id="dot-toolbar-notifications-badge" *ngIf="notificationsUnreadCount">{{
-        notificationsUnreadCount
-    }}</span>
+    <span
+        class="badge"
+        id="dot-toolbar-notifications-badge"
+        *ngIf="notificationsUnreadCount"></span>
     <dot-dropdown-component
         id="dot-toolbar-notifications"
         [disabled]="!notifications.length"

diff --git a/...dot-toolbar/components/dot-toolbar-notifications/dot-toolbar-notifications.component.scss b/...dot-toolbar/components/dot-toolbar-notifications/dot-toolbar-notifications.component.scss
@@ -4,21 +4,27 @@ $notification-padding: $spacing-3;
 
 :host {
     display: flex;
+    position: relative;
 
     .toolbar-notifications__container {
         position: relative;
         margin-left: $spacing-1;
     }
 
+    .dot-toolbar-notifications__button-active {
+        background-color: $color-palette-primary-op-20;
+        border-radius: 50%;
+    }
+
     .badge {
-        background-color: $color-palette-primary;
-        border-radius: 2px;
+        background-color: $color-accessible-text-fuchsia;
+        border-radius: 50%;
         color: $white;
         font-size: $font-size-sm;
         line-height: $font-size-sm;
-        padding: 2px 5px;
+        padding: $spacing-0;
         position: absolute;
-        left: 20px;
+        left: 25px;
         top: 0;
     }