styling

todo-app/todo-app/src/app/todo/components/todo-list/todo-list.component.html

@@ -1,5 +1,5 @@
 <div class="row justify-content-center">
-    <div class="todo-item-list col-4 m-2 p-2 border rounded">
+    <div class="todo-item-list col-4 m-2 p-2 border rounded bg-white">
         <h2>TODO:</h2>
         <app-todo-item *ngFor="let todoItem of todoItemList" 
         [id]="todoItem.id" 
@@ -9,7 +9,7 @@
         (delete)="onDelete($event)"
         (doneChange)="onDone($event)"></app-todo-item>
     </div>
-    <div class="done-item-list col-4 m-2 p-2 border rounded">
+    <div class="done-item-list col-4 m-2 p-2 border rounded bg-white">
         <h2>DONE:</h2>
         <app-todo-item *ngFor="let todoItem of doneItemList" 
         [id]="todoItem.id" 

todo-app/todo-app/src/app/user/components/base/base.component.html

@@ -2,8 +2,8 @@
     <div class="col-4"></div>
     <div class="col-4"><h1 class="text-center">TODO LIST</h1></div>
     <div class="col-4 d-flex justify-content-end">
-        <div class="d-flex justify-content-center flex-column mr-3">{{ userName }} ({{ fullName }})</div>
-        <button (click)="onLogout()" class="btn btn-primary">Log out</button>
+        <div *ngIf="userName" class="d-flex justify-content-center flex-column mr-3">{{ userName }} ({{ fullName }})</div>
+        <button *ngIf="userName" (click)="onLogout()" class="btn btn-primary">Log out</button>
     </div>
 </div>
 <router-outlet></router-outlet>

todo-app/todo-app/src/app/user/components/login/login.component.html

@@ -1,4 +1,3 @@
-<h1 class="text-center">TODO LIST</h1>
 <div class="login-form-container d-flex justify-content-center">
   <div class="d-flex flex-column">
     <form [formGroup]="loginForm" class="login-form d-flex flex-column mt-5">

todo-app/todo-app/src/app/user/components/register/register.component.html

@@ -1,4 +1,3 @@
-<h1 class="text-center">TODO LIST</h1>
 <div class="register-form-container d-flex justify-content-center">
   <div class="d-flex flex-column">
     <form [formGroup]="registerForm" class="register-form d-flex flex-column mt-5">

todo-app/todo-app/src/app/user/user-routing.module.ts

@@ -1,13 +1,19 @@
+import { BaseComponent } from './components/base/base.component';
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { LoginComponent } from './components/login/login.component';
 import { RegisterComponent } from './components/register/register.component';
 
-
 const routes: Routes = [
+    {
+      path: '',
+      component: BaseComponent,
+      children: [
         { path: '', redirectTo: 'login', pathMatch: 'full'},
         { path: 'login', component: LoginComponent },
         { path: 'register', component: RegisterComponent }
+      ]
+    }
 ];
 
 @NgModule({

todo-app/todo-app/src/styles.scss

@@ -5,3 +5,7 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
 
 /* Importing Bootstrap SCSS file. */
 @import '~bootstrap/scss/bootstrap';
+
+body {
+    background-color: #FFFFE8;
+}