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

---
 .../profile-settings.component.html                | 234 +++++++++++++++++----
 1 file changed, 198 insertions(+), 36 deletions(-)

(limited to 'src/app/components/profile-settings/profile-settings.component.html')

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>
-- 
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/profile-settings/profile-settings.component.html')

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 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/profile-settings/profile-settings.component.html')

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 da7ee0c5d640083fcce8af38730c587c4fb15395 Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Fri, 19 Mar 2021 19:18:21 +0200
Subject: Fixed height of pages that were the whole window height but were also
 below the navbar

---
 src/app/components/comment-page/comment-page.component.html         | 2 +-
 src/app/components/feed/feed.component.html                         | 2 +-
 src/app/components/navbar/navbar.component.css                      | 1 +
 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 +-
 src/app/services/comment.service.ts                                 | 2 +-
 src/styles.css                                                      | 5 +++++
 8 files changed, 12 insertions(+), 6 deletions(-)

(limited to 'src/app/components/profile-settings/profile-settings.component.html')

diff --git a/src/app/components/comment-page/comment-page.component.html b/src/app/components/comment-page/comment-page.component.html
index 1b94568..553b545 100644
--- a/src/app/components/comment-page/comment-page.component.html
+++ b/src/app/components/comment-page/comment-page.component.html
@@ -2,7 +2,7 @@
 
 <app-loading *ngIf="!loaded"></app-loading>
 
-<main id="content" *ngIf="loaded">
+<main id="content" class="scroll-standalone under-navbar" *ngIf="loaded">
 	<nav>
 		<button class="submit-btn" type="submit" (click)="toPost()">ᐊ Back to post</button>
 	</nav>
diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html
index c5c4401..a8290a1 100644
--- a/src/app/components/feed/feed.component.html
+++ b/src/app/components/feed/feed.component.html
@@ -2,7 +2,7 @@
 
 <app-loading *ngIf="!dataArrived"></app-loading>
 
-<main class="centered-content scroll-standalone flex-col flex-justify-start" *ngIf="dataArrived">
+<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 id="new-post-message" class="faded-slim-border border-bottom-only padding-small" rows="1" formControlName="newPostMessage" placeholder="What's on your mind?"></textarea>
 		<section id="attachments-btns" class="flex-row flex-justify-start flex-center-align-children">
diff --git a/src/app/components/navbar/navbar.component.css b/src/app/components/navbar/navbar.component.css
index aa666b0..d02e928 100644
--- a/src/app/components/navbar/navbar.component.css
+++ b/src/app/components/navbar/navbar.component.css
@@ -1,4 +1,5 @@
 #navbar {
+  height: var(--navbar-height);
   width: 100%;
   background-color: var(--card-bg);
 }
diff --git a/src/app/components/post-page/post-page.component.html b/src/app/components/post-page/post-page.component.html
index fe12177..ad748e3 100644
--- a/src/app/components/post-page/post-page.component.html
+++ b/src/app/components/post-page/post-page.component.html
@@ -2,7 +2,7 @@
 
 <app-loading *ngIf="!dataArrived"></app-loading>
 
-<main id="content" *ngIf="dataArrived">
+<main id="content" class="scroll-standalone under-navbar" *ngIf="dataArrived">
 	<nav>
 		<div class="many-buttons"  *ngIf="loggedIn">
 			<button class="submit-btn" type="submit" (click)="backToFeed()">ᐊ Back to feed</button>
diff --git a/src/app/components/profile-settings/profile-settings.component.html b/src/app/components/profile-settings/profile-settings.component.html
index dbfc747..9e0e80e 100644
--- a/src/app/components/profile-settings/profile-settings.component.html
+++ b/src/app/components/profile-settings/profile-settings.component.html
@@ -2,7 +2,7 @@
 
 <app-loading *ngIf="!dataArrived"></app-loading>
 
-<div id="content" *ngIf="dataArrived">
+<div id="content" class="scroll-standalone under-navbar" *ngIf="dataArrived">
 	<nav id="navigation">
 		<button class="submit-btn" (click)="goToProfile()">ᐊ Back</button>
 		<button class="submit-btn" (click)="navigateToAdminPanel()" *ngIf="isAdminUser">Panel</button>
diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html
index 45e51a5..38f15e4 100644
--- a/src/app/components/profile/profile.component.html
+++ b/src/app/components/profile/profile.component.html
@@ -2,7 +2,7 @@
 
 <app-loading *ngIf="!dataArrived"></app-loading>
 
-<main class="scroll-standalone flex-col centered-content" *ngIf="dataArrived" (scroll)="onScroll($event)">
+<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">
 		<div>
 			<img id="profile-picture" class="round-image" [src]="user.profilePictureURL">
diff --git a/src/app/services/comment.service.ts b/src/app/services/comment.service.ts
index 29707ab..f299e82 100644
--- a/src/app/services/comment.service.ts
+++ b/src/app/services/comment.service.ts
@@ -55,7 +55,7 @@ export class CommentService {
 
   getCommentRequest(id: Guid): Observable<object> {
     const options = {
-      params: new HttpParams().set('Id', id.toString())
+      params: new HttpParams().set('CommentId', id.toString())
     };
     return this._http.get(AppConstants.API_COMMENT_URL, options);
   }
diff --git a/src/styles.css b/src/styles.css
index 64aa79f..0f60fd0 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -11,6 +11,7 @@
   --success: forestgreen;
   --failure: indianred;
   --faded-color: #696969;
+  --navbar-height: 2.6em;
 }
 
 html,
