Restyle console based on the new design proposal

console-webapp/angular.json

@@ -73,18 +73,18 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "console-webapp:build:production"
+              "buildTarget": "console-webapp:build:production"
             },
             "development": {
-              "browserTarget": "console-webapp:build:development"
+              "buildTarget": "console-webapp:build:development"
             }
           },
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "console-webapp:build"
+            "buildTarget": "console-webapp:build"
           }
         },
         "test": {

console-webapp/build.gradle

@@ -1,4 +1,4 @@
-// Copyright 2022 The Nomulus Authors. All Rights Reserved.
+// 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.

console-webapp/src/app/app-routing.module.ts

@@ -1,4 +1,4 @@
-// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+// 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.
@@ -13,69 +13,106 @@
 // limitations under the License.
 
 import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { TldsComponent } from './tlds/tlds.component';
+import { Route, RouterModule } from '@angular/router';
+import { BillingInfoComponent } from './billingInfo/billingInfo.component';
+import { DomainListComponent } from './domains/domainList.component';
 import { HomeComponent } from './home/home.component';
-import { SettingsComponent } from './settings/settings.component';
-import SettingsContactComponent from './settings/contact/contact.component';
-import SettingsWhoisComponent from './settings/whois/whois.component';
-import SettingsUsersComponent from './settings/users/users.component';
-import SettingsSecurityComponent from './settings/security/security.component';
-import { RegistrarGuard } from './registrar/registrar.guard';
+import { RegistrarDetailsComponent } from './registrar/registrarDetails.component';
 import { RegistrarComponent } from './registrar/registrarsTable.component';
-import { EmptyRegistrar } from './registrar/emptyRegistrar.component';
+import { ResourcesComponent } from './resources/resources.component';
 import ContactComponent from './settings/contact/contact.component';
-import WhoisComponent from './settings/whois/whois.component';
 import SecurityComponent from './settings/security/security.component';
+import { SettingsComponent } from './settings/settings.component';
 import UsersComponent from './settings/users/users.component';
-import { DomainListComponent } from './domains/domainList.component';
+import WhoisComponent from './settings/whois/whois.component';
+import { SupportComponent } from './support/support.component';
 
-const routes: Routes = [
+export interface RouteWithIcon extends Route {
+  iconName?: string;
+}
+
+export const routes: RouteWithIcon[] = [
   { path: '', redirectTo: '/home', pathMatch: 'full' },
   { path: 'registrars', component: RegistrarComponent },
-  { path: 'empty-registrar', component: EmptyRegistrar },
-  { path: 'home', component: HomeComponent, canActivate: [RegistrarGuard] },
-  { path: 'tlds', component: TldsComponent, canActivate: [RegistrarGuard] },
+  {
+    path: 'home',
+    component: HomeComponent,
+    title: 'Dashboard',
+    iconName: 'view_comfy_alt',
+  },
+  // { path: 'tlds', component: TldsComponent, title: "TLDs", iconName: "event_list" },
   {
     path: DomainListComponent.PATH,
     component: DomainListComponent,
-    canActivate: [RegistrarGuard],
+    title: 'Domains',
+    iconName: 'view_list',
   },
   {
     path: SettingsComponent.PATH,
     component: SettingsComponent,
+    title: 'Settings',
+    iconName: 'settings',
     children: [
       {
         path: '',
-        redirectTo: 'registrars',
+        redirectTo: ContactComponent.PATH,
         pathMatch: 'full',
       },
       {
         path: ContactComponent.PATH,
-        component: SettingsContactComponent,
-        canActivate: [RegistrarGuard],
+        component: ContactComponent,
+        title: 'Contacts',
       },
       {
         path: WhoisComponent.PATH,
-        component: SettingsWhoisComponent,
-        canActivate: [RegistrarGuard],
+        component: WhoisComponent,
+        title: 'WHOIS Info',
       },
       {
         path: SecurityComponent.PATH,
-        component: SettingsSecurityComponent,
-        canActivate: [RegistrarGuard],
+        component: SecurityComponent,
+        title: 'Security',
       },
       {
         path: UsersComponent.PATH,
-        component: SettingsUsersComponent,
-        canActivate: [RegistrarGuard],
-      },
-      {
-        path: RegistrarComponent.PATH,
-        component: RegistrarComponent,
+        component: UsersComponent,
       },
     ],
   },
+  // {
+  //   path: DomainListComponent.PATH,
+  //   component: DomainListComponent,
+  //   title: "EPP Console",
+  //   iconName: "upgrade"
+  // },
+  {
+    path: RegistrarComponent.PATH,
+    component: RegistrarComponent,
+    title: 'Registrars',
+    iconName: 'account_circle',
+  },
+  {
+    path: RegistrarDetailsComponent.PATH,
+    component: RegistrarDetailsComponent,
+  },
+  {
+    path: BillingInfoComponent.PATH,
+    component: BillingInfoComponent,
+    title: 'Billing Info',
+    iconName: 'credit_card',
+  },
+  {
+    path: ResourcesComponent.PATH,
+    component: ResourcesComponent,
+    title: 'Resources',
+    iconName: 'description',
+  },
+  {
+    path: SupportComponent.PATH,
+    component: SupportComponent,
+    title: 'Support',
+    iconName: 'help',
+  },
 ];
 
 @NgModule({

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

@@ -1,24 +1,19 @@
-<div class="console-app">
-  <app-header (toggleNavOpen)="sidenav.toggle()"></app-header>
+<div class="console-app mat-typography">
+  <app-header (toggleNavOpen)="toggleSidenav()"></app-header>
   <mat-sidenav-container class="console-app__container">
-    <mat-sidenav #sidenav class="console-app__sidebar">
-      <mat-nav-list>
-        <a mat-list-item [routerLink]="'/home'" routerLinkActive="active">
-          Home page
-        </a>
-        <a mat-list-item [routerLink]="'/tlds'" routerLinkActive="active">
-          TLDS
-        </a>
-        <a mat-list-item [routerLink]="'/settings'" routerLinkActive="active">
-          Settings
-        </a>
-      </mat-nav-list>
+    <mat-sidenav
+      [mode]="breakpointObserver.isMobileView() ? 'over' : 'side'"
+      [opened]="!breakpointObserver.isMobileView()"
+      #sidenav
+      class="console-app__sidebar"
+    >
+      <app-navigation />
     </mat-sidenav>
     <mat-sidenav-content class="console-app__content-wrapper">
       <div *ngIf="globalLoader.isLoading" class="console-app__global-spinner">
         <mat-progress-bar mode="indeterminate"></mat-progress-bar>
       </div>
-      <div class="console-app__content" *ngIf="renderRouter">
+      <div class="console-app__content">
         <router-outlet></router-outlet>
       </div>
     </mat-sidenav-content>

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+// 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.
@@ -13,8 +13,8 @@
 // limitations under the License.
 
 :host {
-  font-family: Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
-    "Segoe UI Emoji", "Segoe UI Symbol" !important;
+  font-family: "Google Sans", Roboto, Helvetica, Arial, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
   font-size: 14px;
   color: #333;
   box-sizing: border-box;
@@ -26,26 +26,18 @@
   display: flex;
   flex-direction: column;
   height: 100%;
+  background: #fff;
   &__container {
     flex: 1;
-    margin-top: -12px;
     padding-bottom: 36px;
+    background: transparent;
   }
   &__sidebar {
-    min-width: 300px;
-    a::before {
-      background-color: transparent;
-    }
-    .active {
-      background-color: var(--secondary);
-    }
-  }
-  &__content-wrapper {
-    margin: 12px 24px;
+    min-width: 240px;
+    border: 0;
   }
   &__content {
-    max-width: 1340px;
-    margin: 0 auto;
+    padding: 0 16px;
   }
   &__global-spinner {
     margin-bottom: 2rem;

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Nomulus Authors. All Rights Reserved.
+// 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.

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Nomulus Authors. All Rights Reserved.
+// 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.
@@ -12,45 +12,46 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { AfterViewInit, Component, ViewChild, effect } from '@angular/core';
+import { AfterViewInit, Component, ViewChild } from '@angular/core';
+import { MatSidenav } from '@angular/material/sidenav';
+import { NavigationEnd, Router } from '@angular/router';
 import { RegistrarService } from './registrar/registrar.service';
-import { UserDataService } from './shared/services/userData.service';
+import { BreakPointObserverService } from './shared/services/breakPoint.service';
 import { GlobalLoaderService } from './shared/services/globalLoader.service';
-import { NavigationEnd, Router } from '@angular/router';
-import { MatSidenav } from '@angular/material/sidenav';
+import { UserDataService } from './shared/services/userData.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
 })
 export class AppComponent implements AfterViewInit {
-  renderRouter: boolean = true;
-
-  @ViewChild('sidenav')
+  @ViewChild(MatSidenav)
   sidenav!: MatSidenav;
 
   constructor(
     protected registrarService: RegistrarService,
     protected userDataService: UserDataService,
     protected globalLoader: GlobalLoaderService,
-    protected router: Router
-  ) {
-    effect(() => {
-      if (registrarService.registrarId()) {
-        this.renderRouter = false;
-        setTimeout(() => {
-          this.renderRouter = true;
-        }, 400);
-      }
-    });
-  }
+    protected breakpointObserver: BreakPointObserverService,
+    private router: Router
+  ) {}
 
   ngAfterViewInit() {
     this.router.events.subscribe((event) => {
       if (event instanceof NavigationEnd) {
-        this.sidenav.close();
+        if (this.breakpointObserver.isMobileView()) {
+          this.sidenav.close();
+        }
       }
     });
   }
+
+  toggleSidenav() {
+    if (this.sidenav.opened) {
+      this.sidenav.close();
+    } else {
+      this.sidenav.open();
+    }
+  }
 }