3 files changed, 66 insertions, 156 deletions
diff --git a/src/app/components/profile/profile.component.css b/src/app/components/profile/profile.component.css
index ebcd406..c7e112f 100644
--- a/src/app/components/profile/profile.component.css
+++ b/src/app/components/profile/profile.component.css
@@ -1,105 +1,27 @@
-* {
-  box-sizing: border-box;
+#user-info {
+  font-size: 1.3em;
 }
 
-#content {
-  max-width: 22em;
-  justify-content: start;
+#profile-picture {
+  height: 5rem;
+  width: 5rem;
 }
 
-hr {
-  width: calc(100% - 1em);
-  color: black;
-  border: 1px solid black;
+.sec-info-card {
+  padding-bottom: calc(var(--card-padding) - 0.3em);
 }
 
-form {
-  width: 100%;
+.sec-info-title {
+  padding-bottom: 0.2em;
+  margin-bottom: 0.3em;
 }
 
-/* Navigation bar (for loggedin user) */
-
-#navigation {
-  display: flex;
-  width: 100%;
-}
-
-.submit-btn {
-  flex: 1;
-  margin-top: 0;
-  margin-left: .5em;
-  font-size: inherit;
-}
-
-#navigation > .submit-btn:first-child {
-  margin-left: 0;
-}
-
-/* Top card */
-
-#main-info {
-  display: flex;
-  width: 100%;
-  margin-bottom: .25em
-}
-
-#main-info > img {
-  width: 5em;
-  height: 5em;
-}
-
-#other-main-info {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-}
-
-#other-main-info > * {
-  font-size: 1.4em;
-}
-
-#other-main-info *:nth-child(1) {
-  margin-top: auto;
-}
-
-#other-main-info *:nth-last-child(1) {
-  margin-bottom: auto;
-}
-
-#add-friend, #loggedin-password {
-  flex: 0 !important;
-  margin-top: .4em;
-  max-width: 8em;
-  font-size: .6em !important;
-}
-
-#loggedin-password {
-  max-width: 100%;
-}
-
-/* Languages and technologies */
-
-.secondary-info {
-  margin-top: .25em;
-  margin-bottom: .25em;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-/* Posts */
-
-#no-posts {
-  width: 100%;
-  text-align: center;
-  color: gray;
-  margin-top: .2em;
+.none-message {
+  margin-bottom: 0.3em;
 }
 
-#posts {
-  width: 100%;
-  height: 100%;
+.sec-info {
+  width: fit-content;
+  background-color: #424242;
+  margin: 0 0.3em 0.3em 0;
 }
diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html
index 5c21cee..7de1d09 100644
--- a/src/app/components/profile/profile.component.html
+++ b/src/app/components/profile/profile.component.html
@@ -1,60 +1,60 @@
+<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>
+			<form class="flex-row flexible-children width-full font-size-dot7 margin-top-dot4" [formGroup]="updateFrienship" (ngSubmit)="modifyFriend()" *ngIf="!isTheLoggedInUser && isUserLoggedIn">
+				<input class="border-faded-slim border-bottom-only margin-right-dot2" type="password" formControlName="password" *ngIf="updatingFriendship" placeholder="Type in password to confirm">
+				<button id="add-friend" type="submit" class="border-faded-slim padding-dot1 lighter-hover click-effect border-radius-dot3 width-full">
+					{{ updatingFriendship ? 'Confirm' : (friendOfUser ? 'Unfriend' : 'Add friend') }}
+				</button>
+			</form>
 		</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" *ngFor="let lang of user.languages">
+			<div class="sec-info border-radius-dot5r padding-dot2">
+				{{ lang.name }}
 			</div>
-			<div *ngFor="let userPost of userPosts; let i = index">
-				<app-post [paramId]="userPost.postId.toString()" [index]="i"></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" *ngFor="let tech of user.technologies">
+			<div class="sec-info border-radius-dot5r padding-dot2">
+				{{ 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>
diff --git a/src/app/components/profile/profile.component.ts b/src/app/components/profile/profile.component.ts
index ed17f33..fc5d4d6 100644
--- a/src/app/components/profile/profile.component.ts
+++ b/src/app/components/profile/profile.component.ts
@@ -131,18 +131,6 @@ export class ProfileComponent implements OnInit {
     }
   }
 
-  goBack(): void {
-    this._router.navigate(['/']);
-  }
-
-  navigateToAdminPanel(): void {
-    this._router.navigate(['/admin-panel']);
-  }
-
-  navigateToSettings(): void {
-    this._router.navigate([this._router.url + '/settings']);
-  }
-
   logout(): void {
     this._tokenService.logoutUserFromSessionStorage();