@@ -287,6 +288,10 @@ input[type=file]::file-selector-button {
   box-sizing: border-box;
 }
 
+.under-navbar {
+  height: calc(100% - var(--navbar-height)) !important;
+}
+
 /* Inputs, the type found in login and register */
 
 .input-field {
-- 
cgit v1.2.3


From 7329675be5912a4924b32cf41cd5ac87cb33e456 Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Mon, 22 Mar 2021 15:48:24 +0200
Subject: Major redesign of almost all of profile settings page

---
 .../profile-settings.component.html                | 175 ++++++++++-----------
 src/styles.css                                     |  33 ++--
 2 files changed, 104 insertions(+), 104 deletions(-)

(limited to 'src/app/components/profile-settings/profile-settings.component.html')

diff --git a/src/app/components/profile-settings/profile-settings.component.html b/src/app/components/profile-settings/profile-settings.component.html
index 9e0e80e..9887527 100644
--- a/src/app/components/profile-settings/profile-settings.component.html
+++ b/src/app/components/profile-settings/profile-settings.component.html
@@ -2,117 +2,106 @@
 
 <app-loading *ngIf="!dataArrived"></app-loading>
 
-<div id="content" class="scroll-standalone under-navbar" *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)="logout()">Logout</button>
-	</nav>
-	<hr>
-	<div class="scroll-standalone">
-		<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)">
-				</div>
-				<button class="submit-btn" type="submit">Update profile picture</button>
+<main class="scroll-standalone under-navbar centered-content flex-col">
+	<form class="flex-row card font-size-dot9" [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">
+				Update profile picture
+			</button>
+		</section>
+	</form>
+	<form class="flex-col card padding-big" [formGroup]="updateUserFormGroup" (ngSubmit)="onSubmit()">
+		<section class="flex-col">
+			<div class="flex-row">
+				<label class="flexible">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>
-		</form>
-		<hr>
-		<form id="update-user" [formGroup]="updateUserFormGroup" (ngSubmit)="onSubmit()">
-			<div class="input-selection">
-				<input type="text" class="input-field" formControlName="firstName" required>
-				<label class="input-field-label">First Name</label>
+			<input type="text" class="fancy-input faded-slim-border border-bottom-only" formControlName="firstName" required>
+		</section>
+		<section class="flex-col">
+			<div class="flex-row">
+				<label class="flexible">Last 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>
-				</div>
+				<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>
+		</section>
+		<section class="flex-col">
+			<div class="flex-row">
+				<label class="flexible">Username</label>
 
-			<div class="input-selection">
-				<input type="text" class="input-field" formControlName="lastName" required>
-				<label class="input-field-label">Last Name</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>
+		</section>
+		<section class="flex-col">
+			<div class="flex-row">
+				<label class="flexible">Email</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>
-				</div>
+				<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>
+		</section>
+		<section class="flex-col">
+			<div class="flex-row">
+				<label class="flexible">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>
+		</section>
+		<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="username" required>
-				<label class="input-field-label">Username</label>
-
+				<input type="text" class="input-field" formControlName="languageInput" required>
 				<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 class="error">Type in your desired languages, separated by a space</label>
 				</div>
 			</div>
-
-			<div class="input-selection">
-				<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>
+			Available languages:
+			<div id="all-languages">
+				<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>
+		<div *ngIf="showTechnologies">
 			<div class="input-selection">
-				<input type="password" class="input-field" formControlName="password" required>
-				<label class="input-field-label">Password</label>
-
+				<input type="text" class="input-field" formControlName="technologyInput" required>
 				<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>
-				</div>
-			</div>
-			<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>
-
-					<div class="input-errors">
-						<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">
-						{{ lang.name }}
-					</div>
+					<label class="error">Type in your desired technologies, separated by a space</label>
 				</div>
 			</div>
-
-			<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>
-
-					<div class="input-errors">
-						<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">
-						{{ tech.name }}
-					</div>
+			Available technologies:
+			<div id="all-technologies">
+				<div class="user-technology" *ngFor="let tech of availableTechnologies">
+					{{ tech.name }}
 				</div>
 			</div>
-
-			<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>
-		<div id="confirm-delete" *ngIf="deleteAccountConfirm">
+		</div>
+		<button class="full-width faded-slim-border padding-smaller lighter-hover click-effect border-radius-smaller margin-top-normal" type="submit">
+			Update profile
+		</button>
+		<app-success-bar></app-success-bar>
+		<app-error-bar></app-error-bar>
+	</form>
+	<section class="card full-width">
+		<div class="margin-bot-bigger text-centered error-fg-color" *ngIf="deleteAccountConfirm">
 			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>
-	</div>
-</div>
+		<button class="full-width faded-slim-border padding-smaller lighter-hover click-effect border-radius-smaller error-fg-color" (click)="deleteAccount()">
+			Delete account
+		</button>
+	</section>
+	</main>
+
diff --git a/src/styles.css b/src/styles.css
index 06ddae6..a20cef2 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -53,6 +53,7 @@ input[type=file]::file-selector-button {
   visibility: hidden;
 }
 
+
 .rounded-border {
   border: 2px solid black;
   border-radius: 0.6em;
@@ -206,12 +207,6 @@ input[type=file]::file-selector-button {
   height: 1em;
 }
 
-/* General colors */
-
-.fg-color-faded {
-  color: var(--faded-color);
-}
-
 /* General text */
 
 .text-centered {
@@ -246,6 +241,22 @@ input[type=file]::file-selector-button {
   border-right: none;
 }
 
+/* General colors */
+
+.fg-color-faded {
+  color: var(--faded-color);
+}
+
+.focus-fg-color {
+  color: var(--focus-color);
+  border-color: var(--focus-color);
+}
+
+.error-fg-color {
+  color: var(--failure);
+  border-color: var(--failure);
+}
+
 /* General padding */
 
 .padding-big {
@@ -272,6 +283,11 @@ input[type=file]::file-selector-button {
   padding: 0.1em;
 }
 
+.side-padding-font {
+  padding-right: 1em;
+  padding-left: 1em;
+}
+
 .side-padding-smaller {
   padding-right: 0.3em;
   padding-left: 0.3em;
@@ -364,11 +380,6 @@ input[type=file]::file-selector-button {
   height: calc(100% - var(--navbar-height)) !important;
 }
 
-.focus-fg-color {
-  color: var(--focus-color);
-  border-color: var(--focus-color);
-}
-
 /* Inputs, the type found in login and register */
 
 .textarea-new-msg {
-- 
cgit v1.2.3


From f629eeadba6499b12801ee512d5e7fa14b4b2777 Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Mon, 22 Mar 2021 15:51:06 +0200
Subject: Made input field labels have focus color in profile settings

---
 .../profile-settings/profile-settings.component.html           | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

(limited to 'src/app/components/profile-settings/profile-settings.component.html')

diff --git a/src/app/components/profile-settings/profile-settings.component.html b/src/app/components/profile-settings/profile-settings.component.html
index 9887527..e5edf42 100644
--- a/src/app/components/profile-settings/profile-settings.component.html
+++ b/src/app/components/profile-settings/profile-settings.component.html
@@ -15,7 +15,7 @@
 	<form class="flex-col card padding-big" [formGroup]="updateUserFormGroup" (ngSubmit)="onSubmit()">
 		<section class="flex-col">
 			<div class="flex-row">
-				<label class="flexible">First Name</label>
+				<label class="flexible focus-fg-color">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>
@@ -24,7 +24,7 @@
 		</section>
 		<section class="flex-col">
 			<div class="flex-row">
-				<label class="flexible">Last Name</label>
+				<label class="flexible focus-fg-color">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>
@@ -33,7 +33,7 @@
 		</section>
 		<section class="flex-col">
 			<div class="flex-row">
-				<label class="flexible">Username</label>
+				<label class="flexible focus-fg-color">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>
@@ -42,7 +42,7 @@
 		</section>
 		<section class="flex-col">
 			<div class="flex-row">
-				<label class="flexible">Email</label>
+				<label class="flexible focus-fg-color">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>
@@ -51,7 +51,7 @@
 		</section>
 		<section class="flex-col">
 			<div class="flex-row">
-				<label class="flexible">Password</label>
+				<label class="flexible focus-fg-color">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>
-- 
cgit v1.2.3


From c95ced58bab3bbf84e2be372b8c138051d983da9 Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Mon, 22 Mar 2021 16:32:25 +0200
Subject: Major redesign of technology and language selection design in profile
 settings (with this, profile settings is fully redesigned)

---
 .../profile-settings.component.css                 | 105 +--------------------
 .../profile-settings.component.html                |  70 ++++++++------
 src/styles.css                                     |  10 ++
 3 files changed, 57 insertions(+), 128 deletions(-)

(limited to 'src/app/components/profile-settings/profile-settings.component.html')

diff --git a/src/app/components/profile-settings/profile-settings.component.css b/src/app/components/profile-settings/profile-settings.component.css
index 347c650..a8451c2 100644
--- a/src/app/components/profile-settings/profile-settings.component.css
+++ b/src/app/components/profile-settings/profile-settings.component.css
@@ -1,107 +1,10 @@
-* {
-  box-sizing: border-box;
-}
-
-#content {
-  max-width: 22em;
-  justify-content: start;
-}
-
-form {
-  width: 100%;
-}
-
-hr {
-  width: calc(100% - 1em);
-  color: black;
-  border: 1px solid black;
-}
-
-/* Navigation bar (for loggedin user) */
-
-#navigation {
-  display: flex;
-  width: 100%;
-}
-
-#navigation > .submit-btn {
-  flex: 1;
-  margin-top: 0;
-  margin-left: .5em;
-  font-size: inherit;
-}
-
-#navigation > .submit-btn:nth-of-type(1) {
-  margin-left: 0;
-}
-
-/* Form */
-
-#update-profile-picture {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 .5em;
-  flex-wrap: wrap;
-}
-
 #profile-picture {
   width: 5em;
   height: 5em;
 }
 
