feat: Switched styling to Bootstrap and applied basic stylings

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 014c6b0..2b60aa8 100644 (file)
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,2 +1,13 @@
-<h1>{{title}}</h1>
-<router-outlet></router-outlet>
+<!-- Static navbar -->
+<nav class="navbar navbar-primary navbar-static-top">
+  <div class="container">
+    <div class="navbar-header">
+      <a class="navbar-brand" href="#">{{title}}</a>
+    </div>
+  </div>
+</nav>
+
+
+<div class="container">
+  <router-outlet></router-outlet>
+</div> <!-- /container -->

diff --git a/src/app/chatrooms/chatrooms.component.html b/src/app/chatrooms/chatrooms.component.html
index bea9473..c265675 100644 (file)
--- a/src/app/chatrooms/chatrooms.component.html
+++ b/src/app/chatrooms/chatrooms.component.html
@@ -1,9 +1,8 @@
-<h2>Available Chatrooms</h2>
-<ul class="chatrooms">
-  <li *ngFor="let chatroom of chatrooms">
-    <button type="button">
-      <span class="badge">{{chatroom.id}}</span>
-      <span class="name">{{chatroom.name}}</span>
-    </button>
-  </li>
-</ul>
+<div class="panel panel-primary">
+  <div class="panel-heading">
+    <h3 class="panel-title">Please Choose a Chat-Room</h3>
+  </div>
+  <div class="panel-body">
+    <button *ngFor="let chatroom of chatrooms" type="button" class="btn btn-default btn-lg btn-block">{{chatroom.name}}</button>
+  </div>
+</div>

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>

diff --git a/src/styles.less b/src/styles.less
index c1f208a..37292bf 100644 (file)
--- a/src/styles.less
+++ b/src/styles.less
@@ -1,44 +1 @@
-/* Application-wide Styles */
-h1 {
-  color: #369;
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: 250%;
-}
-h2, h3 {
-  color: #444;
-  font-family: Arial, Helvetica, sans-serif;
-  font-weight: lighter;
-}
-body {
-  margin: 2em;
-}
-body, input[type="text"], button {
-  color: #333;
-  font-family: Cambria, Georgia, serif;
-}
-button {
-  background-color: #eee;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  color: black;
-  font-size: 1.2rem;
-  padding: 1rem;
-  margin-right: 1rem;
-  margin-bottom: 1rem;
-  margin-top: 1rem;
-}
-button:hover {
-  background-color: black;
-  color: white;
-}
-button:disabled {
-  background-color: #eee;
-  color: #aaa;
-  cursor: auto;
-}
-
-/* everywhere else */
-* {
-  font-family: Arial, Helvetica, sans-serif;
-}
+@import url('https://unpkg.com/bootstrap@3.4.1/dist/css/bootstrap.min.css');