From b557d17cf87a79b0117bcf82a998092bd72b4df5 Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Wed, 24 Feb 2021 19:00:03 +0200
Subject: Improved semantics of admin panel, loading page and not-found page

---
 .../components/admin-panel-page/admin-panel-page.component.html   | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'src/app/components/admin-panel-page')

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 980f12c..31f0849 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
@@ -1,13 +1,13 @@
 <!-- <app&#45;loading *ngIf="!dataArrived"></app&#45;loading> -->
 
-<div id="content" *ngIf="!dataArrived">
+<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)="logout()">Logout</button>
 	</nav>
 	<hr>
-	<div class="scroll-standalone">
+	<article class="scroll-standalone">
 		<app-success-bar></app-success-bar>
 		<app-error-bar></app-error-bar>
 
@@ -81,5 +81,5 @@
 			<button class="submit-btn" type="submit">Delete</button>
 			<hr>
 		</form>
-	</div>
-</div>
+	</article>
+</main>
-- 
cgit v1.2.3


From eab7b2108d91af1c905f795febf811d5cc404863 Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Thu, 25 Feb 2021 14:38:12 +0200
Subject: Removed unnecessary variables from request subscriptions

---
 .../admin-panel-page/admin-panel-page.component.ts   | 20 ++++++++++----------
 .../comment-page/comment-page.component.ts           |  7 +++----
 src/app/components/feed/feed.component.ts            |  9 ++++-----
 src/app/components/post-page/post-page.component.ts  |  9 ++++-----
 .../profile-settings/profile-settings.component.ts   | 10 +++++-----
 src/app/components/profile/profile.component.ts      | 15 +++++----------
 6 files changed, 31 insertions(+), 39 deletions(-)

(limited to 'src/app/components/admin-panel-page')

diff --git a/src/app/components/admin-panel-page/admin-panel-page.component.ts b/src/app/components/admin-panel-page/admin-panel-page.component.ts
index 99c0721..95d69d3 100644
--- a/src/app/components/admin-panel-page/admin-panel-page.component.ts
+++ b/src/app/components/admin-panel-page/admin-panel-page.component.ts
@@ -53,7 +53,7 @@ export class AdminPanelPageComponent implements OnInit {
           this._router.navigate(['/login']);
         }
       },
-      (err: HttpErrorResponse) => {
+      () => {
         this._router.navigate(['/login']);
       }
     );