-#submit-file {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 1em;
-}
-
-#upload-file:hover {
-  cursor: inherit;
-}
-
-#upload-file > input:hover {
-  cursor: pointer;
-}
-
-#update-user {
-  margin-top: 1.1em;
-}
-
-#all-languages, #all-technologies {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-/* Buttons */
-
-.edit-btn {
-  border-radius: 0 !important;
-  color: var(--focus-color);
-  background-color: white;
-  border-color: var(--focus-color);
-}
-
-.edit-btn:hover {
-  color: white;
-  background-color: black;
-  border-color: black !important;
-}
-
-.submit-btn {
-  margin-bottom: .5em;
-}
-
-#update-profile-btn {
-  margin-top: 1em;
-}
-
-#confirm-delete {
-  box-sizing: border-box;
-  width: 100%;
-  background-color: var(--failure);
-  color: white;
-  padding: .2em;
-  text-align: center;
+.sec-info {
+  width: fit-content;
+  background-color: #424242;
+  margin: 0 0.3em 0.3em 0;
 }
diff --git a/src/app/components/profile-settings/profile-settings.component.html b/src/app/components/profile-settings/profile-settings.component.html
index e5edf42..f5989ef 100644
--- a/src/app/components/profile-settings/profile-settings.component.html
+++ b/src/app/components/profile-settings/profile-settings.component.html
@@ -3,7 +3,7 @@
 <app-loading *ngIf="!dataArrived"></app-loading>
 
 <main class="scroll-standalone under-navbar centered-content flex-col">
