From 17a8110e3e0450a88207b9b8b05ebde166a433bc Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Sun, 21 Mar 2021 13:50:39 +0200
Subject: Major redesign of login component styling

---
 src/app/components/login/login.component.css  | 28 ++-------------------------
 src/app/components/login/login.component.html | 27 +++++++++++---------------
 2 files changed, 13 insertions(+), 42 deletions(-)

(limited to 'src/app/components/login')

diff --git a/src/app/components/login/login.component.css b/src/app/components/login/login.component.css
index 103f5c0..3cd7198 100644
--- a/src/app/components/login/login.component.css
+++ b/src/app/components/login/login.component.css
@@ -1,32 +1,8 @@
-form {
-  width: 100%;
-}
-
-#content hr {
-	width: 100%;
-	border: 1px solid black;
-	box-sizing: border-box;
-}
-
-.submit-btn {
-  transition: 0.2s;
-}
-
-.input-selection:nth-of-type(1) {
-  margin-top: 1.2em;
-}
-
-.submit-btn {
-  margin-bottom: .2em;
+.input-selection:first-of-type {
+  margin-top: 0.5em;
 }
 
 .redirect-to-register {
   color: var(--focus-color);
-  background-color: var(--bg-color);
   border-color: var(--focus-color);
 }
-
-.redirect-to-register:hover {
-  border-color: black !important;
-  color: black;
-}
diff --git a/src/app/components/login/login.component.html b/src/app/components/login/login.component.html
index 9f74faa..5ed1ac8 100644
--- a/src/app/components/login/login.component.html
+++ b/src/app/components/login/login.component.html
@@ -1,30 +1,25 @@
-<main id="content">
-	<summary class="title">Login</summary>
+<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>
 
-	<form [formGroup]="loginUserFormGroup" (ngSubmit)="onSubmit()">
-		<hr>
-
-		<section class="input-selection">
-			<input type="text" placeholder="Username" class="input-field" formControlName="username" required>
-			<label class="input-field-label">Username</label>
+	<app-error-bar class="full-width 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>
 			<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="input-field" formControlName="password" required>
-			<label class="input-field-label">Password</label>
-
+			<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>
 			<div class="input-errors">
 				<label *ngIf="loginUserFormGroup.get('password')?.errors?.required" class="error">*Required</label>
 			</div>
 		</section>
 
-		<hr>
-		<button class="submit-btn" type="submit">Submit</button>
-		<app-error-bar></app-error-bar>
+		<button class="faded-slim-border padding-smaller lighter-hover click-effect border-radius-smaller full-width" type="submit">Submit</button>
 	</form>
-	<button class="submit-btn redirect-to-register" (click)="onRedirectRegister()">New to DevHive? Register instead</button>
+	<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>
 </main>
-- 
cgit v1.2.3


From 05f0129fbcf5421b3b0acab0429c8dbbb5737ba4 Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Mon, 22 Mar 2021 15:12:01 +0200
Subject: Removed unused css styling in register and login components

---
 src/app/components/login/login.component.css       |  8 -----
 src/app/components/register/register.component.css | 40 ----------------------
 2 files changed, 48 deletions(-)

(limited to 'src/app/components/login')

diff --git a/src/app/components/login/login.component.css b/src/app/components/login/login.component.css
index 3cd7198..e69de29 100644
--- a/src/app/components/login/login.component.css
+++ b/src/app/components/login/login.component.css
@@ -1,8 +0,0 @@
-.input-selection:first-of-type {
-  margin-top: 0.5em;
-}
-
-.redirect-to-register {
-  color: var(--focus-color);
-  border-color: var(--focus-color);
-}
diff --git a/src/app/components/register/register.component.css b/src/app/components/register/register.component.css
index 973c6f0..e69de29 100644
--- a/src/app/components/register/register.component.css
+++ b/src/app/components/register/register.component.css
@@ -1,40 +0,0 @@
-/* A lot of stuff are moved to the global styles! */
-
-form {
-  width: 100%;
-}
-
-@media screen and (max-height: 630px) {
-  #content {
-    height: fit-content !important;
-  }
-}
-
-#content hr {
-  width: 100%;
-  border: 1px solid black;
-  box-sizing: border-box;
-}
-
-.submit-btn {
-  transition: 0.2s;
-}
-
-.input-selection:nth-of-type(1) {
-  margin-top: 1.2em;
-}
-
-.submit-btn {
-  margin-bottom: .2em;
-}
-
-.redirect-to-login {
-  color: var(--focus-color);
-  background-color: var(--bg-color);
-  border-color: var(--focus-color);
-}
-
-.redirect-to-login:hover {
-  border-color: black !important;
-  color: black;
-}
-- 
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/login')

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/login')

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