@@ -129,7 +129,7 @@ export class AdminPanelPageComponent implements OnInit {
 
     if (languageCreate !== '' && languageCreate !== null) {
       this._languageService.createLanguageWithSessionStorageRequest(languageCreate.trim()).subscribe(
-        (result: object) => {
+        () => {
           this.languageModifiedSuccess('Successfully updated languages!');
         },
         (err: HttpErrorResponse) => {
@@ -147,7 +147,7 @@ export class AdminPanelPageComponent implements OnInit {
       const langId = this.availableLanguages.filter(x => x.name === updateLanguageOldName.trim())[0].id;
 
       this._languageService.putLanguageWithSessionStorageRequest(langId, updateLanguageNewName.trim()).subscribe(
-        (result: object) => {
+        () => {
           this.languageModifiedSuccess('Successfully updated languages!');
         },
         (err: HttpErrorResponse) => {
@@ -164,7 +164,7 @@ export class AdminPanelPageComponent implements OnInit {
       const langId = this.availableLanguages.filter(x => x.name === deleteLanguageName.trim())[0].id;
 
       this._languageService.deleteLanguageWithSessionStorageRequest(langId).subscribe(
-        (result: object) => {
+        () => {
           this.languageModifiedSuccess('Successfully deleted language!');
         },
         (err: HttpErrorResponse) => {
@@ -205,7 +205,7 @@ export class AdminPanelPageComponent implements OnInit {
 
     if (technologyCreate !== '' && technologyCreate !== null) {
       this._technologyService.createTechnologyWithSessionStorageRequest(technologyCreate.trim()).subscribe(
-        (result: object) => {
+        () => {
           this.technologyModifiedSuccess('Successfully updated technologies!');
         },
         (err: HttpErrorResponse) => {
@@ -223,7 +223,7 @@ export class AdminPanelPageComponent implements OnInit {
       const techId = this.availableTechnologies.filter(x => x.name === updateTechnologyOldName.trim())[0].id;
 
       this._technologyService.putTechnologyWithSessionStorageRequest(techId, updateTechnologyNewName.trim()).subscribe(
-        (result: object) => {
+        () => {
           this.technologyModifiedSuccess('Successfully updated technologies!');
         },
         (err: HttpErrorResponse) => {
@@ -240,7 +240,7 @@ export class AdminPanelPageComponent implements OnInit {
       const techId = this.availableTechnologies.filter(x => x.name === deleteTechnologyName.trim())[0].id;
 
       this._technologyService.deleteTechnologyWithSessionStorageRequest(techId).subscribe(
-        (result: object) => {
+        () => {
           this.technologyModifiedSuccess('Successfully deleted technology!');
         },
         (err: HttpErrorResponse) => {
@@ -283,7 +283,7 @@ export class AdminPanelPageComponent implements OnInit {
       const userId: Guid = Guid.parse(deleteUser);
 
       this._userService.deleteUserRequest(userId, this._tokenService.getTokenFromSessionStorage()).subscribe(
-        (result: object) => {
+        () => {
           this.deletionSuccess('Successfully deleted user!');
         },
         (err: HttpErrorResponse) => {
@@ -300,7 +300,7 @@ export class AdminPanelPageComponent implements OnInit {
       const postId: Guid = Guid.parse(deletePost);
 
       this._postService.deletePostRequest(postId, this._tokenService.getTokenFromSessionStorage()).subscribe(
-        (result: object) => {
+        () => {
           this.deletionSuccess('Successfully deleted user!');
         },
         (err: HttpErrorResponse) => {
@@ -317,7 +317,7 @@ export class AdminPanelPageComponent implements OnInit {
       const commentId: Guid = Guid.parse(deleteComment);
 
       this._commentService.deleteCommentWithSessionStorage(commentId).subscribe(
-        (result: object) => {
+        () => {
           this.deletionSuccess('Successfully deleted comment!');
         },
         (err: HttpErrorResponse) => {
diff --git a/src/app/components/comment-page/comment-page.component.ts b/src/app/components/comment-page/comment-page.component.ts
index 045e8ea..413436e 100644
--- a/src/app/components/comment-page/comment-page.component.ts
+++ b/src/app/components/comment-page/comment-page.component.ts
@@ -1,4 +1,3 @@
-import { HttpErrorResponse } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { Title } from '@angular/platform-browser';
@@ -42,7 +41,7 @@ export class CommentPageComponent implements OnInit {
         }
         this.loaded = true;
       },
-      (err: HttpErrorResponse) => {
+      () => {
         this._router.navigate(['/not-found']);
       }
     );
@@ -68,7 +67,7 @@ export class CommentPageComponent implements OnInit {
       if (newMessage !== '' && newMessage !== this.comment.message) {
         console.log(this.commentId);
         this._commentService.putCommentWithSessionStorageRequest(this.commentId, this.comment.postId, newMessage).subscribe(
-          (result: object) => {
+          () => {
             this.reloadPage();
           }
         );
@@ -79,7 +78,7 @@ export class CommentPageComponent implements OnInit {
 
   deleteComment(): void {
     this._commentService.deleteCommentWithSessionStorage(this.commentId).subscribe(
-      (result: object) => {
+      () => {
         this.toPost();
       }
     );
diff --git a/src/app/components/feed/feed.component.ts b/src/app/components/feed/feed.component.ts
index b412b3c..eaa0ef1 100644
--- a/src/app/components/feed/feed.component.ts
+++ b/src/app/components/feed/feed.component.ts
@@ -4,7 +4,6 @@ import { Router } from '@angular/router';
 import { User } from 'src/models/identity/user';
 import { UserService } from '../../services/user.service';
 import { AppConstants } from 'src/app/app-constants.module';
-import { HttpErrorResponse } from '@angular/common/http';
 import { FeedService } from 'src/app/services/feed.service';
 import { Post } from 'src/models/post';
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
@@ -55,7 +54,7 @@ export class FeedComponent implements OnInit {
         Object.assign(this.user, res);
         this.loadFeed();
       },
-      (err: HttpErrorResponse) => {
+      () => {
         this.logout();
       }
     );
@@ -67,7 +66,7 @@ export class FeedComponent implements OnInit {
         this.posts.push(...Object.values(result)[0]);
         this.finishUserLoading();
       },
-      (err) => {
+      () => {
         this.finishUserLoading();
       }
     );
@@ -104,10 +103,10 @@ export class FeedComponent implements OnInit {
     this.dataArrived = false;
 
     this._postService.createPostWithSessionStorageRequest(postMessage, this.files).subscribe(
-      (result: object) => {
+      () => {
         this.goToProfile();
       },
-      (err: HttpErrorResponse) => {
+      () => {
         this.dataArrived = true;
       }
     );
diff --git a/src/app/components/post-page/post-page.component.ts b/src/app/components/post-page/post-page.component.ts
index 3218a19..1ac89f4 100644
--- a/src/app/components/post-page/post-page.component.ts
+++ b/src/app/components/post-page/post-page.component.ts
@@ -1,4 +1,3 @@
-import { HttpErrorResponse } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { Title } from '@angular/platform-browser';
@@ -53,7 +52,7 @@ export class PostPageComponent implements OnInit {
           this.dataArrived = true;
         }
       },
-      (err: HttpErrorResponse) => {
+      () => {
         this._router.navigate(['/not-found']);
       }
     );
@@ -120,7 +119,7 @@ export class PostPageComponent implements OnInit {
 
       if (newMessage === '' && newMessage !== this.post.message) {
         this._postService.putPostWithSessionStorageRequest(this.postId, newMessage, this.files).subscribe(
-          (result: object) => {
+          () => {
             this.reloadPage();
           }
         );
@@ -139,7 +138,7 @@ export class PostPageComponent implements OnInit {
     const newComment = this.addCommentFormGroup.get('newComment')?.value;
     if (newComment !== '' && newComment !== null) {
       this._commentService.createCommentWithSessionStorageRequest(this.postId, newComment).subscribe(
-        (result: object) => {
+        () => {
           this.editPostFormGroup.reset();
           this.reloadPage();
         }
@@ -149,7 +148,7 @@ export class PostPageComponent implements OnInit {
 
   deletePost(): void {
     this._postService.deletePostWithSessionStorage(this.postId).subscribe(
-      (result: object) => {
+      () => {
         this._router.navigate(['/profile/' + this._tokenService.getUsernameFromSessionStorageToken()]);
       }
     );
diff --git a/src/app/components/profile-settings/profile-settings.component.ts b/src/app/components/profile-settings/profile-settings.component.ts
index a484665..f3cd4c1 100644
--- a/src/app/components/profile-settings/profile-settings.component.ts
+++ b/src/app/components/profile-settings/profile-settings.component.ts
@@ -56,7 +56,7 @@ export class ProfileSettingsComponent implements OnInit {
         this.isAdminUser = this.user.roles.map(x => x.name).includes(AppConstants.ADMIN_ROLE_NAME);
         this.finishUserLoading();
       },
-      (err: HttpErrorResponse) => {
+      () => {
         this._router.navigate(['/not-found']);
       }
     );
@@ -89,7 +89,7 @@ export class ProfileSettingsComponent implements OnInit {
             this.goToProfile();
           }
         },
-        (err: HttpErrorResponse) => {
+        () => {
           this.logout();
         }
       );
@@ -181,7 +181,7 @@ export class ProfileSettingsComponent implements OnInit {
     }
 
     this._userService.putProfilePictureFromSessionStorageRequest(this.newProfilePicture).subscribe(
-      (result: object) => {
+      () => {
         this.reloadPage();
       }
     );
@@ -196,7 +196,7 @@ export class ProfileSettingsComponent implements OnInit {
     this.patchTechnologiesControl();
 
     this._userService.putUserFromSessionStorageRequest(this.updateUserFormGroup, this.user.roles, this.user.friends).subscribe(
-        (result: object) => {
+        () => {
           this._successBar.showMsg('Profile updated successfully!');
         },
         (err: HttpErrorResponse) => {
@@ -285,7 +285,7 @@ export class ProfileSettingsComponent implements OnInit {
   deleteAccount(): void {
     if (this.deleteAccountConfirm) {
       this._userService.deleteUserFromSessionStorageRequest().subscribe(
-        (res: object) => {
+        () => {
           this.logout();
         },
         (err: HttpErrorResponse) => {
diff --git a/src/app/components/profile/profile.component.ts b/src/app/components/profile/profile.component.ts
index bbf8585..eaa1bec 100644
--- a/src/app/components/profile/profile.component.ts
+++ b/src/app/components/profile/profile.component.ts
@@ -3,7 +3,6 @@ import { Router } from '@angular/router';
 import { UserService } from 'src/app/services/user.service';
 import { User } from 'src/models/identity/user';
 import { AppConstants } from 'src/app/app-constants.module';
-import { HttpErrorResponse } from '@angular/common/http';
 import { Location } from '@angular/common';
 import { LanguageService } from 'src/app/services/language.service';
 import { TechnologyService } from 'src/app/services/technology.service';
@@ -38,10 +37,6 @@ export class ProfileComponent implements OnInit {
     this._titleService.setTitle(this._title);
   }
 
-  private setDefaultUser(): void {
-    this.user = this._userService.getDefaultUser();
-  }
-
   ngOnInit(): void {
     this._urlUsername = this._router.url.substring(9);
 
@@ -63,7 +58,7 @@ export class ProfileComponent implements OnInit {
         this.isAdminUser = this.user.roles.map(x => x.name).includes(AppConstants.ADMIN_ROLE_NAME);
         this.loadLanguages();
       },
-      (err: HttpErrorResponse) => {
+      () => {
         this._router.navigate(['/not-found']);
       }
     );
@@ -102,7 +97,7 @@ export class ProfileComponent implements OnInit {
         this.userPosts.push(...resultArr);
         this.finishUserLoading();
       },
-      (err: HttpErrorResponse) => {
+      () => {
         this._currentPage = -1;
         this.finishUserLoading();
       }
@@ -126,7 +121,7 @@ export class ProfileComponent implements OnInit {
           }
           this.dataArrived = true;
         },
-        (err: HttpErrorResponse) => {
+        () => {
           this.logout();
         }
       );
@@ -175,10 +170,10 @@ export class ProfileComponent implements OnInit {
           }
 
           this._userService.putBareUserFromSessionStorageRequest(loggedInUser, this.updateFrienship.get('password')?.value).subscribe(
-            (resultUpdate: object) => {
+            () => {
               this.reloadPage();
             },
-            (err: HttpErrorResponse) => {
+            () => {
               this._router.navigate(['/']);
             }
           );
-- 
cgit v1.2.3


From ca7e618ca3350a5cf200ae39c851b016c9088d41 Mon Sep 17 00:00:00 2001
From: transtrike <transtrike@gmail.com>
Date: Thu, 25 Feb 2021 20:51:24 +0200
Subject: Footer added; Pages fucked up

---
 src/app/app.module.ts                              |   4 +-
 .../admin-panel-page.component.html                | 154 +++++++++++---
 .../comment-page/comment-page.component.html       |  19 +-
 src/app/components/feed/feed.component.html        |  71 +++++--
 src/app/components/footer/footer.component.css     |  20 ++
 src/app/components/footer/footer.component.html    |  12 ++
 src/app/components/footer/footer.component.ts      |  18 ++
 src/app/components/login/login.component.html      |  40 +++-
 .../components/not-found/not-found.component.html  |  15 +-
 .../components/post-page/post-page.component.html  |  63 ++++--
 .../profile-settings.component.html                | 234 +++++++++++++++++----
 src/app/components/profile/profile.component.html  |  67 ++++--
 .../components/register/register.component.html    | 134 ++++++++++--
 src/styles.css                                     | 103 ++++-----
 src/theme.scss                                     |  14 --
 15 files changed, 755 insertions(+), 213 deletions(-)
 create mode 100644 src/app/components/footer/footer.component.css
 create mode 100644 src/app/components/footer/footer.component.html
 create mode 100644 src/app/components/footer/footer.component.ts
 delete mode 100644 src/theme.scss

(limited to 'src/app/components/admin-panel-page')

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
-- 
cgit v1.2.3


From 4b094fb29ea7eaeb58f0c29df60e55586a74db76 Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Sat, 6 Mar 2021 14:29:14 +0200
Subject: Reverted footer

---
 src/app/app.module.ts                              |   4 +-
 .../admin-panel-page.component.html                | 154 +++-----------
 .../comment-page/comment-page.component.html       |  19 +-
 src/app/components/feed/feed.component.html        |  71 ++-----
 src/app/components/footer/footer.component.css     |  20 --
 src/app/components/footer/footer.component.html    |  12 --
 src/app/components/footer/footer.component.ts      |  18 --
 src/app/components/login/login.component.html      |  40 +---
 .../components/not-found/not-found.component.html  |  15 +-
 .../components/post-page/post-page.component.html  |  63 ++----
 .../profile-settings.component.html                | 234 ++++-----------------
 src/app/components/profile/profile.component.html  |  67 ++----
 .../components/register/register.component.html    | 134 ++----------
 13 files changed, 151 insertions(+), 700 deletions(-)
 delete mode 100644 src/app/components/footer/footer.component.css
 delete mode 100644 src/app/components/footer/footer.component.html
 delete mode 100644 src/app/components/footer/footer.component.ts

(limited to 'src/app/components/admin-panel-page')

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index e331a5d..1bf44ad 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -25,7 +25,6 @@ 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: [
@@ -44,8 +43,7 @@ import { FooterComponent } from './components/footer/footer.component';
     AdminPanelPageComponent,
     CommentComponent,
     CommentPageComponent,
-    PostAttachmentComponent,
-    FooterComponent
+    PostAttachmentComponent
   ],
   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 0c0954a..31f0849 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,182 +2,84 @@
 
 <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 d59c956..ae114da 100644
--- a/src/app/components/comment-page/comment-page.component.html
+++ b/src/app/components/comment-page/comment-page.component.html
@@ -2,26 +2,15 @@
 
 <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 7f3cb68..230c27b 100644
--- a/src/app/components/feed/feed.component.html
+++ b/src/app/components/feed/feed.component.html
@@ -3,81 +3,41 @@
 <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">
@@ -85,5 +45,4 @@
 			</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
deleted file mode 100644
index b93e1f3..0000000
--- a/src/app/components/footer/footer.component.css
+++ /dev/null
@@ -1,20 +0,0 @@
-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
deleted file mode 100644
index d410597..0000000
--- a/src/app/components/footer/footer.component.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<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
deleted file mode 100644
index e83f840..0000000
--- a/src/app/components/footer/footer.component.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-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 d4f956d..9f74faa 100644
--- a/src/app/components/login/login.component.html
+++ b/src/app/components/login/login.component.html
@@ -2,55 +2,29 @@
 	<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>
-	<app-footer></app-footer>
+	<button class="submit-btn redirect-to-register" (click)="onRedirectRegister()">New to DevHive? Register instead</button>
 </main>
diff --git a/src/app/components/not-found/not-found.component.html b/src/app/components/not-found/not-found.component.html
index 4588d2c..83d73ce 100644
--- a/src/app/components/not-found/not-found.component.html
+++ b/src/app/components/not-found/not-found.component.html
@@ -1,13 +1,10 @@
 <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 9781c18..b8e7e22 100644
--- a/src/app/components/post-page/post-page.component.html
+++ b/src/app/components/post-page/post-page.component.html
@@ -2,75 +2,36 @@
 
 <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 f5f19bd..502697d 100644
--- a/src/app/components/profile-settings/profile-settings.component.html
+++ b/src/app/components/profile-settings/profile-settings.component.html
@@ -3,276 +3,114 @@
 <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 0d9dc6a..0e5f633 100644
--- a/src/app/components/profile/profile.component.html
+++ b/src/app/components/profile/profile.component.html
@@ -3,48 +3,25 @@
 <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>
@@ -55,7 +32,9 @@
 					{{ 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:
@@ -64,18 +43,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 c521d44..0075b1d 100644
--- a/src/app/components/register/register.component.html
+++ b/src/app/components/register/register.component.html
@@ -2,160 +2,64 @@
 	<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>
-	<app-footer></app-footer>
+	<button class="submit-btn redirect-to-login" (click)="onRedirectLogin()">Already have an account? Login here</button>
 </main>
-- 
cgit v1.2.3


From 94d421d08f24b117b58bc87799861016fbff8ec0 Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Sun, 14 Mar 2021 08:31:19 +0200
Subject: Updated admin-panel-page's subscriptions to use an observer object

---
 .../admin-panel-page/admin-panel-page.component.ts | 116 +++++++++++----------
 1 file changed, 61 insertions(+), 55 deletions(-)

(limited to 'src/app/components/admin-panel-page')

diff --git a/src/app/components/admin-panel-page/admin-panel-page.component.ts b/src/app/components/admin-panel-page/admin-panel-page.component.ts
index 95d69d3..d5ecc71 100644
--- a/src/app/components/admin-panel-page/admin-panel-page.component.ts
+++ b/src/app/components/admin-panel-page/admin-panel-page.component.ts
@@ -46,17 +46,17 @@ export class AdminPanelPageComponent implements OnInit {
       return;
     }
 
-    this._userService.getUserFromSessionStorageRequest().subscribe(
-      (result: object) => {
+    this._userService.getUserFromSessionStorageRequest().subscribe({
+      next: (result: object) => {
         const user = result as User;
         if (!user.roles.map(x => x.name).includes(AppConstants.ADMIN_ROLE_NAME)) {
           this._router.navigate(['/login']);
         }
       },
-      () => {
+      error: () => {
         this._router.navigate(['/login']);
       }
-    );
+    });
 
     this.languageForm = this._fb.group({
       languageCreate: new FormControl(''),
@@ -65,9 +65,11 @@ export class AdminPanelPageComponent implements OnInit {
       deleteLanguageName: new FormControl('')
     });
 
-    this.languageForm.valueChanges.subscribe(() => {
-      this._successBar?.hideMsg();
-      this._errorBar?.hideError();
+    this.languageForm.valueChanges.subscribe({
+      next: () => {
+        this._successBar?.hideMsg();
+        this._errorBar?.hideError();
+      }
     });
 
     this.technologyForm = this._fb.group({
@@ -77,9 +79,11 @@ export class AdminPanelPageComponent implements OnInit {
       deleteTechnologyName: new FormControl('')
     });
 
-    this.technologyForm.valueChanges.subscribe(() => {
-      this._successBar?.hideMsg();
-      this._errorBar?.hideError();
+    this.technologyForm.valueChanges.subscribe({
+      next: () => {
+        this._successBar?.hideMsg();
+        this._errorBar?.hideError();
+      }
     });
 
     this.deleteForm = this._fb.group({
@@ -88,9 +92,11 @@ export class AdminPanelPageComponent implements OnInit {
       deleteComment: new FormControl('')
     });
 
-    this.deleteForm.valueChanges.subscribe(() => {
-      this._successBar?.hideMsg();
-      this._errorBar?.hideError();
+    this.deleteForm.valueChanges.subscribe({
+      next: () => {
+        this._successBar?.hideMsg();
+        this._errorBar?.hideError();
+      }
     });
 
     this.loadAvailableLanguages();
@@ -128,14 +134,14 @@ export class AdminPanelPageComponent implements OnInit {
     const languageCreate: string = this.languageForm.get('languageCreate')?.value;
 
     if (languageCreate !== '' && languageCreate !== null) {
-      this._languageService.createLanguageWithSessionStorageRequest(languageCreate.trim()).subscribe(
-        () => {
+      this._languageService.createLanguageWithSessionStorageRequest(languageCreate.trim()).subscribe({
+        next: () => {
           this.languageModifiedSuccess('Successfully updated languages!');
         },
-        (err: HttpErrorResponse) => {
+        error: (err: HttpErrorResponse) => {
           this._errorBar.showError(err);
         }
-      );
+      });
     }
   }
 
@@ -146,14 +152,14 @@ export class AdminPanelPageComponent implements OnInit {
     if (updateLanguageOldName !== '' && updateLanguageOldName !== null && updateLanguageNewName !== '' && updateLanguageNewName !== null) {
       const langId = this.availableLanguages.filter(x => x.name === updateLanguageOldName.trim())[0].id;
 
-      this._languageService.putLanguageWithSessionStorageRequest(langId, updateLanguageNewName.trim()).subscribe(
-        () => {
+      this._languageService.putLanguageWithSessionStorageRequest(langId, updateLanguageNewName.trim()).subscribe({
+        next: () => {
           this.languageModifiedSuccess('Successfully updated languages!');
         },
-        (err: HttpErrorResponse) => {
+        error: (err: HttpErrorResponse) => {
           this._errorBar.showError(err);
         }
-      );
+      });
     }
   }
 
@@ -163,14 +169,14 @@ export class AdminPanelPageComponent implements OnInit {
     if (deleteLanguageName !== '' && deleteLanguageName !== null) {
       const langId = this.availableLanguages.filter(x => x.name === deleteLanguageName.trim())[0].id;
 
-      this._languageService.deleteLanguageWithSessionStorageRequest(langId).subscribe(
-        () => {
+      this._languageService.deleteLanguageWithSessionStorageRequest(langId).subscribe({
+        next: () => {
           this.languageModifiedSuccess('Successfully deleted language!');
         },
-        (err: HttpErrorResponse) => {
+        error: (err: HttpErrorResponse) => {
           this._errorBar.showError(err);
         }
-      );
+      });
     }
   }
 
@@ -181,11 +187,11 @@ export class AdminPanelPageComponent implements OnInit {
   }
 
   private loadAvailableLanguages(): void {
-    this._languageService.getAllLanguagesWithSessionStorageRequest().subscribe(
-      (result: object) => {
+    this._languageService.getAllLanguagesWithSessionStorageRequest().subscribe({
+      next: (result: object) => {
         this.availableLanguages = result as Language[];
       }
-    );
+    });
   }
 
   // Technology modifying
@@ -204,14 +210,14 @@ export class AdminPanelPageComponent implements OnInit {
     const technologyCreate: string = this.technologyForm.get('technologyCreate')?.value;
 
     if (technologyCreate !== '' && technologyCreate !== null) {
-      this._technologyService.createTechnologyWithSessionStorageRequest(technologyCreate.trim()).subscribe(
-        () => {
+      this._technologyService.createTechnologyWithSessionStorageRequest(technologyCreate.trim()).subscribe({
+        next: () => {
           this.technologyModifiedSuccess('Successfully updated technologies!');
         },
-        (err: HttpErrorResponse) => {
+        error: (err: HttpErrorResponse) => {
           this._errorBar.showError(err);
         }
-      );
+      });
     }
   }
 
@@ -222,14 +228,14 @@ export class AdminPanelPageComponent implements OnInit {
     if (updateTechnologyOldName !== '' && updateTechnologyOldName !== null && updateTechnologyNewName !== '' && updateTechnologyNewName !== null) {
       const techId = this.availableTechnologies.filter(x => x.name === updateTechnologyOldName.trim())[0].id;
 
-      this._technologyService.putTechnologyWithSessionStorageRequest(techId, updateTechnologyNewName.trim()).subscribe(
-        () => {
+      this._technologyService.putTechnologyWithSessionStorageRequest(techId, updateTechnologyNewName.trim()).subscribe({
+        next: () => {
           this.technologyModifiedSuccess('Successfully updated technologies!');
         },
-        (err: HttpErrorResponse) => {
+        error: (err: HttpErrorResponse) => {
           this._errorBar.showError(err);
         }
-      );
+      });
     }
   }
 
@@ -239,14 +245,14 @@ export class AdminPanelPageComponent implements OnInit {
     if (deleteTechnologyName !== '' && deleteTechnologyName !== null) {
       const techId = this.availableTechnologies.filter(x => x.name === deleteTechnologyName.trim())[0].id;
 
-      this._technologyService.deleteTechnologyWithSessionStorageRequest(techId).subscribe(
-        () => {
+      this._technologyService.deleteTechnologyWithSessionStorageRequest(techId).subscribe({
+        next: () => {
           this.technologyModifiedSuccess('Successfully deleted technology!');
         },
-        (err: HttpErrorResponse) => {
+        error: (err: HttpErrorResponse) => {
           this._errorBar.showError(err);
         }
-      );
+      });
     }
   }
 
@@ -257,11 +263,11 @@ export class AdminPanelPageComponent implements OnInit {
   }
 
   private loadAvailableTechnologies(): void {
-     this._technologyService.getAllTechnologiesWithSessionStorageRequest().subscribe(
-      (result: object) => {
+     this._technologyService.getAllTechnologiesWithSessionStorageRequest().subscribe({
+      next: (result: object) => {
         this.availableTechnologies = result as Technology[];
       }
-    );
+     });
   }
 
   // Deletions
@@ -282,14 +288,14 @@ export class AdminPanelPageComponent implements OnInit {
     if (deleteUser !== '' && deleteUser !== null) {
       const userId: Guid = Guid.parse(deleteUser);
 
-      this._userService.deleteUserRequest(userId, this._tokenService.getTokenFromSessionStorage()).subscribe(
-        () => {
+      this._userService.deleteUserRequest(userId, this._tokenService.getTokenFromSessionStorage()).subscribe({
+        next: () => {
           this.deletionSuccess('Successfully deleted user!');
         },
-        (err: HttpErrorResponse) => {
+        error: (err: HttpErrorResponse) => {
           this._errorBar.showError(err);
         }
-      );
+      });
     }
   }
 
@@ -299,14 +305,14 @@ export class AdminPanelPageComponent implements OnInit {
     if (deletePost !== '' && deletePost !== null) {
       const postId: Guid = Guid.parse(deletePost);
 
-      this._postService.deletePostRequest(postId, this._tokenService.getTokenFromSessionStorage()).subscribe(
-        () => {
+      this._postService.deletePostRequest(postId, this._tokenService.getTokenFromSessionStorage()).subscribe({
+        next: () => {
           this.deletionSuccess('Successfully deleted user!');
         },
-        (err: HttpErrorResponse) => {
+        error: (err: HttpErrorResponse) => {
           this._errorBar.showError(err);
         }
-      );
+      });
     }
   }
 
@@ -316,14 +322,14 @@ export class AdminPanelPageComponent implements OnInit {
     if (deleteComment !== '' && deleteComment !== null) {
       const commentId: Guid = Guid.parse(deleteComment);
 
-      this._commentService.deleteCommentWithSessionStorage(commentId).subscribe(
-        () => {
+      this._commentService.deleteCommentWithSessionStorage(commentId).subscribe({
+        next: () => {
           this.deletionSuccess('Successfully deleted comment!');
         },
-        (err: HttpErrorResponse) => {
+        error: (err: HttpErrorResponse) => {
           this._errorBar.showError(err);
         }
-      );
+      });
     }
   }
 
-- 
cgit v1.2.3


From 8434044dcf8cec14765aa5d96072feaa2560a823 Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Sun, 14 Mar 2021 09:06:08 +0200
Subject: Fixed includes (for models) of all components

---
 src/app/components/admin-panel-page/admin-panel-page.component.ts | 6 +++---
 src/app/components/comment-page/comment-page.component.ts         | 2 +-
 src/app/components/comment/comment.component.ts                   | 4 ++--
 src/app/components/feed/feed.component.ts                         | 4 ++--
 src/app/components/post-page/post-page.component.ts               | 2 +-
 src/app/components/post/post.component.ts                         | 4 ++--
 src/app/components/profile-settings/profile-settings.component.ts | 6 +++---
 src/app/components/profile/profile.component.ts                   | 6 +++---
 src/app/components/register/register.component.ts                 | 2 +-
 9 files changed, 18 insertions(+), 18 deletions(-)

(limited to 'src/app/components/admin-panel-page')

diff --git a/src/app/components/admin-panel-page/admin-panel-page.component.ts b/src/app/components/admin-panel-page/admin-panel-page.component.ts
index d5ecc71..9beb8bc 100644
--- a/src/app/components/admin-panel-page/admin-panel-page.component.ts
+++ b/src/app/components/admin-panel-page/admin-panel-page.component.ts
@@ -11,9 +11,9 @@ import { PostService } from 'src/app/services/post.service';
 import { TechnologyService } from 'src/app/services/technology.service';
 import { TokenService } from 'src/app/services/token.service';
 import { UserService } from 'src/app/services/user.service';
-import { User } from 'src/models/identity/user';
-import { Language } from 'src/models/language';
-import { Technology } from 'src/models/technology';
+import { User } from 'src/models/identity/user.model';
+import { Language } from 'src/models/language.model';
+import { Technology } from 'src/models/technology.model';
 import { ErrorBarComponent } from '../error-bar/error-bar.component';
 import { SuccessBarComponent } from '../success-bar/success-bar.component';
 
diff --git a/src/app/components/comment-page/comment-page.component.ts b/src/app/components/comment-page/comment-page.component.ts
index 9bbdc59..5d256bf 100644
--- a/src/app/components/comment-page/comment-page.component.ts
+++ b/src/app/components/comment-page/comment-page.component.ts
@@ -5,7 +5,7 @@ import { Router } from '@angular/router';
 import { Guid } from 'guid-typescript';
 import { CommentService } from 'src/app/services/comment.service';
 import { TokenService } from 'src/app/services/token.service';
-import { Comment } from 'src/models/comment';
+import { Comment } from 'src/models/comment.model';
 
 @Component({
   selector: 'app-comment-page',
diff --git a/src/app/components/comment/comment.component.ts b/src/app/components/comment/comment.component.ts
index d4dd9f4..7da896d 100644
--- a/src/app/components/comment/comment.component.ts
+++ b/src/app/components/comment/comment.component.ts
@@ -3,8 +3,8 @@ import { Router } from '@angular/router';
 import { Guid } from 'guid-typescript';
 import { CommentService } from 'src/app/services/comment.service';
 import { UserService } from 'src/app/services/user.service';
-import { Comment } from 'src/models/comment';
-import { User } from 'src/models/identity/user';
+import { Comment } from 'src/models/comment.model';
+import { User } from 'src/models/identity/user.model';
 
 @Component({
   selector: 'app-comment',
diff --git a/src/app/components/feed/feed.component.ts b/src/app/components/feed/feed.component.ts
index a9a042c..895bf76 100644
--- a/src/app/components/feed/feed.component.ts
+++ b/src/app/components/feed/feed.component.ts
@@ -1,11 +1,11 @@
 import { Component, OnInit } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { Router } from '@angular/router';
-import { User } from 'src/models/identity/user';
+import { User } from 'src/models/identity/user.model';
 import { UserService } from '../../services/user.service';
 import { AppConstants } from 'src/app/app-constants.module';
 import { FeedService } from 'src/app/services/feed.service';
-import { Post } from 'src/models/post';
+import { Post } from 'src/models/post.model';
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { PostService } from 'src/app/services/post.service';
 import { TokenService } from 'src/app/services/token.service';
diff --git a/src/app/components/post-page/post-page.component.ts b/src/app/components/post-page/post-page.component.ts
index 7c32ce0..a60f4da 100644
--- a/src/app/components/post-page/post-page.component.ts
+++ b/src/app/components/post-page/post-page.component.ts
@@ -6,7 +6,7 @@ import { Guid } from 'guid-typescript';
 import { CommentService } from 'src/app/services/comment.service';
 import { PostService } from 'src/app/services/post.service';
 import { TokenService } from 'src/app/services/token.service';
-import { Post } from 'src/models/post';
+import { Post } from 'src/models/post.model';
 import { CloudinaryService } from 'src/app/services/cloudinary.service';
 
 @Component({
diff --git a/src/app/components/post/post.component.ts b/src/app/components/post/post.component.ts
index a46811d..fa5ac2f 100644
--- a/src/app/components/post/post.component.ts
+++ b/src/app/components/post/post.component.ts
@@ -3,8 +3,8 @@ import { Router } from '@angular/router';
 import { Guid } from 'guid-typescript';
 import { PostService } from 'src/app/services/post.service';
 import { UserService } from 'src/app/services/user.service';
-import { User } from 'src/models/identity/user';
-import { Post } from 'src/models/post';
+import { User } from 'src/models/identity/user.model';
+import { Post } from 'src/models/post.model';
 
 @Component({
   selector: 'app-post',
diff --git a/src/app/components/profile-settings/profile-settings.component.ts b/src/app/components/profile-settings/profile-settings.component.ts
index ba1fbb6..b856bef 100644
--- a/src/app/components/profile-settings/profile-settings.component.ts
+++ b/src/app/components/profile-settings/profile-settings.component.ts
@@ -6,11 +6,11 @@ import { Router } from '@angular/router';
 import { LanguageService } from 'src/app/services/language.service';
 import { UserService } from 'src/app/services/user.service';
 import { TechnologyService } from 'src/app/services/technology.service';
-import { User } from 'src/models/identity/user';
+import { User } from 'src/models/identity/user.model';
 import { ErrorBarComponent } from '../error-bar/error-bar.component';
 import { SuccessBarComponent } from '../success-bar/success-bar.component';
-import { Language } from 'src/models/language';
-import { Technology } from 'src/models/technology';
+import { Language } from 'src/models/language.model';
+import { Technology } from 'src/models/technology.model';
 import { TokenService } from 'src/app/services/token.service';
 import { Title } from '@angular/platform-browser';
 import { AppConstants } from 'src/app/app-constants.module';
diff --git a/src/app/components/profile/profile.component.ts b/src/app/components/profile/profile.component.ts
index 73e1e96..ed17f33 100644
--- a/src/app/components/profile/profile.component.ts
+++ b/src/app/components/profile/profile.component.ts
@@ -1,16 +1,16 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { UserService } from 'src/app/services/user.service';
-import { User } from 'src/models/identity/user';
+import { User } from 'src/models/identity/user.model';
 import { AppConstants } from 'src/app/app-constants.module';
 import { Location } from '@angular/common';
 import { LanguageService } from 'src/app/services/language.service';
 import { TechnologyService } from 'src/app/services/technology.service';
-import { Post } from 'src/models/post';
+import { Post } from 'src/models/post.model';
 import { FeedService } from 'src/app/services/feed.service';
 import { TokenService } from 'src/app/services/token.service';
 import { Title } from '@angular/platform-browser';
-import { Friend } from 'src/models/identity/friend';
+import { Friend } from 'src/models/identity/friend.model';
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 
 @Component({
diff --git a/src/app/components/register/register.component.ts b/src/app/components/register/register.component.ts
index b5800ad..07b8976 100644
--- a/src/app/components/register/register.component.ts
+++ b/src/app/components/register/register.component.ts
@@ -1,6 +1,6 @@
 import { HttpErrorResponse } from '@angular/common/http';
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { AbstractControl, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { Title } from '@angular/platform-browser';
 import { Router } from '@angular/router';
 import { TokenService } from 'src/app/services/token.service';
-- 
cgit v1.2.3


From 5916079f20c5cd36e4092fd717c1bcc8814670f7 Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Fri, 19 Mar 2021 16:07:42 +0200
Subject: Added navbar component to pages that need it

---
 src/app/components/admin-panel-page/admin-panel-page.component.html | 2 ++
 src/app/components/comment-page/comment-page.component.html         | 2 ++
 src/app/components/feed/feed.component.html                         | 2 ++
 src/app/components/post-page/post-page.component.html               | 2 ++
 src/app/components/profile-settings/profile-settings.component.html | 2 ++
 src/app/components/profile/profile.component.html                   | 2 ++
 6 files changed, 12 insertions(+)

(limited to 'src/app/components/admin-panel-page')

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..96ab545 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
@@ -1,3 +1,5 @@
+<app-navbar></app-navbar>
+
 <!-- <app&#45;loading *ngIf="!dataArrived"></app&#45;loading> -->
 
 <main id="content" *ngIf="!dataArrived">
diff --git a/src/app/components/comment-page/comment-page.component.html b/src/app/components/comment-page/comment-page.component.html
index ae114da..1b94568 100644
--- a/src/app/components/comment-page/comment-page.component.html
+++ b/src/app/components/comment-page/comment-page.component.html
@@ -1,3 +1,5 @@
+<app-navbar></app-navbar>
+
 <app-loading *ngIf="!loaded"></app-loading>
 
 <main id="content" *ngIf="loaded">
diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html
index 5ff2dca..5694b09 100644
--- a/src/app/components/feed/feed.component.html
+++ b/src/app/components/feed/feed.component.html
@@ -1,3 +1,5 @@
+<app-navbar></app-navbar>
+
 <app-loading *ngIf="!dataArrived"></app-loading>
 
 <main id="feed-page" *ngIf="dataArrived">
diff --git a/src/app/components/post-page/post-page.component.html b/src/app/components/post-page/post-page.component.html
index 5da8cc7..fe12177 100644
--- a/src/app/components/post-page/post-page.component.html
+++ b/src/app/components/post-page/post-page.component.html
@@ -1,3 +1,5 @@
+<app-navbar></app-navbar>
+
 <app-loading *ngIf="!dataArrived"></app-loading>
 
 <main id="content" *ngIf="dataArrived">
diff --git a/src/app/components/profile-settings/profile-settings.component.html b/src/app/components/profile-settings/profile-settings.component.html
index 502697d..dbfc747 100644
--- a/src/app/components/profile-settings/profile-settings.component.html
+++ b/src/app/components/profile-settings/profile-settings.component.html
@@ -1,3 +1,5 @@
+<app-navbar></app-navbar>
+
 <app-loading *ngIf="!dataArrived"></app-loading>
 
 <div id="content" *ngIf="dataArrived">
diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html
index 5c21cee..dede887 100644
--- a/src/app/components/profile/profile.component.html
+++ b/src/app/components/profile/profile.component.html
@@ -1,3 +1,5 @@
+<app-navbar></app-navbar>
+
 <app-loading *ngIf="!dataArrived"></app-loading>
 
 <div id="content" *ngIf="dataArrived">
-- 
cgit v1.2.3


From 72bc161e3b33a65783647615736cff6f8581f8be Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Mon, 22 Mar 2021 17:17:59 +0200
Subject: Major redesign of admin panel page component styling

---
 .../admin-panel-page.component.css                 |  45 +----
 .../admin-panel-page.component.html                | 185 ++++++++++++---------
 .../admin-panel-page/admin-panel-page.component.ts |  33 ++--
 3 files changed, 130 insertions(+), 133 deletions(-)

(limited to 'src/app/components/admin-panel-page')

diff --git a/src/app/components/admin-panel-page/admin-panel-page.component.css b/src/app/components/admin-panel-page/admin-panel-page.component.css
index 1f98e20..ec7aa5d 100644
--- a/src/app/components/admin-panel-page/admin-panel-page.component.css
+++ b/src/app/components/admin-panel-page/admin-panel-page.component.css
@@ -1,42 +1,5 @@
-#content {
-  max-width: 22em;
-  justify-content: start;
-}
-
-hr {
-  width: calc(100% - 1em);
-  color: black;
-  border: 1px solid black;
-}
-
-#navigation {
-  width: 100%;
-  display: flex;
-}
-
-#navigation > * {
-  flex: 1;
-  margin-left: .4em;
-}
-
-.submit-btn:first-of-type {
-  margin-left: 0 !important;
-}
-
-#all-languages, #all-technologies {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.flexbox {
-  display: flex;
-}
-
-.flexbox > * {
-  flex: 1;
-  margin-left: 1em;
-}
-
-.flexbox > *:first-child {
-  margin-left: 0;
+.sec-info {
+  width: fit-content;
+  background-color: #424242;
+  margin: 0 0.3em 0.3em 0;
 }
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 96ab545..65f9691 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
@@ -1,87 +1,118 @@
 <app-navbar></app-navbar>
 
-<!-- <app&#45;loading *ngIf="!dataArrived"></app&#45;loading> -->
+<app-loading *ngIf="!dataArrived"></app-loading>
 
-<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)="logout()">Logout</button>
-	</nav>
-	<hr>
-	<article class="scroll-standalone">
-		<app-success-bar></app-success-bar>
-		<app-error-bar></app-error-bar>
+<main class="scroll-standalone under-navbar centered-content flex-col" *ngIf="dataArrived">
+	<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">
-			<div class="input-selection">
-				<label>Create language:</label>
-				<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">
-			</div>
-			<label>Delete language:</label>
-			<div class="flexbox input-selection">
-				<input type="text" class="input-field" formControlName="deleteLanguageName" placeholder="Language name">
-			</div>
-			<button class="submit-btn" type="submit">Modify languages</button>
-			<hr>
-			Available languages:
-			<div id="all-languages">
-				<div class="user-language" *ngFor="let lang of availableLanguages">
-					{{ lang.name }}
+	<div class="card full-width">
+		<section>
+			<button type="button" class="focus-fg-color full-width faded-slim-border padding-smaller lighter-hover click-effect" (click)="toggleLanguages()">
+				▼ Edit Languages ▼
+			</button>
+			<form class="flex-col margin-top-bot-smaller" [formGroup]="languageForm" (ngSubmit)="submitLanguages()" *ngIf="showLanguages">
+				<label class="focus-fg-color">
+					Create language:
+				</label>
+				<input type="text" class="fancy-input full-width faded-slim-border border-bottom-only" formControlName="languageCreate" placeholder="New language name">
+
+				<label class="focus-fg-color">
+					Update language:
+				</label>
+				<div class="flex-row flexible-children">
+					<input type="text" class="fancy-input faded-slim-border border-bottom-only margin-right-small" formControlName="updateLanguageOldName" placeholder="Old language name">
+					<input type="text" class="fancy-input faded-slim-border border-bottom-only" formControlName="updateLanguageNewName" placeholder="New language name">
 				</div>
-			</div>
-			<hr>
-		</form>
 
-		<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">
-			</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">
-			</div>
-			<label>Delete technology:</label>
-			<div class="flexbox input-selection">
-				<input type="text" class="input-field" formControlName="deleteTechnologyName" placeholder="Technology name">
-			</div>
-			<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">
-					{{ tech.name }}
+				<label class="focus-fg-color">
+					Delete language:
+				</label>
+				<input type="text" class="fancy-input full-width faded-slim-border border-bottom-only" formControlName="deleteLanguageName" placeholder="Language name">
+
+				<button class="full-width faded-slim-border padding-smaller lighter-hover click-effect border-radius-smaller" type="submit">
+					Modify languages
+				</button>
+				<section class="faded-slim-border padding-normal margin-top-normal">
+					<div class="none-message" *ngIf="availableLanguages.length === 0">
+						No languages in database!
+					</div>
+					<div *ngIf="availableLanguages.length > 0">
+						Available languages:
+					</div>
+					<div class="flex-row margin-top-normal" *ngFor="let lang of availableLanguages">
+						<div class="sec-info border-radius-normal padding-small">
+							{{ lang.name }}
+						</div>
+					</div>
+				</section>
+			</form>
+		</section>
+		<section>
+			<button type="button" class="focus-fg-color full-width faded-slim-border padding-smaller lighter-hover click-effect margin-top-normal" (click)="toggleTechnologies()">
+				▼ Edit Technologies ▼
+			</button>
+			<form class="flex-col margin-top-bot-smaller" [formGroup]="technologyForm" (ngSubmit)="submitTechnologies()" *ngIf="showTechnologies">
+				<label class="focus-fg-color">
+					Create technology:
+				</label>
+				<input type="text" class="fancy-input full-width faded-slim-border border-bottom-only" formControlName="technologyCreate" placeholder="New technology name">
+
+				<label class="focus-fg-color">
+					Update technology:
+				</label>
+				<div class="flex-row flexible-children">
+					<input type="text" class="fancy-input faded-slim-border border-bottom-only margin-right-small" formControlName="updateTechnologyOldName" placeholder="Old technology name">
+					<input type="text" class="fancy-input faded-slim-border border-bottom-only" formControlName="updateTechnologyNewName" placeholder="New technology name">
 				</div>
-			</div>
-			<hr>
-		</form>
 
-		<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">
-			</div>
+				<label class="focus-fg-color">
+					Delete technology:
+				</label>
+				<input type="text" class="fancy-input full-width faded-slim-border border-bottom-only" formControlName="deleteTechnologyName" placeholder="Technology name">
+
+				<button class="full-width faded-slim-border padding-smaller lighter-hover click-effect border-radius-smaller" type="submit">
+					Modify technology
+				</button>
+				<section class="faded-slim-border padding-normal margin-top-normal">
+					<div class="none-message" *ngIf="availableTechnologies.length === 0">
+						No technologies in database!
+					</div>
+					<div *ngIf="availableTechnologies.length > 0">
+						Available technologies:
+					</div>
+					<div class="flex-row margin-top-normal" *ngFor="let tech of availableTechnologies">
+						<div class="sec-info border-radius-normal padding-small">
+							{{ tech.name }}
+						</div>
+					</div>
+				</section>
+			</form>
+		</section>
+		<section>
+			<button type="button" class="focus-fg-color full-width faded-slim-border padding-smaller lighter-hover click-effect margin-top-normal" (click)="toggleDeletions()">
+				▼ Deletions ▼
+			</button>
+			<form class="flex-col margin-top-bot-smaller" [formGroup]="deleteForm" (ngSubmit)="submitDelete()" *ngIf="showDeletions">
+				<label class="focus-fg-color">
+					Delete user by Id:
+				</label>
+				<input type="text" class="fancy-input full-width faded-slim-border border-bottom-only" formControlName="deleteUser" placeholder="User Id">
+
+				<label class="focus-fg-color">
+					Delete post by Id:
+				</label>
+				<input type="text" class="fancy-input full-width faded-slim-border border-bottom-only" formControlName="deletePost" placeholder="Post Id">
+
+				<label class="focus-fg-color">
+					Delete comment by Id:
+				</label>
+				<input type="text" class="fancy-input full-width faded-slim-border border-bottom-only" formControlName="deleteComment" placeholder="Comment Id">
 
-			<div class="input-selection">
-				<label>Delete post by Id:</label>
-				<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">
-			</div>
-			<button class="submit-btn" type="submit">Delete</button>
-			<hr>
-		</form>
-	</article>
+				<button class="full-width faded-slim-border padding-smaller lighter-hover click-effect border-radius-smaller" type="submit">
+					Delete
+				</button>
+			</form>
+		</section>
+	</div>
 </main>
diff --git a/src/app/components/admin-panel-page/admin-panel-page.component.ts b/src/app/components/admin-panel-page/admin-panel-page.component.ts
index 9beb8bc..d1070b5 100644
--- a/src/app/components/admin-panel-page/admin-panel-page.component.ts
+++ b/src/app/components/admin-panel-page/admin-panel-page.component.ts
@@ -103,6 +103,24 @@ export class AdminPanelPageComponent implements OnInit {
     this.loadAvailableTechnologies();
   }
 
+  private loadAvailableLanguages(): void {
+    this._languageService.getAllLanguagesWithSessionStorageRequest().subscribe({
+      next: (result: object) => {
+        this.availableLanguages = result as Language[];
+        this.dataArrived = true;
+      }
+    });
+  }
+
+  private loadAvailableTechnologies(): void {
+     this._technologyService.getAllTechnologiesWithSessionStorageRequest().subscribe({
+      next: (result: object) => {
+        this.availableTechnologies = result as Technology[];
+        this.dataArrived = true;
+      }
+     });
+  }
+
   // Navigation
 
   backToProfile(): void {
@@ -186,13 +204,6 @@ export class AdminPanelPageComponent implements OnInit {
     this.loadAvailableLanguages();
   }
 
-  private loadAvailableLanguages(): void {
-    this._languageService.getAllLanguagesWithSessionStorageRequest().subscribe({
-      next: (result: object) => {
-        this.availableLanguages = result as Language[];
-      }
-    });
-  }
 
   // Technology modifying
 
@@ -262,14 +273,6 @@ export class AdminPanelPageComponent implements OnInit {
     this.loadAvailableTechnologies();
   }
 
-  private loadAvailableTechnologies(): void {
-     this._technologyService.getAllTechnologiesWithSessionStorageRequest().subscribe({
-      next: (result: object) => {
-        this.availableTechnologies = result as Technology[];
-      }
-     });
-  }
-
   // Deletions
 
   toggleDeletions(): void {
-- 
cgit v1.2.3


From 9906b285148f54b4060c71012854a814409cc9d7 Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Mon, 22 Mar 2021 20:23:30 +0200
Subject: Improved readability and consistency of font-size, text, border,
 colors and padding CSS class names

---
 .../admin-panel-page.component.html                | 62 +++++++++++-----------
 src/app/components/comment/comment.component.html  | 18 +++----
 src/app/components/feed/feed.component.html        | 12 ++---
 src/app/components/login/login.component.html      | 22 ++++----
 src/app/components/navbar/navbar.component.html    | 20 +++----
 .../components/not-found/not-found.component.html  | 10 ++--
 .../post-attachment/post-attachment.component.html |  4 +-
 .../components/post-page/post-page.component.html  |  6 +--
 src/app/components/post/post.component.html        | 36 ++++++-------
 .../profile-settings.component.html                | 54 +++++++++----------
 src/app/components/profile/profile.component.html  | 22 ++++----
 .../components/register/register.component.html    | 34 ++++++------
 src/styles.css                                     | 54 ++++++++++---------
 13 files changed, 178 insertions(+), 176 deletions(-)

(limited to 'src/app/components/admin-panel-page')

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 65f9691..80d6795 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
@@ -6,34 +6,34 @@
 	<app-success-bar></app-success-bar>
 	<app-error-bar></app-error-bar>
 
-	<div class="card full-width">
+	<div class="card width-full">
 		<section>
-			<button type="button" class="focus-fg-color full-width faded-slim-border padding-smaller lighter-hover click-effect" (click)="toggleLanguages()">
+			<button type="button" class="fg-focus width-full border-faded-slim padding-dot3 lighter-hover click-effect" (click)="toggleLanguages()">
 				▼ Edit Languages ▼
 			</button>
 			<form class="flex-col margin-top-bot-smaller" [formGroup]="languageForm" (ngSubmit)="submitLanguages()" *ngIf="showLanguages">
-				<label class="focus-fg-color">
+				<label class="fg-focus">
 					Create language:
 				</label>
-				<input type="text" class="fancy-input full-width faded-slim-border border-bottom-only" formControlName="languageCreate" placeholder="New language name">
+				<input type="text" class="fancy-input width-full border-faded-slim border-bottom-only" formControlName="languageCreate" placeholder="New language name">
 
-				<label class="focus-fg-color">
+				<label class="fg-focus">
 					Update language:
 				</label>
 				<div class="flex-row flexible-children">
-					<input type="text" class="fancy-input faded-slim-border border-bottom-only margin-right-small" formControlName="updateLanguageOldName" placeholder="Old language name">
-					<input type="text" class="fancy-input faded-slim-border border-bottom-only" formControlName="updateLanguageNewName" placeholder="New language name">
+					<input type="text" class="fancy-input border-faded-slim border-bottom-only margin-right-small" formControlName="updateLanguageOldName" placeholder="Old language name">
+					<input type="text" class="fancy-input border-faded-slim border-bottom-only" formControlName="updateLanguageNewName" placeholder="New language name">
 				</div>
 
-				<label class="focus-fg-color">
+				<label class="fg-focus">
 					Delete language:
 				</label>
-				<input type="text" class="fancy-input full-width faded-slim-border border-bottom-only" formControlName="deleteLanguageName" placeholder="Language name">
+				<input type="text" class="fancy-input width-full border-faded-slim border-bottom-only" formControlName="deleteLanguageName" placeholder="Language name">
 
-				<button class="full-width faded-slim-border padding-smaller lighter-hover click-effect border-radius-smaller" type="submit">
+				<button class="width-full border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3" type="submit">
 					Modify languages
 				</button>
-				<section class="faded-slim-border padding-normal margin-top-normal">
+				<section class="border-faded-slim padding-dot4 margin-top-normal">
 					<div class="none-message" *ngIf="availableLanguages.length === 0">
 						No languages in database!
 					</div>
@@ -41,7 +41,7 @@
 						Available languages:
 					</div>
 					<div class="flex-row margin-top-normal" *ngFor="let lang of availableLanguages">
-						<div class="sec-info border-radius-normal padding-small">
+						<div class="sec-info border-radius-dot5r padding-dot2">
 							{{ lang.name }}
 						</div>
 					</div>
@@ -49,32 +49,32 @@
 			</form>
 		</section>
 		<section>
-			<button type="button" class="focus-fg-color full-width faded-slim-border padding-smaller lighter-hover click-effect margin-top-normal" (click)="toggleTechnologies()">
+			<button type="button" class="fg-focus width-full border-faded-slim padding-dot3 lighter-hover click-effect margin-top-normal" (click)="toggleTechnologies()">
 				▼ Edit Technologies ▼
 			</button>
 			<form class="flex-col margin-top-bot-smaller" [formGroup]="technologyForm" (ngSubmit)="submitTechnologies()" *ngIf="showTechnologies">
-				<label class="focus-fg-color">
+				<label class="fg-focus">
 					Create technology:
 				</label>
-				<input type="text" class="fancy-input full-width faded-slim-border border-bottom-only" formControlName="technologyCreate" placeholder="New technology name">
+				<input type="text" class="fancy-input width-full border-faded-slim border-bottom-only" formControlName="technologyCreate" placeholder="New technology name">
 
-				<label class="focus-fg-color">
+				<label class="fg-focus">
 					Update technology:
 				</label>
 				<div class="flex-row flexible-children">
-					<input type="text" class="fancy-input faded-slim-border border-bottom-only margin-right-small" formControlName="updateTechnologyOldName" placeholder="Old technology name">
-					<input type="text" class="fancy-input faded-slim-border border-bottom-only" formControlName="updateTechnologyNewName" placeholder="New technology name">
+					<input type="text" class="fancy-input border-faded-slim border-bottom-only margin-right-small" formControlName="updateTechnologyOldName" placeholder="Old technology name">
+					<input type="text" class="fancy-input border-faded-slim border-bottom-only" formControlName="updateTechnologyNewName" placeholder="New technology name">
 				</div>
 
-				<label class="focus-fg-color">
+				<label class="fg-focus">
 					Delete technology:
 				</label>
-				<input type="text" class="fancy-input full-width faded-slim-border border-bottom-only" formControlName="deleteTechnologyName" placeholder="Technology name">
+				<input type="text" class="fancy-input width-full border-faded-slim border-bottom-only" formControlName="deleteTechnologyName" placeholder="Technology name">
 
-				<button class="full-width faded-slim-border padding-smaller lighter-hover click-effect border-radius-smaller" type="submit">
+				<button class="width-full border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3" type="submit">
 					Modify technology
 				</button>
-				<section class="faded-slim-border padding-normal margin-top-normal">
+				<section class="border-faded-slim padding-dot4 margin-top-normal">
 					<div class="none-message" *ngIf="availableTechnologies.length === 0">
 						No technologies in database!
 					</div>
@@ -82,7 +82,7 @@
 						Available technologies:
 					</div>
 					<div class="flex-row margin-top-normal" *ngFor="let tech of availableTechnologies">
-						<div class="sec-info border-radius-normal padding-small">
+						<div class="sec-info border-radius-dot5r padding-dot2">
 							{{ tech.name }}
 						</div>
 					</div>
@@ -90,26 +90,26 @@
 			</form>
 		</section>
 		<section>
-			<button type="button" class="focus-fg-color full-width faded-slim-border padding-smaller lighter-hover click-effect margin-top-normal" (click)="toggleDeletions()">
+			<button type="button" class="fg-focus width-full border-faded-slim padding-dot3 lighter-hover click-effect margin-top-normal" (click)="toggleDeletions()">
 				▼ Deletions ▼
 			</button>
 			<form class="flex-col margin-top-bot-smaller" [formGroup]="deleteForm" (ngSubmit)="submitDelete()" *ngIf="showDeletions">
-				<label class="focus-fg-color">
+				<label class="fg-focus">
 					Delete user by Id:
 				</label>
-				<input type="text" class="fancy-input full-width faded-slim-border border-bottom-only" formControlName="deleteUser" placeholder="User Id">
+				<input type="text" class="fancy-input width-full border-faded-slim border-bottom-only" formControlName="deleteUser" placeholder="User Id">
 
-				<label class="focus-fg-color">
+				<label class="fg-focus">
 					Delete post by Id:
 				</label>
-				<input type="text" class="fancy-input full-width faded-slim-border border-bottom-only" formControlName="deletePost" placeholder="Post Id">
+				<input type="text" class="fancy-input width-full border-faded-slim border-bottom-only" formControlName="deletePost" placeholder="Post Id">
 
-				<label class="focus-fg-color">
+				<label class="fg-focus">
 					Delete comment by Id:
 				</label>
-				<input type="text" class="fancy-input full-width faded-slim-border border-bottom-only" formControlName="deleteComment" placeholder="Comment Id">
+				<input type="text" class="fancy-input width-full border-faded-slim border-bottom-only" formControlName="deleteComment" placeholder="Comment Id">
 
-				<button class="full-width faded-slim-border padding-smaller lighter-hover click-effect border-radius-smaller" type="submit">
+				<button class="width-full border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3" type="submit">
 					Delete
 				</button>
 			</form>
diff --git a/src/app/components/comment/comment.component.html b/src/app/components/comment/comment.component.html
index 27a11e6..0ec443b 100644
--- a/src/app/components/comment/comment.component.html
+++ b/src/app/components/comment/comment.component.html
@@ -9,36 +9,36 @@
 			<span>
 				{{ user.firstName }} {{ user.lastName }}
 			</span>
-			<span class="fg-color-faded">
+			<span class="fg-faded">
 				@{{ user.userName }}
 			</span>
 		</summary>
 		<form [formGroup]="editCommentFormGroup" *ngIf="editingComment" (ngSubmit)="editComment()">
-			<textarea class="textarea-new-msg full-width faded-slim-border border-bottom-only padding-small margin-bot-bigger" rows="1" formControlName="newCommentMessage" placeholder="What's on your mind?"></textarea>
-			<button type="submit" class="faded-slim-border full-width padding-small lighter-hover click-effect border-radius-smaller margin-bot-bigger">
+			<textarea class="textarea-new-msg width-full border-faded-slim border-bottom-only padding-dot2 margin-bot-bigger" rows="1" formControlName="newCommentMessage" placeholder="What's on your mind?"></textarea>
+			<button type="submit" class="border-faded-slim width-full padding-dot2 lighter-hover click-effect border-radius-dot3 margin-bot-bigger">
 				Update Comment
 			</button>
 		</form>
 		<article class="message margin-top-bot-small" *ngIf="!editingComment">
 			{{ comment.message }}
 		</article>
-		<section class="comment-details flex-row flex-justify-end font-size-dot7 faded-slim-border border-bottom-only">
+		<section class="comment-details flex-row flex-justify-end font-size-dot7 border-faded-slim border-bottom-only">
 			<time class="flex-row flex-center-align-items">
-				<img class="img-height-font-size" src="/assets/icons/tabler-icon-calendar-time.svg">&nbsp;
+				<img class="height-font" src="/assets/icons/tabler-icon-calendar-time.svg">&nbsp;
 				<span>
 					{{ timeCreated }}
 				</span>
 			</time>
 		</section>
-		<section class="flex-row justify-children-center flex-center-align-children">
-			<button class="padding-small lighter-hover click-effect border-radius-smaller" *ngIf="loggedInAuthor" (click)="toggleEditing()">
+		<section class="flex-row justify-children-center align-children-center">
+			<button class="padding-dot2 lighter-hover click-effect border-radius-dot3" *ngIf="loggedInAuthor" (click)="toggleEditing()">
 				<img src="/assets/icons/tabler-icon-edit.svg">
 			</button>
-			<button #share ngxClipboard [cbContent]="getPostLink()" class="flexible padding-small lighter-hover click-effect border-radius-smaller" (click)="showCopiedMessage()">
+			<button #share ngxClipboard [cbContent]="getPostLink()" class="flexible padding-dot2 lighter-hover click-effect border-radius-dot3" (click)="showCopiedMessage()">
 				<img src="/assets/icons/tabler-icon-link.svg">
 				&nbsp;Share
 			</button>
-			<button class="padding-small lighter-hover click-effect border-radius-smaller" *ngIf="loggedInAuthor" (click)="deleteComment()">
+			<button class="padding-dot2 lighter-hover click-effect border-radius-dot3" *ngIf="loggedInAuthor" (click)="deleteComment()">
 				<img src="/assets/icons/tabler-icon-trash.svg">
 			</button>
 		</section>
diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html
index a7a5e0d..d81a142 100644
--- a/src/app/components/feed/feed.component.html
+++ b/src/app/components/feed/feed.component.html
@@ -4,24 +4,24 @@
 
 <main class="centered-content scroll-standalone under-navbar flex-col flex-justify-start" *ngIf="dataArrived">
 	<form id="create-post" class="card flex-col" [formGroup]="createPostFormGroup" (ngSubmit)="createPost()">
-		<textarea class="textarea-new-msg faded-slim-border border-bottom-only padding-small" rows="1" formControlName="newPostMessage" placeholder="What's on your mind?"></textarea>
-		<section class="flex-row flex-justify-start flex-center-align-children top-bot-padding-bigger">
+		<textarea class="textarea-new-msg border-faded-slim border-bottom-only padding-dot2" rows="1" formControlName="newPostMessage" placeholder="What's on your mind?"></textarea>
+		<section class="flex-row flex-justify-start align-children-center top-bot-padding-dot6ger">
 			<div class="file-button hover-half-opacity click-effect">
 				<img src="/assets/icons/tabler-icon-paperclip.svg">
 				<input type="file" formControlName="fileUpload" (change)="onFileUpload($event)" multiple>
 			</div>
 		</section>
-		<section class="flex-row bot-padding-bigger">
-			<div *ngFor="let file of files" class="form-attachment faded-slim-border flexible flex-row flex-no-wrap flex-center-align-items padding-small margin-top-bot-small">
+		<section class="flex-row bot-padding-dot6ger">
+			<div *ngFor="let file of files" class="form-attachment border-faded-slim flexible flex-row flex-no-wrap flex-center-align-items padding-dot2 margin-top-bot-small">
 				<div class="flexible">
 					{{ file.name ? file.name : 'Attachment' }}
 				</div>
-				<div class="flex-col hover-half-opacity border-radius-small click-effect" (click)="removeAttachment(file.name)">
+				<div class="flex-col hover-half-opacity border-radius-dot2 click-effect" (click)="removeAttachment(file.name)">
 					<img src="/assets/icons/tabler-icon-x.svg">
 				</div>
 			</div>
 		</section>
-		<button class="faded-slim-border padding-small lighter-hover click-effect border-radius-smaller">
+		<button class="border-faded-slim padding-dot2 lighter-hover click-effect border-radius-dot3">
 			Post
 		</button>
 	</form>
diff --git a/src/app/components/login/login.component.html b/src/app/components/login/login.component.html
index 5ed1ac8..7649a3c 100644
--- a/src/app/components/login/login.component.html
+++ b/src/app/components/login/login.component.html
@@ -1,25 +1,25 @@
-<main class="centered-content flex-col flex-center-align-items flex-justify-center full-height">
-	<summary class="title card full-width no-margin padding-small">Login</summary>
+<main class="centered-content flex-col flex-center-align-items flex-justify-center height-full">
+	<summary class="title card width-full no-margin padding-dot2">Login</summary>
 
-	<app-error-bar class="full-width margin-top-normal"></app-error-bar>
+	<app-error-bar class="width-full margin-top-normal"></app-error-bar>
 
-	<form class="full-width card padding-big" [formGroup]="loginUserFormGroup" (ngSubmit)="onSubmit()">
-		<section class="input-selection full-width">
-			<input type="text" placeholder="Username" class="fancy-input full-width faded-slim-border border-bottom-only" formControlName="username" required>
-			<label class="fancy-input-label full-width">Username</label>
+	<form class="width-full card padding-dot6" [formGroup]="loginUserFormGroup" (ngSubmit)="onSubmit()">
+		<section class="input-selection width-full">
+			<input type="text" placeholder="Username" class="fancy-input width-full border-faded-slim border-bottom-only" formControlName="username" required>
+			<label class="fancy-input-label width-full">Username</label>
 			<div class="input-errors">
 				<label *ngIf="loginUserFormGroup.get('username')?.errors?.required" class="error">*Required</label>
 			</div>
 		</section>
 		<section class="input-selection">
-			<input type="password" placeholder="Password" class="fancy-input full-width faded-slim-border border-bottom-only" formControlName="password" required>
-			<label class="fancy-input-label full-width">Password</label>
+			<input type="password" placeholder="Password" class="fancy-input width-full border-faded-slim border-bottom-only" formControlName="password" required>
+			<label class="fancy-input-label width-full">Password</label>
 			<div class="input-errors">
 				<label *ngIf="loginUserFormGroup.get('password')?.errors?.required" class="error">*Required</label>
 			</div>
 		</section>
 
-		<button class="faded-slim-border padding-smaller lighter-hover click-effect border-radius-smaller full-width" type="submit">Submit</button>
+		<button class="border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3 width-full" type="submit">Submit</button>
 	</form>
-	<button class="focus-fg-color faded-slim-border padding-smaller lighter-hover click-effect border-radius-smaller full-width margin-top-normal" (click)="onRedirectRegister()">New to DevHive? Register instead</button>
+	<button class="fg-focus border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3 width-full margin-top-normal" (click)="onRedirectRegister()">New to DevHive? Register instead</button>
 </main>
diff --git a/src/app/components/navbar/navbar.component.html b/src/app/components/navbar/navbar.component.html
index 89a15e1..d05f6e1 100644
--- a/src/app/components/navbar/navbar.component.html
+++ b/src/app/components/navbar/navbar.component.html
@@ -1,40 +1,40 @@
 <nav id="navbar">
-	<div id="nav-contents" class="centered-content flex-row padding-smaller flex-center-align-items">
-		<div class="nav-item border-radius-small flex-row flex-center-align-items light-hover hover-half-opacity click-effect" (click)="goToProfile()" *ngIf="loggedIn">
+	<div id="nav-contents" class="centered-content flex-row padding-dot3 flex-center-align-items">
+		<div class="nav-item border-radius-dot2 flex-row flex-center-align-items light-hover hover-half-opacity click-effect" (click)="goToProfile()" *ngIf="loggedIn">
 			<div id="nav-profile-picture" class="flex-col">
 				<img class="round-image" [src]="user.profilePictureURL">
 			</div>
 			<div id="nav-username" class="font-size-dot9 flex-col">
-				<div class="padding-small">
+				<div class="padding-dot2">
 					@{{ user.userName }}
 				</div>
 			</div>
 		</div>
-		<div class="nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" (click)="goToFeed()" *ngIf="loggedIn">
+		<div class="nav-item flex-col border-radius-dot2 light-hover hover-half-opacity click-effect" (click)="goToFeed()" *ngIf="loggedIn">
 			<img src="/assets/icons/tabler-icon-home.svg">
 		</div>
-		<div class="nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" style="display: none">
+		<div class="nav-item flex-col border-radius-dot2 light-hover hover-half-opacity click-effect" style="display: none">
 			<!-- Trending functionality isn't implemented yet! -->
 			<img src="/assets/icons/tabler-icon-trending-up.svg">
 		</div>
-		<div class="nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" style="display: none">
+		<div class="nav-item flex-col border-radius-dot2 light-hover hover-half-opacity click-effect" style="display: none">
 			<!-- Chat functionality isn't implemented yet! -->
 			<img src="/assets/icons/tabler-icon-message-circle.svg">
 		</div>
-		<div class="nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" style="display: none">
+		<div class="nav-item flex-col border-radius-dot2 light-hover hover-half-opacity click-effect" style="display: none">
 			<!-- Search functionality isn't implemented yet! -->
 			<img src="/assets/icons/tabler-icon-search.svg">
 		</div>
 		<div class="flexible">
 			<!-- This element serves as a spacer -->
 		</div>
-		<div class="nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" (click)="goToSettings()" *ngIf="loggedIn">
+		<div class="nav-item flex-col border-radius-dot2 light-hover hover-half-opacity click-effect" (click)="goToSettings()" *ngIf="loggedIn">
 			<img src="/assets/icons/tabler-icon-settings.svg">
 		</div>
-		<div class="nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" (click)="logout()" *ngIf="loggedIn">
+		<div class="nav-item flex-col border-radius-dot2 light-hover hover-half-opacity click-effect" (click)="logout()" *ngIf="loggedIn">
 			<img src="/assets/icons/tabler-icon-logout.svg">
 		</div>
-		<div class="nav-item flex-row flex-center-align-items border-radius-small light-hover hover-half-opacity click-effect side-padding-smaller" (click)="goToLogin()" *ngIf="!loggedIn">
+		<div class="nav-item flex-row flex-center-align-items border-radius-dot2 light-hover hover-half-opacity click-effect side-padding-dot3" (click)="goToLogin()" *ngIf="!loggedIn">
 			Login&nbsp;
 			<img src="/assets/icons/tabler-icon-login.svg">
 		</div>
diff --git a/src/app/components/not-found/not-found.component.html b/src/app/components/not-found/not-found.component.html
index 50bb39b..7b776bd 100644
--- a/src/app/components/not-found/not-found.component.html
+++ b/src/app/components/not-found/not-found.component.html
@@ -1,15 +1,15 @@
-<main class="centered-content flex-col flex-center-align-items flex-justify-center full-height">
-	<div class="card full-width padding-big">
+<main class="centered-content flex-col flex-center-align-items flex-justify-center height-full">
+	<div class="card width-full padding-dot6">
 		<summary class="title">
 			Page not found!
 		</summary>
 		<hr class="card-hr">
-		<nav class="flex-row flexible-children padding-small">
-			<button class="flex-row flex-justify-center flex-center-align-items faded-slim-border padding-smaller lighter-hover click-effect border-radius-smaller margin-right-small" (click)="backToFeed()">
+		<nav class="flex-row flexible-children padding-dot2">
+			<button class="flex-row flex-justify-center flex-center-align-items border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3 margin-right-small" (click)="backToFeed()">
 				<img src="/assets/icons/tabler-icon-home.svg">
 				&nbsp;Back to feed
 			</button>
-			<button class="flex-row flex-justify-center flex-center-align-items faded-slim-border padding-smaller lighter-hover click-effect border-radius-smaller" (click)="backToLogin()">
+			<button class="flex-row flex-justify-center flex-center-align-items border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3" (click)="backToLogin()">
 				<img src="/assets/icons/tabler-icon-login.svg">
 				&nbsp;Back to login
 			</button>
diff --git a/src/app/components/post-attachment/post-attachment.component.html b/src/app/components/post-attachment/post-attachment.component.html
index 04ba633..7ef8f07 100644
--- a/src/app/components/post-attachment/post-attachment.component.html
+++ b/src/app/components/post-attachment/post-attachment.component.html
@@ -1,4 +1,4 @@
-<figure class="form-attachment faded-slim-border flexible flex-row flex-no-wrap padding-small hover-half-opacity margin-top-bot-small" (click)="toggleShowFull()">
+<figure class="form-attachment border-faded-slim flexible flex-row flex-no-wrap padding-dot2 hover-half-opacity margin-top-bot-small" (click)="toggleShowFull()">
 	<div class="flex-col flex-justify-center margin-right-small" [ngSwitch]="fileType">
 		<img *ngSwitchCase="'img'" src="/assets/icons/tabler-icon-photo.svg">
 		<img *ngSwitchDefault src="/assets/icons/tabler-icon-file.svg">
@@ -10,7 +10,7 @@
 
 <div class="show-full-attachment flex-row flex-justify-center flex-center-align-items" *ngIf="showFull" (click)="toggleShowFull()">
 	<img class="attachment-img" *ngIf="isImage" src="{{paramURL}}">
-	<a class="attachment-download faded-slim-border padding-normal hover-half-opacity click-effect border-radius-smaller" *ngIf="!isImage" href="{{paramURL}}">
+	<a class="attachment-download border-faded-slim padding-dot4 hover-half-opacity click-effect border-radius-dot3" *ngIf="!isImage" href="{{paramURL}}">
 		Download attachment
 	</a>
 </div>
diff --git a/src/app/components/post-page/post-page.component.html b/src/app/components/post-page/post-page.component.html
index 10618c1..b05046e 100644
--- a/src/app/components/post-page/post-page.component.html
+++ b/src/app/components/post-page/post-page.component.html
@@ -4,9 +4,9 @@
 
 <main class="centered-content scroll-standalone under-navbar flex-col" *ngIf="dataArrived">
 	<app-post [paramId]="postId.toString()"></app-post>
-	<form class="card flex-col full-width no-margin-top" [formGroup]="addCommentFormGroup" (ngSubmit)="addComment()">
-		<textarea rows="1" placeholder="Add a new comment" class="textarea-new-msg faded-slim-border border-bottom-only padding-small margin-bot-bigger" formControlName="newComment"></textarea>
-		<button class="faded-slim-border padding-small lighter-hover click-effect border-radius-smaller" type="submit">
+	<form class="card flex-col width-full no-margin-top" [formGroup]="addCommentFormGroup" (ngSubmit)="addComment()">
+		<textarea rows="1" placeholder="Add a new comment" class="textarea-new-msg border-faded-slim border-bottom-only padding-dot2 margin-bot-bigger" formControlName="newComment"></textarea>
+		<button class="border-faded-slim padding-dot2 lighter-hover click-effect border-radius-dot3" type="submit">
 			Add Comment
 		</button>
 	</form>
diff --git a/src/app/components/post/post.component.html b/src/app/components/post/post.component.html
index 65bc73a..1008e64 100644
--- a/src/app/components/post/post.component.html
+++ b/src/app/components/post/post.component.html
@@ -9,7 +9,7 @@
 			<span>
 				{{ user.firstName }} {{ user.lastName }}
 			</span>
-			<span class="fg-color-faded">
+			<span class="fg-faded">
 				@{{ user.userName }}
 			</span>
 		</summary>
@@ -22,66 +22,66 @@
 			</figure>
 		</section>
 		<form [formGroup]="editPostFormGroup" *ngIf="editingPost">
-			<textarea class="textarea-new-msg full-width faded-slim-border border-bottom-only padding-small" rows="1" formControlName="newPostMessage" placeholder="What's on your mind?"></textarea>
-			<section class="flex-row flex-justify-start flex-center-align-children top-bot-padding-bigger">
+			<textarea class="textarea-new-msg width-full border-faded-slim border-bottom-only padding-dot2" rows="1" formControlName="newPostMessage" placeholder="What's on your mind?"></textarea>
+			<section class="flex-row flex-justify-start align-children-center top-bot-padding-dot6ger">
 				<div class="file-button hover-half-opacity click-effect">
 					<img src="/assets/icons/tabler-icon-paperclip.svg">
 					<input type="file" formControlName="fileUpload" (change)="onFileUpload($event)" multiple>
 				</div>
 			</section>
 		</form>
-		<section class="flex-row bot-padding-bigger" *ngIf="editingPost">
-			<div *ngFor="let file of files" class="form-attachment faded-slim-border flexible flex-row flex-no-wrap flex-center-align-items padding-small margin-top-bot-small">
+		<section class="flex-row bot-padding-dot6ger" *ngIf="editingPost">
+			<div *ngFor="let file of files" class="form-attachment border-faded-slim flexible flex-row flex-no-wrap flex-center-align-items padding-dot2 margin-top-bot-small">
 				<div class="flexible">
 					{{ file.name ? file.name : 'Attachment' }}
 				</div>
-				<div class="flex-col hover-half-opacity border-radius-small click-effect" (click)="removeAttachment(file.name)">
+				<div class="flex-col hover-half-opacity border-radius-dot2 click-effect" (click)="removeAttachment(file.name)">
 					<img src="/assets/icons/tabler-icon-x.svg">
 				</div>
 			</div>
 		</section>
-		<button class="faded-slim-border full-width padding-small lighter-hover click-effect border-radius-smaller margin-bot-bigger" *ngIf="editingPost" (click)="editPost()">
+		<button class="border-faded-slim width-full padding-dot2 lighter-hover click-effect border-radius-dot3 margin-bot-bigger" *ngIf="editingPost" (click)="editPost()">
 			Update Post
 		</button>
-		<section class="post-details flex-row flex-justify-end font-size-dot7 faded-slim-border border-bottom-only">
+		<section class="post-details flex-row flex-justify-end font-size-dot7 border-faded-slim border-bottom-only">
 			<time class="flex-row flex-center-align-items">
-				<img class="img-height-font-size" src="/assets/icons/tabler-icon-calendar-time.svg">&nbsp;
+				<img class="height-font" src="/assets/icons/tabler-icon-calendar-time.svg">&nbsp;
 				<span>
 					{{ timeCreated }}
 				</span>
 			</time>
 			<summary class="flex-row flex-center-align-items">
-				<img class="img-height-font-size" src="/assets/icons/tabler-icon-message-2.svg">&nbsp;
+				<img class="height-font" src="/assets/icons/tabler-icon-message-2.svg">&nbsp;
 				<span>
 					{{ post.comments.length }}
 				</span>
 			</summary>
 		</section>
-		<section class="flex-row justify-children-center flex-center-align-children">
-			<button class="padding-small lighter-hover click-effect border-radius-smaller" *ngIf="loggedInAuthor" (click)="toggleEditing()">
+		<section class="flex-row justify-children-center align-children-center">
+			<button class="padding-dot2 lighter-hover click-effect border-radius-dot3" *ngIf="loggedInAuthor" (click)="toggleEditing()">
 				<img src="/assets/icons/tabler-icon-edit.svg">
 			</button>
-			<button class="flexible padding-small lighter-hover click-effect border-radius-smaller" (click)="goToPostPage()">
+			<button class="flexible padding-dot2 lighter-hover click-effect border-radius-dot3" (click)="goToPostPage()">
 				<img src="/assets/icons/tabler-icon-message-2.svg">
 				&nbsp;Comment
 			</button>
-			<button #share ngxClipboard [cbContent]="getPostLink()" class="flexible padding-small lighter-hover click-effect border-radius-smaller" (click)="showCopiedMessage()">
+			<button #share ngxClipboard [cbContent]="getPostLink()" class="flexible padding-dot2 lighter-hover click-effect border-radius-dot3" (click)="showCopiedMessage()">
 				<img src="/assets/icons/tabler-icon-link.svg">
 				&nbsp;Share
 			</button>
-			<button class="padding-small lighter-hover click-effect border-radius-smaller" *ngIf="loggedInAuthor" (click)="deletePost()">
+			<button class="padding-dot2 lighter-hover click-effect border-radius-dot3" *ngIf="loggedInAuthor" (click)="deletePost()">
 				<img src="/assets/icons/tabler-icon-trash.svg">
 			</button>
 		</section>
 	</main>
 	<aside class="rating flex-col flex-center-align-items">
-		<button #upvote class="flex-col lighter-hover border-radius-small click-effect" (click)="votePost(true)">
+		<button #upvote class="flex-col lighter-hover border-radius-dot2 click-effect" (click)="votePost(true)">
 			<img src="/assets/icons/tabler-icon-chevron-up.svg">
 		</button>
-		<summary class="top-bot-padding-small">
+		<summary class="top-bot-padding-dot2">
 			{{ votesNumber }}
 		</summary>
-		<button #downvote class="flex-col lighter-hover border-radius-small click-effect" (click)="votePost(false)">
+		<button #downvote class="flex-col lighter-hover border-radius-dot2 click-effect" (click)="votePost(false)">
 			<img src="/assets/icons/tabler-icon-chevron-down.svg">
 		</button>
 	</aside>
diff --git a/src/app/components/profile-settings/profile-settings.component.html b/src/app/components/profile-settings/profile-settings.component.html
index 62513ef..871fd7e 100644
--- a/src/app/components/profile-settings/profile-settings.component.html
+++ b/src/app/components/profile-settings/profile-settings.component.html
@@ -3,68 +3,68 @@
 <app-loading *ngIf="!dataArrived"></app-loading>
 
 <main class="scroll-standalone under-navbar centered-content flex-col">
-	<section class="card full-width" *ngIf="this.isAdminUser">
-		<button class="full-width faded-slim-border padding-smaller lighter-hover click-effect border-radius-smaller" (click)="goToAdminPanel()">
+	<section class="card width-full" *ngIf="this.isAdminUser">
+		<button class="width-full border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3" (click)="goToAdminPanel()">
 			Go to admin panel
 		</button>
 	</section>
-	<form class="flex-row card full-width font-size-dot9 margin-top-bot-very-big" [formGroup]="updateProfilePictureFormGroup" (ngSubmit)="updateProfilePicture()">
+	<form class="flex-row card width-full font-size-dot9 margin-top-bot-very-big" [formGroup]="updateProfilePictureFormGroup" (ngSubmit)="updateProfilePicture()">
 		<img id="profile-picture" class="round-image" [src]="user.profilePictureURL">
-		<section class="flexible flex-col flex-center-align-items flex-justify-center side-padding-font">
-			<input class="full-width faded-slim-border padding-smaller lighter-hover click-effect border-radius-smaller" type="file" accept="image/*" formControlName="fileUpload" (change)="onFileUpload($event)">
-			<button class="full-width faded-slim-border padding-smaller lighter-hover click-effect border-radius-smaller margin-top-normal" type="submit" *ngIf="newProfilePicture.size > 0">
+		<section class="flexible flex-col flex-center-align-items flex-justify-center padding-side-font">
+			<input class="width-full border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3" type="file" accept="image/*" formControlName="fileUpload" (change)="onFileUpload($event)">
+			<button class="width-full border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3 margin-top-normal" type="submit" *ngIf="newProfilePicture.size > 0">
 				Update profile picture
 			</button>
 		</section>
 	</form>
-	<form class="flex-col card full-width padding-big" [formGroup]="updateUserFormGroup" (ngSubmit)="onSubmit()">
+	<form class="flex-col card width-full padding-dot6" [formGroup]="updateUserFormGroup" (ngSubmit)="onSubmit()">
 		<section class="flex-col">
 			<div class="flex-row">
-				<label class="flexible focus-fg-color">First Name</label>
+				<label class="flexible fg-focus">First Name</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>
-			<input type="text" class="fancy-input faded-slim-border border-bottom-only" formControlName="firstName" required>
+			<input type="text" class="fancy-input border-faded-slim border-bottom-only" formControlName="firstName" required>
 		</section>
 		<section class="flex-col">
 			<div class="flex-row">
-				<label class="flexible focus-fg-color">Last Name</label>
+				<label class="flexible fg-focus">Last Name</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>
-			<input type="text" class="fancy-input faded-slim-border border-bottom-only" formControlName="lastName" required>
+			<input type="text" class="fancy-input border-faded-slim border-bottom-only" formControlName="lastName" required>
 		</section>
 		<section class="flex-col">
 			<div class="flex-row">
-				<label class="flexible focus-fg-color">Username</label>
+				<label class="flexible fg-focus">Username</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>
-			<input type="text" class="fancy-input faded-slim-border border-bottom-only" formControlName="username" required>
+			<input type="text" class="fancy-input border-faded-slim border-bottom-only" formControlName="username" required>
 		</section>
 		<section class="flex-col">
 			<div class="flex-row">
-				<label class="flexible focus-fg-color">Email</label>
+				<label class="flexible fg-focus">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>
-			<input type="text" class="fancy-input faded-slim-border border-bottom-only" formControlName="email" required>
+			<input type="text" class="fancy-input border-faded-slim border-bottom-only" formControlName="email" required>
 		</section>
 		<section class="flex-col">
 			<div class="flex-row">
-				<label class="flexible focus-fg-color">Password</label>
+				<label class="flexible fg-focus">Password</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>
-			<input type="password" class="fancy-input faded-slim-border border-bottom-only" formControlName="password" required>
+			<input type="password" class="fancy-input border-faded-slim border-bottom-only" formControlName="password" required>
 		</section>
-		<button type="button" class="focus-fg-color full-width faded-slim-border padding-smaller lighter-hover click-effect margin-top-normal" (click)="toggleLanguages()">
+		<button type="button" class="fg-focus width-full border-faded-slim padding-dot3 lighter-hover click-effect margin-top-normal" (click)="toggleLanguages()">
 			▼ Edit Languages ▼
 		</button>
 		<section *ngIf="showLanguages">
@@ -72,7 +72,7 @@
 				<label class="error">
 					Type in your desired languages, separated by a space
 				</label>
-				<input class="fancy-input full-width faded-slim-border border-bottom-only" type="text" placeholder="You have no selected languages!" formControlName="languageInput" required>
+				<input class="fancy-input width-full border-faded-slim border-bottom-only" type="text" placeholder="You have no selected languages!" formControlName="languageInput" required>
 			</div>
 			<div class="none-message" *ngIf="availableLanguages.length === 0">
 				No languages available!
@@ -81,12 +81,12 @@
 				Available languages:
 			</div>
 			<div class="flex-row margin-top-normal" *ngFor="let lang of availableLanguages">
-				<div class="sec-info border-radius-normal padding-small">
+				<div class="sec-info border-radius-dot5r padding-dot2">
 					{{ lang.name }}
 				</div>
 			</div>
 		</section>
-		<button type="button" class="focus-fg-color full-width faded-slim-border padding-smaller lighter-hover click-effect margin-top-normal" (click)="toggleTechnologies()">
+		<button type="button" class="fg-focus width-full border-faded-slim padding-dot3 lighter-hover click-effect margin-top-normal" (click)="toggleTechnologies()">
 			▼ Edit Technologies ▼
 		</button>
 		<section *ngIf="showTechnologies">
@@ -94,7 +94,7 @@
 				<label class="error">
 					Type in your desired technologies, separated by a space
 				</label>
-				<input class="fancy-input full-width faded-slim-border border-bottom-only" type="text" placeholder="You have no selected technologies!" formControlName="technologyInput" required>
+				<input class="fancy-input width-full border-faded-slim border-bottom-only" type="text" placeholder="You have no selected technologies!" formControlName="technologyInput" required>
 			</div>
 			<div class="none-message" *ngIf="availableTechnologies.length === 0">
 				No technologies available!
@@ -103,7 +103,7 @@
 				Available technologies:
 			</div>
 			<div class="flex-row margin-top-normal" *ngFor="let tech of availableTechnologies">
-				<div class="sec-info border-radius-normal padding-small">
+				<div class="sec-info border-radius-dot5r padding-dot2">
 					{{ tech.name }}
 				</div>
 			</div>
@@ -112,15 +112,15 @@
 			<app-success-bar></app-success-bar>
 			<app-error-bar></app-error-bar>
 		</section>
-		<button class="full-width faded-slim-border padding-smaller lighter-hover click-effect border-radius-smaller" type="submit">
+		<button class="width-full border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3" type="submit">
 			Update profile
 		</button>
 	</form>
-	<section class="card full-width">
-		<div class="margin-bot-bigger text-centered error-fg-color" *ngIf="deleteAccountConfirm">
+	<section class="card width-full">
+		<div class="margin-bot-bigger text-centered fg-error" *ngIf="deleteAccountConfirm">
 			Are you sure you want to delete your account?<br>This is permanent!
 		</div>
-		<button class="full-width faded-slim-border padding-smaller lighter-hover click-effect border-radius-smaller error-fg-color" (click)="deleteAccount()">
+		<button class="width-full border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3 fg-error" (click)="deleteAccount()">
 			Delete account
 		</button>
 	</section>
diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html
index e6abeb9..8963d1b 100644
--- a/src/app/components/profile/profile.component.html
+++ b/src/app/components/profile/profile.component.html
@@ -3,47 +3,47 @@
 <app-loading *ngIf="!dataArrived"></app-loading>
 
 <main class="scroll-standalone under-navbar flex-col centered-content" *ngIf="dataArrived" (scroll)="onScroll($event)">
-	<section id="user-info" class="card flex-row full-width flex-justify-center">
+	<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="flexible flex-col flex-center-align-items flex-justify-center side-padding-smaller">
+		<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>
 				@{{ user.userName }}
 			</div>
-			<form class="flex-row flexible-children full-width font-size-dot7 margin-top-normal" [formGroup]="updateFrienship" (ngSubmit)="modifyFriend()" *ngIf="!isTheLoggedInUser && isUserLoggedIn">
-				<input class="faded-slim-border border-bottom-only margin-right-small" type="password" formControlName="password" *ngIf="updatingFriendship" placeholder="Type in password to confirm">
-				<button id="add-friend" type="submit" class="faded-slim-border padding-tiny lighter-hover click-effect border-radius-smaller full-width">
+			<form class="flex-row flexible-children width-full font-size-dot7 margin-top-normal" [formGroup]="updateFrienship" (ngSubmit)="modifyFriend()" *ngIf="!isTheLoggedInUser && isUserLoggedIn">
+				<input class="border-faded-slim border-bottom-only margin-right-small" 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>
 	</section>
-	<section class="card sec-info-card flex-col full-width">
-		<div class="sec-info-title faded-slim-border border-bottom-only">
+	<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>
 		<div class="flex-row" *ngFor="let lang of user.languages">
-			<div class="sec-info border-radius-normal padding-small">
+			<div class="sec-info border-radius-dot5r padding-dot2">
 				{{ lang.name }}
 			</div>
 		</div>
 	</section>
-	<section class="card sec-info-card flex-col full-width">
-		<div class="sec-info-title faded-slim-border border-bottom-only">
+	<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-normal padding-small">
+			<div class="sec-info border-radius-dot5r padding-dot2">
 				{{ tech.name }}
 			</div>
 		</div>
diff --git a/src/app/components/register/register.component.html b/src/app/components/register/register.component.html
index 4aae7ed..7d3a0bf 100644
--- a/src/app/components/register/register.component.html
+++ b/src/app/components/register/register.component.html
@@ -1,44 +1,44 @@
-<main class="centered-content flex-col flex-center-align-items flex-justify-center full-height">
-	<summary class="title card full-width no-margin padding-small">Register</summary>
+<main class="centered-content flex-col flex-center-align-items flex-justify-center height-full">
+	<summary class="title card width-full no-margin padding-dot2">Register</summary>
 
-	<app-error-bar class="full-width margin-top-normal"></app-error-bar>
+	<app-error-bar class="width-full margin-top-normal"></app-error-bar>
 
-	<form class="full-width card padding-big" [formGroup]="registerUserFormGroup" (ngSubmit)="onSubmit()">
-		<section class="input-selection full-width">
-			<input type="text" placeholder="First Name" class="fancy-input full-width faded-slim-border border-bottom-only" formControlName="firstName" required>
-			<label class="fancy-input-label full-width">First Name</label>
+	<form class="width-full card padding-dot6" [formGroup]="registerUserFormGroup" (ngSubmit)="onSubmit()">
+		<section class="input-selection width-full">
+			<input type="text" placeholder="First Name" class="fancy-input width-full border-faded-slim border-bottom-only" formControlName="firstName" required>
+			<label class="fancy-input-label width-full">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>
 			</div>
 		</section>
 		<section class="input-selection">
-			<input type="text" placeholder="Last Name" class="fancy-input full-width faded-slim-border border-bottom-only" formControlName="lastName" required>
-			<label class="fancy-input-label full-width">Last Name</label>
+			<input type="text" placeholder="Last Name" class="fancy-input width-full border-faded-slim border-bottom-only" formControlName="lastName" required>
+			<label class="fancy-input-label width-full">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>
 			</div>
 		</section>
 		<section class="input-selection">
-			<input type="text" placeholder="Username" class="fancy-input full-width faded-slim-border border-bottom-only" formControlName="username" required>
-			<label class="fancy-input-label full-width">Username</label>
+			<input type="text" placeholder="Username" class="fancy-input width-full border-faded-slim border-bottom-only" formControlName="username" required>
+			<label class="fancy-input-label width-full">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>
 			</div>
 		</section>
 		<section class="input-selection">
-			<input type="text" placeholder="Email" class="fancy-input full-width faded-slim-border border-bottom-only" formControlName="email" required>
-			<label class="fancy-input-label full-width">Email</label>
+			<input type="text" placeholder="Email" class="fancy-input width-full border-faded-slim border-bottom-only" formControlName="email" required>
+			<label class="fancy-input-label width-full">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>
 			</div>
 		</section>
 		<section class="input-selection">
-			<input type="password" placeholder="Password" class="fancy-input full-width faded-slim-border border-bottom-only" formControlName="password" required>
-			<label class="fancy-input-label full-width">Password</label>
+			<input type="password" placeholder="Password" class="fancy-input width-full border-faded-slim border-bottom-only" formControlName="password" required>
+			<label class="fancy-input-label width-full">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>
@@ -47,9 +47,9 @@
 		</section>
 
 
-		<button class="faded-slim-border padding-smaller lighter-hover click-effect border-radius-smaller full-width" type="submit">Submit</button>
+		<button class="border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3 width-full" type="submit">Submit</button>
 	</form>
-	<button class="focus-fg-color faded-slim-border padding-smaller lighter-hover click-effect border-radius-smaller full-width margin-top-normal" (click)="onRedirectLogin()">
+	<button class="fg-focus border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3 width-full margin-top-normal" (click)="onRedirectLogin()">
 		Already have an account? Login here
 	</button>
 </main>
diff --git a/src/styles.css b/src/styles.css
index 6c43f1f..373ff93 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -179,7 +179,7 @@ input[type=file]::file-selector-button {
   justify-content: center;
 }
 
-.flex-center-align-children > * {
+.align-children-center > * {
   display: flex;
   align-items: center;
 }
@@ -203,10 +203,6 @@ input[type=file]::file-selector-button {
   font-size: 0.7em;
 }
 
-.img-height-font-size {
-  height: 1em;
-}
-
 /* General text */
 
 .text-centered {
@@ -219,19 +215,19 @@ input[type=file]::file-selector-button {
 
 /* General border */
 
-.faded-slim-border {
+.border-faded-slim {
   border: 1px solid var(--faded-color);
 }
 
-.border-radius-normal, .card {
+.border-radius-dot5r, .card {
   border-radius: 0.5rem;
 }
 
-.border-radius-smaller {
+.border-radius-dot3 {
   border-radius: 0.3em;
 }
 
-.border-radius-small {
+.border-radius-dot2 {
   border-radius: 0.2em;
 }
 
@@ -243,66 +239,66 @@ input[type=file]::file-selector-button {
 
 /* General colors */
 
-.fg-color-faded {
+.fg-faded {
   color: var(--faded-color);
 }
 
-.focus-fg-color {
+.fg-focus {
   color: var(--focus-color);
   border-color: var(--focus-color);
 }
 
-.error-fg-color {
+.fg-error {
   color: var(--failure);
   border-color: var(--failure);
 }
 
 /* General padding */
 
-.padding-big {
+.padding-dot6 {
   padding: 0.6em;
 }
 
-.padding-bigger {
+.padding-dot5 {
   padding: 0.5em;
 }
 
-.padding-normal {
+.padding-dot4 {
   padding: 0.4em;
 }
 
-.padding-smaller {
+.padding-dot3 {
   padding: 0.3em;
 }
 
-.padding-small {
+.padding-dot2 {
   padding: 0.2em;
 }
 
-.padding-tiny {
+.padding-dot1 {
   padding: 0.1em;
 }
 
-.side-padding-font {
+.padding-side-font {
   padding-right: 1em;
   padding-left: 1em;
 }
 
-.side-padding-smaller {
+.padding-side-dot3 {
   padding-right: 0.3em;
   padding-left: 0.3em;
 }
 
-.bot-padding-bigger {
+.padding-bot-dot5 {
   padding-bottom: 0.5em;
 }
 
-.top-bot-padding-bigger {
+.padding-top-bot-dot5 {
   padding-top: 0.5em;
   padding-bottom: 0.5em;
 }
 
-.top-bot-padding-small {
+.padding-top-bot-dot2 {
   padding-top: 0.2em;
   padding-bottom: 0.2em;
 }
@@ -370,16 +366,22 @@ input[type=file]::file-selector-button {
   transform: scale(0.9);
 }
 
-/* Misc */
+/* Size */
 
-.full-height {
+.height-full {
   height: 100%;
 }
 
-.full-width {
+.width-full {
   width: 100%;
 }
 
+.height-font {
+  height: 1em;
+}
+
+/* Misc */
+
 .centered-content {
   max-width: var(--max-width);
   margin: 0 auto;
-- 
cgit v1.2.3


From 1afe87209a9e7140fabd3ba58b5e7b470b68fc7b Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Mon, 22 Mar 2021 20:35:04 +0200
Subject: Improved readability and consistency of margin global styling

---
 .../admin-panel-page.component.html                | 22 +++++++++++-----------
 src/app/components/comment/comment.component.html  |  6 +++---
 src/app/components/feed/feed.component.html        |  2 +-
 src/app/components/login/login.component.html      |  6 +++---
 .../components/not-found/not-found.component.html  |  2 +-
 .../post-attachment/post-attachment.component.html |  4 ++--
 .../components/post-page/post-page.component.html  |  4 ++--
 src/app/components/post/post.component.html        |  6 +++---
 .../profile-settings.component.html                | 20 ++++++++++----------
 src/app/components/profile/profile.component.html  |  4 ++--
 .../components/register/register.component.html    |  6 +++---
 src/styles.css                                     | 18 +++++++++---------
 12 files changed, 50 insertions(+), 50 deletions(-)

(limited to 'src/app/components/admin-panel-page')

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 80d6795..bc4a71f 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
@@ -11,7 +11,7 @@
 			<button type="button" class="fg-focus width-full border-faded-slim padding-dot3 lighter-hover click-effect" (click)="toggleLanguages()">
 				▼ Edit Languages ▼
 			</button>
-			<form class="flex-col margin-top-bot-smaller" [formGroup]="languageForm" (ngSubmit)="submitLanguages()" *ngIf="showLanguages">
+			<form class="flex-col margin-top-bot-dot3" [formGroup]="languageForm" (ngSubmit)="submitLanguages()" *ngIf="showLanguages">
 				<label class="fg-focus">
 					Create language:
 				</label>
@@ -21,7 +21,7 @@
 					Update language:
 				</label>
 				<div class="flex-row flexible-children">
-					<input type="text" class="fancy-input border-faded-slim border-bottom-only margin-right-small" formControlName="updateLanguageOldName" placeholder="Old language name">
+					<input type="text" class="fancy-input border-faded-slim border-bottom-only margin-right-dot2" formControlName="updateLanguageOldName" placeholder="Old language name">
 					<input type="text" class="fancy-input border-faded-slim border-bottom-only" formControlName="updateLanguageNewName" placeholder="New language name">
 				</div>
 
@@ -33,14 +33,14 @@
 				<button class="width-full border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3" type="submit">
 					Modify languages
 				</button>
-				<section class="border-faded-slim padding-dot4 margin-top-normal">
+				<section class="border-faded-slim padding-dot4 margin-top-dot4">
 					<div class="none-message" *ngIf="availableLanguages.length === 0">
 						No languages in database!
 					</div>
 					<div *ngIf="availableLanguages.length > 0">
 						Available languages:
 					</div>
-					<div class="flex-row margin-top-normal" *ngFor="let lang of availableLanguages">
+					<div class="flex-row margin-top-dot4" *ngFor="let lang of availableLanguages">
 						<div class="sec-info border-radius-dot5r padding-dot2">
 							{{ lang.name }}
 						</div>
@@ -49,10 +49,10 @@
 			</form>
 		</section>
 		<section>
-			<button type="button" class="fg-focus width-full border-faded-slim padding-dot3 lighter-hover click-effect margin-top-normal" (click)="toggleTechnologies()">
+			<button type="button" class="fg-focus width-full border-faded-slim padding-dot3 lighter-hover click-effect margin-top-dot4" (click)="toggleTechnologies()">
 				▼ Edit Technologies ▼
 			</button>
-			<form class="flex-col margin-top-bot-smaller" [formGroup]="technologyForm" (ngSubmit)="submitTechnologies()" *ngIf="showTechnologies">
+			<form class="flex-col margin-top-bot-dot3" [formGroup]="technologyForm" (ngSubmit)="submitTechnologies()" *ngIf="showTechnologies">
 				<label class="fg-focus">
 					Create technology:
 				</label>
@@ -62,7 +62,7 @@
 					Update technology:
 				</label>
 				<div class="flex-row flexible-children">
-					<input type="text" class="fancy-input border-faded-slim border-bottom-only margin-right-small" formControlName="updateTechnologyOldName" placeholder="Old technology name">
+					<input type="text" class="fancy-input border-faded-slim border-bottom-only margin-right-dot2" formControlName="updateTechnologyOldName" placeholder="Old technology name">
 					<input type="text" class="fancy-input border-faded-slim border-bottom-only" formControlName="updateTechnologyNewName" placeholder="New technology name">
 				</div>
 
@@ -74,14 +74,14 @@
 				<button class="width-full border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3" type="submit">
 					Modify technology
 				</button>
-				<section class="border-faded-slim padding-dot4 margin-top-normal">
+				<section class="border-faded-slim padding-dot4 margin-top-dot4">
 					<div class="none-message" *ngIf="availableTechnologies.length === 0">
 						No technologies in database!
 					</div>
 					<div *ngIf="availableTechnologies.length > 0">
 						Available technologies:
 					</div>
-					<div class="flex-row margin-top-normal" *ngFor="let tech of availableTechnologies">
+					<div class="flex-row margin-top-dot4" *ngFor="let tech of availableTechnologies">
 						<div class="sec-info border-radius-dot5r padding-dot2">
 							{{ tech.name }}
 						</div>
@@ -90,10 +90,10 @@
 			</form>
 		</section>
 		<section>
-			<button type="button" class="fg-focus width-full border-faded-slim padding-dot3 lighter-hover click-effect margin-top-normal" (click)="toggleDeletions()">
+			<button type="button" class="fg-focus width-full border-faded-slim padding-dot3 lighter-hover click-effect margin-top-dot4" (click)="toggleDeletions()">
 				▼ Deletions ▼
 			</button>
-			<form class="flex-col margin-top-bot-smaller" [formGroup]="deleteForm" (ngSubmit)="submitDelete()" *ngIf="showDeletions">
+			<form class="flex-col margin-top-bot-dot3" [formGroup]="deleteForm" (ngSubmit)="submitDelete()" *ngIf="showDeletions">
 				<label class="fg-focus">
 					Delete user by Id:
 				</label>
diff --git a/src/app/components/comment/comment.component.html b/src/app/components/comment/comment.component.html
index 0ec443b..9403ea2 100644
--- a/src/app/components/comment/comment.component.html
+++ b/src/app/components/comment/comment.component.html
@@ -14,12 +14,12 @@
 			</span>
 		</summary>
 		<form [formGroup]="editCommentFormGroup" *ngIf="editingComment" (ngSubmit)="editComment()">
-			<textarea class="textarea-new-msg width-full border-faded-slim border-bottom-only padding-dot2 margin-bot-bigger" rows="1" formControlName="newCommentMessage" placeholder="What's on your mind?"></textarea>
-			<button type="submit" class="border-faded-slim width-full padding-dot2 lighter-hover click-effect border-radius-dot3 margin-bot-bigger">
+			<textarea class="textarea-new-msg width-full border-faded-slim border-bottom-only padding-dot2 margin-bot-dot5" rows="1" formControlName="newCommentMessage" placeholder="What's on your mind?"></textarea>
+			<button type="submit" class="border-faded-slim width-full padding-dot2 lighter-hover click-effect border-radius-dot3 margin-bot-dot5">
 				Update Comment
 			</button>
 		</form>
-		<article class="message margin-top-bot-small" *ngIf="!editingComment">
+		<article class="message margin-top-bot-dot2" *ngIf="!editingComment">
 			{{ comment.message }}
 		</article>
 		<section class="comment-details flex-row flex-justify-end font-size-dot7 border-faded-slim border-bottom-only">
diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html
index d81a142..93171a2 100644
--- a/src/app/components/feed/feed.component.html
+++ b/src/app/components/feed/feed.component.html
@@ -12,7 +12,7 @@
 			</div>
 		</section>
 		<section class="flex-row bot-padding-dot6ger">
-			<div *ngFor="let file of files" class="form-attachment border-faded-slim flexible flex-row flex-no-wrap flex-center-align-items padding-dot2 margin-top-bot-small">
+			<div *ngFor="let file of files" class="form-attachment border-faded-slim flexible flex-row flex-no-wrap flex-center-align-items padding-dot2 margin-top-bot-dot2">
 				<div class="flexible">
 					{{ file.name ? file.name : 'Attachment' }}
 				</div>
diff --git a/src/app/components/login/login.component.html b/src/app/components/login/login.component.html
index 7649a3c..29aebf9 100644
--- a/src/app/components/login/login.component.html
+++ b/src/app/components/login/login.component.html
@@ -1,7 +1,7 @@
 <main class="centered-content flex-col flex-center-align-items flex-justify-center height-full">
-	<summary class="title card width-full no-margin padding-dot2">Login</summary>
+	<summary class="title card width-full margin-0 padding-dot2">Login</summary>
 
-	<app-error-bar class="width-full margin-top-normal"></app-error-bar>
+	<app-error-bar class="width-full margin-top-dot4"></app-error-bar>
 
 	<form class="width-full card padding-dot6" [formGroup]="loginUserFormGroup" (ngSubmit)="onSubmit()">
 		<section class="input-selection width-full">
@@ -21,5 +21,5 @@
 
 		<button class="border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3 width-full" type="submit">Submit</button>
 	</form>
-	<button class="fg-focus border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3 width-full margin-top-normal" (click)="onRedirectRegister()">New to DevHive? Register instead</button>
+	<button class="fg-focus border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3 width-full margin-top-dot4" (click)="onRedirectRegister()">New to DevHive? Register instead</button>
 </main>
diff --git a/src/app/components/not-found/not-found.component.html b/src/app/components/not-found/not-found.component.html
index 7b776bd..4d1165d 100644
--- a/src/app/components/not-found/not-found.component.html
+++ b/src/app/components/not-found/not-found.component.html
@@ -5,7 +5,7 @@
 		</summary>
 		<hr class="card-hr">
 		<nav class="flex-row flexible-children padding-dot2">
-			<button class="flex-row flex-justify-center flex-center-align-items border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3 margin-right-small" (click)="backToFeed()">
+			<button class="flex-row flex-justify-center flex-center-align-items border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3 margin-right-dot2" (click)="backToFeed()">
 				<img src="/assets/icons/tabler-icon-home.svg">
 				&nbsp;Back to feed
 			</button>
diff --git a/src/app/components/post-attachment/post-attachment.component.html b/src/app/components/post-attachment/post-attachment.component.html
index 7ef8f07..e5e4b5a 100644
--- a/src/app/components/post-attachment/post-attachment.component.html
+++ b/src/app/components/post-attachment/post-attachment.component.html
@@ -1,5 +1,5 @@
-<figure class="form-attachment border-faded-slim flexible flex-row flex-no-wrap padding-dot2 hover-half-opacity margin-top-bot-small" (click)="toggleShowFull()">
-	<div class="flex-col flex-justify-center margin-right-small" [ngSwitch]="fileType">
+<figure class="form-attachment border-faded-slim flexible flex-row flex-no-wrap padding-dot2 hover-half-opacity margin-top-bot-dot2" (click)="toggleShowFull()">
+	<div class="flex-col flex-justify-center margin-right-dot2" [ngSwitch]="fileType">
 		<img *ngSwitchCase="'img'" src="/assets/icons/tabler-icon-photo.svg">
 		<img *ngSwitchDefault src="/assets/icons/tabler-icon-file.svg">
 	</div>
diff --git a/src/app/components/post-page/post-page.component.html b/src/app/components/post-page/post-page.component.html
index b05046e..cfca6c0 100644
--- a/src/app/components/post-page/post-page.component.html
+++ b/src/app/components/post-page/post-page.component.html
@@ -4,8 +4,8 @@
 
 <main class="centered-content scroll-standalone under-navbar flex-col" *ngIf="dataArrived">
 	<app-post [paramId]="postId.toString()"></app-post>
-	<form class="card flex-col width-full no-margin-top" [formGroup]="addCommentFormGroup" (ngSubmit)="addComment()">
-		<textarea rows="1" placeholder="Add a new comment" class="textarea-new-msg border-faded-slim border-bottom-only padding-dot2 margin-bot-bigger" formControlName="newComment"></textarea>
+	<form class="card flex-col width-full margin-0-top" [formGroup]="addCommentFormGroup" (ngSubmit)="addComment()">
+		<textarea rows="1" placeholder="Add a new comment" class="textarea-new-msg border-faded-slim border-bottom-only padding-dot2 margin-bot-dot5" formControlName="newComment"></textarea>
 		<button class="border-faded-slim padding-dot2 lighter-hover click-effect border-radius-dot3" type="submit">
 			Add Comment
 		</button>
diff --git a/src/app/components/post/post.component.html b/src/app/components/post/post.component.html
index 1008e64..0c1cce2 100644
--- a/src/app/components/post/post.component.html
+++ b/src/app/components/post/post.component.html
@@ -13,7 +13,7 @@
 				@{{ user.userName }}
 			</span>
 		</summary>
-		<article class="message margin-top-bot-small" *ngIf="!editingPost">
+		<article class="message margin-top-bot-dot2" *ngIf="!editingPost">
 			{{ post.message }}
 		</article>
 		<section class="flex-row flexible-children" *ngIf="!editingPost">
@@ -31,7 +31,7 @@
 			</section>
 		</form>
 		<section class="flex-row bot-padding-dot6ger" *ngIf="editingPost">
-			<div *ngFor="let file of files" class="form-attachment border-faded-slim flexible flex-row flex-no-wrap flex-center-align-items padding-dot2 margin-top-bot-small">
+			<div *ngFor="let file of files" class="form-attachment border-faded-slim flexible flex-row flex-no-wrap flex-center-align-items padding-dot2 margin-top-bot-dot2">
 				<div class="flexible">
 					{{ file.name ? file.name : 'Attachment' }}
 				</div>
@@ -40,7 +40,7 @@
 				</div>
 			</div>
 		</section>
-		<button class="border-faded-slim width-full padding-dot2 lighter-hover click-effect border-radius-dot3 margin-bot-bigger" *ngIf="editingPost" (click)="editPost()">
+		<button class="border-faded-slim width-full padding-dot2 lighter-hover click-effect border-radius-dot3 margin-bot-dot5" *ngIf="editingPost" (click)="editPost()">
 			Update Post
 		</button>
 		<section class="post-details flex-row flex-justify-end font-size-dot7 border-faded-slim border-bottom-only">
diff --git a/src/app/components/profile-settings/profile-settings.component.html b/src/app/components/profile-settings/profile-settings.component.html
index 871fd7e..538824d 100644
--- a/src/app/components/profile-settings/profile-settings.component.html
+++ b/src/app/components/profile-settings/profile-settings.component.html
@@ -8,11 +8,11 @@
 			Go to admin panel
 		</button>
 	</section>
-	<form class="flex-row card width-full font-size-dot9 margin-top-bot-very-big" [formGroup]="updateProfilePictureFormGroup" (ngSubmit)="updateProfilePicture()">
+	<form class="flex-row card width-full font-size-dot9 margin-top-bot-dot7" [formGroup]="updateProfilePictureFormGroup" (ngSubmit)="updateProfilePicture()">
 		<img id="profile-picture" class="round-image" [src]="user.profilePictureURL">
 		<section class="flexible flex-col flex-center-align-items flex-justify-center padding-side-font">
 			<input class="width-full border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3" type="file" accept="image/*" formControlName="fileUpload" (change)="onFileUpload($event)">
-			<button class="width-full border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3 margin-top-normal" type="submit" *ngIf="newProfilePicture.size > 0">
+			<button class="width-full border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3 margin-top-dot4" type="submit" *ngIf="newProfilePicture.size > 0">
 				Update profile picture
 			</button>
 		</section>
@@ -64,11 +64,11 @@
 			</div>
 			<input type="password" class="fancy-input border-faded-slim border-bottom-only" formControlName="password" required>
 		</section>
-		<button type="button" class="fg-focus width-full border-faded-slim padding-dot3 lighter-hover click-effect margin-top-normal" (click)="toggleLanguages()">
+		<button type="button" class="fg-focus width-full border-faded-slim padding-dot3 lighter-hover click-effect margin-top-dot4" (click)="toggleLanguages()">
 			▼ Edit Languages ▼
 		</button>
 		<section *ngIf="showLanguages">
-			<div class="margin-top-bigger">
+			<div class="margin-top-dot5">
 				<label class="error">
 					Type in your desired languages, separated by a space
 				</label>
@@ -80,17 +80,17 @@
 			<div *ngIf="availableLanguages.length > 0">
 				Available languages:
 			</div>
-			<div class="flex-row margin-top-normal" *ngFor="let lang of availableLanguages">
+			<div class="flex-row margin-top-dot4" *ngFor="let lang of availableLanguages">
 				<div class="sec-info border-radius-dot5r padding-dot2">
 					{{ lang.name }}
 				</div>
 			</div>
 		</section>
-		<button type="button" class="fg-focus width-full border-faded-slim padding-dot3 lighter-hover click-effect margin-top-normal" (click)="toggleTechnologies()">
+		<button type="button" class="fg-focus width-full border-faded-slim padding-dot3 lighter-hover click-effect margin-top-dot4" (click)="toggleTechnologies()">
 			▼ Edit Technologies ▼
 		</button>
 		<section *ngIf="showTechnologies">
-			<div class="margin-top-bigger">
+			<div class="margin-top-dot5">
 				<label class="error">
 					Type in your desired technologies, separated by a space
 				</label>
@@ -102,13 +102,13 @@
 			<div *ngIf="availableTechnologies.length > 0">
 				Available technologies:
 			</div>
-			<div class="flex-row margin-top-normal" *ngFor="let tech of availableTechnologies">
+			<div class="flex-row margin-top-dot4" *ngFor="let tech of availableTechnologies">
 				<div class="sec-info border-radius-dot5r padding-dot2">
 					{{ tech.name }}
 				</div>
 			</div>
 		</section>
-		<section class="margin-top-bot-smaller">
+		<section class="margin-top-bot-dot3">
 			<app-success-bar></app-success-bar>
 			<app-error-bar></app-error-bar>
 		</section>
@@ -117,7 +117,7 @@
 		</button>
 	</form>
 	<section class="card width-full">
-		<div class="margin-bot-bigger text-centered fg-error" *ngIf="deleteAccountConfirm">
+		<div class="margin-bot-dot5 text-centered fg-error" *ngIf="deleteAccountConfirm">
 			Are you sure you want to delete your account?<br>This is permanent!
 		</div>
 		<button class="width-full border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3 fg-error" (click)="deleteAccount()">
diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html
index 8963d1b..7de1d09 100644
--- a/src/app/components/profile/profile.component.html
+++ b/src/app/components/profile/profile.component.html
@@ -14,8 +14,8 @@
 			<div>
 				@{{ user.userName }}
 			</div>
-			<form class="flex-row flexible-children width-full font-size-dot7 margin-top-normal" [formGroup]="updateFrienship" (ngSubmit)="modifyFriend()" *ngIf="!isTheLoggedInUser && isUserLoggedIn">
-				<input class="border-faded-slim border-bottom-only margin-right-small" type="password" formControlName="password" *ngIf="updatingFriendship" placeholder="Type in password to confirm">
+			<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>
diff --git a/src/app/components/register/register.component.html b/src/app/components/register/register.component.html
index 7d3a0bf..1f547c4 100644
--- a/src/app/components/register/register.component.html
+++ b/src/app/components/register/register.component.html
@@ -1,7 +1,7 @@
 <main class="centered-content flex-col flex-center-align-items flex-justify-center height-full">
-	<summary class="title card width-full no-margin padding-dot2">Register</summary>
+	<summary class="title card width-full margin-0 padding-dot2">Register</summary>
 
-	<app-error-bar class="width-full margin-top-normal"></app-error-bar>
+	<app-error-bar class="width-full margin-top-dot4"></app-error-bar>
 
 	<form class="width-full card padding-dot6" [formGroup]="registerUserFormGroup" (ngSubmit)="onSubmit()">
 		<section class="input-selection width-full">
@@ -49,7 +49,7 @@
 
 		<button class="border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3 width-full" type="submit">Submit</button>
 	</form>
-	<button class="fg-focus border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3 width-full margin-top-normal" (click)="onRedirectLogin()">
+	<button class="fg-focus border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3 width-full margin-top-dot4" (click)="onRedirectLogin()">
 		Already have an account? Login here
 	</button>
 </main>
diff --git a/src/styles.css b/src/styles.css
index 373ff93..11c2973 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -305,42 +305,42 @@ input[type=file]::file-selector-button {
 
 /* Margin */
 
-.no-margin {
+.margin-0 {
   margin: 0;
 }
 
-.no-margin-top {
+.margin-top-0 {
   margin-top: 0;
 }
 
-.margin-top-normal {
+.margin-top-dot4 {
   margin-top: 0.4em;
 }
 
-.margin-top-bigger {
+.margin-top-dot5 {
   margin-top: 0.5em;
 }
 
-.margin-bot-bigger {
+.margin-bot-dot5 {
   margin-bottom: 0.5em;
 }
 
-.margin-top-bot-very-big {
+.margin-top-bot-dot7 {
   margin-top: 0.7em;
   margin-bottom: 0.7em;
 }
 
-.margin-top-bot-smaller {
+.margin-top-bot-dot3 {
   margin-top: 0.3em;
   margin-bottom: 0.3em;
 }
 
-.margin-top-bot-small {
+.margin-top-bot-dot2 {
   margin-top: 0.2em;
   margin-bottom: 0.2em;
 }
 
-.margin-right-small {
+.margin-right-dot2 {
   margin-right: 0.2em;
 }
 
-- 
cgit v1.2.3


From 64ec7f26f91ffaad64dbd47142fb7969ef6ea32c Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Mon, 29 Mar 2021 14:42:01 +0300
Subject: Fixed language and technology drawers having all items in a single
 column in profile settings and admin panel

---
 .../components/admin-panel-page/admin-panel-page.component.html   | 8 ++++----
 .../components/profile-settings/profile-settings.component.html   | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

(limited to 'src/app/components/admin-panel-page')

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 bc4a71f..1074e51 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
@@ -40,8 +40,8 @@
 					<div *ngIf="availableLanguages.length > 0">
 						Available languages:
 					</div>
-					<div class="flex-row margin-top-dot4" *ngFor="let lang of availableLanguages">
-						<div class="sec-info border-radius-dot5r padding-dot2">
+					<div class="flex-row margin-top-dot4">
+						<div class="sec-info border-radius-dot5r padding-dot2" *ngFor="let lang of availableLanguages">
 							{{ lang.name }}
 						</div>
 					</div>
@@ -81,8 +81,8 @@
 					<div *ngIf="availableTechnologies.length > 0">
 						Available technologies:
 					</div>
-					<div class="flex-row margin-top-dot4" *ngFor="let tech of availableTechnologies">
-						<div class="sec-info border-radius-dot5r padding-dot2">
+					<div class="flex-row margin-top-dot4">
+						<div class="sec-info border-radius-dot5r padding-dot2" *ngFor="let tech of availableTechnologies">
 							{{ tech.name }}
 						</div>
 					</div>
diff --git a/src/app/components/profile-settings/profile-settings.component.html b/src/app/components/profile-settings/profile-settings.component.html
index 538824d..dd3d186 100644
--- a/src/app/components/profile-settings/profile-settings.component.html
+++ b/src/app/components/profile-settings/profile-settings.component.html
@@ -80,8 +80,8 @@
 			<div *ngIf="availableLanguages.length > 0">
 				Available languages:
 			</div>
-			<div class="flex-row margin-top-dot4" *ngFor="let lang of availableLanguages">
-				<div class="sec-info border-radius-dot5r padding-dot2">
+			<div class="flex-row margin-top-dot4">
+				<div class="sec-info border-radius-dot5r padding-dot2" *ngFor="let lang of availableLanguages">
 					{{ lang.name }}
 				</div>
 			</div>
@@ -102,8 +102,8 @@
 			<div *ngIf="availableTechnologies.length > 0">
 				Available technologies:
 			</div>
-			<div class="flex-row margin-top-dot4" *ngFor="let tech of availableTechnologies">
-				<div class="sec-info border-radius-dot5r padding-dot2">
+			<div class="flex-row margin-top-dot4">
+				<div class="sec-info border-radius-dot5r padding-dot2" *ngFor="let tech of availableTechnologies">
 					{{ tech.name }}
 				</div>
 			</div>
-- 
cgit v1.2.3