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

console-webapp/src/app/support/support.component.html

@@ -0,0 +1,45 @@
+<div class="console-app__support">
+  <h1 class="mat-headline-4">Support</h1>
+  <p class="text-xl">
+    Our support team can assist you with any technical or operational questions
+    you may have regarding our registry services.
+  </p>
+  <mat-divider></mat-divider>
+  <h1>Email</h1>
+  <p class="text-l">
+    For help with OT&E sandbox and certification, or new technical requirements
+    for any of our new TLD launches.
+  </p>
+  <a class="text-l" href="mailto:registry-integration@google.com"
+    >registry-integration&#64;google.com</a
+  >
+  <p class="text-l">
+    For general purpose questions once you are integrated with our registry
+    system. If the issue is urgent, please put "Urgent" in the email title.
+  </p>
+  <a class="text-l" href="mailto:{{ userDataService.userData.supportEmail }}">{{
+    userDataService.userData.supportEmail
+  }}</a>
+  <p class="secondary-text">
+    Note: You may receive occasional service announcements via
+    registrar-announcement&#64;google.com. You will not be able to reply to
+    those messages.
+  </p>
+  <h1>Phone</h1>
+  <p class="text-l">For general support inquiries 24/7:</p>
+  <a
+    class="text-l"
+    href="tel:{{ userDataService.userData.supportPhoneNumber }}"
+    >{{ userDataService.userData.supportPhoneNumber }}</a
+  >
+  @if (userDataService.userData.passcode) {
+  <p class="text-l">Your telephone passcode:</p>
+  <p class="text-l console-app__support-passcode">
+    {{ userDataService.userData.passcode }}
+  </p>
+  <p class="secondary-text">
+    Note: Please be ready with your account name and telephone passcode when
+    contacting us by phone.
+  </p>
+  }
+</div>

console-webapp/src/app/support/support.component.scss

@@ -0,0 +1,22 @@
+.console-app {
+  &__support {
+    max-width: 616px;
+    &-passcode {
+      color: #1e8e3e;
+    }
+    p {
+      margin: 20px 0;
+    }
+    a {
+      margin-bottom: 30px;
+      display: inline-block;
+    }
+    mat-divider {
+      margin-bottom: 30px;
+    }
+    .secondary-text {
+      margin-bottom: 50px;
+      margin-top: -20px;
+    }
+  }
+}

console-webapp/src/app/support/support.component.ts

@@ -0,0 +1,26 @@
+// 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';
+import { UserDataService } from '../shared/services/userData.service';
+
+@Component({
+  selector: 'app-support',
+  templateUrl: './support.component.html',
+  styleUrls: ['./support.component.scss'],
+})
+export class SupportComponent {
+  public static PATH = 'support';
+  constructor(protected userDataService: UserDataService) {}
+}