From 243f07858e41956955201a1c3525956949886d6a Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Wed, 31 Aug 2022 17:45:29 +1000
Subject: [PATCH] fix: others text in reaction popup on light theme should be
 black

---
 .../conversation/message/reactions/ReactionPopup.tsx   | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/ts/components/conversation/message/reactions/ReactionPopup.tsx b/ts/components/conversation/message/reactions/ReactionPopup.tsx
index 7ac5235dc..bd7ff0532 100644
--- a/ts/components/conversation/message/reactions/ReactionPopup.tsx
+++ b/ts/components/conversation/message/reactions/ReactionPopup.tsx
@@ -1,7 +1,9 @@
 import React, { ReactElement, useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 import { Data } from '../../../../data/data';
 import { PubKey } from '../../../../session/types/PubKey';
+import { getTheme } from '../../../../state/selectors/theme';
 import { nativeEmojiData } from '../../../../util/emoji';
 
 export type TipPosition = 'center' | 'left' | 'right';
@@ -54,8 +56,8 @@ const StyledEmoji = styled.span`
   margin-left: 8px;
 `;
 
-const StyledOthers = styled.span`
-  color: var(--color-accent);
+const StyledOthers = styled.span<{ darkMode: boolean }>`
+  color: ${props => (props.darkMode ? 'var(--color-accent)' : 'var(--color-text)')};
 `;
 
 const generateContactsString = async (
@@ -85,6 +87,8 @@ const generateContactsString = async (
 };
 
 const Contacts = (contacts: Array<string>, count: number) => {
+  const darkMode = useSelector(getTheme) === 'dark';
+
   if (!Boolean(contacts?.length > 0)) {
     return;
   }
@@ -108,7 +112,7 @@ const Contacts = (contacts: Array<string>, count: number) => {
     return (
       <span>
         {window.i18n('reactionPopupMany', [contacts[0], contacts[1], contacts[3]])}{' '}
-        <StyledOthers>
+        <StyledOthers darkMode={darkMode}>
           {window.i18n(reactors === 4 ? 'otherSingular' : 'otherPlural', [`${count - 3}`])}
         </StyledOthers>{' '}
         {window.i18n('reactionPopup')}