Restyle registrar console based on the new design proposal (#2336)

console-webapp/src/app/shared/components/notifications/notifications.component.html

@@ -0,0 +1,16 @@
+<div class="console-app__notifications">
+  @for (notification of mockNotifications; track notification.id) {
+  <div class="console-app__notification">
+    <div class="console-app__notification-content">
+      <button mat-mini-fab color="primary" disabled>
+        <mat-icon mat-mini-fab color="primary"> calendar_month </mat-icon>
+      </button>
+      <h4>{{ notification.text }}</h4>
+    </div>
+
+    <button mat-icon-button>
+      <mat-icon>close</mat-icon>
+    </button>
+  </div>
+  }
+</div>

console-webapp/src/app/shared/components/notifications/notifications.component.scss

@@ -0,0 +1,23 @@
+.console-app {
+  &__notifications {
+    margin-bottom: 40px;
+  }
+  &__notification {
+    padding: 20px;
+    background-color: var(--lightest);
+    border-radius: 10px;
+    margin-bottom: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    &-content {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    h4 {
+      margin: 0;
+      padding: 0;
+    }
+  }
+}

console-webapp/src/app/shared/components/notifications/notifications.component.ts

@@ -0,0 +1,37 @@
+// Copyright 2024 The Nomulus Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Component } from '@angular/core';
+
+interface Notification {
+  id: string;
+  date: Date;
+  text: string;
+}
+
+@Component({
+  selector: 'app-notifications',
+  templateUrl: './notifications.component.html',
+  styleUrls: ['./notifications.component.scss'],
+})
+export class NotificationsComponent {
+  protected mockNotifications: Notification[] = [
+    {
+      id: '0',
+      date: new Date(),
+      text: 'Registry Downtime Planned on June 9, 2024 due to maintenance.',
+    },
+  ];
+  constructor() {}
+}