feat: Switched styling to Bootstrap and applied basic stylings

[demos/kafka/chat] / src / app / user / user.component.html

diff --git a/src/app/user/user.component.html b/src/app/user/user.component.html
index de14e7b..6108608 100644 (file)
--- a/src/app/user/user.component.html
+++ b/src/app/user/user.component.html
@@ -1,6 +1,15 @@
-<div>
-  <label for="name">Name: </label>
-  <input id="name" type="text" [formControl]="name">
-  <button type="button" (click)="updateName()">Update Name</button>
+<div class="panel panel-primary">
+  <div class="panel-heading">
+    <h3 class="panel-title">Please pick a Username</h3>
+  </div>
+  <div class="panel-body form-inline">
+    <div class="form-group">
+      <div class="input-group input-group-primary">
+        <label for="name" class="input-group-addon">Username</label>
+        <input id="name" type="text" class="form-control" placeholder="Enter your username" [formControl]="name">
+      </div>
+    </div>
+    <button type="submit" class="btn btn-primary" (click)="updateName()">Pick Name</button>
+  </div>
 </div>
 <p>Value: {{ name.value }}</p>