feat(web): add npl icon in app, styles, tooltip

Author: ngfelixl

apps/web/src/app/app.module.ts

@@ -16,6 +16,7 @@ import { SocketService } from './services/socket.service';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 @NgModule({
   declarations: [
@@ -36,6 +37,7 @@ import { MatIconModule } from '@angular/material/icon';
     DragDropModule,
     MatCardModule,
     MatIconModule,
+    MatTooltipModule,
   ],
   providers: [PlotsService, SocketService],
   bootstrap: [AppComponent],

apps/web/src/app/components/app/app.component.css

@@ -32,3 +32,7 @@ mat-toolbar {
   width: 24px;
   height: 24px;
 }
+
+.green {
+  color: #00ff2a;
+}

apps/web/src/app/components/app/app.component.html

@@ -1,18 +1,34 @@
-<mat-toolbar color="primary">
+<mat-toolbar color="primary" class="mat-elevation-z4">
   <span class="brand" routerLink="/">
-    <button mat-flat-button color="primary">NodePlotLib</button>
+    <button mat-button>
+      <img
+        src="./assets/nodeplotlib_64x64_transparent.png"
+        alt="NodePlotLib Brand Icon"
+        height="32px"
+        width="32px"
+      />
+      <span>
+        <span class="green">N</span>ode<span class="green">P</span>lot<span
+          class="green"
+          >L</span
+        >ib
+      </span>
+    </button>
   </span>
   <span class="info-icons">
-    <button mat-icon-button routerLink="tutorial">
+    <button mat-icon-button routerLink="tutorial" matTooltip="Tutorial">
       <mat-icon>tips_and_updates</mat-icon>
     </button>
-    <a href="https://plotly.com/javascript/" target="_blank"
-      ><button mat-icon-button>
-        <img src="/assets/plotly.svg" /></button
+    <a href="https://plotly.com/javascript/" target="_blank" rel="noreferrer"
+      ><button mat-icon-button matTooltip="Plotly.js Documentation">
+        <img src="/assets/plotly.svg" alt="Plotly.js Icon" /></button
     ></a>
-    <a href="https://github.com/ngfelixl/nodeplotlib" target="_blank"
+    <a
+      href="https://github.com/ngfelixl/nodeplotlib"
+      target="_blank"
+      rel="noreferrer"
       ><button mat-icon-button>
-        <img src="/assets/github-light-32px.png" /></button
+        <img src="/assets/github-light-32px.png" alt="Github Icon" /></button
     ></a>
   </span>
 </mat-toolbar>

apps/web/src/app/components/plots/plots.component.css

@@ -2,6 +2,6 @@
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
   grid-gap: 8px;
-  margin: 8px;
+  margin: 12px;
   grid-template-rows: auto;
 }

apps/web/src/app/components/tutorial/tutorial.component.css

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  margin: 18px;
+}

apps/web/src/styles.css

@@ -8,3 +8,10 @@ body {
   margin: 0;
   font-family: Roboto, 'Helvetica Neue', sans-serif;
 }
+
+.brand .mat-button-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 1.2em;
+}