Add introduction, apps and more

app/m3-theme.scss

@@ -4,106 +4,106 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-// Note: Color palettes are generated from primary: #C38300
+// Note: Color palettes are generated from primary: #63A002
 $_palettes: (
   primary: (
     0: #000000,
-    10: #291800,
-    20: #442b00,
-    25: #533500,
-    30: #624000,
-    35: #714a00,
-    40: #815500,
-    50: #a26c00,
-    60: #c48401,
-    70: #e39e27,
-    80: #ffb94c,
-    90: #ffddb2,
-    95: #ffeedc,
-    98: #fff8f4,
-    99: #fffbff,
+    10: #102000,
+    20: #1f3700,
+    25: #264300,
+    30: #2f4f00,
+    35: #375c00,
+    40: #3f6900,
+    50: #518500,
+    60: #64a104,
+    70: #7dbd2a,
+    80: #97d945,
+    90: #b2f65f,
+    95: #d2ff9b,
+    98: #f0ffd7,
+    99: #f9ffe9,
     100: #ffffff,
   ),
   secondary: (
     0: #000000,
-    10: #271904,
-    20: #3e2e16,
-    25: #4a3820,
-    30: #56442a,
-    35: #624f35,
-    40: #6f5b40,
-    50: #897457,
-    60: #a48d6f,
-    70: #c0a787,
-    80: #ddc2a1,
-    90: #fadebc,
-    95: #ffeedc,
-    98: #fff8f4,
-    99: #fffbff,
+    10: #151e0b,
+    20: #2a331e,
+    25: #353f29,
+    30: #404a33,
+    35: #4c563e,
+    40: #586249,
+    50: #707b61,
+    60: #8a9579,
+    70: #a4af93,
+    80: #bfcbad,
+    90: #dce7c8,
+    95: #eaf5d5,
+    98: #f2fede,
+    99: #f9ffe9,
     100: #ffffff,
   ),
   tertiary: (
     0: #000000,
-    10: #0f2004,
-    20: #243516,
-    25: #2e4020,
-    30: #3a4c2a,
-    35: #455835,
-    40: #516440,
-    50: #697d57,
-    60: #82976f,
-    70: #9cb288,
-    80: #b7cea2,
-    90: #d3eabc,
-    95: #e1f8ca,
-    98: #efffdb,
-    99: #f8ffeb,
+    10: #00201e,
+    20: #003735,
+    25: #104240,
+    30: #1f4e4b,
+    35: #2c5a57,
+    40: #386663,
+    50: #517f7c,
+    60: #6b9995,
+    70: #85b4b0,
+    80: #a0d0cb,
+    90: #bcece7,
+    95: #cafaf6,
+    98: #e3fffc,
+    99: #f2fffd,
     100: #ffffff,
   ),
   neutral: (
     0: #000000,
-    10: #1f1b16,
-    20: #34302a,
-    25: #403b35,
-    30: #4b4640,
-    35: #57514b,
-    40: #635d57,
-    50: #7d766f,
-    60: #978f88,
-    70: #b2aaa2,
-    80: #cec5bd,
-    90: #eae1d9,
-    95: #f9efe7,
-    98: #fff8f4,
-    99: #fffbff,
+    10: #1b1c18,
+    20: #30312c,
+    25: #3b3c37,
+    30: #464742,
+    35: #52534d,
+    40: #5e5f59,
+    50: #777771,
+    60: #91918b,
+    70: #abaca5,
+    80: #c7c7c0,
+    90: #e3e3db,
+    95: #f2f1e9,
+    98: #fafaf2,
+    99: #fdfcf5,
     100: #ffffff,
-    4: #110e09,
-    6: #16130e,
-    12: #231f1a,
-    17: #2e2924,
-    22: #39342e,
-    24: #3d3833,
-    87: #e2d8d0,
-    92: #f0e7de,
-    94: #f6ece4,
-    96: #fcf2ea,
+    4: #0d0f0b,
+    6: #121410,
+    12: #1f201c,
+    17: #292a26,
+    22: #343530,
+    24: #383a35,
+    87: #dbdad3,
+    92: #e9e8e1,
+    94: #efeee7,
+    96: #f5f4ec,
   ),
   neutral-variant: (
     0: #000000,
-    10: #221a10,
-    20: #382f24,
-    25: #433a2e,
-    30: #4f4539,
-    35: #5b5144,
-    40: #675d50,
-    50: #817567,
-    60: #9b8f80,
-    70: #b7a99a,
-    80: #d3c4b4,
-    90: #f0e0cf,
-    95: #feeedd,
-    98: #fff8f4,
-    99: #fffbff,
+    10: #191d14,
+    20: #2e3228,
+    25: #393d32,
+    30: #44483d,
+    35: #505449,
+    40: #5c6054,
+    50: #75796c,
+    60: #8f9285,
+    70: #a9ad9f,
+    80: #c5c8ba,
+    90: #e1e4d5,
+    95: #eff2e3,
+    98: #f8fbeb,
+    99: #fbfeee,
     100: #ffffff,
   ),
   error: (
@@ -140,12 +140,12 @@ $light-theme: mat.define-theme((
     theme-type: light,
     primary: $_primary,
     tertiary: $_tertiary,
-  )
+  ),
 ));
 $dark-theme: mat.define-theme((
   color: (
     theme-type: dark,
     primary: $_primary,
     tertiary: $_tertiary,
-  )
+  ),
 ));

app/src/app/app.routes.ts

@@ -6,6 +6,15 @@ export const routes: Routes = [
     pathMatch: 'full',
     redirectTo: 'dashboard',
   },
