fix(announcements): adjust announcements menu icon size (#27496)

* Adjust icons #27463 * #27463 Fix sizing * Adding noopener
dotCMS · Feb 2, 2024 · d585a6e · d585a6e
1 parent 949d08d
commit d585a6e
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 20 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
@@ -11,6 +11,7 @@ <h5 class="announcements__title">{{ 'announcements' | dm }}</h5>
             [href]="item.url"
             target="_blank"
             rel="noopener noreferrer"
+            data-testId="announcement_link"
             aria-labelledby="announcement-label date-label">
             <div class="announcements__content">
                 <span class="announcements__label">{{ item.title }}</span>
@@ -23,21 +24,30 @@ <h5 class="announcements__title">{{ 'announcements' | dm }}</h5>
 
 <div class="announcements__container">
     <i class="pi pi-external-link"></i>
-    <a class="announcements__link" [href]="linkToDotCms()" data-testId="announcement_link">{{
-        'announcements.show.all' | dm
-    }}</a>
+    <a
+        class="announcements__link"
+        [href]="linkToDotCms()"
+        target="_blank"
+        data-testId="announcement_link_all"
+        rel="noopener"
+        >{{ 'announcements.show.all' | dm }}</a
+    >
 </div>
 
 <h5 class="announcements__title">{{ 'announcements.knowledge.center' | dm }}</h5>
 <div class="announcements__about">
     @for (item of knowledgeCenterLinks(); track item.id;) {
-    <a [href]="item.url" target="_blank" rel="noopener">{{ item.label }}</a>
+    <a [href]="item.url" data-testId="announcement_link" target="_blank" rel="noopener">{{
+        item.label
+    }}</a>
     }
 </div>
 
 <h5 class="announcements__title">{{ 'announcements.knowledge.contact.us' | dm }}</h5>
 <div class="announcements__about">
     @for (item of contactLinks(); track item.id;) {
-    <a [href]="item.url" target="_blank" rel="noopener">{{ item.label }}</a>
+    <a [href]="item.url" data-testId="announcement_link" target="_blank" rel="noopener">{{
+        item.label
+    }}</a>
     }
 </div>
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
@@ -58,11 +58,12 @@
 }
 
 .announcements__image {
-    height: 2.5rem;
-    width: 2.5rem;
+    height: 2.7rem;
+    width: 2.7rem;
     background-color: var(--color-palette-secondary-200);
     color: var(--color-palette-secondary-500);
     border-radius: 50%;
+    font-size: $font-size-lg;
 }
 
 .announcements__label {
@@ -96,10 +97,11 @@
     color: $white;
     font-size: $font-size-sm;
     line-height: $font-size-sm;
-    padding: $spacing-0;
+    width: 0.625rem;
+    height: 0.625rem;
     position: absolute;
-    left: 35px;
-    top: 12px;
+    left: 39px;
+    top: 14px;
 }
 
 ::ng-deep {

diff --git a/...-toolbar/components/dot-toolbar-announcements/dot-toolbar-announcements.component.spec.ts b/...-toolbar/components/dot-toolbar-announcements/dot-toolbar-announcements.component.spec.ts
@@ -67,7 +67,14 @@ describe('DotToolbarAnnouncementsComponent', () => {
 
     it('should have a "Show All" link', () => {
         spectator.detectChanges();
-        const showAllLink = spectator.query(byTestId('announcement_link'));
+        const showAllLink = spectator.query(byTestId('announcement_link_all'));
         expect(showAllLink).toBeTruthy();
+        expect(showAllLink.getAttribute('target')).toBe('_blank');
+    });
+
+    it('should have a target blank on the announcements link', () => {
+        spectator.detectChanges();
+        const announcementLink = spectator.query(byTestId('announcement_link'));
+        expect(announcementLink.getAttribute('target')).toBe('_blank');
     });
 });
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
@@ -5,7 +5,10 @@
         icon="pi pi-megaphone"
         styleClass="p-button-rounded p-button-text">
     </p-button>
-    <span class="badge" id="dot-toolbar-notifications-badge" *ngIf="showUnreadAnnouncement()">
+    <span
+        class="dot-toolbar__badge"
+        id="dot-toolbar-notifications-badge"
+        *ngIf="showUnreadAnnouncement()">
     </span>
 
     <p-overlayPanel
@@ -19,7 +22,7 @@
 </ng-container>
 <div class="toolbar-notifications__container">
     <span
-        class="badge"
+        class="dot-toolbar__badge"
         id="dot-toolbar-notifications-badge"
         *ngIf="notificationsUnreadCount"></span>
     <dot-dropdown-component

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
@@ -1,6 +1,7 @@
 @use "variables" as *;
 
 $notification-padding: $spacing-3;
+$notification-dot-badge-size: 0.625rem;
 
 :host {
     display: flex;
@@ -16,16 +17,15 @@ $notification-padding: $spacing-3;
         border-radius: 50%;
     }
 
-    .badge {
+    .dot-toolbar__badge {
         background-color: $color-accessible-text-fuchsia;
-        border-radius: 50%;
+        border-radius: $notification-dot-badge-size;
         color: $white;
-        font-size: $font-size-sm;
-        line-height: $font-size-sm;
-        padding: $spacing-0;
+        width: $notification-dot-badge-size;
+        height: $notification-dot-badge-size;
         position: absolute;
-        left: 25px;
-        top: 0;
+        left: 28px;
+        top: 2px;
     }
 
     .toolbar-notifications {