finished styling stories

calblueprint · Apr 22, 2024 · 09cf9ec · 09cf9ec
1 parent fc546f9
commit 09cf9ec
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 68 deletions.
diff --git a/assets/icons.tsx b/assets/icons.tsx
@@ -4,6 +4,7 @@ import { SvgXml } from 'react-native-svg';
 
 export type IconType =
   | 'home_outline'
+  | 'share_outline'
   | 'document_outline'
   | 'search_outline'
   | 'close_modal_button'
@@ -21,6 +22,7 @@ export type IconType =
 
 const IconSvgs: Record<IconType, React.ReactElement> = {
   home_outline: <Ionicons name="home-outline" size={23} />,
+  share_outline: <Ionicons name="share-outline" size={23} color="white" />,
   search_outline: <Ionicons name="search-outline" size={23} />,
   document_outline: <Ionicons name="document-outline" size={23} />,
   settings_gear: <Ionicons name="settings-outline" size={32} />,

diff --git a/src/app/(tabs)/story/index.tsx b/src/app/(tabs)/story/index.tsx
@@ -1,5 +1,4 @@
-import { faHeart as farHeart } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
+import { Ionicons } from '@expo/vector-icons';
 import { useLocalSearchParams, router } from 'expo-router';
 import React, { useEffect, useState } from 'react';
 import {
@@ -17,9 +16,12 @@ import { RenderHTML } from 'react-native-render-html';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 import styles from './styles';
+import Icon from '../../../../assets/icons';
+import AuthorImage from '../../../components/AuthorImage/AuthorImage';
 import ReactionPicker from '../../../components/ReactionPicker/ReactionPicker';
 import { fetchStory } from '../../../queries/stories';
 import { Story } from '../../../queries/types';
+import globalStyles from '../../../styles/globalStyles';
 
 function StoryScreen() {
   const [isLoading, setLoading] = useState(true);
@@ -61,7 +63,15 @@ function StoryScreen() {
       console.log(error);
     }
   };
+  const htmlContent = story?.excerpt?.html ? story.excerpt.html : '';
 
+  // Add the quotation marks after the start of the <p> tag and before the end of the </p> tag
+  const modifiedExcerpt = htmlContent
+    .replace(/<p [^>]*>/, match => `${match}&ldquo;`)
+    .replace('</p>', '&rdquo;</p>');
+  console.log(typeof htmlContent);
+
+  console.log('TESTING CONTENT', htmlContent);
   return (
     <SafeAreaView style={styles.container}>
       {isLoading ? (
@@ -73,7 +83,7 @@ function StoryScreen() {
           showsVerticalScrollIndicator={false}
         >
           <View style={styles.container}>
-            {story.featured_media ? (
+            {story?.featured_media ? (
               <Image
                 style={styles.image}
                 source={{ uri: story.featured_media }}
@@ -84,60 +94,52 @@ function StoryScreen() {
           </View>
 
           <Text style={styles.title}>{story?.title}</Text>
-          <TouchableOpacity
-            onPress={() => {
-              router.push({
-                pathname: '/author',
-                params: { author: story.author_id.toString() },
-              });
-            }}
-          >
-            <View style={styles.author}>
-              <Image
-                style={styles.authorImage}
-                source={{ uri: story.author_image ? story.author_image : '' }}
-              />
-              <Text style={styles.authorText}>By {story.author_name}</Text>
-            </View>
-          </TouchableOpacity>
+
+          <AuthorImage
+            author_name={story.author_name}
+            author_Uri={story.author_image}
+            author_id={story.author_id.toString()}
+          />
 
           <View>
             <FlatList
               style={styles.genres}
               horizontal
               data={story.genre_medium}
-              renderItem={({ item }) => (
-                <View style={styles.genresBorder}>
+              keyExtractor={(item, index) => index.toString()} // Add a key extractor for performance optimization
+              renderItem={({ item, index }) => (
+                <View
+                  style={[
+                    styles.genresBorder,
+                    {
+                      backgroundColor: index % 2 === 0 ? '#E66E3F' : '#B49BC6',
+                    },
+                  ]}
+                >
                   <Text style={styles.genresText}>{item}</Text>
                 </View>
               )}
             />
 
-            <Button
-              textColor="black"
-              buttonColor="#D9D9D9"
-              icon="share"
-              onPress={onShare}
-              style={{ width: 125, marginBottom: 16, borderRadius: 10 }}
-            >
+            <View style={styles.button_style}>
+              <Icon type="share_outline" />
               <Text style={styles.shareButtonText}>Share Story</Text>
-            </Button>
+            </View>
           </View>
 
-          <RenderHTML source={story.excerpt} baseStyle={styles.excerpt} />
+          <RenderHTML
+            source={{ html: modifiedExcerpt }}
+            baseStyle={globalStyles.h2}
+            tagsStyles={{ p: globalStyles.h2 }}
+            ignoredStyles={['color', 'fontSize', 'fontWeight']} // Ignore these inline styles
+          />
 
           <RenderHTML source={story.content} baseStyle={styles.story} />
 
-          <Button
-            textColor="black"
-            buttonColor="#D9D9D9"
-            icon="share"
-            onPress={onShare}
-            style={{ width: 125, marginBottom: 16, borderRadius: 10 }}
-          >
+          <View style={styles.button_style}>
+            <Icon type="share_outline" />
             <Text style={styles.shareButtonText}>Share Story</Text>
-          </Button>
-
+          </View>
           <Text style={styles.authorProcess}>Author's Process</Text>
 
           <RenderHTML source={story.process} baseStyle={styles.process} />

diff --git a/src/app/(tabs)/story/styles.ts b/src/app/(tabs)/story/styles.ts
@@ -1,5 +1,7 @@
 import { StyleSheet } from 'react-native';
 
+import globalStyles from '../../../styles/globalStyles';
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -12,7 +14,7 @@ const styles = StyleSheet.create({
   },
   image: {
     width: '100%',
-    height: 153,
+    height: 200,
     marginBottom: 16,
   },
   authorImage: {
@@ -48,6 +50,7 @@ const styles = StyleSheet.create({
     flexWrap: 'wrap',
     borderRadius: 10,
     marginBottom: 16,
+    marginTop: 15,
   },
   genresBorder: {
     backgroundColor: '#D9D9D9',
@@ -62,42 +65,38 @@ const styles = StyleSheet.create({
     fontFamily: 'Manrope-Regular',
     fontSize: 12,
     fontWeight: '400',
-    color: 'black',
-    backgroundColor: '#D9D9D9',
+    color: 'white',
   },
   shareButtonText: {
     fontFamily: 'Manrope-Regular',
-    fontSize: 12,
+    fontSize: 14,
     fontWeight: '400',
-    textAlign: 'left',
-    color: 'black',
+    color: 'white',
+    marginLeft: -5,
     textDecorationLine: 'underline',
-    backgroundColor: '#D9D9D9',
   },
   excerpt: {
     fontFamily: 'Manrope-Regular',
     fontSize: 16,
-    fontWeight: '400',
     textAlign: 'left',
     color: 'black',
-    paddingTop: 16,
-    paddingBottom: 16,
   },
   story: {
     fontFamily: 'Manrope-Regular',
-    fontSize: 12,
+    fontSize: 16,
     fontWeight: '400',
     textAlign: 'left',
     color: 'black',
     marginBottom: 16,
   },
   authorProcess: {
     fontFamily: 'Manrope-Regular',
-    fontSize: 16,
-    fontWeight: '600',
+    fontSize: 20,
+    fontWeight: '900',
     textAlign: 'left',
     color: 'black',
-    marginBottom: 16,
+    marginBottom: 5,
+    marginTop: 10,
   },
   process: {
     fontFamily: 'Manrope-Regular',
@@ -118,6 +117,17 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'space-around',
   },
+  button_style: {
+    width: 125,
+    marginBottom: 16,
+    borderRadius: 8,
+    height: 35,
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+    backgroundColor: '#EB563B',
+  },
 });
 
 export default styles;
diff --git a/src/components/AuthorImage/AuthorImage.tsx b/src/components/AuthorImage/AuthorImage.tsx
@@ -11,32 +11,34 @@ import styles from './styles';
 
 type AuthorImageProps = {
   author_name: string;
-  author_id: number;
+  author_id: string;
   author_Uri: string;
-  pressFunction: (event: GestureResponderEvent) => void;
+  //   pressFunction: (event: GestureResponderEvent) => void;
 };
 
 function AuthorImage({
   author_name,
   author_id,
-  author_Uri,
-  pressFunction,
+  author_Uri, //   pressFunction,
 }: AuthorImageProps) {
   return (
     <TouchableOpacity
       onPress={() => {
         router.push({
           pathname: '/author',
-          params: { author: author_id.toString() },
+          params: { author: author_id },
         });
       }}
     >
-      <View style={styles.author}>
-        <Image
-          style={styles.author_image}
-          source={{ uri: author_Uri ? author_Uri : '' }}
-        />
-        <Text style={styles.authorText}>By {author_name}</Text>
+      <View style={styles.author_container}>
+        <Text style={styles.author_text}>Authors:</Text>
+        <View style={styles.author}>
+          <Image
+            style={styles.author_image}
+            source={{ uri: author_Uri ? author_Uri : '' }}
+          />
+          <Text style={styles.authorText}>{author_name}</Text>
+        </View>
       </View>
     </TouchableOpacity>
   );

diff --git a/src/components/AuthorImage/styles.ts b/src/components/AuthorImage/styles.ts
@@ -1,10 +1,34 @@
 import { StyleSheet } from 'react-native';
 
 import colors from '../../styles/colors';
-
+import globalStyles from '../../styles/globalStyles';
 export default StyleSheet.create({
-  authorImageContainer: {
-    flex: 1,
-    justifyContent: 'space-between',
+  author: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 10,
+    marginLeft: 12,
+  },
+  authorText: {
+    fontFamily: 'Manrope-Regular',
+    fontSize: 15,
+    fontWeight: '400',
+    textAlign: 'left',
+    color: 'black',
+  },
+  author_image: {
+    backgroundColor: '#D9D9D9',
+    width: 25,
+    height: 25,
+    borderRadius: 100 / 2,
+  },
+  author_container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+  },
+  author_text: {
+    fontSize: 18,
+    fontWeight: 'bold',
   },
 });