+  {
+    path: 'introduction',
+    loadComponent: () =>
+      import('./introduction/introduction.component').then(
+        (c) => c.IntroductionComponent
+      ),
+      title: 'Introduction',
+      data: { icon: 'lightbulb' }
+  },
   {
     path: 'dashboard',
     loadComponent: () =>
@@ -33,6 +42,15 @@ export const routes: Routes = [
       title: 'Marketplace',
       data: { icon: 'storefront' }
   },
+  {
+    path: 'apps',
+    loadComponent: () =>
+      import('./apps/apps.component').then(
+        (c) => c.AppsComponent
+      ),
+      title: 'Apps',
+      data: { icon: 'apps' }
+  },
   {
     path: 'registries',
     loadComponent: () =>
@@ -51,6 +69,24 @@ export const routes: Routes = [
       title: 'Data',
       data: { icon: 'source' }
   },
+  {
+    path: 'identity',
+    loadComponent: () =>
+      import('./identity/identity.component').then(
+        (c) => c.IdentityComponent
+      ),
+      title: 'Identity',
+      data: { icon: 'account_circle' }
+  },
+  {
+    path: 'settings',
+    loadComponent: () =>
+      import('./settings/settings.component').then(
+        (c) => c.SettingsComponent
+      ),
+      title: 'Settings',
+      data: { icon: 'settings' }
+  },
   {
     path: 'address',
     loadComponent: () =>
@@ -87,13 +123,4 @@ export const routes: Routes = [
       title: 'Drag-Drop',
       data: { icon: 'folder' }
   },
-  {
-    path: 'identity',
-    loadComponent: () =>
-      import('./identity/identity.component').then(
-        (c) => c.IdentityComponent
-      ),
-      title: 'Identity',
-      data: { icon: 'account_circle' }
-  },
 ];

app/src/app/apps/apps.component.html

@@ -0,0 +1 @@
+<p>apps works!</p>

app/src/app/apps/apps.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AppsComponent } from './apps.component';
+
+describe('AppsComponent', () => {
+  let component: AppsComponent;
+  let fixture: ComponentFixture<AppsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AppsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

app/src/app/apps/apps.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-apps',
+  standalone: true,
+  imports: [],
+  templateUrl: './apps.component.html',
+  styleUrl: './apps.component.scss'
+})
+export class AppsComponent {
+
+}

app/src/app/dashboard/dashboard.component.html

@@ -1,26 +1,47 @@
 <div class="grid-container">
   <h1 class="mat-h1">Dashboard</h1>
+
+  <mat-card>
+    <mat-card-header>
+      <mat-card-title>Read the introduction</mat-card-title>
+      <mat-card-subtitle
+        >New to Ariton (alpha)? Check out the introduction.</mat-card-subtitle
+      >
+    </mat-card-header>
+    <mat-card-actions>
+      <button mat-button [routerLink]="['/introduction']">
+        READ INTRODUCTION
+      </button>
+      <button mat-button>HIDE</button>
+    </mat-card-actions>
+  </mat-card>
+
   <mat-grid-list cols="2" rowHeight="350px">
     @for (card of cards | async; track card) {
-      <mat-grid-tile [colspan]="card.cols" [rowspan]="card.rows">
-        <mat-card class="dashboard-card">
-          <mat-card-header>
-            <mat-card-title>
-              {{card.title}}
-              <button mat-icon-button class="more-button" [matMenuTriggerFor]="menu" aria-label="Toggle menu">
-                <mat-icon>more_vert</mat-icon>
-              </button>
-              <mat-menu #menu="matMenu" xPosition="before">
-                <button mat-menu-item>Expand</button>
-                <button mat-menu-item>Remove</button>
-              </mat-menu>
-            </mat-card-title>
-          </mat-card-header>
-          <mat-card-content class="dashboard-card-content">
-            <div>Card Content Here</div>
-          </mat-card-content>
-        </mat-card>
-      </mat-grid-tile>
+    <mat-grid-tile [colspan]="card.cols" [rowspan]="card.rows">
+      <mat-card class="dashboard-card">
+        <mat-card-header>
+          <mat-card-title>
+            {{ card.title }}
+            <button
+              mat-icon-button
+              class="more-button"
+              [matMenuTriggerFor]="menu"
+              aria-label="Toggle menu"
+            >
+              <mat-icon>more_vert</mat-icon>
+            </button>
+            <mat-menu #menu="matMenu" xPosition="before">
+              <button mat-menu-item>Expand</button>
+              <button mat-menu-item>Remove</button>
+            </mat-menu>
+          </mat-card-title>
+        </mat-card-header>
+        <mat-card-content class="dashboard-card-content">
+          <div>Card Content Here</div>
+        </mat-card-content>
+      </mat-card>
+    </mat-grid-tile>
     }
   </mat-grid-list>
 </div>

app/src/app/dashboard/dashboard.component.ts

@@ -10,6 +10,7 @@ import { MatCardModule } from '@angular/material/card';
 import { Web5 } from '@web5/api';
 import { VerifiableCredential } from '@web5/credentials';
 import { IdentityService } from '../identity.service';
+import { RouterModule } from '@angular/router';
 
 @Component({
   selector: 'app-dashboard',
@@ -22,7 +23,8 @@ import { IdentityService } from '../identity.service';
     MatMenuModule,
     MatIconModule,
     MatButtonModule,
-    MatCardModule
+    MatCardModule,
+    RouterModule
   ]
 })
 export class DashboardComponent {