SessionCompanion/SessionCompanion/ClientApp/src/app/components/registration/registration.component.html

@@ -1,6 +1,6 @@
   <div [formGroup]="signUpFormGroup" class="container">
     <div formGroupName="newAccount" class="container">
-      <mat-icon matSuffix class="arrow-back" (click)="GoToLoginPage()">arrow_back</mat-icon>
+      <mat-icon matSuffix class="arrow-back arrow-select" (click)="GoToLoginPage()">arrow_back</mat-icon>
       <div class="primary-text header">Create an Account</div>
 
       <mat-form-field class="form-container">

SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.css

@@ -47,10 +47,6 @@ input {
   font-size: 20px;
 }
 
-.align-to-right {
-  text-align: right;
-}
-
 @media (max-width: 400px) {
   .container {
     margin-left: 0%;

SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.html

@@ -1,21 +1,15 @@
 <div class="container">
-  <mat-icon matSuffix class="arrow-back" (click)="onArrowBackClick()">arrow_back</mat-icon>
+  <mat-icon matSuffix class="arrow-back arrow-select" (click)="onArrowBackClick()">arrow_back</mat-icon>
   <div class="primary-text header">Select character</div>
-    <mat-list >
+  <mat-list>
+    <mat-divider></mat-divider>
+    <mat-list-item *ngFor="let character of characters">
+      <mat-icon mat-list-icon>account_circle</mat-icon>
+      <div mat-line>{{character.name}}</div>
+      <mat-icon matSuffix class="arrow-forward arrow-select" (click)="onCharacterClick()">arrow_forward</mat-icon>
+      <div mat-line> {{character.className}} level: {{character.level}}</div>
       <mat-divider></mat-divider>
-    <mat-list-item> Oweja 
-    <mat-icon matSuffix class="arrow-forward align-to-right" (click)="onCharacterClick()">arrow_forward</mat-icon>
     </mat-list-item>
-    <mat-divider></mat-divider>
-    <mat-list-item> James 
-      <mat-icon matSuffix class="arrow-forward align-to-right" (click)="onCharacterClick()">arrow_forward</mat-icon>
-    </mat-list-item>
-    <mat-divider></mat-divider>
-    <mat-list-item> Legolas 
-      <mat-icon matSuffix class="arrow-forward align-to-right" (click)="onCharacterClick()">arrow_forward</mat-icon>
-    </mat-list-item>
-    <mat-divider></mat-divider>
   </mat-list>
-
 </div>
 

SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.ts

@@ -1,12 +1,66 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 
+export interface Section {
+  name: string;
+  className: string;
+  level: number;
+}
+
 @Component({
   selector: 'app-select-character',
   templateUrl: './select-character.component.html',
   styleUrls: ['./select-character.component.css']
 })
 export class SelectCharacterComponent {
+  characters: Section[] = [
+    {
+      name: 'Oweja',
+      className: 'warrior',
+      level: 1,
+    },
+    {
+      name: 'James',
+      className: 'warrior',
+      level: 2,
+    },
+    {
+      name: 'Legolas',
+      className: 'warrior',
+      level: 3,
+    },
+    {
+      name: 'Oweja',
+      className: 'warrior',
+      level: 1,
+    },
+    {
+      name: 'James',
+      className: 'warrior',
+      level: 2,
+    },
+    {
+      name: 'Legolas',
+      className: 'warrior',
+      level: 3,
+    },
+    {
+      name: 'Oweja',
+      className: 'warrior',
+      level: 1,
+    },
+    {
+      name: 'James',
+      className: 'warrior',
+      level: 2,
+    },
+    {
+      name: 'Legolas',
+      className: 'warrior',
+      level: 3,
+    }
+  ];
+
   isExpanded = false;
 
   collapse() {
@@ -27,4 +81,3 @@ export class SelectCharacterComponent {
     this.router.navigate(['login'])
   }
 }
-

SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.html

@@ -1,6 +1,6 @@
   <div [formGroup]="signInFormGroup" class="container">
     <div formGroupName="signIn" class="container">
-    <mat-icon matSuffix class="arrow-back" (click)="onArrowBackClick()">arrow_back</mat-icon>
+    <mat-icon matSuffix class="arrow-back arrow-select" (click)="onArrowBackClick()">arrow_back</mat-icon>
     <div id="SignInText" class="primary-text header">Sign In</div>
 
       <mat-form-field class="form-container">

SessionCompanion/SessionCompanion/ClientApp/src/styles.css

@@ -73,6 +73,10 @@ mat-divider {
   border-top-color: #e9cca7 !important;
 }
 
+.arrow-select {
+  cursor: pointer;
+}
+
 html,
 body {
   height: 100%;