feat(eng-8901-5): finished css with colors

Author: bp-cos

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

@@ -1,6 +1,6 @@
 @if (this.displayBanner()) {
- <div class="p-3" @fadeInOut>
- <div class="p-message">
+ <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">

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

@@ -1,3 +1,23 @@
-.p-message {
- width: 100%;
+@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/scheduled-banner/scheduled-banner.component.scss

@@ -0,0 +1,3 @@
+.w-full {
+ height: 108px !important;
+}

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

@@ -19,6 +19,7 @@ import { BannersSelector, GetCurrentScheduledBanner } from '@osf/shared/stores/b
 @Component({
  selector: 'osf-scheduled-banner',
  templateUrl: './scheduled-banner.component.html',
+ styleUrls: ['./scheduled-banner.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ScheduledBannerComponent implements OnInit {