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(-)

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