From 63a41f6c9a5e7aa0a8e8fe34cbb798a95259c780 Mon Sep 17 00:00:00 2001
From: Akshay Thakur <78326649+akshaynthakur@users.noreply.github.com>
Date: Mon, 13 Nov 2023 23:43:51 -0800
Subject: [PATCH] [home] Implement backend queries & restyle StoryPreview
 component (#34)

* done restyling home screen

* cleanup, add author profile pics

* updated queries for schema change to jsonb type

* pr review changes

* fix user not being set from saved session, add onPress functions
---
 assets/icons.tsx                              |   2 +
 src/app/(tabs)/home/index.tsx                 | 231 +++++++++++-------
 src/app/(tabs)/home/styles.ts                 |  34 +--
 src/app/(tabs)/search/index.tsx               |   6 +-
 src/app/settings.tsx                          |   2 +-
 src/components/ContentCard/ContentCard.tsx    |   2 +-
 src/components/ContentCard/styles.ts          |   4 +-
 src/components/PreviewCard/PreviewCard.tsx    |  73 ++++++
 .../{SearchCard => PreviewCard}/styles.ts     |  61 +++--
 src/components/SearchCard/SearchCard.tsx      |  51 ----
 src/queries/profiles.tsx                      |  17 ++
 src/queries/stories.tsx                       |  56 ++++-
 src/queries/types.tsx                         |   7 +
 src/styles/colors.ts                          |   8 +-
 src/styles/globalStyles.ts                    |  25 +-
 src/utils/AuthContext.tsx                     |   1 +
 16 files changed, 390 insertions(+), 190 deletions(-)
 create mode 100644 src/components/PreviewCard/PreviewCard.tsx
 rename src/components/{SearchCard => PreviewCard}/styles.ts (54%)
 delete mode 100644 src/components/SearchCard/SearchCard.tsx
 create mode 100644 src/queries/profiles.tsx

diff --git a/assets/icons.tsx b/assets/icons.tsx
index 03a92b5f..7a5ed2ea 100644
--- a/assets/icons.tsx
+++ b/assets/icons.tsx
@@ -6,12 +6,14 @@ export type IconType =
   | 'home_outline'
   | 'document_outline'
   | 'search_outline'
+  | 'settings_gear'
   | 'close_modal_button';
 
 const IconSvgs: Record<IconType, React.ReactElement> = {
   home_outline: <Ionicons name="home-outline" size={23} />,
   search_outline: <Ionicons name="search-outline" size={23} />,
   document_outline: <Ionicons name="document-outline" size={23} />,
+  settings_gear: <Ionicons name="settings-outline" size={32} />,
   close_modal_button: (
     <SvgXml
       xml={`<svg
diff --git a/src/app/(tabs)/home/index.tsx b/src/app/(tabs)/home/index.tsx
index 63953427..16db83a5 100644
--- a/src/app/(tabs)/home/index.tsx
+++ b/src/app/(tabs)/home/index.tsx
@@ -1,102 +1,165 @@
-import { Link } from 'expo-router';
-import { Button, ScrollView, Text, View } from 'react-native';
+import { router } from 'expo-router';
+import { useEffect, useState } from 'react';
+import { Pressable, ScrollView, Text, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 import styles from './styles';
+import Icon from '../../../../assets/icons';
 import ContentCard from '../../../components/ContentCard/ContentCard';
-import SearchCard from '../../../components/SearchCard/SearchCard';
+import PreviewCard from '../../../components/PreviewCard/PreviewCard';
+import { fetchUsername } from '../../../queries/profiles';
+import {
+  fetchFeaturedStoriesDescription,
+  fetchFeaturedStoryPreviews,
+  fetchNewStories,
+  fetchRecommendedStories,
+} from '../../../queries/stories';
+import { StoryCard, StoryPreview } from '../../../queries/types';
 import globalStyles from '../../../styles/globalStyles';
-
-const dummyStories = [
-  {
-    title: 'The Witch and Her Wings',
-    author: 'Victoria V.',
-    image: '',
-    author_image: '',
-    tags: ['Non-fiction', 'Mysterious', 'Goofy', 'Silly', 'Adventurous'],
-  },
-  {
-    title: "It's Carnival",
-    author: 'Victoria V.',
-    image: '',
-    author_image: '',
-    tags: ['Non-fiction', 'Mysterious'],
-  },
-  {
-    title: "Akshay's Adventures",
-    author: 'Victoria V.',
-    image: '',
-    author_image: '',
-    tags: ['Non-fiction', 'Mysterious'],
-  },
-];
+import { useSession } from '../../../utils/AuthContext';
 
 function HomeScreen() {
+  const { user } = useSession();
+  const [username, setUsername] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [featuredStories, setFeaturedStories] = useState<StoryPreview[]>([]);
+  const [featuredStoriesDescription, setFeaturedStoriesDescription] =
+    useState<string>('');
+  const [recommendedStories, setRecommendedStories] = useState<StoryCard[]>([]);
+  const [newStories, setNewStories] = useState<StoryCard[]>([]);
+
+  useEffect(() => {
+    (async () => {
+      const [
+        usernameResponse,
+        featuredStoryResponse,
+        featuredStoryDescriptionResponse,
+        recommendedStoriesResponse,
+        newStoriesResponse,
+      ] = await Promise.all([
+        fetchUsername(user?.id).catch(() => ''),
+        fetchFeaturedStoryPreviews().catch(() => []),
+        fetchFeaturedStoriesDescription().catch(() => ''),
+        fetchRecommendedStories().catch(() => []),
+        fetchNewStories().catch(() => []),
+      ]);
+      setUsername(usernameResponse);
+      setFeaturedStories(featuredStoryResponse);
+      setFeaturedStoriesDescription(featuredStoryDescriptionResponse);
+      setRecommendedStories(recommendedStoriesResponse);
+      setNewStories(newStoriesResponse);
+    })().finally(() => {
+      setLoading(false);
+    });
+  }, [user]);
   return (
-    <SafeAreaView style={globalStyles.container}>
+    <SafeAreaView style={[globalStyles.container, { marginHorizontal: -8 }]}>
+      {loading && (
+        <View style={styles.loading}>
+          <Text>Loading</Text>
+        </View>
+      )}
       <ScrollView
         horizontal={false}
         showsVerticalScrollIndicator={false}
         bounces={false}
+        contentContainerStyle={{ paddingHorizontal: 8 }}
       >
         <View style={styles.headerContainer}>
-          <Text style={globalStyles.h4}>Welcome, Brenda</Text>
-          <Link href="/settings" asChild>
-            <Button title="Settings" />
-          </Link>
-        </View>
-        <Text style={styles.featuredSubheading}>Featured Stories</Text>
-        <Text style={[globalStyles.body2, styles.featuredDescription]}>
-          Celebrate lorem ipsum by diving into related stories from our talented
-          authors.
-        </Text>
-        <View style={styles.featuredContainer}>
-          {dummyStories.map(story => (
-            <SearchCard
-              key={story.title}
-              title={story.title}
-              author={story.author}
-              image={story.image}
-              authorImage={story.author_image}
-              tags={story.tags}
-              pressFunction={() => null}
-            />
-          ))}
+          <Text style={globalStyles.h2}>
+            {username ? `Welcome, ${username}` : 'Welcome!'}
+          </Text>
+          <Pressable onPress={() => router.push('/settings')}>
+            <View>
+              <Icon type="settings_gear" />
+            </View>
+          </Pressable>
         </View>
-        <Text style={styles.subheading}>Recommended For You</Text>
-        <ScrollView
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          bounces={false}
-          style={styles.scrollView}
-        >
-          {dummyStories.map(story => (
-            <ContentCard
-              key={story.title}
-              title={story.title}
-              author={story.author}
-              pressFunction={() => null}
-              image={story.image}
-            />
-          ))}
-        </ScrollView>
-        <Text style={styles.subheading}>New Stories</Text>
-        <ScrollView
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          bounces={false}
-          style={styles.scrollView}
-        >
-          {dummyStories.map(story => (
-            <ContentCard
-              key={story.title}
-              title={story.title}
-              author={story.author}
-              pressFunction={() => null}
-              image={story.image}
-            />
-          ))}
-        </ScrollView>
+        {featuredStories.length > 0 && (
+          <View>
+            <Text style={globalStyles.h3}>Featured Stories</Text>
+            <Text style={[globalStyles.body1, styles.featuredDescription]}>
+              {featuredStoriesDescription}
+            </Text>
+            <View>
+              {featuredStories.map(story => (
+                <PreviewCard
+                  key={story.title}
+                  title={story.title}
+                  image={story.featured_media}
+                  author={story.author_name}
+                  authorImage={story.author_image}
+                  excerpt={story.excerpt}
+                  tags={story.genre_medium
+                    .concat(story.tone)
+                    .concat(story.topic)}
+                  pressFunction={() =>
+                    router.push({
+                      pathname: '/story',
+                      params: { storyId: story.id.toString() },
+                    })
+                  }
+                />
+              ))}
+            </View>
+          </View>
+        )}
+        {recommendedStories.length > 0 && (
+          <View>
+            <Text style={[globalStyles.h3, styles.subheading]}>
+              Recommended For You
+            </Text>
+            <ScrollView
+              horizontal
+              showsHorizontalScrollIndicator={false}
+              bounces={false}
+              style={styles.scrollView}
+            >
+              {recommendedStories.map(story => (
+                <ContentCard
+                  key={story.title}
+                  title={story.title}
+                  author={story.author_name}
+                  pressFunction={() =>
+                    router.push({
+                      pathname: '/story',
+                      params: { storyId: story.id.toString() },
+                    })
+                  }
+                  image={story.featured_media}
+                />
+              ))}
+            </ScrollView>
+          </View>
+        )}
+        {newStories.length > 0 && (
+          <View>
+            <Text style={[globalStyles.h3, styles.subheading]}>
+              New Stories
+            </Text>
+            <ScrollView
+              horizontal
+              showsHorizontalScrollIndicator={false}
+              bounces={false}
+              style={styles.scrollView}
+            >
+              {newStories.map(story => (
+                <ContentCard
+                  key={story.title}
+                  title={story.title}
+                  author={story.author_name}
+                  pressFunction={() =>
+                    router.push({
+                      pathname: '/story',
+                      params: { storyId: story.id.toString() },
+                    })
+                  }
+                  image={story.featured_media}
+                />
+              ))}
+            </ScrollView>
+          </View>
+        )}
       </ScrollView>
     </SafeAreaView>
   );
diff --git a/src/app/(tabs)/home/styles.ts b/src/app/(tabs)/home/styles.ts
index 7372b237..14345b9a 100644
--- a/src/app/(tabs)/home/styles.ts
+++ b/src/app/(tabs)/home/styles.ts
@@ -1,21 +1,23 @@
-import { StyleSheet } from 'react-native';
+import { Dimensions, StyleSheet } from 'react-native';
+
+import colors from '../../../styles/colors';
+const { width, height } = Dimensions.get('window');
 
 const styles = StyleSheet.create({
-  subheading: {
-    fontSize: 16,
-    fontWeight: '800',
-    textAlign: 'left',
-    lineHeight: 24,
-    color: 'black',
-    marginBottom: 12,
+  loading: {
+    backgroundColor: colors.white,
+    flex: 1,
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    width,
+    height,
+    zIndex: 1,
+    padding: 50,
   },
-  featuredSubheading: {
-    fontSize: 16,
-    fontWeight: '800',
-    textAlign: 'left',
-    lineHeight: 24,
-    color: 'black',
-    marginBottom: 8,
+  subheading: {
+    marginTop: 12,
+    marginBottom: 16,
   },
   scrollView: {
     marginBottom: 20,
@@ -30,8 +32,8 @@ const styles = StyleSheet.create({
   },
   featuredDescription: {
     marginBottom: 16,
+    marginTop: 8,
   },
-  featuredContainer: {},
 });
 
 export default styles;
diff --git a/src/app/(tabs)/search/index.tsx b/src/app/(tabs)/search/index.tsx
index a18ca242..8ee38ffd 100644
--- a/src/app/(tabs)/search/index.tsx
+++ b/src/app/(tabs)/search/index.tsx
@@ -6,7 +6,7 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 
 import styles from './styles';
 import FilterModal from '../../../components/FilterModal/FilterModal';
-import SearchCard from '../../../components/SearchCard/SearchCard';
+import SearchCard from '../../../components/PreviewCard/PreviewCard';
 import { fetchAllStoryPreviews } from '../../../queries/stories';
 import { StoryPreview } from '../../../queries/types';
 import globalStyles from '../../../styles/globalStyles';
@@ -66,13 +66,15 @@ function SearchScreen() {
       <FlatList
         showsVerticalScrollIndicator={false}
         data={searchResults}
+        contentContainerStyle={{}}
         renderItem={({ item }) => (
           <SearchCard
             key={item.title}
             title={item.title}
-            author={item.author_name}
             image={item.featured_media}
+            author={item.author_name}
             authorImage={item.author_image}
+            excerpt={item.excerpt}
             tags={item.genre_medium}
             pressFunction={() =>
               router.push({
diff --git a/src/app/settings.tsx b/src/app/settings.tsx
index 5330ed38..19d8d8bc 100644
--- a/src/app/settings.tsx
+++ b/src/app/settings.tsx
@@ -118,7 +118,7 @@ function SettingsScreen() {
 
   return (
     <SafeAreaView style={globalStyles.container}>
-      <Text style={globalStyles.h1}>Settings</Text>
+      <Text style={globalStyles.h2}>Settings</Text>
       <View style={[globalStyles.verticallySpaced, globalStyles.mt20]}>
         <Input label="Email" value={session?.user?.email} disabled />
       </View>
diff --git a/src/components/ContentCard/ContentCard.tsx b/src/components/ContentCard/ContentCard.tsx
index 54aa5dbd..99e99f13 100644
--- a/src/components/ContentCard/ContentCard.tsx
+++ b/src/components/ContentCard/ContentCard.tsx
@@ -27,7 +27,7 @@ function ContentCard({
       <View style={styles.contentCard}>
         <Image style={styles.image} source={{ uri: image }} />
         <View style={styles.textContainer}>
-          <Text style={[globalStyles.body1, styles.title]} numberOfLines={1}>
+          <Text style={[globalStyles.h4, styles.title]} numberOfLines={1}>
             {title}
           </Text>
           <Text style={globalStyles.body1} numberOfLines={1}>
diff --git a/src/components/ContentCard/styles.ts b/src/components/ContentCard/styles.ts
index 877e0416..1ea6f118 100644
--- a/src/components/ContentCard/styles.ts
+++ b/src/components/ContentCard/styles.ts
@@ -1,5 +1,7 @@
 import { StyleSheet } from 'react-native';
 
+import colors from '../../styles/colors';
+
 const styles = StyleSheet.create({
   contentCard: {
     marginRight: 20,
@@ -9,7 +11,7 @@ const styles = StyleSheet.create({
   image: {
     height: 140,
     width: 148,
-    backgroundColor: '#D9D9D9',
+    backgroundColor: colors.lime,
     borderRadius: 4,
     marginBottom: 8,
   },
diff --git a/src/components/PreviewCard/PreviewCard.tsx b/src/components/PreviewCard/PreviewCard.tsx
new file mode 100644
index 00000000..5de2d2ce
--- /dev/null
+++ b/src/components/PreviewCard/PreviewCard.tsx
@@ -0,0 +1,73 @@
+import {
+  GestureResponderEvent,
+  Image,
+  Pressable,
+  Text,
+  View,
+} from 'react-native';
+
+import styles from './styles';
+import globalStyles from '../../styles/globalStyles';
+
+type PreviewCardProps = {
+  title: string;
+  image: string;
+  author: string;
+  authorImage: string;
+  excerpt: { html: string };
+  tags: string[];
+  pressFunction: (event: GestureResponderEvent) => void;
+};
+
+function PreviewCard({
+  title,
+  image,
+  author,
+  authorImage,
+  excerpt,
+  tags,
+  pressFunction,
+}: PreviewCardProps) {
+  return (
+    <Pressable onPress={pressFunction}>
+      <View style={styles.card}>
+        <View style={styles.top}>
+          <Image style={styles.image} source={{ uri: image }} />
+          <View style={styles.cardTextContainer}>
+            <Text numberOfLines={1} style={[globalStyles.h4, styles.title]}>
+              {title}
+            </Text>
+            <View style={styles.authorContainer}>
+              <Image style={styles.authorImage} source={{ uri: authorImage }} />
+              <Text
+                numberOfLines={1}
+                style={[globalStyles.body2, styles.author]}
+              >
+                {author}
+              </Text>
+            </View>
+            <Text numberOfLines={2} style={[globalStyles.body3]}>
+              {excerpt.html.slice(3, -3)}
+            </Text>
+          </View>
+        </View>
+        {/* <View style={styles.bottom}>
+          <View style={styles.tagsContainer}>
+            {tags.map(tag => (
+              <Text key={tag} style={styles.tag}>
+                {tag}
+              </Text>
+            ))}
+          </View>
+          <View style={styles.moreTags}>
+            <Pressable>
+              <Text>more tags</Text>
+            </Pressable>
+          </View>
+        </View> */}
+      </View>
+    </Pressable>
+  );
+}
+
+export default PreviewCard;
diff --git a/src/components/SearchCard/styles.ts b/src/components/PreviewCard/styles.ts
similarity index 54%
rename from src/components/SearchCard/styles.ts
rename to src/components/PreviewCard/styles.ts
index 8c72ed95..3e87022f 100644
--- a/src/components/SearchCard/styles.ts
+++ b/src/components/PreviewCard/styles.ts
@@ -4,20 +4,45 @@ import colors from '../../styles/colors';
 
 const styles = StyleSheet.create({
   card: {
+    flexDirection: 'column',
+    justifyContent: 'flex-end',
+    // alignItems: 'stretch',
+    backgroundColor: colors.white,
+    borderRadius: 6,
+    // height: 166,
+    // paddingLeft: 12,
+    // paddingRight: 12,
+    marginBottom: 16,
+    shadowColor: 'black',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.5,
+    elevation: 4,
+  },
+  top: {
+    flex: 1,
     flexDirection: 'row',
     justifyContent: 'flex-start',
-    alignItems: 'center',
-    backgroundColor: colors.lightGrey,
-    borderRadius: 4,
-    marginBottom: 16,
-    maxHeight: 100,
+    alignItems: 'flex-start',
     paddingLeft: 12,
     paddingRight: 12,
   },
+  bottom: {
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+    height: 48,
+    backgroundColor: colors.lightGrey,
+    overflow: 'hidden',
+    borderRadius: 6,
+    paddingHorizontal: 12,
+    // paddingVertical: 12,
+    paddingTop: 8,
+  },
   image: {
-    height: 76,
-    width: 84,
-    backgroundColor: colors.darkGrey,
+    height: 96,
+    width: 96,
+    backgroundColor: colors.lilac,
     borderRadius: 4,
     marginBottom: 12,
     marginTop: 12,
@@ -26,27 +51,25 @@ const styles = StyleSheet.create({
     marginLeft: 8,
   },
   authorImage: {
-    height: 21,
-    width: 21,
-    backgroundColor: colors.darkGrey,
-    borderRadius: 21 / 2,
+    height: 22,
+    width: 22,
+    backgroundColor: colors.gwnOrange,
+    borderRadius: 22 / 2,
   },
   cardTextContainer: {
     flex: 1,
-    overflow: 'hidden',
     marginLeft: 16,
     marginTop: 12,
-    marginBottom: 12,
-    maxHeight: 80,
+    marginBottom: 8,
   },
   authorContainer: {
     flexDirection: 'row',
     justifyContent: 'flex-start',
     alignItems: 'center',
-    marginBottom: 4,
+    marginBottom: 12,
   },
   title: {
-    marginBottom: 4,
+    marginBottom: 8,
   },
   tag: {
     paddingHorizontal: 8,
@@ -55,14 +78,14 @@ const styles = StyleSheet.create({
     borderRadius: 10,
     width: 'auto',
     marginRight: 8,
-    marginBottom: 8,
+    marginBottom: 10,
   },
   tagsContainer: {
+    // backgroundColor: colors.darkGrey,
     flexDirection: 'row',
     justifyContent: 'flex-start',
     alignItems: 'center',
     flexWrap: 'wrap',
-    overflow: 'hidden',
   },
 });
 
diff --git a/src/components/SearchCard/SearchCard.tsx b/src/components/SearchCard/SearchCard.tsx
deleted file mode 100644
index da160c1d..00000000
--- a/src/components/SearchCard/SearchCard.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import {
-  GestureResponderEvent,
-  Image,
-  Pressable,
-  Text,
-  View,
-} from 'react-native';
-
-import styles from './styles';
-
-type SearchCardProps = {
-  title: string;
-  author: string;
-  image: string;
-  authorImage: string;
-  tags: string[];
-  pressFunction: (event: GestureResponderEvent) => void;
-};
-
-function SearchCard({
-  title,
-  author,
-  image,
-  authorImage,
-  tags,
-  pressFunction,
-}: SearchCardProps) {
-  return (
-    <Pressable onPress={pressFunction}>
-      <View style={styles.card}>
-        <Image style={styles.image} source={{ uri: image }} />
-        <View style={styles.cardTextContainer}>
-          <Text style={styles.title}>{title}</Text>
-          <View style={styles.authorContainer}>
-            <Image style={styles.authorImage} source={{ uri: authorImage }} />
-            <Text style={styles.author}>{author}</Text>
-          </View>
-          <View style={styles.tagsContainer}>
-            {tags.map(tag => (
-              <Text key={tag} style={styles.tag}>
-                {tag}
-              </Text>
-            ))}
-          </View>
-        </View>
-      </View>
-    </Pressable>
-  );
-}
-
-export default SearchCard;
diff --git a/src/queries/profiles.tsx b/src/queries/profiles.tsx
new file mode 100644
index 00000000..df1dcdca
--- /dev/null
+++ b/src/queries/profiles.tsx
@@ -0,0 +1,17 @@
+import supabase from '../utils/supabase';
+
+export async function fetchUsername(user_id: string | undefined) {
+  const { data, error } = await supabase
+    .from('profiles')
+    .select('username')
+    .eq('user_id', user_id);
+
+  if (error) {
+    console.log(error);
+    throw new Error(
+      `An error occured when trying to fetch username: ${error.details}`,
+    );
+  } else {
+    return data[0].username as string;
+  }
+}
diff --git a/src/queries/stories.tsx b/src/queries/stories.tsx
index f596fa15..68bfafc4 100644
--- a/src/queries/stories.tsx
+++ b/src/queries/stories.tsx
@@ -1,4 +1,4 @@
-import { Story, StoryPreview } from './types';
+import { Story, StoryPreview, StoryCard } from './types';
 import supabase from '../utils/supabase';
 
 export async function fetchAllStoryPreviews(): Promise<StoryPreview[]> {
@@ -29,3 +29,57 @@ export async function fetchStory(storyId: number): Promise<Story[]> {
     return data;
   }
 }
+
+export async function fetchFeaturedStoryPreviews(): Promise<StoryPreview[]> {
+  const { data, error } = await supabase.rpc('fetch_featured_story_previews');
+
+  if (error) {
+    console.log(error);
+    throw new Error(
+      `An error occured when trying to fetch featured story previews: ${error}`,
+    );
+  } else {
+    return data;
+  }
+}
+
+export async function fetchFeaturedStoriesDescription(): Promise<string> {
+  const { data, error } = await supabase
+    .from('featured_stories')
+    .select('description');
+
+  if (error) {
+    console.log(error);
+    throw new Error(
+      `An error occured when trying to fetch featured story description: ${error}`,
+    );
+  } else {
+    return data[0].description;
+  }
+}
+
+export async function fetchRecommendedStories(): Promise<StoryCard[]> {
+  const { data, error } = await supabase.rpc('fetch_recommended_stories');
+
+  if (error) {
+    console.log(error);
+    throw new Error(
+      `An error occured when trying to fetch recommended stories: ${error}`,
+    );
+  } else {
+    return data;
+  }
+}
+
+export async function fetchNewStories(): Promise<StoryCard[]> {
+  const { data, error } = await supabase.rpc('fetch_new_stories');
+
+  if (error) {
+    console.log(error);
+    throw new Error(
+      `An error occured when trying to fetch new stories: ${error}`,
+    );
+  } else {
+    return data;
+  }
+}
diff --git a/src/queries/types.tsx b/src/queries/types.tsx
index a0079025..24808d20 100644
--- a/src/queries/types.tsx
+++ b/src/queries/types.tsx
@@ -27,3 +27,10 @@ export interface Story {
   process: { html: string };
   link: string;
 }
+
+export interface StoryCard {
+  id: number;
+  title: string;
+  author_name: string;
+  featured_media: string;
+}
diff --git a/src/styles/colors.ts b/src/styles/colors.ts
index dff608c5..d3d72a80 100644
--- a/src/styles/colors.ts
+++ b/src/styles/colors.ts
@@ -1,7 +1,10 @@
 const colors = {
   // Primary colors
-  redPrimary: '#CC502F',
-  bluePrimary: '#356095',
+  gwnOrange: '#EB563B',
+  lilac: '#B49BC6',
+  lime: '#ACC073',
+  melanin: '#703929',
+  citrus: '#E66E3F',
 
   // Text colors
   textPrimary: '#000000', // black
@@ -11,6 +14,7 @@ const colors = {
   // Surface colors -- used for backgrounds
   darkGrey: '#D9D9D9',
   lightGrey: '#F9F9F9',
+  white: '#FEFEFA',
 
   // Shadow colors
   shadowDark: '#000000', // black
diff --git a/src/styles/globalStyles.ts b/src/styles/globalStyles.ts
index cbe46541..3a81cd72 100644
--- a/src/styles/globalStyles.ts
+++ b/src/styles/globalStyles.ts
@@ -15,50 +15,51 @@ export default StyleSheet.create({
   },
   h1: {
     // fontFamily: 'DMSans-Bold',
-    fontSize: 50,
-    fontWeight: '700',
+    fontSize: 40,
+    fontWeight: '400',
     textAlign: 'left',
     color: 'black',
   },
   h2: {
     // fontFamily: 'DMSans-Bold',
-    fontSize: 40,
-    fontWeight: '400',
+    fontSize: 32,
+    fontWeight: '600',
     textAlign: 'left',
     color: 'black',
   },
   h3: {
     // fontFamily: 'DMSans-Regular',
-    fontSize: 32,
-    fontWeight: '400',
+    fontSize: 20,
+    fontWeight: '600',
     textAlign: 'left',
     color: 'black',
   },
   h4: {
     // fontFamily: 'DMSans-Regular',
-    fontSize: 24,
-    fontWeight: '800',
+    fontSize: 16,
+    fontWeight: '500',
     textAlign: 'left',
     color: 'black',
+    lineHeight: 22,
   },
   body1: {
     // fontFamily: 'DMSans-Regular',
-    fontSize: 12,
+    fontSize: 16,
     fontWeight: '400',
     textAlign: 'left',
     color: 'black',
-    lineHeight: 18,
+    lineHeight: 22,
   },
   body2: {
     // fontFamily: 'DMSans-Regular',
-    fontSize: 10,
+    fontSize: 14,
     fontWeight: '400',
     textAlign: 'left',
     color: 'black',
   },
   body3: {
     fontFamily: 'Avenir',
-    fontSize: 8,
+    fontSize: 12,
     fontWeight: '400',
     textAlign: 'left',
     color: 'black',
diff --git a/src/utils/AuthContext.tsx b/src/utils/AuthContext.tsx
index 88ec9dd1..7e168f02 100644
--- a/src/utils/AuthContext.tsx
+++ b/src/utils/AuthContext.tsx
@@ -68,6 +68,7 @@ export function AuthContextProvider({
       .getSession()
       .then(({ data: { session: newSession } }) => {
         setSession(newSession);
+        setUser(newSession ? newSession.user : null);
       })
       .finally(() => {
         setIsLoading(false);