Footer added; Pages fucked upfooter

15 files changed, 755 insertions, 213 deletions

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 1bf44ad..e331a5d 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -25,6 +25,7 @@ import { CommentComponent } from './components/comment/comment.component';
 import { CommentPageComponent } from './components/comment-page/comment-page.component';
 import { PostAttachmentComponent } from './components/post-attachment/post-attachment.component';
 import { RouterModule } from '@angular/router';
+import { FooterComponent } from './components/footer/footer.component';
 
 @NgModule({
   declarations: [
@@ -43,7 +44,8 @@ import { RouterModule } from '@angular/router';
     AdminPanelPageComponent,
     CommentComponent,
     CommentPageComponent,
-    PostAttachmentComponent
+    PostAttachmentComponent,
+    FooterComponent
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'serverApp' }),
diff --git a/src/app/components/admin-panel-page/admin-panel-page.component.html b/src/app/components/admin-panel-page/admin-panel-page.component.html
index 31f0849..0c0954a 100644
--- a/src/app/components/admin-panel-page/admin-panel-page.component.html
+++ b/src/app/components/admin-panel-page/admin-panel-page.component.html
@@ -2,84 +2,182 @@
 
 <main id="content" *ngIf="!dataArrived">
 	<nav id="navigation">
-		<button class="submit-btn" (click)="backToProfile()">ᐊ Back to profile</button>
-		<button class="submit-btn" (click)="backToFeed()">ᐊ Back to feed</button>
+		<button class="submit-btn" (click)="backToProfile()">
+			ᐊ Back to profile
+		</button>
+		<button class="submit-btn" (click)="backToFeed()">
+			ᐊ Back to feed
+		</button>
 		<button class="submit-btn" (click)="logout()">Logout</button>
 	</nav>
-	<hr>
+	<hr />
 	<article class="scroll-standalone">
 		<app-success-bar></app-success-bar>
 		<app-error-bar></app-error-bar>
 
-		<button type="button" class="submit-btn edit-btn" (click)="toggleLanguages()">▼ Edit Languages ▼</button>
-		<form [formGroup]="languageForm" (ngSubmit)="submitLanguages()" *ngIf="showLanguages">
+		<button
+			type="button"
+			class="submit-btn edit-btn"
+			(click)="toggleLanguages()"
+		>
+			▼ Edit Languages ▼
+		</button>
+		<form
+			[formGroup]="languageForm"
+			(ngSubmit)="submitLanguages()"
+			*ngIf="showLanguages"
+		>
 			<div class="input-selection">
 				<label>Create language:</label>
-				<input type="text" class="input-field" formControlName="languageCreate" placeholder="New language name">
+				<input
+					type="text"
+					class="input-field"
+					formControlName="languageCreate"
+					placeholder="New language name"
+				/>
 			</div>
 			<label>Update language:</label>
 			<div class="flexbox input-selection">
-				<input type="text" class="input-field" formControlName="updateLanguageOldName" placeholder="Old language name">
-				<input type="text" class="input-field" formControlName="updateLanguageNewName" placeholder="New language name">
+				<input
+					type="text"
+					class="input-field"
+					formControlName="updateLanguageOldName"
+					placeholder="Old language name"
+				/>
+				<input
+					type="text"
+					class="input-field"
+					formControlName="updateLanguageNewName"
+					placeholder="New language name"
+				/>
 			</div>
 			<label>Delete language:</label>
 			<div class="flexbox input-selection">
-				<input type="text" class="input-field" formControlName="deleteLanguageName" placeholder="Language name">
+				<input
+					type="text"
+					class="input-field"
+					formControlName="deleteLanguageName"
+					placeholder="Language name"
+				/>
 			</div>
 			<button class="submit-btn" type="submit">Modify languages</button>
-			<hr>
+			<hr />
 			Available languages:
 			<div id="all-languages">
-				<div class="user-language" *ngFor="let lang of availableLanguages">
+				<div
+					class="user-language"
+					*ngFor="let lang of availableLanguages"
+				>
 					{{ lang.name }}
 				</div>
 			</div>
-			<hr>
+			<hr />
 		</form>
 
-		<button type="button" class="submit-btn edit-btn" (click)="toggleTechnologies()">▼ Edit Technologies ▼</button>
-		<form [formGroup]="technologyForm" (ngSubmit)="submitTechnologies()" *ngIf="showTechnologies">
+		<button
+			type="button"
+			class="submit-btn edit-btn"
+			(click)="toggleTechnologies()"
+		>
+			▼ Edit Technologies ▼
+		</button>
+		<form
+			[formGroup]="technologyForm"
+			(ngSubmit)="submitTechnologies()"
+			*ngIf="showTechnologies"
+		>
 			<div class="input-selection">
 				<label>Create technology:</label>
-				<input type="text" class="input-field" formControlName="technologyCreate" placeholder="New technology name">
+				<input
+					type="text"
+					class="input-field"
+					formControlName="technologyCreate"
+					placeholder="New technology name"
+				/>
 			</div>
 			<label>Update technology:</label>
 			<div class="flexbox input-selection">
-				<input type="text" class="input-field" formControlName="updateTechnologyOldName" placeholder="Old technology name">
-				<input type="text" class="input-field" formControlName="updateTechnologyNewName" placeholder="New technology name">
+				<input
+					type="text"
+					class="input-field"
+					formControlName="updateTechnologyOldName"
+					placeholder="Old technology name"
+				/>
+				<input
+					type="text"
+					class="input-field"
+					formControlName="updateTechnologyNewName"
+					placeholder="New technology name"
+				/>
 			</div>
 			<label>Delete technology:</label>
 			<div class="flexbox input-selection">
-				<input type="text" class="input-field" formControlName="deleteTechnologyName" placeholder="Technology name">
+				<input
+					type="text"
+					class="input-field"
+					formControlName="deleteTechnologyName"
+					placeholder="Technology name"
+				/>
 			</div>
-			<button class="submit-btn" type="submit">Modify technologies</button>
-			<hr>
+			<button class="submit-btn" type="submit">
+				Modify technologies
+			</button>
+			<hr />
 			Available technologies:
 			<div id="all-technologies">
-				<div class="user-technology" *ngFor="let tech of availableTechnologies">
+				<div
+					class="user-technology"
+					*ngFor="let tech of availableTechnologies"
+				>
 					{{ tech.name }}
 				</div>
 			</div>
-			<hr>
+			<hr />
 		</form>
 
-		<button type="button" class="submit-btn delete-btn" (click)="toggleDeletions()">▼ Deletions ▼</button>
-		<form [formGroup]="deleteForm" (ngSubmit)="submitDelete()" *ngIf="showDeletions">
+		<button
+			type="button"
+			class="submit-btn delete-btn"
+			(click)="toggleDeletions()"
+		>
+			▼ Deletions ▼
+		</button>
+		<form
+			[formGroup]="deleteForm"
+			(ngSubmit)="submitDelete()"
+			*ngIf="showDeletions"
+		>
 			<div class="input-selection">
 				<label>Delete user by Id:</label>
-				<input type="text" class="input-field" formControlName="deleteUser" placeholder="User Id">
+				<input
+					type="text"
+					class="input-field"
+					formControlName="deleteUser"
+					placeholder="User Id"
+				/>
 			</div>
 
 			<div class="input-selection">
 				<label>Delete post by Id:</label>
-				<input type="text" class="input-field" formControlName="deletePost" placeholder="Post Id">
+				<input
+					type="text"
+					class="input-field"
+					formControlName="deletePost"
+					placeholder="Post Id"
+				/>
 			</div>
 			<div class="input-selection">
 				<label>Delete comment by Id:</label>
-				<input type="text" class="input-field" formControlName="deleteComment" placeholder="Comment Id">
+				<input
+					type="text"
+					class="input-field"
+					formControlName="deleteComment"
+					placeholder="Comment Id"
+				/>
 			</div>
 			<button class="submit-btn" type="submit">Delete</button>
-			<hr>
+			<hr />
 		</form>
 	</article>
+	<app-footer></app-footer>
 </main>
diff --git a/src/app/components/comment-page/comment-page.component.html b/src/app/components/comment-page/comment-page.component.html
index ae114da..d59c956 100644
--- a/src/app/components/comment-page/comment-page.component.html
+++ b/src/app/components/comment-page/comment-page.component.html
@@ -2,15 +2,26 @@
 
 <main id="content" *ngIf="loaded">
 	<nav>
-		<button class="submit-btn" type="submit" (click)="toPost()">ᐊ Back to post</button>
+		<button class="submit-btn" type="submit" (click)="toPost()">
+			ᐊ Back to post
+		</button>
 	</nav>
 	<app-comment [paramId]="commentId.toString()"></app-comment>
 	<nav class="many-buttons" *ngIf="editable">
 		<button class="submit-btn" (click)="editComment()">Edit comment</button>
-		<button class="submit-btn delete-btn" (click)="deleteComment()">Delete comment</button>
+		<button class="submit-btn delete-btn" (click)="deleteComment()">
+			Delete comment
+		</button>
 	</nav>
-	<form  [formGroup]="editCommentFormGroup" (ngSubmit)="editComment()">
-		<input type="text" *ngIf="editingComment" placeholder="New comment message" class="input-field" formControlName="newCommentMessage">
+	<form [formGroup]="editCommentFormGroup" (ngSubmit)="editComment()">
+		<input
+			type="text"
+			*ngIf="editingComment"
+			placeholder="New comment message"
+			class="input-field"
+			formControlName="newCommentMessage"
+		/>
 		<input type="submit" style="display: none" />
 	</form>
+	<app-footer></app-footer>
 </main>
diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html
index 230c27b..7f3cb68 100644
--- a/src/app/components/feed/feed.component.html
+++ b/src/app/components/feed/feed.component.html
@@ -3,41 +3,81 @@
 <main id="feed-page" *ngIf="dataArrived">
 	<aside id="profile-bar" class="round-image rounded-border">
 		<summary id="profile-info" (click)="goToProfile()">
-			<img id="profile-bar-profile-pic" class="round-image" [src]="user.profilePictureURL" alt=""/>
+			<img
+				id="profile-bar-profile-pic"
+				class="round-image"
+				[src]="user.profilePictureURL"
+				alt=""
+			/>
 			<div id="profile-bar-name">
 				{{ user.firstName }} {{ user.lastName }}
 			</div>
-			<div id="profile-bar-username">
-				@{{ user.userName }}
-			</div>
+			<div id="profile-bar-username">@{{ user.userName }}</div>
 		</summary>
 		<button class="submit-btn" (click)="goToSettings()">Settings</button>
 		<button class="submit-btn" (click)="logout()">Logout</button>
 	</aside>
 	<section id="feed-content">
 		<nav id="top-bar">
-			<img id="top-bar-profile-pic" class="round-image" [src]="user.profilePictureURL" alt="" (click)="goToProfile()">
-			<form id="create-post-form" class="rounded-border" [formGroup]="createPostFormGroup" (ngSubmit)="createPost()">
+			<img
+				id="top-bar-profile-pic"
+				class="round-image"
+				[src]="user.profilePictureURL"
+				alt=""
+				(click)="goToProfile()"
+			/>
+			<form
+				id="create-post-form"
+				class="rounded-border"
+				[formGroup]="createPostFormGroup"
+				(ngSubmit)="createPost()"
+			>
 				<section id="form-inputs">
-					<input id="top-bar-create-post" type="text" formControlName="newPostMessage" placeholder="What's on your mind?"/>
-					<input type="submit" style="display: none" /> <!-- You need this element, so when you press enter the request is sent -->
-					<img id="attachment-img" src="assets/images/paper-clip.png">
-					<input id="file-upload" type="file" formControlName="fileUpload" (change)="onFileUpload($event)" multiple>
+					<input
+						id="top-bar-create-post"
+						type="text"
+						formControlName="newPostMessage"
+						placeholder="What's on your mind?"
+					/>
+					<input type="submit" style="display: none" />
+					<!-- You need this element, so when you press enter the request is sent -->
+					<img
+						id="attachment-img"
+						src="assets/images/paper-clip.png"
+					/>
+					<input
+						id="file-upload"
+						type="file"
+						formControlName="fileUpload"
+						(change)="onFileUpload($event)"
+						multiple
+					/>
 				</section>
 				<section class="form-attachments">
 					<div *ngFor="let file of files" class="form-attachment">
-						{{ file.name ? file.name : 'Attachment' }}
-						<div class="remove-form-attachment" (click)="removeAttachment(file.name)">
+						{{ file.name ? file.name : "Attachment" }}
+						<div
+							class="remove-form-attachment"
+							(click)="removeAttachment(file.name)"
+						>
 							☒
 						</div>
 					</div>
 				</section>
 			</form>
-			<img id="top-bar-open-chat" src="assets/images/feed/chat-pic.png" alt=""/>
+			<img
+				id="top-bar-open-chat"
+				src="assets/images/feed/chat-pic.png"
+				alt=""
+			/>
 		</nav>
-		<section id="posts" class="scroll-standalone" (scroll)="onScroll($event)">
+		<section
+			id="posts"
+			class="scroll-standalone"
+			(scroll)="onScroll($event)"
+		>
 			<div id="no-posts-msg" *ngIf="posts.length === 0">
-				None of your friends have posted anything yet!<br>
+				None of your friends have posted anything yet!<br />
 				Try refreshing your page!
 			</div>
 			<div *ngFor="let friendPost of posts" class="post">
@@ -45,4 +85,5 @@
 			</div>
 		</section>
 	</section>
+	<app-footer></app-footer>
 </main>
diff --git a/src/app/components/footer/footer.component.css b/src/app/components/footer/footer.component.css
new file mode 100644
index 0000000..b93e1f3
--- /dev/null
+++ b/src/app/components/footer/footer.component.css
@@ -0,0 +1,20 @@
+footer {
+  display: flex;
+  width: 100%;
+}
+
+footer > * {
+  flex: 1;
+}
+
+#version {
+  text-align: left;
+}
+
+#middle-footer-message {
+  text-align: center;
+}
+
+#license {
+  text-align: right;
+}
diff --git a/src/app/components/footer/footer.component.html b/src/app/components/footer/footer.component.html
new file mode 100644
index 0000000..d410597
--- /dev/null
+++ b/src/app/components/footer/footer.component.html
@@ -0,0 +1,12 @@
+<footer>
+	<div id="version">
+		{{ version }}
+	</div>
+	<div id="middle-footer-message">
+		Made by
+		<a href="{{ organizationUrl }}">Team Kaleidoscope</a>
+	</div>
+	<div id="license">
+		<a href="{{ licenseUrl }}">License</a>
+	</div>
+</footer>
diff --git a/src/app/components/footer/footer.component.ts b/src/app/components/footer/footer.component.ts
new file mode 100644
index 0000000..e83f840
--- /dev/null
+++ b/src/app/components/footer/footer.component.ts
@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.css']
+})
+export class FooterComponent implements OnInit {
+  public version: string = "v0.1";
+  public licenseUrl: string = "https://github.com/Team-Kaleidoscope/DevHive-Angular/blob/main/LICENSE";
+  public organizationUrl: string = "https://github.com/Team-Kaleidoscope";
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/components/login/login.component.html b/src/app/components/login/login.component.html
index 9f74faa..d4f956d 100644
--- a/src/app/components/login/login.component.html
+++ b/src/app/components/login/login.component.html
@@ -2,29 +2,55 @@
 	<summary class="title">Login</summary>
 
 	<form [formGroup]="loginUserFormGroup" (ngSubmit)="onSubmit()">
-		<hr>
+		<hr />
 
 		<section class="input-selection">
-			<input type="text" placeholder="Username" class="input-field" formControlName="username" required>
+			<input
+				type="text"
+				placeholder="Username"
+				class="input-field"
+				formControlName="username"
+				required
+			/>
 			<label class="input-field-label">Username</label>
 
 			<div class="input-errors">
-				<label *ngIf="loginUserFormGroup.get('username')?.errors?.required" class="error">*Required</label>
+				<label
+					*ngIf="loginUserFormGroup.get('username')?.errors?.required"
+					class="error"
+					>*Required</label
+				>
 			</div>
 		</section>
 
 		<section class="input-selection">
-			<input type="password" placeholder="Password" class="input-field" formControlName="password" required>
+			<input
+				type="password"
+				placeholder="Password"
+				class="input-field"
+				formControlName="password"
+				required
+			/>
 			<label class="input-field-label">Password</label>
 
 			<div class="input-errors">
-				<label *ngIf="loginUserFormGroup.get('password')?.errors?.required" class="error">*Required</label>
+				<label
+					*ngIf="loginUserFormGroup.get('password')?.errors?.required"
+					class="error"
+					>*Required</label
+				>
 			</div>
 		</section>
 
-		<hr>
+		<hr />
 		<button class="submit-btn" type="submit">Submit</button>
 		<app-error-bar></app-error-bar>
 	</form>
-	<button class="submit-btn redirect-to-register" (click)="onRedirectRegister()">New to DevHive? Register instead</button>
+	<button
+		class="submit-btn redirect-to-register"
+		(click)="onRedirectRegister()"
+	>
+		New to DevHive? Register instead
+	</button>
+	<app-footer></app-footer>
 </main>
diff --git a/src/app/components/not-found/not-found.component.html b/src/app/components/not-found/not-found.component.html
index 83d73ce..4588d2c 100644
--- a/src/app/components/not-found/not-found.component.html
+++ b/src/app/components/not-found/not-found.component.html
@@ -1,10 +1,13 @@
 <main id="content">
-	<summary class="title">
-		Page not found!
-	</summary>
-	<hr>
+	<summary class="title">Page not found!</summary>
+	<hr />
 	<nav id="back-btns">
-		<button class="submit-btn" type="submit" (click)="backToFeed()">Back to feed</button>
-		<button class="submit-btn" type="submit" (click)="backToLogin()">Back to login</button>
+		<button class="submit-btn" type="submit" (click)="backToFeed()">
+			Back to feed
+		</button>
+		<button class="submit-btn" type="submit" (click)="backToLogin()">
+			Back to login
+		</button>
 	</nav>
+	<app-footer></app-footer>
 </main>
diff --git a/src/app/components/post-page/post-page.component.html b/src/app/components/post-page/post-page.component.html
index b8e7e22..9781c18 100644
--- a/src/app/components/post-page/post-page.component.html
+++ b/src/app/components/post-page/post-page.component.html
@@ -2,36 +2,75 @@
 
 <main id="content" *ngIf="dataArrived">
 	<nav>
-		<div class="many-buttons"  *ngIf="loggedIn">
-			<button class="submit-btn" type="submit" (click)="backToFeed()">ᐊ Back to feed</button>
-			<button class="submit-btn" type="submit" (click)="backToProfile()">ᐊ Back to profile</button>
+		<div class="many-buttons" *ngIf="loggedIn">
+			<button class="submit-btn" type="submit" (click)="backToFeed()">
+				ᐊ Back to feed
+			</button>
+			<button class="submit-btn" type="submit" (click)="backToProfile()">
+				ᐊ Back to profile
+			</button>
 		</div>
-		<button class="submit-btn" type="submit" (click)="toLogin()" *ngIf="!loggedIn">Login</button>
+		<button
+			class="submit-btn"
+			type="submit"
+			(click)="toLogin()"
+			*ngIf="!loggedIn"
+		>
+			Login
+		</button>
 	</nav>
 	<app-post [paramId]="postId.toString()"></app-post>
 	<div class="many-buttons" *ngIf="editable">
 		<button class="submit-btn" (click)="editPost()">Edit post</button>
-		<button class="submit-btn delete-btn" (click)="deletePost()">Delete post</button>
+		<button class="submit-btn delete-btn" (click)="deletePost()">
+			Delete post
+		</button>
 	</div>
-	<form  id="editPost" [formGroup]="editPostFormGroup"  *ngIf="editingPost" (ngSubmit)="editPost()">
-		<input id="new-message-input" type="text" placeholder="New post message" class="input-field" formControlName="newPostMessage">
-		<img id="attachment-img" src="assets/images/paper-clip.png">
-		<input id="file-upload" type="file" formControlName="fileUpload" (change)="onFileUpload($event)" multiple>
+	<form
+		id="editPost"
+		[formGroup]="editPostFormGroup"
+		*ngIf="editingPost"
+		(ngSubmit)="editPost()"
+	>
+		<input
+			id="new-message-input"
+			type="text"
+			placeholder="New post message"
+			class="input-field"
+			formControlName="newPostMessage"
+		/>
+		<img id="attachment-img" src="assets/images/paper-clip.png" />
+		<input
+			id="file-upload"
+			type="file"
+			formControlName="fileUpload"
+			(change)="onFileUpload($event)"
+			multiple
+		/>
 		<input type="submit" style="display: none" />
 	</form>
 	<figure class="form-attachments" *ngIf="editingPost">
 		<div *ngFor="let file of files" class="form-attachment">
-			{{ file.name ? file.name : 'Attachment' }}
-			<div class="remove-form-attachment" (click)="removeAttachment(file.name)">
+			{{ file.name ? file.name : "Attachment" }}
+			<div
+				class="remove-form-attachment"
+				(click)="removeAttachment(file.name)"
+			>
 				☒
 			</div>
 		</div>
 	</figure>
 	<form [formGroup]="addCommentFormGroup" (ngSubmit)="addComment()">
-		<input type="text" placeholder="Add comment" class="input-field" formControlName="newComment">
+		<input
+			type="text"
+			placeholder="Add comment"
+			class="input-field"
+			formControlName="newComment"
+		/>
 		<input type="submit" style="display: none" />
 	</form>
 	<section class="comment" *ngFor="let comm of post?.comments">
 		<app-comment [paramId]="comm.id.toString()"></app-comment>
 	</section>
+	<app-footer></app-footer>
 </main>
diff --git a/src/app/components/profile-settings/profile-settings.component.html b/src/app/components/profile-settings/profile-settings.component.html
index 502697d..f5f19bd 100644
--- a/src/app/components/profile-settings/profile-settings.component.html
+++ b/src/app/components/profile-settings/profile-settings.component.html
@@ -3,114 +3,276 @@
 <div id="content" *ngIf="dataArrived">
 	<nav id="navigation">
 		<button class="submit-btn" (click)="goToProfile()">ᐊ Back</button>
-		<button class="submit-btn" (click)="navigateToAdminPanel()" *ngIf="isAdminUser">Panel</button>
+		<button
+			class="submit-btn"
+			(click)="navigateToAdminPanel()"
+			*ngIf="isAdminUser"
+		>
+			Panel
+		</button>
 		<button class="submit-btn" (click)="logout()">Logout</button>
 	</nav>
-	<hr>
+	<hr />
 	<div class="scroll-standalone">
-		<form id="update-profile-picture" [formGroup]="updateProfilePictureFormGroup" (ngSubmit)="updateProfilePicture()">
-			<img id="profile-picture" class="round-image" [src]="user.profilePictureURL">
+		<form
+			id="update-profile-picture"
+			[formGroup]="updateProfilePictureFormGroup"
+			(ngSubmit)="updateProfilePicture()"
+		>
+			<img
+				id="profile-picture"
+				class="round-image"
+				[src]="user.profilePictureURL"
+			/>
 			<div id="submit-file">
 				<div id="upload-file" class="submit-btn">
-					<input type="file" accept="image/*" formControlName="fileUpload" (change)="onFileUpload($event)">
+					<input
+						type="file"
+						accept="image/*"
+						formControlName="fileUpload"
+						(change)="onFileUpload($event)"
+					/>
 				</div>
-				<button class="submit-btn" type="submit">Update profile picture</button>
+				<button class="submit-btn" type="submit">
+					Update profile picture
+				</button>
 			</div>
 		</form>
-		<hr>
-		<form id="update-user" [formGroup]="updateUserFormGroup" (ngSubmit)="onSubmit()">
+		<hr />
+		<form
+			id="update-user"
+			[formGroup]="updateUserFormGroup"
+			(ngSubmit)="onSubmit()"
+		>
 			<div class="input-selection">
-				<input type="text" class="input-field" formControlName="firstName" required>
+				<input
+					type="text"
+					class="input-field"
+					formControlName="firstName"
+					required
+				/>
 				<label class="input-field-label">First Name</label>
 
 				<div class="input-errors">
-					<label *ngIf="updateUserFormGroup.get('firstName')?.errors?.required" class="error">*Required</label>
-					<label *ngIf="updateUserFormGroup.get('firstName')?.errors?.minlength" class="error">*Minimum 3 characters</label>
+					<label
+						*ngIf="
+							updateUserFormGroup.get('firstName')?.errors
+								?.required
+						"
+						class="error"
+						>*Required</label
+					>
+					<label
+						*ngIf="
+							updateUserFormGroup.get('firstName')?.errors
+								?.minlength
+						"
+						class="error"
+						>*Minimum 3 characters</label
+					>
 				</div>
 			</div>
 
 			<div class="input-selection">
-				<input type="text" class="input-field" formControlName="lastName" required>
+				<input
+					type="text"
+					class="input-field"
+					formControlName="lastName"
+					required
+				/>
 				<label class="input-field-label">Last Name</label>
 
 				<div class="input-errors">
-					<label *ngIf="updateUserFormGroup.get('lastName')?.errors?.required" class="error">*Required</label>
-					<label *ngIf="updateUserFormGroup.get('lastName')?.errors?.minlength" class="error">*Minimum 3 characters</label>
+					<label
+						*ngIf="
+							updateUserFormGroup.get('lastName')?.errors
+								?.required
+						"
+						class="error"
+						>*Required</label
+					>
+					<label
+						*ngIf="
+							updateUserFormGroup.get('lastName')?.errors
+								?.minlength
+						"
+						class="error"
+						>*Minimum 3 characters</label
+					>
 				</div>
 			</div>
 
 			<div class="input-selection">
-				<input type="text" class="input-field" formControlName="username" required>
+				<input
+					type="text"
+					class="input-field"
+					formControlName="username"
+					required
+				/>
 				<label class="input-field-label">Username</label>
 
 				<div class="input-errors">
-					<label *ngIf="updateUserFormGroup.get('username')?.errors?.required" class="error">*Required</label>
-					<label *ngIf="updateUserFormGroup.get('username')?.errors?.minlength" class="error">*Minimum 3 characters</label>
+					<label
+						*ngIf="
+							updateUserFormGroup.get('username')?.errors
+								?.required
+						"
+						class="error"
+						>*Required</label
+					>
+					<label
+						*ngIf="
+							updateUserFormGroup.get('username')?.errors
+								?.minlength
+						"
+						class="error"
+						>*Minimum 3 characters</label
+					>
 				</div>
 			</div>
 
 			<div class="input-selection">
-				<input type="text" class="input-field" formControlName="email" required>
+				<input
+					type="text"
+					class="input-field"
+					formControlName="email"
+					required
+				/>
 				<label class="input-field-label">Email</label>
 
 				<div class="input-errors">
-					<label *ngIf="updateUserFormGroup.get('email')?.errors?.required" class="error">*Required</label>
-					<label *ngIf="updateUserFormGroup.get('email')?.errors?.email" class="error">*Invalid email</label>
+					<label
+						*ngIf="
+							updateUserFormGroup.get('email')?.errors?.required
+						"
+						class="error"
+						>*Required</label
+					>
+					<label
+						*ngIf="updateUserFormGroup.get('email')?.errors?.email"
+						class="error"
+						>*Invalid email</label
+					>
 				</div>
 			</div>
 
 			<div class="input-selection">
-				<input type="password" class="input-field" formControlName="password" required>
+				<input
+					type="password"
+					class="input-field"
+					formControlName="password"
+					required
+				/>
 				<label class="input-field-label">Password</label>
 
 				<div class="input-errors">
-					<label *ngIf="updateUserFormGroup.get('password')?.errors?.required" class="error">*Required</label>
-					<label *ngIf="updateUserFormGroup.get('password')?.errors?.minlength" class="error">*Minimum 3 characters</label>
-					<label *ngIf="updateUserFormGroup.get('password')?.errors?.pattern" class="error">*At least 1 number</label>
+					<label
+						*ngIf="
+							updateUserFormGroup.get('password')?.errors
+								?.required
+						"
+						class="error"
+						>*Required</label
+					>
+					<label
+						*ngIf="
+							updateUserFormGroup.get('password')?.errors
+								?.minlength
+						"
+						class="error"
+						>*Minimum 3 characters</label
+					>
+					<label
+						*ngIf="
+							updateUserFormGroup.get('password')?.errors?.pattern
+						"
+						class="error"
+						>*At least 1 number</label
+					>
 				</div>
 			</div>
-			<button type="button" class="submit-btn edit-btn" (click)="toggleLanguages()">▼ Edit Languages ▼</button>
+			<button
+				type="button"
+				class="submit-btn edit-btn"
+				(click)="toggleLanguages()"
+			>
+				▼ Edit Languages ▼
+			</button>
 			<div *ngIf="showLanguages">
 				<div class="input-selection">
-					<input type="text" class="input-field" formControlName="languageInput" required>
+					<input
+						type="text"
+						class="input-field"
+						formControlName="languageInput"
+						required
+					/>
 
 					<div class="input-errors">
-						<label class="error">Type in your desired languages, separated by a space</label>
+						<label class="error"
+							>Type in your desired languages, separated by a
+							space</label
+						>
 					</div>
 				</div>
 				Available languages:
 				<div id="all-languages">
-					<div class="user-language" *ngFor="let lang of availableLanguages">
+					<div
+						class="user-language"
+						*ngFor="let lang of availableLanguages"
+					>
 						{{ lang.name }}
 					</div>
 				</div>
 			</div>
 
-			<button type="button" class="submit-btn edit-btn" (click)="toggleTechnologies()">▼ Edit Technologies ▼</button>
+			<button
+				type="button"
+				class="submit-btn edit-btn"
+				(click)="toggleTechnologies()"
+			>
+				▼ Edit Technologies ▼
+			</button>
 			<div *ngIf="showTechnologies">
 				<div class="input-selection">
-					<input type="text" class="input-field" formControlName="technologyInput" required>
+					<input
+						type="text"
+						class="input-field"
+						formControlName="technologyInput"
+						required
+					/>
 
 					<div class="input-errors">
-						<label class="error">Type in your desired technologies, separated by a space</label>
+						<label class="error"
+							>Type in your desired technologies, separated by a
+							space</label
+						>
 					</div>
 				</div>
 				Available technologies:
 				<div id="all-technologies">
-					<div class="user-technology" *ngFor="let tech of availableTechnologies">
+					<div
+						class="user-technology"
+						*ngFor="let tech of availableTechnologies"
+					>
 						{{ tech.name }}
 					</div>
 				</div>
 			</div>
 
-			<button id="update-profile-btn" class="submit-btn" type="submit">Update profile</button>
+			<button id="update-profile-btn" class="submit-btn" type="submit">
+				Update profile
+			</button>
 			<app-success-bar></app-success-bar>
 			<app-error-bar></app-error-bar>
 		</form>
-		<hr>
+		<hr />
 		<div id="confirm-delete" *ngIf="deleteAccountConfirm">
-			Are you sure you want to delete your account?<br>This is permanent!
+			Are you sure you want to delete your account?<br />This is
+			permanent!
 		</div>
-		<button class="submit-btn delete-btn" (click)="deleteAccount()">Delete account</button>
+		<button class="submit-btn delete-btn" (click)="deleteAccount()">
+			Delete account
+		</button>
 	</div>
+	<app-footer></app-footer>
 </div>
diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html
index 0e5f633..0d9dc6a 100644
--- a/src/app/components/profile/profile.component.html
+++ b/src/app/components/profile/profile.component.html
@@ -3,25 +3,48 @@
 <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>
+		<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>
+	<hr />
 	<div class="scroll-standalone" (scroll)="onScroll($event)">
 		<div id="main-info" class="rounded-border">
-			<img class="round-image" [src]="user.profilePictureURL" alt=""/>
+			<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">
+				<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>
 		</div>
@@ -32,9 +55,7 @@
 					{{ lang.name }}
 				</div>
 			</div>
-			<div *ngIf="user.languages.length === 0">
-				&nbsp;None
-			</div>
+			<div *ngIf="user.languages.length === 0">&nbsp;None</div>
 		</div>
 		<div class="secondary-info rounded-border">
 			Technologies:
@@ -43,18 +64,18 @@
 					{{ tech.name }}
 				</div>
 			</div>
-			<div *ngIf="user.technologies.length === 0">
-				&nbsp;None
-			</div>
+			<div *ngIf="user.technologies.length === 0">&nbsp;None</div>
 		</div>
-		<hr>
+		<hr />
 		<div id="posts">
 			<div id="no-posts" *ngIf="userPosts.length === 0">
-				{{ user.firstName }} {{ user.lastName }} hasn't posted anything yet!
+				{{ 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>
 		</div>
 	</div>
+	<app-footer></app-footer>
 </div>
diff --git a/src/app/components/register/register.component.html b/src/app/components/register/register.component.html
index 0075b1d..c521d44 100644
--- a/src/app/components/register/register.component.html
+++ b/src/app/components/register/register.component.html
@@ -2,64 +2,160 @@
 	<summary class="title">Register</summary>
 
 	<form [formGroup]="registerUserFormGroup" (ngSubmit)="onSubmit()">
-		<hr>
+		<hr />
 		<!-- Value: {{ registerUserFormGroup.value | json }}
 		<hr> -->
 
 		<section class="input-selection">
-			<input type="text" placeholder="Goshko, is that u?" class="input-field" formControlName="firstName" required>
+			<input
+				type="text"
+				placeholder="Goshko, is that u?"
+				class="input-field"
+				formControlName="firstName"
+				required
+			/>
 			<label class="input-field-label">First Name</label>
 
 			<div class="input-errors">
-				<label *ngIf="registerUserFormGroup.get('firstName')?.errors?.required" class="error">*Required</label>
-				<label *ngIf="registerUserFormGroup.get('firstName')?.errors?.minlength" class="error">*Minimum 3 characters</label>
+				<label
+					*ngIf="
+						registerUserFormGroup.get('firstName')?.errors?.required
+					"
+					class="error"
+					>*Required</label
+				>
+				<label
+					*ngIf="
+						registerUserFormGroup.get('firstName')?.errors
+							?.minlength
+					"
+					class="error"
+					>*Minimum 3 characters</label
+				>
 			</div>
 		</section>
 
 		<section class="input-selection">
-			<input type="text" placeholder="Trapov? Really??" class="input-field" formControlName="lastName" required>
+			<input
+				type="text"
+				placeholder="Trapov? Really??"
+				class="input-field"
+				formControlName="lastName"
+				required
+			/>
 			<label class="input-field-label">Last Name</label>
 
 			<div class="input-errors">
-				<label *ngIf="registerUserFormGroup.get('lastName')?.errors?.required" class="error">*Required</label>
-				<label *ngIf="registerUserFormGroup.get('lastName')?.errors?.minlength" class="error">*Minimum 3 characters</label>
+				<label
+					*ngIf="
+						registerUserFormGroup.get('lastName')?.errors?.required
+					"
+					class="error"
+					>*Required</label
+				>
+				<label
+					*ngIf="
+						registerUserFormGroup.get('lastName')?.errors?.minlength
+					"
+					class="error"
+					>*Minimum 3 characters</label
+				>
 			</div>
 		</section>
 
 		<section class="input-selection">
-			<input type="text" placeholder="Think of something cool to flex on other kids" class="input-field" formControlName="username" required>
+			<input
+				type="text"
+				placeholder="Think of something cool to flex on other kids"
+				class="input-field"
+				formControlName="username"
+				required
+			/>
 			<label class="input-field-label">Username</label>
 
 			<div class="input-errors">
-				<label *ngIf="registerUserFormGroup.get('username')?.errors?.required" class="error">*Required</label>
-				<label *ngIf="registerUserFormGroup.get('username')?.errors?.minlength" class="error">*Minimum 3 characters</label>
+				<label
+					*ngIf="
+						registerUserFormGroup.get('username')?.errors?.required
+					"
+					class="error"
+					>*Required</label
+				>
+				<label
+					*ngIf="
+						registerUserFormGroup.get('username')?.errors?.minlength
+					"
+					class="error"
+					>*Minimum 3 characters</label
+				>
 			</div>
 		</section>
 
 		<section class="input-selection">
-			<input type="text" placeholder="You expect an email joke? I have none, mail me one" class="input-field" formControlName="email" required>
+			<input
+				type="text"
+				placeholder="You expect an email joke? I have none, mail me one"
+				class="input-field"
+				formControlName="email"
+				required
+			/>
 			<label class="input-field-label">Email</label>
 
 			<div class="input-errors">
-				<label *ngIf="registerUserFormGroup.get('email')?.errors?.required" class="error">*Required</label>
-				<label *ngIf="registerUserFormGroup.get('email')?.errors?.email" class="error">*Invalid email</label>
+				<label
+					*ngIf="registerUserFormGroup.get('email')?.errors?.required"
+					class="error"
+					>*Required</label
+				>
+				<label
+					*ngIf="registerUserFormGroup.get('email')?.errors?.email"
+					class="error"
+					>*Invalid email</label
+				>
 			</div>
 		</section>
 
 		<section class="input-selection">
-			<input type="password" placeholder="Make sure it's long & strong (just like my d***)" class="input-field" formControlName="password" required>
+			<input
+				type="password"
+				placeholder="Make sure it's long & strong (just like my d***)"
+				class="input-field"
+				formControlName="password"
+				required
+			/>
 			<label class="input-field-label">Password</label>
 
 			<div class="input-errors">
-				<label *ngIf="registerUserFormGroup.get('password')?.errors?.required" class="error">*Required</label>
-				<label *ngIf="registerUserFormGroup.get('password')?.errors?.minlength" class="error">*Minimum 3 characters</label>
-				<label *ngIf="registerUserFormGroup.get('password')?.errors?.pattern" class="error">*At least 1 number</label>
+				<label
+					*ngIf="
+						registerUserFormGroup.get('password')?.errors?.required
+					"
+					class="error"
+					>*Required</label
+				>
+				<label
+					*ngIf="
+						registerUserFormGroup.get('password')?.errors?.minlength
+					"
+					class="error"
+					>*Minimum 3 characters</label
+				>
+				<label
+					*ngIf="
+						registerUserFormGroup.get('password')?.errors?.pattern
+					"
+					class="error"
+					>*At least 1 number</label
+				>
 			</div>
 		</section>
 
-		<hr>
+		<hr />
 		<button class="submit-btn" type="submit">Submit</button>
 		<app-error-bar></app-error-bar>
 	</form>
-	<button class="submit-btn redirect-to-login" (click)="onRedirectLogin()">Already have an account? Login here</button>
+	<button class="submit-btn redirect-to-login" (click)="onRedirectLogin()">
+		Already have an account? Login here
+	</button>
+	<app-footer></app-footer>
 </main>
diff --git a/src/styles.css b/src/styles.css
index eeb93fe..b215190 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -9,24 +9,27 @@
   --failure: indianred;
 }
 
-html, body {
-	height: 100%;
-	margin: 0;
+html,
+body {
+  height: 100%;
+  margin: 0;
 }
 body {
   font: 21px sans-serif !important;
   background-color: var(--bg-color);
 }
 
-input:focus, button:focus {
+input:focus,
+button:focus {
   outline: 0;
 }
 
-#content { /* Used for the login and register pages */
+#content {
+  /* Used for the login and register pages */
   height: 100%;
   max-width: 20em;
   box-sizing: border-box;
-  border: .5em solid var(--bg-color);
+  border: 0.5em solid var(--bg-color);
 
   margin: 0 auto;
 
@@ -36,10 +39,15 @@ input:focus, button:focus {
   flex-direction: column;
 }
 
+#content > *:first-child,
+#content > *:last-child {
+  flex: 1;
+}
+
 .rounded-border {
   border: 2px solid black;
-  border-radius: .6em;
-  padding: .4em;
+  border-radius: 0.6em;
+  padding: 0.4em;
 }
 
 .round-image {
@@ -62,22 +70,23 @@ input:focus, button:focus {
   overflow-y: auto;
 }
 
-  /* Hide scrollbar for Chrome, Safari and Opera */
+/* Hide scrollbar for Chrome, Safari and Opera */
 .scroll-standalone::-webkit-scrollbar {
   display: none;
 }
 
-  /* Hide scrollbar for IE, Edge and Firefox */
+/* Hide scrollbar for IE, Edge and Firefox */
 .scroll-standalone {
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
 }
 
-.user-language, .user-technology {
-  border-radius: .4em;
+.user-language,
+.user-technology {
+  border-radius: 0.4em;
   background-color: lightgrey;
-  padding: .26em;
-  margin: .1em .2em;
+  padding: 0.26em;
+  margin: 0.1em 0.2em;
   width: fit-content;
 }
 
@@ -85,10 +94,10 @@ input:focus, button:focus {
 
 .input-selection {
   position: relative;
-  margin-top: .7em;
+  margin-top: 0.7em;
 }
 
-  /* Don't show the placeholder when the label is on top
+/* Don't show the placeholder when the label is on top
    */
 .input-selection .input-field::-webkit-input-placeholder {
   opacity: 0;
@@ -102,8 +111,8 @@ input:focus, button:focus {
   border-bottom: 1px solid grey;
   box-sizing: border-box;
 
-  margin-bottom: .5em;
-  padding: .4em;
+  margin-bottom: 0.5em;
+  padding: 0.4em;
   padding-left: 0;
 
   font-size: inherit;
@@ -115,22 +124,22 @@ input:focus, button:focus {
   position: absolute;
   left: 0;
 
-  margin-top: .4em;
+  margin-top: 0.4em;
   color: grey;
 }
 
-  /* When hovering, typing or having typed something in an input,
+/* When hovering, typing or having typed something in an input,
    * make the label smaller, color it and then move it up
    */
-.input-selection:hover > .input-field-label ,
-.input-selection > input:not(:placeholder-shown) + .input-field-label ,
+.input-selection:hover > .input-field-label,
+.input-selection > input:not(:placeholder-shown) + .input-field-label,
 .input-selection > input:focus + .input-field-label {
-  font-size: .7em;
+  font-size: 0.7em;
   color: var(--focus-color);
   transform: translate(0, -1.2em);
 }
 
-  /* Show the placeholder, when you've hovered or
+/* Show the placeholder, when you've hovered or
    * focused (typing in) on the input-field
    */
 .input-selection:hover > .input-field::-webkit-input-placeholder,
@@ -138,7 +147,7 @@ input:focus, button:focus {
   opacity: 1;
 }
 
-  /* Make the underline thicker and change it's and the cursors's
+/* Make the underline thicker and change it's and the cursors's
    * color when hovered or focused (typing in) on the input-field
    */
 .input-selection:hover > .input-field,
@@ -149,19 +158,18 @@ input:focus, button:focus {
   margin-top: -1px !important;
 }
 
-
 /* Input errors */
 
 .input-errors {
-  margin-top: -.8em;
-  font-size: .7em;
+  margin-top: -0.8em;
+  font-size: 0.7em;
 
   position: absolute;
   right: 0;
   top: 0;
 }
 
-  /* Move the errors above the input when
+/* Move the errors above the input when
    * using the site on a small screen and
    * add some space for them above the input
    */
@@ -175,7 +183,7 @@ input:focus, button:focus {
 }
 
 .input-errors > .error {
-  margin-left: .3em;
+  margin-left: 0.3em;
 }
 
 .input-field:focus ~ .input-errors > .error {
@@ -194,14 +202,14 @@ input:focus, button:focus {
   background-color: black;
 
   border: 2px solid black;
-  border-radius: .4em;
+  border-radius: 0.4em;
   box-sizing: border-box;
 
-  font-size: .8em;
+  font-size: 0.8em;
   text-align: center;
 
-  margin-top: .5em;
-  padding: .3em;
+  margin-top: 0.5em;
+  padding: 0.3em;
 }
 
 .submit-btn:hover {
@@ -213,7 +221,7 @@ input:focus, button:focus {
 
 .submit-btn:active {
   transition: 0s;
-  transform: scale(.9);
+  transform: scale(0.9);
 }
 
 .delete-btn:hover {
@@ -227,16 +235,16 @@ input:focus, button:focus {
   display: flex;
   flex-wrap: wrap;
   color: gray;
-  font-size: .75em;
-  margin: 0 .3em;
+  font-size: 0.75em;
+  margin: 0 0.3em;
 }
 
 .form-attachment {
   border: 2px solid black;
-  border-radius: .6em;
-  margin-top: .2em;
-  margin-right: .2em;
-  padding: .2em;
+  border-radius: 0.6em;
+  margin-top: 0.2em;
+  margin-right: 0.2em;
+  padding: 0.2em;
   display: flex;
   align-items: center;
 }
@@ -246,12 +254,12 @@ input:focus, button:focus {
 }
 
 .remove-form-attachment {
-  font-size: .9em;
+  font-size: 0.9em;
   color: var(--failure);
   background-color: white;
-  border-radius: .2em;
-  margin: 0 .2em;
-  padding: .2em;
+  border-radius: 0.2em;
+  margin: 0 0.2em;
+  padding: 0.2em;
 }
 
 .remove-form-attachment:hover {
@@ -259,4 +267,3 @@ input:focus, button:focus {
   background-color: var(--failure);
   cursor: pointer;
 }
-
diff --git a/src/theme.scss b/src/theme.scss
deleted file mode 100644
index a87ae45..0000000
--- a/src/theme.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-// Import theming functions
-@import '~@angular/material/theming';
-@import './styles.css';
-@include mat-core();
-
-// Custom Angular theme
-
-// $my-custom-primary: mat-palette($mat-deep-purple);
-// $my-custom-accent: mat-palette($mat-pink, 100, 500, A100);
-// $my-custom-warn: mat-palette($mat-lime);
-
-// $my-custom-theme: mat-light-theme($my-custom-primary, $my-custom-accent, $my-custom-warn);
-
-// @include angular-material-theme($my-custom-theme);
\ No newline at end of file