From f9d9f8e0a51904e667e23aab273b82c992ad300e Mon Sep 17 00:00:00 2001
From: Kai Moritz <kai@juplo.de>
Date: Sat, 16 May 2020 08:47:21 +0200
Subject: [PATCH] 5: Add In-app Navigation f) Added minor HTML-fixes and
 missing CSS

---
 src/app/hero-detail/hero-detail.component.css | 30 +++++++++++++++++++
 .../hero-detail/hero-detail.component.html    |  5 ++--
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/app/hero-detail/hero-detail.component.css b/src/app/hero-detail/hero-detail.component.css
index e69de29..835a13d 100644
--- a/src/app/hero-detail/hero-detail.component.css
+++ b/src/app/hero-detail/hero-detail.component.css
@@ -0,0 +1,30 @@
+/* HeroDetailComponent's private CSS styles */
+label {
+  display: inline-block;
+  width: 3em;
+  margin: .5em 0;
+  color: #607D8B;
+  font-weight: bold;
+}
+input {
+  height: 2em;
+  font-size: 1em;
+  padding-left: .4em;
+}
+button {
+  margin-top: 20px;
+  font-family: Arial;
+  background-color: #eee;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+button:hover {
+  background-color: #cfd8dc;
+}
+button:disabled {
+  background-color: #eee;
+  color: #ccc;
+  cursor: auto;
+}
diff --git a/src/app/hero-detail/hero-detail.component.html b/src/app/hero-detail/hero-detail.component.html
index 29f8495..540f0f0 100644
--- a/src/app/hero-detail/hero-detail.component.html
+++ b/src/app/hero-detail/hero-detail.component.html
@@ -5,8 +5,9 @@
   <h2>{{hero.name | uppercase}} Details</h2>
   <div><span>id: </span>{{hero.id}}</div>
   <div>
-    <label>name: </label>
-    <input [(ngModel)]="hero.name" placeholder="Type a name..." />
+    <label>name:
+      <input [(ngModel)]="hero.name" placeholder="name"/>
+    </label>
   </div>
 </div>
 <button (click)="goBack()">go back</button>
-- 
2.20.1