[PBIOS-671] Fix Reaction Button Font Color Alignment (#490)

**What does this PR do?** A clear and concise description with your
runway ticket url.
[PBIOS-671] Fix Reaction Button Font Color Alignment

### Checklist
- [x] **LABELS** - Add a label: `breaking`, `bug`, `improvement`,
`documentation`, or `enhancement`. See
[Labels](https://github.com/powerhome/playbook-apple/labels) for
descriptions.
- [x] **RELEASES** - Add the appropriate label: `Ready for Testing` /
`Ready for Release`
- [x] **TESTING** - Have you tested your story?

---------

Co-authored-by: Ísis <[email protected]>

Author: RachelRadford21

Diff for: Sources/Playbook/Components/Button/ButtonsCatalog.swift

@@ -10,7 +10,7 @@
 import SwiftUI
 
 public struct ButtonsCatalog: View {
-  @State private var count: Int = 153
+  @State private var count: Int = 154
   @State private var count1: Int = 5
   @State private var isLoading: Bool = false
   @State private var isHighlighted: Bool = true
@@ -66,8 +66,8 @@ extension ButtonsCatalog {
         isInteractive: true
       )
       PBReactionButton(count: $count1, icon: "1️⃣", isInteractive: false)
-      PBReactionButton(isInteractive: false)
-      PBReactionButton(pbIcon: PBIcon(FontAwesome.user), isInteractive: false)
+      PBReactionButton(isInteractive: false, countColor: Color.text(.lighter))
+      PBReactionButton(pbIcon: PBIcon(FontAwesome.user), isInteractive: false, countColor: Color.text(.lighter))
     }
   }
   var fullWidthButtonView: some View {

Diff for: Sources/Playbook/Components/Button/PBReactionButton.swift

@@ -16,6 +16,7 @@ public struct PBReactionButton: View {
   let icon: String?
   let pbIcon: PBIcon?
   let isInteractive: Bool
+  let countColor: Color
   let action: (() -> Void)?
   @Environment(\.colorScheme) var colorScheme
 
@@ -25,12 +26,14 @@ public struct PBReactionButton: View {
     icon: String? = nil,
     pbIcon: PBIcon? = nil,
     isInteractive: Bool = false,
+    countColor: Color = .text(.light),
     action: (() -> Void)? = nil
   ) {
     self._count = count
     self._isHighlighted = isHighlighted
     self.icon = icon
     self.pbIcon = pbIcon
+    self.countColor = countColor
     self.isInteractive = isInteractive
     self.action = action
   }
@@ -75,12 +78,12 @@ public extension PBReactionButton {
       countView
     }  
     .padding(.horizontal, 8)
-    .padding(.vertical, 2)
+    .padding(.top, 3)
   }
 
   var emojiView: some View {
     return Text(icon ?? "")
-      .pbFont(.monogram(12), variant: .light, color: textColor)
+      .pbFont(.caption, variant: .light, color: textColor)
       .padding(.leading, count > 0 ? 0 : 4)
   }
 
@@ -107,7 +110,7 @@ public extension PBReactionButton {
 
   var textColor: Color {
     switch colorScheme {
-    case .light: return Color.text(.lighter)
+    case .light: return countColor
     case .dark: return icon != nil ? Color(.white) : Color(.white).opacity(0.6)
     default:
       return Color.text(.light)