Improved readability and consistency of font-size, text, border, colors and padding CSS class names

12 files changed, 150 insertions, 150 deletions

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>