styled profile page

src/app/components/profile/profile.component.html

@@ -1,37 +1,67 @@
 <mat-toolbar color="primary">Profile</mat-toolbar>
 <div id="profile">
     <div id="profilecontainer" [hidden]="profileNotFound">
-        <table style="width:100%">
-            <tr>
-                <td>name: </td>
-                <td>{{user.username}}</td>
-            </tr>
-            <tr>
-                <td>handle: </td>
-                <td>{{user.handle}}</td>
-            </tr>
-            <tr>
-                <td>profile ID: </td>
-                <td>{{user.userID}}</td>
-            </tr>
-            <tr>
-                <td>points: </td>
-                <td>{{user.points}}</td>
-            <tr>
-                <td>level: </td>
-                <td>{{user.level}} ({{rankname}})</td>
-            </tr>
-        </table>
-        <h2>What does the level mean?</h2>
+        <div id="profile-card-container">
+        <mat-card class="mat-elevation-z8">
+            <mat-card-header>
+                <div mat-card-avatar class="profile-picture"></div>
+                <mat-card-title>{{user.username}}</mat-card-title>
+                <mat-card-subtitle>{{user.handle}}</mat-card-subtitle>
+            </mat-card-header>
+            <mat-card-content>
+                <table id="profile-table">
+                    <tr>
+                        <div class="mat-header-cell">name: </div>
+                        <td>{{user.username}}</td>
+                    </tr>
+                    <mat-divider></mat-divider>
+                    <tr>
+                        <div class="mat-header-cell">handle: </div>
+                        <td>{{user.handle}}</td>
+                    </tr>
+                    <mat-divider></mat-divider>
+                    <tr>
+                        <div class="mat-header-cell">profileID: </div>
+                        <td>{{user.userID}}</td>
+                    </tr>
+                    <mat-divider></mat-divider>
+                    <tr>
+                        <div class="mat-header-cell">points: </div>
+                        <td>{{user.points}}</td>
+                    </tr>
+                    <mat-divider></mat-divider>
+                    <tr>
+                        <div class="mat-header-cell">level: </div>
+                        <td>{{user.level}}</td>
+                    </tr>
+                    <mat-divider></mat-divider>
+                    <tr>
+                        <div class="mat-header-cell">level name: </div>
+                        <td>{{rankname}}</td>
+                    </tr>
+                </table>
+            </mat-card-content>
+        </mat-card>
+        </div>
+        <br>
+        <h1>What does the level mean?</h1>
             <p>There are different levels you can reach through green behaviour.
                 Collect 100 points to level up! The levels are called: 
             </p>
-            <ol start="0">
-                <li *ngFor= "let level of levellist.levels">
-                    {{level.name}}
-                </li>
-            </ol> 
-        <h2>How to level up?</h2>
+            <table mat-table [dataSource]="levelSource" class="mat-elevation-z8">
+                <ng-container matColumnDef="level">
+                    <th mat-header-cell *matHeaderCellDef> level </th>
+                    <td mat-cell *matCellDef="let level"> {{level.level}} </td>
+                </ng-container>
+                <ng-container matColumnDef="name">
+                    <th mat-header-cell *matHeaderCellDef> level name </th>
+                    <td mat-cell *matCellDef="let level"> {{level.name}} </td>
+                </ng-container>
+                <tr mat-header-row *matHeaderRowDef="displayedLevelColumns"></tr>
+                <tr mat-row *matRowDef="let row; columns: displayedLevelColumns;"></tr>
+            </table>
+            <br>
+        <h1>How to level up?</h1>
             <p>There is an always growing list of things you can do,
                  to support your environment
                 and earn points to level up at the same time.

src/app/components/profile/profile.component.sass

@@ -6,9 +6,33 @@
   max-width: 1200px
   margin: 0 auto
 
+#profile-card-container
+  margin: 0 auto
+  width: 100%
+  max-width: 690px
+
 .mat-table
   width: 100%
   max-width: 690px
   margin: 0 auto
 .mat-header-cell
-  padding-right: 0.5em
+  padding-right: 0.5em
+
+.profile-picture
+  background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg)
+  background-size: cover
+
+
+#profile-table
+  width: 100%
+  .mat-table 
+    display: block
+  .mat-cell,
+  .mat-header-cell 
+    align-items: center
+    display: flex
+    min-height: 48px
+    padding: 0
+    flex: 1
+    overflow: hidden
+    word-wrap: break-word

src/app/components/profile/profile.component.ts

@@ -15,15 +15,17 @@ import {MatTableDataSource} from '@angular/material/table';
 })
 
 export class ProfileComponent implements OnInit {
-  actionlist: Actionlist = new Actionlist();
+  actionlist: Actionlist = new Actionlist()
   
-  levellist: Levellist = new Levellist();
+  levellist: Levellist = new Levellist()
   user: User = new User()
   id : string
-  rankname: string;
-  profileNotFound : boolean = false;
-  displayedColumns = ['points', 'name'];
-  dataSource = new MatTableDataSource(this.actionlist.Actions);
+  rankname: string
+  profileNotFound : boolean = false
+  displayedColumns = ['points', 'name']
+  dataSource = new MatTableDataSource(this.actionlist.Actions)
+  displayedLevelColumns = ['level', 'name']
+  levelSource = this.levellist.levels
   constructor(private router: Router,private http: Http) { }
   
   @ViewChild(MatSort, {static: true}) sort: MatSort;