Colorize voting icons and text in compact posts and comments (#800)

Tests pass locally
mlemgroup · Dec 13, 2023 · 2a36a1d · 2a36a1d
1 parent 341c999
commit 2a36a1d
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 3 deletions.
diff --git a/Mlem/Views/Shared/Comments/Components/CommentBodyView.swift b/Mlem/Views/Shared/Comments/Components/CommentBodyView.swift
@@ -120,17 +120,19 @@ struct CommentBodyView: View {
                     Image(systemName: myVote == .upvote ? Icons.upvoteSquareFill : Icons.upvoteSquare)
                     Text(String(commentView.counts.upvotes))
                 }
+                .foregroundColor(myVote == .upvote ? .upvoteColor : .secondary)
 
                 HStack(spacing: AppConstants.iconToTextSpacing) {
                     Image(systemName: myVote == .downvote ? Icons.downvoteSquareFill : Icons.downvoteSquare)
                     Text(String(commentView.counts.downvotes))
                 }
+                .foregroundColor(myVote == .downvote ? .downvoteColor : .secondary)
             } else {
                 HStack(spacing: AppConstants.iconToTextSpacing) {
                     Image(systemName: myVote == .resetVote ? Icons.upvoteSquare : myVote.iconNameFill)
                     Text(String(commentView.counts.score))
                 }
-                .foregroundColor(.secondary)
+                .foregroundColor(myVote.color ?? .secondary)
                 .font(.footnote)
             }
         }

diff --git a/Mlem/Views/Shared/Components/Components/InfoStackView.swift b/Mlem/Views/Shared/Components/Components/InfoStackView.swift
@@ -24,6 +24,7 @@ struct InfoStackView: View {
     let commentCount: Int?
     let saved: Bool?
     let alignment: HorizontalAlignment
+    let colorizeVotes: Bool
 
     var body: some View {
         HStack {
@@ -70,6 +71,7 @@ struct InfoStackView: View {
             Image(systemName: votes.myVote == .resetVote ? Icons.upvoteSquare : votes.myVote.iconNameFill)
             Text(String(votes.score))
         }
+        .foregroundColor(colorizeVotes ? votes.myVote.color ?? .secondary : .secondary)
         .accessibilityAddTraits(.isStaticText)
         .accessibilityElement(children: .ignore)
         .accessibilityLabel("\(votes.score) net votes")
@@ -81,6 +83,7 @@ struct InfoStackView: View {
             Image(systemName: votes.myVote == .upvote ? Icons.upvoteSquareFill : Icons.upvoteSquare)
             Text(String(votes.upvotes))
         }
+        .foregroundColor(colorizeVotes && votes.myVote == .upvote ? .upvoteColor : .secondary)
         .accessibilityAddTraits(.isStaticText)
         .accessibilityElement(children: .ignore)
         .accessibilityLabel("\(votes.upvotes) upvotes")
@@ -94,6 +97,7 @@ struct InfoStackView: View {
                 : Icons.downvoteSquare)
             Text(String(votes.downvotes))
         }
+        .foregroundColor(colorizeVotes && votes.myVote == .downvote ? .downvoteColor : .secondary)
         .accessibilityAddTraits(.isStaticText)
         .accessibilityElement(children: .ignore)
         .accessibilityLabel("\(votes.downvotes) downvotes")

diff --git a/Mlem/Views/Shared/Components/InteractionBarView.swift b/Mlem/Views/Shared/Components/InteractionBarView.swift
@@ -113,7 +113,8 @@ struct InteractionBarView: View {
                         updated: shouldShowTime ? updated : nil,
                         commentCount: shouldShowReplies ? numReplies : nil,
                         saved: shouldShowSaved ? saved : nil,
-                        alignment: infoStackAlignment(offset)
+                        alignment: infoStackAlignment(offset),
+                        colorizeVotes: false
                     )
                     .padding(AppConstants.postAndCommentSpacing)
                     .frame(minWidth: 0, maxWidth: .infinity)

diff --git a/Mlem/Views/Shared/Posts/Post Sizes/Compact Post.swift b/Mlem/Views/Shared/Posts/Post Sizes/Compact Post.swift
@@ -115,7 +115,8 @@ struct CompactPost: View {
                 updated: post.updated,
                 commentCount: post.numReplies,
                 saved: post.saved,
-                alignment: .center
+                alignment: .center,
+                colorizeVotes: true
             )
         }
         .frame(maxWidth: .infinity, alignment: .leading)