refactored to include username and action buttons.

projects/account/src/app/profile/login/login.component.html

@@ -1,17 +1,21 @@
 <mat-card>
     <mat-toolbar>
-        <span>Login</span>
+        <span>Profile</span>
     </mat-toolbar>
-    <div fxLayout.gt-sm="row" fxLayout="column">
-        <mat-form-field fxFlex.gt-sm="50%" appearance="outline">
-            <mat-label>Email Address</mat-label>
-            <input
-                matInput
-                required
-                type="email"
-                value="{{account.emailAddress}}"
-            >
-            <mat-hint>Uniquely identifies your account</mat-hint>
-        </mat-form-field>
-    </div>
+    <mat-card-content fxLayout="row" fxLayout.lt-md="column"  fxLayoutAlign="space-between center">
+        <div fxFlex>
+            <div class="profile-text" fxLayout="row" fxLayoutAlign="start center">
+                <span class="mat-subheading-2">Email:</span>
+                <p class="mat-body">{{account.emailAddress}}</p>
+            </div>
+            <div fxLayout="row" fxLayoutAlign="start center">
+                <span class="mat-subheading-2">Username:</span>
+                <p class="mat-body">{{account.username}}</p>
+            </div>
+        </div>
+        <div fxLayout="column" fxLayoutAlign="center">
+            <button mat-button>CHANGE USERNAME</button>
+            <button mat-button>CHANGE PASSWORD</button>
+        </div>
+    </mat-card-content>
 </mat-card>

projects/account/src/app/profile/login/login.component.scss

@@ -1,9 +1,32 @@
+@import "~@angular/material/theming";
+@import "mycroft-colors";
+@import "~src/stylesheets/components/buttons";
 @import "~src/stylesheets/components/cards";
 
+
 mat-card {
     @include section-card;
-    margin-left: auto;
-    margin-right: auto;
+
+    mat-card-content {
+        margin-left: 16px;
+        margin-right: 8px;
+
+        .mat-subheading-2 {
+            color: mat-color($mycroft-accent, A700);
+            font-weight: bold;
+            margin: 8px;
+            min-width: 120px;
+        }
+        .mat-body {
+            margin: 0;
+            min-width: 200px;
+        }
+
+        button {
+            @include action-button-primary;
+            margin: 8px;
+        }
+    }
 }
 
 

projects/account/src/app/profile/login/login.component.ts

@@ -1,5 +1,7 @@
 import { Component, Input } from '@angular/core';
 
+import { faEdit } from '@fortawesome/free-solid-svg-icons';
+
 import { Account } from '../profile.service';
 
 @Component({
@@ -9,6 +11,7 @@ import { Account } from '../profile.service';
 })
 export class LoginComponent {
     @Input() account: Account;
+    public editIcon = faEdit;
 
     constructor() { }
 }