Improve look & feel

src/app/apps/apps.component.css

@@ -1,3 +1,8 @@
 .mdc-card {
     margin-bottom: 10px;
+}
+
+.device-card {
+    background-color:#f5f5f5;
+    margin-bottom: 30px;
 }

src/app/apps/apps.component.html

@@ -1,16 +1,23 @@
-<h1>{{device?.name}}</h1>
-<mat-card>
-    <mat-card-header>
-      <img mat-card-avatar [src]="device?.imageThumbnail"  alt="Device"/>
-      <mat-card-title>{{device?.name}}</mat-card-title>
-      <mat-card-subtitle>{{device?.manufacturer}}</mat-card-subtitle>
 
+<p>
+  <a routerLink="/">Back to Device Overview</a>
+</p>
+<mat-card class="device-card">
+    <mat-card-header>
+      <mat-card-title-group>
+        <img mat-card-sm-image [src]="device?.image"  alt="Device"/>
+        <mat-card-title>{{device?.name}}</mat-card-title>
+        <mat-card-subtitle>{{device?.manufacturer}}</mat-card-subtitle>
+      </mat-card-title-group>
     </mat-card-header>
-
-    <mat-card-content>{{device?.description}}</mat-card-content>
+    <mat-card-content>
+      <p>{{device?.description}}</p>
+      <p>Learn more about the <a [href]="device?.productLink" target="_blank">{{device?.name}}</a></p>
+    </mat-card-content>
 </mat-card>
 
 
+<h1>Applications</h1>
 <mat-card *ngFor="let app of apps">
   <mat-card-header>
     <img mat-card-avatar [src]="app.appIcon" alt="Device"/>

src/app/devices/devices.component.html

@@ -1,3 +1,4 @@
+<h1>Devices</h1>
 <mat-card *ngFor="let device of devices">
     <mat-card-header>
       <img mat-card-avatar [src]="device.imageThumbnail"  alt="Device"/>

src/app/flasher/flasher.component.html

@@ -1,3 +1,7 @@
+<p>
+  <a [routerLink]="['/device', device?.id]">Back to App Overview</a>
+</p>
+
 <mat-card>
     <mat-card-header>
       <img mat-card-avatar [src]="app?.appIcon" alt="Device"/>

src/app/models/device.ts

@@ -3,6 +3,7 @@ export interface Device {
     name: string;
     manufacturer: string;
     imageThumbnail: string;
+    image: string;
     productLink: string;
     description: string;
 }

src/assets/devices.json

@@ -4,7 +4,8 @@
         "name": "Pendrive S3",
         "manufacturer": "ThingPulse",
         "imageThumbnail": "assets/devices/pendrive-s3/pendrive-s3-thumb.jpg",
-        "productLink": "https://thingpulse.com/product/pendrive-s3/",
-        "description": "The Pendrive S3 is a USB flash drive that can be used to store data or to run a custom firmware on a ThingPulse device."
+        "image": "assets/devices/pendrive-s3/pendrive-s3.jpg",
+        "productLink": "https://thingpulse.com/product/esp32-s3-pendrive-s3-128mb/",
+        "description": "The ThingPulse Pendrive S3 is an ESP32-S3 device with USB-C plug, WS2812B RGB LED and 128MB of flash. With the help of TinyUSB the ESP32-S3 can pretend to be many USB devices, such as keyboard, mouse, memory stick etc."
     }
 ]