-	<form class="flex-row card font-size-dot9" [formGroup]="updateProfilePictureFormGroup" (ngSubmit)="updateProfilePicture()">
+	<form class="flex-row card full-width 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)">
@@ -12,7 +12,7 @@
 			</button>
 		</section>
 	</form>
-	<form class="flex-col card padding-big" [formGroup]="updateUserFormGroup" (ngSubmit)="onSubmit()">
+	<form class="flex-col card full-width padding-big" [formGroup]="updateUserFormGroup" (ngSubmit)="onSubmit()">
 		<section class="flex-col">
 			<div class="flex-row">
 				<label class="flexible focus-fg-color">First Name</label>
@@ -59,41 +59,57 @@
 			</div>
 			<input type="password" class="fancy-input faded-slim-border border-bottom-only" formControlName="password" required>
 		</section>
-		<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>
-				<div class="input-errors">
-					<label class="error">Type in your desired languages, separated by a space</label>
-				</div>
+		<button type="button" class="focus-fg-color full-width faded-slim-border padding-smaller lighter-hover click-effect margin-top-normal" (click)="toggleLanguages()">
+			▼ Edit Languages ▼
+		</button>
+		<section *ngIf="showLanguages">
+			<div class="margin-top-bigger">
+				<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>
+			</div>
+			<div class="none-message" *ngIf="availableLanguages.length === 0">
+				No languages available!
+			</div>
+			<div *ngIf="availableLanguages.length > 0">
+				Available languages:
 			</div>
-			Available languages:
-			<div id="all-languages">
-				<div class="user-language" *ngFor="let lang of availableLanguages">
+			<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>
-		</div>
-		<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>
-				<div class="input-errors">
-					<label class="error">Type in your desired technologies, separated by a space</label>
-				</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()">
+			▼ Edit Technologies ▼
+		</button>
+		<section *ngIf="showTechnologies">
+			<div class="margin-top-bigger">
+				<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>
+			</div>
+			<div class="none-message" *ngIf="availableTechnologies.length === 0">
+				No technologies available!
+			</div>
+			<div *ngIf="availableTechnologies.length > 0">
+				Available technologies:
 			</div>
-			Available technologies:
-			<div id="all-technologies">
-				<div class="user-technology" *ngFor="let tech of availableTechnologies">
+			<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>
-		</div>
-		<button class="full-width faded-slim-border padding-smaller lighter-hover click-effect border-radius-smaller margin-top-normal" type="submit">
+		</section>
+		<section class="margin-top-bot-smaller">
+			<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">
 			Update profile
 		</button>
-		<app-success-bar></app-success-bar>
-		<app-error-bar></app-error-bar>
 	</form>
 	<section class="card full-width">
 		<div class="margin-bot-bigger text-centered error-fg-color" *ngIf="deleteAccountConfirm">
diff --git a/src/styles.css b/src/styles.css
index a20cef2..6c43f1f 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -329,6 +329,16 @@ input[type=file]::file-selector-button {
   margin-bottom: 0.5em;
 }
 
