Fix(cookie-banner): fix visuals to adhere to figma prototype (#472)

* fix(cookie-banner): fixed visuals to adhere to figma prototype * chore(cookie-banner): refoactored cookie banner to have similar html structure to other banners

Author: opaduchak

src/app/core/components/osf-banners/cookie-consent-banner/cookie-consent-banner.component.html

@@ -1,16 +1,17 @@
 @if (displayBanner()) {
- <div class="cookie-consent-container" @fadeInOut>
- <div class="w-full p-message">
- <div class="grid flex-row p-message-content">
- <div class="col">{{ 'toast.cookie-consent.message' | translate }}</div>
- <div class="col-fixed flex justify-content-end">
- <p-button
- type="button"
- [label]="'toast.cookie-consent.accept' | translate"
- (onClick)="acceptCookies()"
- ></p-button>
+ <div class="p-3">
+ <p-message styleClass="w-full" severity="warn">
+ <ng-template #container>
+ <div class="grid flex-column w-full">
+ <div class="flex items-center align-items-start gap-2 font-medium">
+ <osf-icon iconClass="fas fa-triangle-exclamation"></osf-icon>
+ {{ 'toast.cookie-consent.message' | translate }}
+ </div>
+ <div class="row-fixed flex justify-content-end">
+ <p-button link [label]="'toast.cookie-consent.accept' | translate" (onClick)="acceptCookies()"> </p-button>
+ </div>
  </div>
- </div>
- </div>
+ </ng-template>
+ </p-message>
  </div>
 }

src/app/core/components/osf-banners/cookie-consent-banner/cookie-consent-banner.component.scss

@@ -1,23 +0,0 @@
-@use "styles/mixins" as mix;
-
-.cookie-consent-container {
- padding: 1rem !important;
- display: block !important;
-
- .p-message {
- background-color: #886d3f;
- color: var(--white);
- width: 100%;
- border-radius: var(--p-message-border-radius, 6px);
- outline-width: var(--p-message-border-width, 1px);
- outline-style: solid;
-
- .p-message-content {
- display: flex;
- align-items: center;
- padding: var(--p-message-content-padding, 1.5rem);
- gap: var(--p-message-content-gap, 0.5rem);
- height: 100%;
- }
- }
-}

src/app/core/components/osf-banners/cookie-consent-banner/cookie-consent-banner.component.ts

@@ -2,10 +2,12 @@ import { CookieService } from 'ngx-cookie-service';
 import { TranslatePipe } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
+import { Message } from 'primeng/message';
 
 import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
 
 import { fadeInOutAnimation } from '@core/animations/fade.in-out.animation';
+import { IconComponent } from '@shared/components';
 
 /**
  * Displays a cookie consent banner until the user accepts.
@@ -19,7 +21,7 @@ import { fadeInOutAnimation } from '@core/animations/fade.in-out.animation';
  selector: 'osf-cookie-consent-banner',
  templateUrl: './cookie-consent-banner.component.html',
  styleUrls: ['./cookie-consent-banner.component.scss'],
- imports: [Button, TranslatePipe],
+ imports: [Button, TranslatePipe, IconComponent, Message],
  animations: [fadeInOutAnimation],
  changeDetection: ChangeDetectionStrategy.OnPush,
 })