Show user badges in contact modal

ts/components/conversation/ContactModal.stories.tsx

@@ -14,6 +14,7 @@ import { setupI18n } from '../../util/setupI18n';
 import enMessages from '../../../_locales/en/messages.json';
 import type { ConversationType } from '../../state/ducks/conversations';
 import { getFakeBadges } from '../../test-both/helpers/getFakeBadge';
+import { ThemeType } from '../../types/Util';
 
 const i18n = setupI18n('en', enMessages);
 
@@ -37,6 +38,7 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   isMember: boolean('isMember', overrideProps.isMember || true),
   openConversationInternal: action('openConversationInternal'),
   removeMemberFromGroup: action('removeMemberFromGroup'),
+  theme: ThemeType.light,
   toggleSafetyNumberModal: action('toggleSafetyNumberModal'),
   toggleAdmin: action('toggleAdmin'),
   updateConversationModelSharedGroups: action(

ts/components/conversation/ContactModal.tsx

@@ -9,7 +9,7 @@ import { Avatar } from '../Avatar';
 import { AvatarLightbox } from '../AvatarLightbox';
 import type { ConversationType } from '../../state/ducks/conversations';
 import { Modal } from '../Modal';
-import type { LocalizerType } from '../../types/Util';
+import type { LocalizerType, ThemeType } from '../../types/Util';
 import { BadgeDialog } from '../BadgeDialog';
 import type { BadgeType } from '../../badges/types';
 import { SharedGroupNames } from '../SharedGroupNames';
@@ -24,6 +24,7 @@ export type PropsDataType = {
   readonly i18n: LocalizerType;
   isAdmin: boolean;
   isMember: boolean;
+  theme: ThemeType;
 };
 
 type PropsActionType = {
@@ -60,6 +61,7 @@ export const ContactModal = ({
   isMember,
   openConversationInternal,
   removeMemberFromGroup,
+  theme,
   toggleAdmin,
   toggleSafetyNumberModal,
   updateConversationModelSharedGroups,
@@ -102,6 +104,7 @@ export const ContactModal = ({
               profileName={contact.profileName}
               sharedGroupNames={contact.sharedGroupNames}
               size={96}
+              theme={theme}
               title={contact.title}
               unblurredAvatarPath={contact.unblurredAvatarPath}
               onClick={() => {

ts/state/smart/ContactModal.tsx

@@ -7,7 +7,7 @@ import type { PropsDataType } from '../../components/conversation/ContactModal';
 import { ContactModal } from '../../components/conversation/ContactModal';
 import type { StateType } from '../reducer';
 
-import { getIntl } from '../selectors/user';
+import { getIntl, getTheme } from '../selectors/user';
 import { getBadgesSelector } from '../selectors/badges';
 import { getConversationSelector } from '../selectors/conversations';
 
@@ -42,6 +42,7 @@ const mapStateToProps = (state: StateType): PropsDataType => {
     i18n: getIntl(state),
     isAdmin,
     isMember,
+    theme: getTheme(state),
   };
 };