From 6ef0be3bb1f9e28dffb653011e0f3555a22b7051 Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Sat, 20 Mar 2021 09:24:21 +0200
Subject: Fixed and updated styling of rating highlights

---
 src/app/components/post/post.component.html |  6 +++---
 src/app/components/post/post.component.ts   | 13 ++++++++-----
 src/styles.css                              |  7 +++++++
 3 files changed, 18 insertions(+), 8 deletions(-)

(limited to 'src')

diff --git a/src/app/components/post/post.component.html b/src/app/components/post/post.component.html
index d9ce657..a966d00 100644
--- a/src/app/components/post/post.component.html
+++ b/src/app/components/post/post.component.html
@@ -47,13 +47,13 @@
 		</section>
 	</main>
 	<aside class="rating flex-col flex-center-align-items">
-		<button class="flex-col lighter-hover border-radius-small click-effect" (click)="votePost(true)">
+		<button class="upvote flex-col lighter-hover border-radius-small click-effect" (click)="votePost(true)">
 			<img src="/assets/icons/tabler-icon-chevron-up.svg">
 		</button>
-		<summary>
+		<summary class="top-bot-padding-small">
 			{{ votesNumber }}
 		</summary>
-		<button class="flex-col lighter-hover border-radius-small click-effect" (click)="votePost(false)">
+		<button class="downvote flex-col lighter-hover border-radius-small click-effect" (click)="votePost(false)">
 			<img src="/assets/icons/tabler-icon-chevron-down.svg">
 		</button>
 	</aside>
diff --git a/src/app/components/post/post.component.ts b/src/app/components/post/post.component.ts
index 24ecdb4..58dad4f 100644
--- a/src/app/components/post/post.component.ts
+++ b/src/app/components/post/post.component.ts
@@ -22,9 +22,11 @@ export class PostComponent implements OnInit {
   @Input() paramId: string;
   @Input() index: number;
   public loggedIn = false;
-  private voteBtns: HTMLCollectionOf<HTMLElement>;
+  private upvoteBtns: HTMLCollectionOf<HTMLElement>;
+  private downvoteBtns: HTMLCollectionOf<HTMLElement>;
 
-  constructor(private _postService: PostService, private _ratingServe: RatingService, private _userService: UserService, private _router: Router, private _tokenService: TokenService) { }
+  constructor(private _postService: PostService, private _ratingServe: RatingService, private _userService: UserService, private _router: Router, private _tokenService: TokenService)
+  { }
 
   ngOnInit(): void {
     this.loggedIn = this._tokenService.getTokenFromSessionStorage() !== '';
@@ -39,7 +41,8 @@ export class PostComponent implements OnInit {
         this.post.fileURLs = Object.values(result)[7];
         this.votesNumber = this.post.currentRating;
 
-        this.voteBtns = document.getElementsByClassName('vote') as HTMLCollectionOf<HTMLElement>;
+        this.upvoteBtns = document.getElementsByClassName('upvote') as HTMLCollectionOf<HTMLElement>;
+        this.downvoteBtns = document.getElementsByClassName('downvote') as HTMLCollectionOf<HTMLElement>;
 
         this.timeCreated = new Date(this.post.timeCreated).toLocaleString('en-GB');
 
@@ -123,8 +126,8 @@ export class PostComponent implements OnInit {
   }
 
   private changeColorOfVoteButton(isUpvoted: boolean, isDownvoted: boolean): void {
-    this.voteBtns.item(this.index * 2)!.style.backgroundColor = (isUpvoted) ? 'lightblue' : 'white';
-    this.voteBtns.item((this.index * 2) + 1)!.style.backgroundColor = (isDownvoted) ? 'lightblue' : 'white';
+    this.upvoteBtns.item(this.index)!.style.backgroundColor = (isUpvoted) ? 'var(--upvote-highlight)' : 'inherit';
+    this.downvoteBtns.item(this.index)!.style.backgroundColor = (isDownvoted) ? 'var(--downvote-highlight)' : 'inherit';
   }
 
   private highlightButtonsOnInit(): void {
diff --git a/src/styles.css b/src/styles.css
index a1754e4..0a435a7 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -12,6 +12,8 @@
   --failure: indianred;
   --faded-color: #696969;
   --navbar-height: 2.6em;
+  --upvote-highlight: #999908;
+  --downvote-highlight: #c35b5b;
 }
 
 html,
@@ -239,6 +241,11 @@ input[type=file]::file-selector-button {
   padding-left: 0.3em;
 }
 
+.top-bot-padding-small {
+  padding-top: 0.2em;
+  padding-bottom: 0.2em;
+}
+
 /* Cards */
 
 .card {
-- 
cgit v1.2.3