Merge pull request #7 from Team-Kaleidoscope/devHEADv0.2main

Second Stage: Complete

1 files changed, 47 insertions, 50 deletions

diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html
index 0e5f633..c6fdee6 100644
--- a/src/app/components/profile/profile.component.html
+++ b/src/app/components/profile/profile.component.html
@@ -1,60 +1,57 @@
+<app-navbar></app-navbar>
+
 <app-loading *ngIf="!dataArrived"></app-loading>
 
-<div id="content" *ngIf="dataArrived">
-	<nav id="navigation">
-		<button class="submit-btn" (click)="goBack()">ᐊ Back</button>
-		<button class="submit-btn" (click)="navigateToSettings()" *ngIf="isTheLoggedInUser">Settings</button>
-		<button class="submit-btn" (click)="navigateToAdminPanel()" *ngIf="isTheLoggedInUser && isAdminUser">Panel</button>
-		<button class="submit-btn" (click)="logout()" *ngIf="isTheLoggedInUser">Logout</button>
-	</nav>
-	<hr>
-	<div class="scroll-standalone" (scroll)="onScroll($event)">
-		<div id="main-info" class="rounded-border">
-			<img class="round-image" [src]="user.profilePictureURL" alt=""/>
-			<div id="other-main-info">
-				<div id="name">
-					{{ user.firstName }} {{ user.lastName }}
-				</div>
-				<div id="username">
-					@{{ user.userName }}
-				</div>
-				<form [formGroup]="updateFrienship" (ngSubmit)="modifyFriend()" *ngIf="!isTheLoggedInUser && isUserLoggedIn">
-					<button id="add-friend" type="submit" class="submit-btn">{{ friendOfUser ? 'Unfriend' : 'Add friend' }}</button>
-					<br>
-					<input id="loggedin-password" type="password" formControlName="password" class="input-field" *ngIf="updatingFriendship" placeholder="Type in password to confirm">
-				</form>
-			</div>
+<main class="scroll-standalone under-navbar flex-col centered-content" *ngIf="dataArrived" (scroll)="onScroll($event)">
+	<section id="user-info" class="card flex-row width-full flex-justify-center">
+		<div>
+			<img id="profile-picture" class="round-image" [src]="user.profilePictureURL">
 		</div>
-		<div class="secondary-info rounded-border">
-			Languages:
-			<div *ngFor="let lang of user.languages">
-				<div class="user-language">
-					{{ lang.name }}
-				</div>
+		<div class="flexible flex-col flex-center-align-items flex-justify-center side-padding-dot3">
+			<div class="text-centered">
+				{{ user.firstName }} {{ user.lastName }}
 			</div>
-			<div *ngIf="user.languages.length === 0">
-				&nbsp;None
+			<div>
+				@{{ user.userName }}
 			</div>
+			<button id="add-friend" class="border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3 font-size-dot8 margin-top-dot4" (click)="modifyFriend()" *ngIf="!isTheLoggedInUser && isUserLoggedIn">
+				{{ friendOfUser ? 'Unfriend' : 'Add friend' }}
+			</button>
 		</div>
-		<div class="secondary-info rounded-border">
-			Technologies:
-			<div *ngFor="let tech of user.technologies">
-				<div class="user-language">
-					{{ tech.name }}
-				</div>
-			</div>
-			<div *ngIf="user.technologies.length === 0">
-				&nbsp;None
-			</div>
+	</section>
+	<section class="card sec-info-card flex-col width-full">
+		<div class="sec-info-title border-faded-slim border-bottom-only">
+			Languages
+		</div>
+		<div class="none-message" *ngIf="user.languages.length === 0">
+			None
 		</div>
-		<hr>
-		<div id="posts">
-			<div id="no-posts" *ngIf="userPosts.length === 0">
-				{{ user.firstName }} {{ user.lastName }} hasn't posted anything yet!
+		<div class="flex-row">
+			<div class="sec-info border-radius-dot5r padding-dot2" *ngFor="let lang of user.languages">
+				{{ lang.name }}
 			</div>
-			<div *ngFor="let userPost of userPosts">
-				<app-post [paramId]="userPost.postId.toString()"></app-post>
+		</div>
+	</section>
+	<section class="card sec-info-card flex-col width-full">
+		<div class="sec-info-title border-faded-slim border-bottom-only">
+			Technologies
+		</div>
+		<div class="none-message" *ngIf="user.technologies.length === 0">
+			None
+		</div>
+		<div  class="flex-row">
+			<div class="sec-info border-radius-dot5r padding-dot2" *ngFor="let tech of user.technologies">
+				{{ tech.name }}
 			</div>
 		</div>
-	</div>
-</div>
+	</section>
+	<hr class="card-hr">
+	<section>
+		<div class="text-centered" *ngIf="userPosts.length === 0">
+			{{ user.firstName }} {{ user.lastName }} hasn't posted anything yet!
+		</div>
+		<div *ngFor="let userPost of userPosts">
+			<app-post [paramId]="userPost.postId.toString()"></app-post>
+		</div>
+	</section>
+</main>