+.margin-top-bot-very-big {
+  margin-top: 0.7em;
+  margin-bottom: 0.7em;
+}
+
+.margin-top-bot-smaller {
+  margin-top: 0.3em;
+  margin-bottom: 0.3em;
+}
+
 .margin-top-bot-small {
   margin-top: 0.2em;
   margin-bottom: 0.2em;
-- 
cgit v1.2.3


From 3e34040b286bb41019d20794f19f18b1a94f77af Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Mon, 22 Mar 2021 16:53:08 +0200
Subject: Added a button for navigation to admin panel page

---
 src/app/components/profile-settings/profile-settings.component.html | 5 +++++
 src/app/components/profile-settings/profile-settings.component.ts   | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

(limited to 'src/app/components/profile-settings/profile-settings.component.html')

diff --git a/src/app/components/profile-settings/profile-settings.component.html b/src/app/components/profile-settings/profile-settings.component.html
index f5989ef..62513ef 100644
--- a/src/app/components/profile-settings/profile-settings.component.html
+++ b/src/app/components/profile-settings/profile-settings.component.html
@@ -3,6 +3,11 @@
 <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()">
+			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()">
 		<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">
diff --git a/src/app/components/profile-settings/profile-settings.component.ts b/src/app/components/profile-settings/profile-settings.component.ts
index 44ea8bb..79519aa 100644
--- a/src/app/components/profile-settings/profile-settings.component.ts
+++ b/src/app/components/profile-settings/profile-settings.component.ts
@@ -290,7 +290,7 @@ export class ProfileSettingsComponent implements OnInit {
     this._router.navigate([this._router.url.substring(0, this._router.url.length - 9)]);
   }
 
-  navigateToAdminPanel(): void {
+  goToAdminPanel(): void {
     this._router.navigate(['/admin-panel']);
   }
 
-- 
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/profile-settings/profile-settings.component.html')

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/profile-settings/profile-settings.component.html')

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/profile-settings/profile-settings.component.html')

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


From f72daa97fd8bfbaba9f7d6874131a61b3e1c49ba Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Mon, 29 Mar 2021 14:52:03 +0300
Subject: Added basic effects and skeleton of functionality for clicking
 available technologies and languages in profile settings

---
 .../components/profile-settings/profile-settings.component.html  | 4 ++--
 .../components/profile-settings/profile-settings.component.ts    | 9 +++++++++
 2 files changed, 11 insertions(+), 2 deletions(-)

(limited to 'src/app/components/profile-settings/profile-settings.component.html')

diff --git a/src/app/components/profile-settings/profile-settings.component.html b/src/app/components/profile-settings/profile-settings.component.html
index dd3d186..e792f9f 100644
--- a/src/app/components/profile-settings/profile-settings.component.html
+++ b/src/app/components/profile-settings/profile-settings.component.html
@@ -81,7 +81,7 @@
 				Available languages:
 			</div>
 			<div class="flex-row margin-top-dot4">
-				<div class="sec-info border-radius-dot5r padding-dot2" *ngFor="let lang of availableLanguages">
+				<div class="sec-info border-radius-dot5r padding-dot2 hover-half-opacity click-effect" *ngFor="let lang of availableLanguages" (click)="langClick(lang.name)">
 					{{ lang.name }}
 				</div>
 			</div>
@@ -103,7 +103,7 @@
 				Available technologies:
 			</div>
 			<div class="flex-row margin-top-dot4">
-				<div class="sec-info border-radius-dot5r padding-dot2" *ngFor="let tech of availableTechnologies">
+				<div class="sec-info border-radius-dot5r padding-dot2 hover-half-opacity click-effect" *ngFor="let tech of availableTechnologies" (click)="techClick(tech.name)">
 					{{ tech.name }}
 				</div>
 			</div>
diff --git a/src/app/components/profile-settings/profile-settings.component.ts b/src/app/components/profile-settings/profile-settings.component.ts
index 79519aa..b7f2d90 100644
--- a/src/app/components/profile-settings/profile-settings.component.ts
+++ b/src/app/components/profile-settings/profile-settings.component.ts
@@ -286,6 +286,15 @@ export class ProfileSettingsComponent implements OnInit {
     }
   }
 
+  langClick(name: string): void {
+    console.log('Language: ' + name);
+  }
+
+  techClick(name: string): void {
+    console.log('Technology: ' + name);
+  }
+
+
   goToProfile(): void {
     this._router.navigate([this._router.url.substring(0, this._router.url.length - 9)]);
   }
-- 
cgit v1.2.3


From 8c2893557a5a03076746fcc91ca7db1edadae9e8 Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Mon, 29 Mar 2021 15:11:13 +0300
Subject: Replaced technology and language input fields with arrays and button
 elements

---
 .../profile-settings.component.html                | 82 +++++++++++++--------
 .../profile-settings/profile-settings.component.ts | 85 ++++++++--------------
 2 files changed, 81 insertions(+), 86 deletions(-)

(limited to 'src/app/components/profile-settings/profile-settings.component.html')

diff --git a/src/app/components/profile-settings/profile-settings.component.html b/src/app/components/profile-settings/profile-settings.component.html
index e792f9f..d42ba28 100644
--- a/src/app/components/profile-settings/profile-settings.component.html
+++ b/src/app/components/profile-settings/profile-settings.component.html
@@ -68,45 +68,63 @@
 			▼ Edit Languages ▼
 		</button>
 		<section *ngIf="showLanguages">
-			<div class="margin-top-dot5">
-				<label class="error">
-					Type in your desired languages, separated by a space
-				</label>
-				<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!
-			</div>
-			<div *ngIf="availableLanguages.length > 0">
-				Available languages:
-			</div>
-			<div class="flex-row margin-top-dot4">
-				<div class="sec-info border-radius-dot5r padding-dot2 hover-half-opacity click-effect" *ngFor="let lang of availableLanguages" (click)="langClick(lang.name)">
-					{{ lang.name }}
+			<section class="margin-top-dot5">
+				<div class="none-message" *ngIf="chosenLanguages.length === 0">
+					You haven't chosen any languages!
 				</div>
-			</div>
+				<div *ngIf="chosenLanguages.length > 0">
+					Chosen languages:
+				</div>
+				<div class="flex-row margin-top-dot4">
+					<div class="sec-info border-radius-dot5r padding-dot2 hover-half-opacity click-effect" *ngFor="let lang of chosenLanguages" (click)="langClick(lang.name)">
+						{{ lang.name }}
+					</div>
+				</div>
+			</section>
+			<section>
+				<div class="none-message" *ngIf="availableLanguages.length === 0">
+					No languages available!
+				</div>
+				<div *ngIf="availableLanguages.length > 0">
+					Available languages:
+				</div>
+				<div class="flex-row margin-top-dot4">
+					<div class="sec-info border-radius-dot5r padding-dot2 hover-half-opacity click-effect" *ngFor="let lang of availableLanguages" (click)="langClick(lang.name)">
+						{{ lang.name }}
+					</div>
+				</div>
+			</section>
 		</section>
 		<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-dot5">
-				<label class="error">
-					Type in your desired technologies, separated by a space
-				</label>
-				<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!
-			</div>
-			<div *ngIf="availableTechnologies.length > 0">
-				Available technologies:
-			</div>
-			<div class="flex-row margin-top-dot4">
-				<div class="sec-info border-radius-dot5r padding-dot2 hover-half-opacity click-effect" *ngFor="let tech of availableTechnologies" (click)="techClick(tech.name)">
-					{{ tech.name }}
+			<section class="margin-top-dot5 border-faded-slim border-bottom-only margin-bot-dot5">
+				<div class="none-message" *ngIf="chosenTechnologies.length === 0">
+					You haven't chosen any technologies!
 				</div>
-			</div>
+				<div *ngIf="chosenTechnologies.length > 0">
+					Chosen technologies:
+				</div>
+				<div class="flex-row margin-top-dot4">
+					<div class="sec-info border-radius-dot5r padding-dot2 hover-half-opacity click-effect" *ngFor="let tech of chosenTechnologies" (click)="techClick(tech.name)">
+						{{ tech.name }}
+					</div>
+				</div>
+			</section>
+			<section>
+				<div class="none-message" *ngIf="availableTechnologies.length === 0">
+					No technologies available!
+				</div>
+				<div *ngIf="availableTechnologies.length > 0">
+					Available technologies:
+				</div>
+				<div class="flex-row margin-top-dot4">
+					<div class="sec-info border-radius-dot5r padding-dot2 hover-half-opacity click-effect" *ngFor="let tech of availableTechnologies" (click)="techClick(tech.name)">
+						{{ tech.name }}
+					</div>
+				</div>
+			</section>
 		</section>
 		<section class="margin-top-bot-dot3">
 			<app-success-bar></app-success-bar>
diff --git a/src/app/components/profile-settings/profile-settings.component.ts b/src/app/components/profile-settings/profile-settings.component.ts
index b7f2d90..007ce28 100644
--- a/src/app/components/profile-settings/profile-settings.component.ts
+++ b/src/app/components/profile-settings/profile-settings.component.ts
@@ -34,6 +34,8 @@ export class ProfileSettingsComponent implements OnInit {
   public updateProfilePictureFormGroup: FormGroup;
   public newProfilePicture: File;
   public user: User;
+  public chosenLanguages: Language[];
+  public chosenTechnologies: Technology[];
   public availableLanguages: Language[];
   public availableTechnologies: Technology[];
 
@@ -57,16 +59,11 @@ export class ProfileSettingsComponent implements OnInit {
       username: new FormControl(''),
       email: new FormControl(''),
       password: new FormControl(''),
-      languageInput: new FormControl(''),
-      languages: new FormControl(''),
-      technologyInput: new FormControl(''),
-      technologies: new FormControl('')
     });
     this.updateProfilePictureFormGroup = this._fb.group({
       fileUpload: new FormControl('')
     });
 
-
     this._userService.getUserByUsernameRequest(this._urlUsername).subscribe({
       next: (res: object) => {
         Object.assign(this.user, res);
@@ -77,18 +74,7 @@ export class ProfileSettingsComponent implements OnInit {
         this._router.navigate(['/not-found']);
       }
     });
-
-    this._languageService.getAllLanguagesWithSessionStorageRequest().subscribe({
-      next: (result: object) => {
-        this.availableLanguages = result as Language[];
-      }
-    });
-    this._technologyService.getAllTechnologiesWithSessionStorageRequest().subscribe({
-      next: (result: object) => {
-        this.availableTechnologies = result as Technology[];
-      }
-    });
-  }
+   }
 
   private finishUserLoading(): void {
     if (sessionStorage.getItem('UserCred')) {
@@ -99,6 +85,7 @@ export class ProfileSettingsComponent implements OnInit {
           Object.assign(userFromToken, tokenRes);
 
           if (userFromToken.userName === this._urlUsername) {
+            this.loadUserSecondaryInfo();
             this.initForms();
             this.dataArrived = true;
           }
@@ -116,6 +103,33 @@ export class ProfileSettingsComponent implements OnInit {
     }
   }
 
+  private loadUserSecondaryInfo(): void {
+    // Load languages and tehnologies of user
+    this._languageService.getFullLanguagesFromIncomplete(this.user.languages).then(
+      (result) => {
+        this.chosenLanguages = result as Language[];
+      }
+    );
+
+    this._technologyService.getFullTechnologiesFromIncomplete(this.user.technologies).then(
+      (result) => {
+        this.chosenTechnologies = result as Technology[];
+      }
+    );
+
+    // Load avaiable languages and technologies
+    this._languageService.getAllLanguagesWithSessionStorageRequest().subscribe({
+      next: (result: object) => {
+        this.availableLanguages = result as Language[];
+      }
+    });
+    this._technologyService.getAllTechnologiesWithSessionStorageRequest().subscribe({
+      next: (result: object) => {
+        this.availableTechnologies = result as Technology[];
+      }
+    });
+  }
+
   private initForms(): void {
     this.updateUserFormGroup = this._fb.group({
       firstName: new FormControl(this.user.firstName, [
@@ -139,25 +153,6 @@ export class ProfileSettingsComponent implements OnInit {
         Validators.minLength(3),
         Validators.pattern('.*[0-9].*') // Check if password contains atleast one number
       ]),
-
-      // For language we have two different controls,
-      // the first one is used for input, the other one for sending data
-      // because if we edit the control for input,
-      // we're also gonna change the input field in the HTML
-      languageInput: new FormControl(''), // The one for input
-      languages: new FormControl(''), // The one that is sent
-
-      // For technologies it's the same as it is with languages
-      technologyInput: new FormControl(''),
-      technologies: new FormControl('')
-    });
-
-    this.getLanguagesForShowing().then(value => {
-        this.updateUserFormGroup.patchValue({ languageInput : value });
-    });
-
-    this.getTechnologiesForShowing().then(value => {
-      this.updateUserFormGroup.patchValue({ technologyInput : value });
     });
 
     this.updateProfilePictureFormGroup = this._fb.group({
@@ -172,24 +167,6 @@ export class ProfileSettingsComponent implements OnInit {
     });
   }
 
-  private getLanguagesForShowing(): Promise<string> {
-    return new Promise(resolve => {
-      this._languageService.getFullLanguagesFromIncomplete(this.user.languages).then(value => {
-        this.user.languages = value;
-        resolve(value.map(x => x.name).join(' '));
-      });
-    });
-  }
-
-  private getTechnologiesForShowing(): Promise<string> {
-    return new Promise(resolve => {
-      this._technologyService.getFullTechnologiesFromIncomplete(this.user.technologies).then(value => {
-        this.user.technologies = value;
-        resolve(value.map(x => x.name).join(' '));
-      });
-    });
-  }
-
   onFileUpload(event: any): void {
     this.newProfilePicture = event.target.files[0];
   }
-- 
cgit v1.2.3


From 7fd2ee051cb541eac73901c1f67052219fc25584 Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Mon, 29 Mar 2021 15:39:49 +0300
Subject: Made choosen and avaiable languages and technologies beside eachother
 in profile settings

---
 .../profile-settings.component.html                | 24 +++++++++++-----------
 1 file changed, 12 insertions(+), 12 deletions(-)

(limited to 'src/app/components/profile-settings/profile-settings.component.html')

diff --git a/src/app/components/profile-settings/profile-settings.component.html b/src/app/components/profile-settings/profile-settings.component.html
index d42ba28..60cd2e0 100644
--- a/src/app/components/profile-settings/profile-settings.component.html
+++ b/src/app/components/profile-settings/profile-settings.component.html
@@ -67,12 +67,12 @@
 		<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">
-			<section class="margin-top-dot5">
+		<section class="flex-row flexible-children" *ngIf="showLanguages">
+			<section class="margin-top-dot5 padding-right-1">
 				<div class="none-message" *ngIf="chosenLanguages.length === 0">
 					You haven't chosen any languages!
 				</div>
-				<div *ngIf="chosenLanguages.length > 0">
+				<div class="border-faded-slim border-bottom-only" *ngIf="chosenLanguages.length > 0">
 					Chosen languages:
 				</div>
 				<div class="flex-row margin-top-dot4">
@@ -81,11 +81,11 @@
 					</div>
 				</div>
 			</section>
-			<section>
+			<section class="margin-top-dot5">
 				<div class="none-message" *ngIf="availableLanguages.length === 0">
-					No languages available!
+					No other languages available!
 				</div>
-				<div *ngIf="availableLanguages.length > 0">
+				<div class="border-faded-slim border-bottom-only" *ngIf="availableLanguages.length > 0">
 					Available languages:
 				</div>
 				<div class="flex-row margin-top-dot4">
@@ -98,12 +98,12 @@
 		<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">
-			<section class="margin-top-dot5 border-faded-slim border-bottom-only margin-bot-dot5">
+		<section class="flex-row flexible-children" *ngIf="showTechnologies">
+			<section class="margin-top-dot5 padding-right-1">
 				<div class="none-message" *ngIf="chosenTechnologies.length === 0">
 					You haven't chosen any technologies!
 				</div>
-				<div *ngIf="chosenTechnologies.length > 0">
+				<div class="border-faded-slim border-bottom-only" *ngIf="chosenTechnologies.length > 0">
 					Chosen technologies:
 				</div>
 				<div class="flex-row margin-top-dot4">
@@ -112,11 +112,11 @@
 					</div>
 				</div>
 			</section>
-			<section>
+			<section class="margin-top-dot5">
 				<div class="none-message" *ngIf="availableTechnologies.length === 0">
-					No technologies available!
+					No other technologies available!
 				</div>
-				<div *ngIf="availableTechnologies.length > 0">
+				<div class="border-faded-slim border-bottom-only" *ngIf="availableTechnologies.length > 0">
 					Available technologies:
 				</div>
 				<div class="flex-row margin-top-dot4">
-- 
cgit v1.2.3


From dee367f320a972806d5bb251c01b2c0044e9a05a Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Mon, 29 Mar 2021 15:52:54 +0300
Subject: Moved password field to the bottom (but still above update button) in
 profile settings

---
 .../profile-settings/profile-settings.component.html | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

(limited to 'src/app/components/profile-settings/profile-settings.component.html')

diff --git a/src/app/components/profile-settings/profile-settings.component.html b/src/app/components/profile-settings/profile-settings.component.html
index 60cd2e0..91740c7 100644
--- a/src/app/components/profile-settings/profile-settings.component.html
+++ b/src/app/components/profile-settings/profile-settings.component.html
@@ -54,16 +54,6 @@
 			</div>
 			<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 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 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-dot4" (click)="toggleLanguages()">
 			▼ Edit Languages ▼
 		</button>
@@ -126,6 +116,16 @@
 				</div>
 			</section>
 		</section>
+		<section class="flex-col margin-top-dot5">
+			<div class="flex-row">
+				<label class="flexible fg-focus">Current 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 border-faded-slim border-bottom-only" formControlName="password" required>
+		</section>
 		<section class="margin-top-bot-dot3">
 			<app-success-bar></app-success-bar>
 			<app-error-bar></app-error-bar>
-- 
cgit v1.2.3


From 0dd2a9ac545a8bdce63f403122503fef9510378c Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Mon, 29 Mar 2021 15:57:33 +0300
Subject: Added slim border to technology and language edit sections in profile
 settings

---
 .../profile-settings/profile-settings.component.html         | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

(limited to 'src/app/components/profile-settings/profile-settings.component.html')

diff --git a/src/app/components/profile-settings/profile-settings.component.html b/src/app/components/profile-settings/profile-settings.component.html
index 91740c7..fd2d0c5 100644
--- a/src/app/components/profile-settings/profile-settings.component.html
+++ b/src/app/components/profile-settings/profile-settings.component.html
@@ -57,8 +57,8 @@
 		<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 class="flex-row flexible-children" *ngIf="showLanguages">
-			<section class="margin-top-dot5 padding-right-1">
+		<section class="flex-row flexible-children border-faded-slim padding-dot3 margin-top-dot5" *ngIf="showLanguages">
+			<section class="padding-right-1">
 				<div class="none-message" *ngIf="chosenLanguages.length === 0">
 					You haven't chosen any languages!
 				</div>
@@ -71,7 +71,7 @@
 					</div>
 				</div>
 			</section>
-			<section class="margin-top-dot5">
+			<section>
 				<div class="none-message" *ngIf="availableLanguages.length === 0">
 					No other languages available!
 				</div>
@@ -88,8 +88,8 @@
 		<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 class="flex-row flexible-children" *ngIf="showTechnologies">
-			<section class="margin-top-dot5 padding-right-1">
+		<section class="flex-row flexible-children border-faded-slim padding-dot3 margin-top-dot5" *ngIf="showTechnologies">
+			<section class="padding-right-1">
 				<div class="none-message" *ngIf="chosenTechnologies.length === 0">
 					You haven't chosen any technologies!
 				</div>
@@ -102,7 +102,7 @@
 					</div>
 				</div>
 			</section>
-			<section class="margin-top-dot5">
+			<section>
 				<div class="none-message" *ngIf="availableTechnologies.length === 0">
 					No other technologies available!
 				</div>
-- 
cgit v1.2.3


From 1059b56781fdd6390c4c44fb00e99cc831971285 Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Mon, 29 Mar 2021 16:05:06 +0300
Subject: Added show/hide button in profile settings confirm password field

---
 .../components/profile-settings/profile-settings.component.html    | 7 +++++--
 src/app/components/profile-settings/profile-settings.component.ts  | 7 +++++++
 2 files changed, 12 insertions(+), 2 deletions(-)

(limited to 'src/app/components/profile-settings/profile-settings.component.html')

diff --git a/src/app/components/profile-settings/profile-settings.component.html b/src/app/components/profile-settings/profile-settings.component.html
index fd2d0c5..1471859 100644
--- a/src/app/components/profile-settings/profile-settings.component.html
+++ b/src/app/components/profile-settings/profile-settings.component.html
@@ -116,7 +116,7 @@
 				</div>
 			</section>
 		</section>
-		<section class="flex-col margin-top-dot5">
+		<section class="flex-col input-selection">
 			<div class="flex-row">
 				<label class="flexible fg-focus">Current Password</label>
 
@@ -124,7 +124,10 @@
 				<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 border-faded-slim border-bottom-only" formControlName="password" required>
+			<input [type]="showCurrentPassword ? 'text' : 'password'" class="fancy-input border-faded-slim border-bottom-only padding-right-1dot5" formControlName="password" required>
+			<button type="button" class="show-password-button hover-half-opacity click-effect" (click)="toggleShowPassword(0)">
+				<img [src]="showCurrentPassword ? '/assets/icons/tabler-icon-eye-off.svg' : '/assets/icons/tabler-icon-eye.svg'">
+			</button>
 		</section>
 		<section class="margin-top-bot-dot3">
 			<app-success-bar></app-success-bar>
diff --git a/src/app/components/profile-settings/profile-settings.component.ts b/src/app/components/profile-settings/profile-settings.component.ts
index 78a57ec..f329942 100644
--- a/src/app/components/profile-settings/profile-settings.component.ts
+++ b/src/app/components/profile-settings/profile-settings.component.ts
@@ -38,6 +38,7 @@ export class ProfileSettingsComponent implements OnInit {
   public chosenTechnologies: Technology[];
   public availableLanguages: Language[];
   public availableTechnologies: Technology[];
+  public showCurrentPassword = false;
 
   constructor(private _titleService: Title, private _router: Router, private _userService: UserService, private _languageService: LanguageService, private _technologyService: TechnologyService, private _tokenService: TokenService, private _fb: FormBuilder, private _location: Location) {
     this._titleService.setTitle(this._title);
@@ -346,4 +347,10 @@ export class ProfileSettingsComponent implements OnInit {
     this._router.onSameUrlNavigation = 'reload';
     this._router.navigate([this._router.url]);
   }
+
+  toggleShowPassword(index: number): void {
+    switch (index) {
+      case 0: this.showCurrentPassword = !this.showCurrentPassword;
+    }
+  }
 }
-- 
cgit v1.2.3