update register/login component

Author: dev-assassin

src/app/login/login.component.html

@@ -12,7 +12,7 @@ <h1 class="header">Login with Firebase or Social Providers</h1>
           <input type="password" class="form-control" formControlName="password">
           <label class="error">{{errorMessage}}</label>
         </div>
-        <button type="submit" (click)="tryLogin(loginForm.value)" class="btn btn-default">Login</button>
+        <button type="submit" (click)="tryLogin(loginForm.value)" class="btn btn-success">Login</button>
       </form>
     </div>
   </div>
@@ -28,12 +28,7 @@ <h1 class="header">Login with Firebase or Social Providers</h1>
   </div>
   <div class="row">
     <div class="col-md-4 col-md-offset-4">
-      <button type="button" class="btn btn-info btn-block" (click)="tryTwitterLogin()">Login with Twitter</button>
-    </div>
-  </div>
-  <div class="row">
-    <div class="col-md-4 col-md-offset-4">
-      <p>No account yet? <a href="/register">Create an account</a></p>
+      <p>No account yet?&nbsp;&nbsp;<a href="/register">Create an account</a></p>
     </div>
   </div>
 </div>

src/app/register/register.component.html

@@ -13,7 +13,7 @@ <h1 class="header">Create an account with Firebase or Social Providers</h1>
           <label class="error">{{errorMessage}}</label>
           <label class="success">{{successMessage}}</label>
         </div>
-        <button type="submit" (click)="tryRegister(registerForm.value)" class="btn btn-default">Register</button>
+        <button type="submit" (click)="tryRegister(registerForm.value)" class="btn btn-danger">Register</button>
       </form>
     </div>
   </div>
@@ -24,17 +24,12 @@ <h1 class="header">Create an account with Firebase or Social Providers</h1>
   </div>
   <div class="row">
     <div class="col-md-4 col-md-offset-4">
-      <button type="button" class="btn btn-danger btn-block" (click)="tryGoogleLogin()">Register with Google</button>
+      <button type="button" class="btn btn-info btn-block" (click)="tryGoogleLogin()">Register with Google</button>
     </div>
   </div>
   <div class="row">
     <div class="col-md-4 col-md-offset-4">
-      <button type="button" class="btn btn-info btn-block" (click)="tryTwitterLogin()">Register with Twitter</button>
-    </div>
-  </div>
-  <div class="row">
-    <div class="col-md-4 col-md-offset-4">
-      <p>Already have an account? <a href="/login">Login</a></p>
+      <p>Already have an account?&nbsp;&nbsp;<a href="/login">Login</a></p>
     </div>
   </div>
 </div>

src/app/user/user.component.html

@@ -1,11 +1,14 @@
 <div class="container">
-  <div class="row">
-    <div class="col-md-4 col-md-offset-4">
-      <div class="card" style="width: 20rem; margin-top: 50px;">
-        <!-- <img class="card-img-top image" [src]="user.image" alt="Card image cap">
+  <div class="row" style="margin-top: 50px;">
+    <div class="col-md-4">
+      <h4 class="text-color">Welcome to the second screen</h4>
+    </div>
+    <div class="col-md-4">
+      <div class="card">
+        <img class="card-img-top image" [src]="user.image" alt="Card image cap">
         <div *ngIf='user.provider != "password"'class="card-body">
           <h4 class="card-title">{{user.name}}</h4>
-          <p class="card-text">This is an example of Social Authentication using Firebase in an Angular 5 web app. </p>
+          <p class="card-text">This is sample task using firebase authentication and Angular.</p>
         </div>
         <div *ngIf='user.provider == "password"'class="card-body">
           <form [formGroup]="profileForm">
@@ -15,12 +18,11 @@ <h4 class="card-title">{{user.name}}</h4>
             </div>
           </form>
           <a (click)="save(profileForm.value)" class="btn btn-primary">Save</a>
-        </div> -->
-        <h5>Welcome to this screen</h5>
+        </div>
       </div>
     </div>
     <div class="col-md-4">
-      <button type="button" (click)="logout()" class="btn btn-link">Logout</button>
+      <button type="button" (click)="logout()" class="btn btn-success">Logout</button>
     </div>
   </div>
 </div>

src/app/user/user.scss

@@ -1,3 +1,11 @@
 .image{
   width: 100%
 }
+
+.card {
+  width: 20rem !important;
+}
+
+.text-color {
+  color: #4cae4c;
+}