diff --git a/package-lock.json b/package-lock.json index ca07deb..f83fb7d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -38,10 +38,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", @@ -14217,6 +14220,11 @@ "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz", "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==" }, + "node_modules/lodash.toarray": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/lodash.toarray/-/lodash.toarray-4.4.0.tgz", + "integrity": "sha512-QyffEA3i5dma5q2490+SgCvDN0pXLmRGSyAANuVi0HQ01Pkfr9fuoKQW8wm1wGBnJITs/mS7wQvS6VshUEBFCw==" + }, "node_modules/log-symbols": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz", @@ -15502,6 +15510,14 @@ "node": ">=10.5.0" } }, + "node_modules/node-emoji": { + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.10.0.tgz", + "integrity": "sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw==", + "dependencies": { + "lodash.toarray": "^4.4.0" + } + }, "node_modules/node-fetch": { "version": "2.7.0", "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz", @@ -16664,6 +16680,16 @@ "node": ">=0.10.0" } }, + "node_modules/react-apple-emojis": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/react-apple-emojis/-/react-apple-emojis-2.2.1.tgz", + "integrity": "sha512-tgq/+GUR6WsBkkkl0EYgVbaU803IF8GoELcG83cfircrEiyiiIbHqpBXIHyD8YIOecAGgN2ucEG6U/REDR7jvQ==", + "peerDependencies": { + "prop-types": "*", + "react": ">=16.x", + "react-dom": ">=16.x" + } + }, "node_modules/react-devtools-core": { "version": "4.28.0", "resolved": "https://registry.npmjs.org/react-devtools-core/-/react-devtools-core-4.28.0.tgz", @@ -16853,6 +16879,19 @@ "react-native-vector-icons": ">7.0.0" } }, + "node_modules/react-native-emoji": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/react-native-emoji/-/react-native-emoji-1.8.0.tgz", + "integrity": "sha512-VunKOtYes6eymyWwE7QS3mhmNXksTt2AN92PcGRtmDKLDPjuKrwd5tcJckFUekAK3H+6AMpwYy30CsiCJrDdFQ==", + "dependencies": { + "node-emoji": "1.10.0" + } + }, + "node_modules/react-native-emojicon": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/react-native-emojicon/-/react-native-emojicon-1.0.0.tgz", + "integrity": "sha512-rK6/7EIf/yNgkB24ujpV8zmmZylbQV+oq4F7YopZ9aSfNKmVKKFmqGOPahPo6OW8b1Dg5dm8caybgfpM2GP4Nw==" + }, "node_modules/react-native-gesture-handler": { "version": "2.12.1", "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.12.1.tgz", diff --git a/package.json b/package.json index 7ba5f15..ed0b39d 100644 --- 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 index 4301cb9..dd62a58 100644 --- 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({ - - null} - style={{ flexDirection: 'row' }} - > - - - - - - 14{/*change number to work*/} - - - + + + + + + + + + + + {/* heart, clap, muscle, cry, ??? */} + + + 14{/*change number to work*/} + + saveStory()}> diff --git a/src/components/ContentCard/styles.ts b/src/components/ContentCard/styles.ts index d445870..f18d483 100644 --- 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 index 8272b57..dfe7322 100644 --- 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,6 +34,10 @@ function PreviewCard({ tags, pressFunction, }: PreviewCardProps) { + const saveStory = () => { + console.log("testing '+' icon does something for story " + title); + }; + return ( @@ -39,11 +45,17 @@ function PreviewCard({ {title} + saveStory()}> + + @@ -64,6 +76,23 @@ function PreviewCard({ + + + + + + + + + + + {/* heart, clap, muscle, cry, ??? */} + + + 14{/*change number to work*/} + + + {(tags?.length ?? 0) > 0 && ( @@ -72,12 +101,10 @@ function PreviewCard({ )} - - - + {' '} - + {(tags?.length ?? 1) - 1} more tags + + {(tags?.length ?? 1) - 1} diff --git a/src/components/PreviewCard/savedStoriesIcon.png b/src/components/PreviewCard/savedStoriesIcon.png new file mode 100644 index 0000000..65b2ea6 Binary files /dev/null and b/src/components/PreviewCard/savedStoriesIcon.png differ diff --git a/src/components/PreviewCard/styles.ts b/src/components/PreviewCard/styles.ts index 493e306..ed355c7 100644 --- 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,