[update] Update preview card (#82)

* accidently forgot to branch * [updated preview card]\n[updated preview and content card emojis/reactions] * chanegs made * Increase margin by 2 --------- Co-authored-by: Marcos Hernandez <[email protected]> Co-authored-by: Aditya Pawar <[email protected]>
calblueprint · Apr 15, 2024 · 07bb8d2 · 07bb8d2
1 parent 7a36035
commit 07bb8d2
Show file tree

Hide file tree

Showing 7 changed files with 133 additions and 40 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -42,10 +42,13 @@
     "expo-status-bar": "~1.6.0",
     "html-entities": "^2.4.0",
     "react": "18.2.0",
+    "react-apple-emojis": "^2.2.1",
     "react-native": "0.72.10",
     "react-native-dom-parser": "^1.5.3",
     "react-native-element-dropdown": "^2.10.0",
     "react-native-elements": "^3.4.3",
+    "react-native-emoji": "^1.8.0",
+    "react-native-emojicon": "^1.0.0",
     "react-native-gesture-handler": "~2.12.0",
     "react-native-htmlview": "^0.16.0",
     "react-native-ionicons": "^4.6.5",

diff --git a/src/components/ContentCard/ContentCard.tsx b/src/components/ContentCard/ContentCard.tsx
@@ -9,6 +9,7 @@ import {
 
 import styles from './styles';
 import globalStyles from '../../styles/globalStyles';
+import Emoji from 'react-native-emoji';
 
 type ContentCardProps = {
   title: string;
@@ -58,33 +59,26 @@ function ContentCard({
             </Text>
           </View>
           <View style={styles.buttons}>
-            <View>
-              <TouchableOpacity
-                onPress={() => null}
-                style={{ flexDirection: 'row' }}
-              >
-                <Image
-                  style={styles.reactions}
-                  source={require('./savedStoriesIcon.png')}
-                />
-                <Image
-                  style={styles.reactions}
-                  source={require('./savedStoriesIcon.png')}
-                />
-                <Image
-                  style={styles.reactions}
-                  source={require('./savedStoriesIcon.png')}
-                />
-                <View style={styles.reactionNumber}>
-                  <Text style={[globalStyles.subtext, styles.reactionText]}>
-                    14{/*change number to work*/}
-                  </Text>
-                </View>
-              </TouchableOpacity>
+            <View style={{ flexDirection: 'row', gap: -7 }}>
+              <View style={[styles.reactions, { backgroundColor: '#FFCCCB' }]}>
+                <Emoji name="heart" />
+              </View>
+              <View style={[styles.reactions, { backgroundColor: '#FFD580' }]}>
+                <Emoji name="clap" />
+              </View>
+              <View style={[styles.reactions, { backgroundColor: '#89CFF0' }]}>
+                <Emoji name="muscle" />
+              </View>
+              {/* heart, clap, muscle, cry, ??? */}
+              <View style={styles.reactionNumber}>
+                <Text style={[globalStyles.subtext, styles.reactionText]}>
+                  14{/*change number to work*/}
+                </Text>
+              </View>
             </View>
             <TouchableOpacity onPress={() => saveStory()}>
               <Image
-                style={{ width: 30, height: 30 }}
+                style={styles.saveStoryImage}
                 source={require('./savedStoriesIcon.png')}
               />
             </TouchableOpacity>

diff --git a/src/components/ContentCard/styles.ts b/src/components/ContentCard/styles.ts
@@ -50,18 +50,26 @@ const styles = StyleSheet.create({
     color: colors.grey,
   },
   reactionNumber: {
-    marginLeft: 15,
-    marginTop: 10,
+    marginLeft: 14,
+    marginTop: 16,
   },
   reactions: {
-    width: 20,
-    height: 20,
-    borderRadius: 20 / 2,
+    width: 30,
+    height: 30,
+    borderRadius: 30 / 2,
     borderWidth: 1,
-    backgroundColor: '#89CFF0', //different per emoji reaction
+    backgroundColor: 'transparent', //different per emoji reaction
     borderColor: 'white',
     marginTop: 10,
-    marginRight: -10,
+    marginRight: -5, // -10
+    overflow: 'hidden',
+    justifyContent: 'center',
+    paddingLeft: 3,
+  },
+  saveStoryImage: {
+    width: 30,
+    height: 30,
+    marginTop: 10,
   },
   buttons: {
     flexDirection: 'row',

diff --git a/src/components/PreviewCard/PreviewCard.tsx b/src/components/PreviewCard/PreviewCard.tsx
@@ -4,8 +4,10 @@ import {
   Image,
   Pressable,
   Text,
+  TouchableOpacity,
   View,
 } from 'react-native';
+import Emoji from 'react-native-emoji';
 
 import styles from './styles';
 import globalStyles from '../../styles/globalStyles';
@@ -32,18 +34,28 @@ function PreviewCard({
   tags,
   pressFunction,
 }: PreviewCardProps) {
+  const saveStory = () => {
+    console.log("testing '+' icon does something for story " + title);
+  };
+
   return (
     <Pressable onPress={pressFunction}>
       <View style={styles.card}>
         <View style={styles.titleContainer}>
           <Text numberOfLines={1} style={[globalStyles.h3, styles.title]}>
             {title}
           </Text>
+          <TouchableOpacity onPress={() => saveStory()}>
+            <Image
+              style={{ width: 30, height: 30 }}
+              source={require('./savedStoriesIcon.png')}
+            />
+          </TouchableOpacity>
         </View>
         <View style={styles.body}>
           <Image
             style={styles.image}
-            source={{ uri: image == '' ? placeholderImage : image }}
+            source={{ uri: image === '' ? placeholderImage : image }}
           />
           <View style={styles.cardTextContainer}>
             <View style={styles.authorContainer}>
@@ -64,6 +76,23 @@ function PreviewCard({
           </View>
         </View>
         <View style={styles.tagsContainer}>
+          <View style={{ flexDirection: 'row', gap: -7 }}>
+            <View style={[styles.reactions, { backgroundColor: '#FFCCCB' }]}>
+              <Emoji name="heart" />
+            </View>
+            <View style={[styles.reactions, { backgroundColor: '#FFD580' }]}>
+              <Emoji name="clap" />
+            </View>
+            <View style={[styles.reactions, { backgroundColor: '#89CFF0' }]}>
+              <Emoji name="muscle" />
+            </View>
+            {/* heart, clap, muscle, cry, ??? */}
+            <View style={styles.reactionNumber}>
+              <Text style={[globalStyles.subtext, styles.reactionText]}>
+                14{/*change number to work*/}
+              </Text>
+            </View>
+          </View>
           <View style={styles.tagsRow}>
             {(tags?.length ?? 0) > 0 && (
               <View style={styles.tag}>
@@ -72,12 +101,10 @@ function PreviewCard({
                 </Text>
               </View>
             )}
-          </View>
-          <View style={styles.moreTags}>
-            <Pressable>
+            <Pressable style={styles.moreTags}>
               <Text style={[globalStyles.subtext, styles.moreTagsText]}>
                 {' '}
-                + {(tags?.length ?? 1) - 1} more tags
+                + {(tags?.length ?? 1) - 1}
               </Text>
             </Pressable>
           </View>

diff --git a/src/components/PreviewCard/savedStoriesIcon.png b/src/components/PreviewCard/savedStoriesIcon.png
diff --git a/src/components/PreviewCard/styles.ts b/src/components/PreviewCard/styles.ts
@@ -49,8 +49,11 @@ const styles = StyleSheet.create({
   titleContainer: {
     paddingTop: 16,
     paddingLeft: 12,
+    paddingRight: 12,
     borderBottomColor: '#EBEBEB',
     borderBottomWidth: StyleSheet.hairlineWidth,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
   },
   tag: {
     paddingHorizontal: 8,
@@ -62,7 +65,6 @@ const styles = StyleSheet.create({
     marginBottom: 10,
   },
   tagsContainer: {
-    // backgroundColor: colors.darkGrey,
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'space-between',
@@ -75,20 +77,40 @@ const styles = StyleSheet.create({
   },
   tagsRow: {
     flexDirection: 'row',
-    justifyContent: 'flex-start',
+    justifyContent: 'flex-end',
+    alignContent: 'flex-end',
     alignItems: 'center',
     flexWrap: 'wrap',
-    paddingTop: 4,
   },
   moreTags: {
     paddingVertical: 10,
     paddingRight: 12,
     alignItems: 'center',
-    justifyContent: 'center',
+    justifyContent: 'flex-end',
   },
   moreTagsText: {
     color: colors.darkGrey,
   },
+  reactions: {
+    width: 32,
+    height: 32,
+    borderRadius: 32 / 2,
+    borderWidth: 1,
+    backgroundColor: '#89CFF0', //different per emoji reaction
+    borderColor: 'white',
+    marginTop: 10,
+    marginRight: -5, // -10
+    overflow: 'hidden',
+    justifyContent: 'center',
+    paddingLeft: 4,
+  },
+  reactionText: {
+    color: colors.grey,
+  },
+  reactionNumber: {
+    marginLeft: 16,
+    marginTop: 16,
+  },
   storyDescription: {
     color: colors.darkGrey,
     paddingRight: 12,