updated moment mention style

5 files changed, 26 insertions, 15 deletions

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index dd016109..9cf10b5e 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -123,7 +123,7 @@ const AddComment: React.FC<AddCommentProps> = ({momentId, placeholderText}) => {
               );
             }}
             inputRef={ref}
-            partTypes={mentionPartTypes}
+            partTypes={mentionPartTypes('blue')}
           />
           <View style={styles.submitButton}>
             <TouchableOpacity style={styles.submitButton} onPress={addComment}>
diff --git a/src/components/comments/CommentTile.tsx b/src/components/comments/CommentTile.tsx
index ce346af5..ecdb4c30 100644
--- a/src/components/comments/CommentTile.tsx
+++ b/src/components/comments/CommentTile.tsx
@@ -25,7 +25,7 @@ import {
   normalize,
   SCREEN_WIDTH,
 } from '../../utils';
-import {renderTextWithMentions} from '../../utils/comments';
+import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments';
 import {ProfilePreview} from '../profile';
 import CommentsContainer from './CommentsContainer';
 
@@ -152,6 +152,7 @@ const CommentTile: React.FC<CommentTileProps> = ({
           {renderTextWithMentions({
             value: commentObject.comment,
             styles: styles.comment,
+            partTypes: mentionPartTypes('blue'),
             onPress: (user: UserType) =>
               navigateToProfile(state, dispatch, navigation, screenType, user),
           })}
diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx
index 03034925..45186ba1 100644
--- a/src/components/moments/MomentPostContent.tsx
+++ b/src/components/moments/MomentPostContent.tsx
@@ -11,7 +11,7 @@ import {
   SCREEN_HEIGHT,
   SCREEN_WIDTH,
 } from '../../utils';
-import {renderTextWithMentions} from '../../utils/comments';
+import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments';
 import {CommentsCount} from '../comments';
 
 interface MomentPostContentProps extends ViewProps {
@@ -62,6 +62,7 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
       {renderTextWithMentions({
         value: caption,
         styles: styles.captionText,
+        partTypes: mentionPartTypes('white'),
         onPress: (user: UserType) =>
           navigateToProfile(state, dispatch, navigation, screenType, user),
       })}
@@ -101,7 +102,7 @@ const styles = StyleSheet.create({
     marginLeft: '5%',
     marginRight: '5%',
     color: '#ffffff',
-    fontWeight: 'bold',
+    fontWeight: '500',
   },
 });
 export default MomentPostContent;
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 041f0da2..a41abba6 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -116,7 +116,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
               placeholderTextColor="gray"
               value={caption}
               onChange={setCaption}
-              partTypes={mentionPartTypes}
+              partTypes={mentionPartTypes('blue')}
             />
           </View>
         </KeyboardAvoidingView>
diff --git a/src/utils/comments.tsx b/src/utils/comments.tsx
index a71e3857..0d551682 100644
--- a/src/utils/comments.tsx
+++ b/src/utils/comments.tsx
@@ -55,6 +55,7 @@ const renderPart = (
 interface RenderProps {
   value: string;
   styles: StyleProp<TextStyle>;
+  partTypes: PartType[];
   onPress: (user: UserType) => void;
 }
 
@@ -66,9 +67,10 @@ interface RenderProps {
 export const renderTextWithMentions: React.FC<RenderProps> = ({
   value,
   styles,
+  partTypes,
   onPress,
 }) => {
-  const {parts} = parseValue(value, mentionPartTypes);
+  const {parts} = parseValue(value, partTypes);
   return (
     <Text style={styles}>
       {parts.map((part, index) => renderPart(part, index, onPress))}
@@ -76,12 +78,19 @@ export const renderTextWithMentions: React.FC<RenderProps> = ({
   );
 };
 
-export const mentionPartTypes: PartType[] = [
-  {
-    trigger: '@',
-    renderSuggestions: (props) => <TaggTypeahead {...props} />,
-    allowedSpacesCount: 0,
-    isInsertSpaceAfterMention: true,
-    textStyle: {color: TAGG_LIGHT_BLUE},
-  },
-];
+export const mentionPartTypes: (style: 'blue' | 'white') => PartType[] = (
+  style,
+) => {
+  return [
+    {
+      trigger: '@',
+      renderSuggestions: (props) => <TaggTypeahead {...props} />,
+      allowedSpacesCount: 0,
+      isInsertSpaceAfterMention: true,
+      textStyle:
+        style === 'blue'
+          ? {color: TAGG_LIGHT_BLUE}
+          : {color: 'white', fontWeight: '800'},
+    },
+  ];
+};