fix(cookie-banner): fixed visuals to adhere to figma prototype

Author: opaduchak

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

@@ -1,11 +1,14 @@
 @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">
+      <div class="grid flex-column p-message-content">
+        <div class="row p-message-text">
+          <i class="pi pi-exclamation-triangle"></i>
+          {{ 'toast.cookie-consent.message' | translate }}
+        </div>
+        <div class="row-fixed flex justify-content-end p-message-button">
           <p-button
-            type="button"
+            variant="text"
             [label]="'toast.cookie-consent.accept' | translate"
             (onClick)="acceptCookies()"
           ></p-button>

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

@@ -5,19 +5,26 @@
   display: block !important;
 
   .p-message {
-    background-color: #886d3f;
-    color: var(--white);
+    background-color: var(--yellow-2);
+    color: var(--yellow-1);
+
     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%;
+
+      .p-message-text {
+        font-weight: bold;
+        align-items: center;
+      }
+
+      .p-message-button {
+        align-items: end;
+      }
     }
   }
 }