Merge branch 'main' into marcos/update-content-card

src/app/(tabs)/author/index.tsx

@@ -75,12 +75,14 @@ function AuthorScreen() {
                 <Text
                   adjustsFontSizeToFit
                   numberOfLines={2}
-                  style={styles.name}
+                  style={globalStyles.h1}
                 >
                   {authorInfo.name}
                 </Text>
                 {authorInfo?.pronouns && (
-                  <Text style={styles.pronouns}>{authorInfo.pronouns}</Text>
+                  <Text style={[globalStyles.subHeading2, styles.pronouns]}>
+                    {authorInfo.pronouns}
+                  </Text>
                 )}
               </View>
             )}
@@ -90,17 +92,19 @@ function AuthorScreen() {
 
           {authorInfo?.bio && (
             <>
-              <Text style={styles.bioText}>{decode(authorInfo.bio)}</Text>
+              <Text style={globalStyles.body1}>{decode(authorInfo.bio)}</Text>
               <HorizontalLine />
             </>
           )}
 
           {authorInfo?.artist_statement && (
             <>
-              <Text style={styles.authorStatementTitle}>
+              <Text
+                style={[globalStyles.body2Bold, styles.authorStatementTitle]}
+              >
                 Artist's Statement
               </Text>
-              <Text style={styles.authorStatement}>
+              <Text style={globalStyles.body1}>
                 {decode(authorInfo.artist_statement)}
               </Text>
               <HorizontalLine />

src/app/(tabs)/author/styles.tsx

@@ -10,28 +10,12 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-start',
     alignItems: 'flex-end',
   },
-  name: {
-    fontWeight: 'bold',
-    fontSize: 24,
-    fontFamily: 'Manrope-Regular',
-  },
   image: {
     height: 68,
     width: 68,
     backgroundColor: colors.darkGrey,
     borderRadius: 4,
   },
-  bioText: {
-    color: 'black',
-    fontFamily: 'Manrope-Regular',
-    fontSize: 14,
-  },
-  authorStatement: {
-    fontSize: 14,
-    color: 'black',
-    fontWeight: '400',
-    fontFamily: 'Manrope-Regular',
-  },
   authorTextContainer: {
     paddingLeft: 20,
   },
@@ -40,17 +24,14 @@ const styles = StyleSheet.create({
     borderTopWidth: 20,
   },
   authorStatementTitle: {
-    fontWeight: 'bold',
-    fontFamily: 'Manrope-Regular',
-    fontSize: 16,
     marginBottom: 8,
   },
   storyCountText: {
     fontSize: 12,
     marginBottom: 8,
   },
   pronouns: {
-    color: '#797979',
+    color: colors.textGrey,
   },
 });
 

src/app/(tabs)/story/index.tsx

@@ -18,6 +18,8 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import styles from './styles';
 import { fetchStory } from '../../../queries/stories';
 import { Story } from '../../../queries/types';
+import colors from '../../../styles/colors';
+import globalStyles, { fonts } from '../../../styles/globalStyles';
 
 function StoryScreen() {
   const [isLoading, setLoading] = useState(true);
@@ -72,7 +74,9 @@ function StoryScreen() {
           ref={scrollRef}
           showsVerticalScrollIndicator={false}
         >
-          <Text style={styles.title}>{story?.title}</Text>
+
+          <Text style={[globalStyles.h1, styles.title]}>{story?.title}</Text>
+
           <TouchableOpacity
             onPress={() => {
               router.push({
@@ -86,7 +90,9 @@ function StoryScreen() {
                 style={styles.authorImage}
                 source={{ uri: story.author_image ? story.author_image : '' }}
               />
-              <Text style={styles.authorText}>By {story.author_name}</Text>
+              <Text style={globalStyles.subHeading1Bold}>
+                By {story.author_name}
+              </Text>
             </View>
           </TouchableOpacity>
 
@@ -97,58 +103,73 @@ function StoryScreen() {
               data={story.genre_medium}
               renderItem={({ item }) => (
                 <View style={styles.genresBorder}>
-                  <Text style={styles.genresText}>{item}</Text>
+                  <Text style={[globalStyles.button1, styles.genresText]}>
+                    {item}
+                  </Text>
                 </View>
               )}
             />
 
             <Button
               textColor="black"
-              buttonColor="#D9D9D9"
+              buttonColor={colors.gwnOrange}
               icon="share"
               onPress={onShare}
               style={{ width: 125, marginBottom: 16, borderRadius: 10 }}
             >
-              <Text style={styles.shareButtonText}>Share Story</Text>
+              <Text
+                style={[globalStyles.bodyUnderline, styles.shareButtonText]}
+              >
+                Share Story
+              </Text>
             </Button>
           </View>
 
           <RenderHTML
             contentWidth={width}
             source={story.excerpt}
-            baseStyle={styles.excerpt}
+            baseStyle={{ ...globalStyles.body3, ...styles.excerpt }}
+            systemFonts={fonts}
           />
 
           <RenderHTML
             contentWidth={width}
             source={story.content}
-            baseStyle={styles.story}
+            baseStyle={{ ...globalStyles.body1, ...styles.story }}
+            systemFonts={fonts}
           />
 
           <Button
             textColor="black"
-            buttonColor="#D9D9D9"
+            buttonColor={colors.gwnOrange}
             icon="share"
             onPress={onShare}
             style={{ width: 125, marginBottom: 16, borderRadius: 10 }}
           >
-            <Text style={styles.shareButtonText}>Share Story</Text>
+            <Text style={[globalStyles.bodyUnderline, styles.shareButtonText]}>
+              Share Story
+            </Text>
           </Button>
 
-          <Text style={styles.authorProcess}>Author's Process</Text>
+          <Text style={[globalStyles.h3, styles.authorProcess]}>
+            Author's Process
+          </Text>
 
           <RenderHTML
             contentWidth={width}
             source={story.process}
-            baseStyle={styles.process}
+            baseStyle={{ ...globalStyles.body1, ...styles.process }}
+            systemFonts={fonts}
           />
 
           <View style={styles.author}>
             <Image
               style={styles.authorImage}
               source={{ uri: story.author_image }}
             />
-            <Text style={styles.authorText}>By {story.author_name}</Text>
+            <Text style={globalStyles.subHeading1Bold}>
+              By {story.author_name}
+            </Text>
           </View>
 
           <Button
@@ -157,7 +178,7 @@ function StoryScreen() {
             onPress={scrollUp}
             style={{ width: 125, marginBottom: 16, borderRadius: 10 }}
           >
-            <Text style={styles.backToTopButtonText}>Back To Top</Text>
+            <Text style={globalStyles.bodyBoldUnderline}>Back To Top</Text>
           </Button>
         </ScrollView>
       )}

src/app/(tabs)/story/styles.ts

@@ -1,4 +1,5 @@
 import { StyleSheet } from 'react-native';
+import colors from '../../../styles/colors';
 
 const styles = StyleSheet.create({
   container: {
@@ -17,11 +18,6 @@ const styles = StyleSheet.create({
     borderRadius: 100 / 2,
   },
   title: {
-    fontFamily: 'Manrope-Regular',
-    fontSize: 24,
-    fontWeight: '400',
-    textAlign: 'left',
-    color: 'black',
     marginBottom: 16,
   },
   author: {
@@ -30,13 +26,6 @@ const styles = StyleSheet.create({
     gap: 10,
     marginBottom: 16,
   },
-  authorText: {
-    fontFamily: 'Manrope-Regular',
-    fontSize: 12,
-    fontWeight: '400',
-    textAlign: 'left',
-    color: 'black',
-  },
   genres: {
     display: 'flex',
     flexDirection: 'row',
@@ -54,61 +43,24 @@ const styles = StyleSheet.create({
     marginRight: 8,
   },
   genresText: {
-    fontFamily: 'Manrope-Regular',
-    fontSize: 12,
-    fontWeight: '400',
-    color: 'black',
     backgroundColor: '#D9D9D9',
   },
   shareButtonText: {
-    fontFamily: 'Manrope-Regular',
-    fontSize: 12,
-    fontWeight: '400',
-    textAlign: 'left',
-    color: 'black',
-    textDecorationLine: 'underline',
-    backgroundColor: '#D9D9D9',
+    color: colors.white,
   },
   excerpt: {
-    fontFamily: 'Manrope-Regular',
-    fontSize: 16,
-    fontWeight: '400',
     textAlign: 'left',
-    color: 'black',
-    paddingTop: 16,
-    paddingBottom: 16,
+    paddingVertical: 16,
   },
   story: {
-    fontFamily: 'Manrope-Regular',
-    fontSize: 12,
-    fontWeight: '400',
-    textAlign: 'left',
-    color: 'black',
     marginBottom: 16,
   },
   authorProcess: {
-    fontFamily: 'Manrope-Regular',
-    fontSize: 16,
-    fontWeight: '600',
-    textAlign: 'left',
-    color: 'black',
     marginBottom: 16,
   },
   process: {
-    fontFamily: 'Manrope-Regular',
-    fontSize: 12,
-    fontWeight: '400',
-    textAlign: 'left',
-    color: 'black',
     marginBottom: 16,
   },
-  backToTopButtonText: {
-    fontFamily: 'Manrope-Regular',
-    fontSize: 12,
-    fontWeight: '800',
-    textAlign: 'left',
-    color: 'black',
-  },
 });
 
 export default styles;

src/app/auth/signup/index.tsx

@@ -130,7 +130,7 @@ function SignUpScreen() {
 
     if (error) Alert.alert(error.message);
     else
-      router.push({
+      router.replace({
         pathname: '/auth/verify',
         params: { finalRedirect: 'onboarding' },
       });

src/components/AccountDataDisplay/AccountDataDisplay.tsx

@@ -1,6 +1,7 @@
 import { View, Text } from 'react-native';
 
 import styles from './styles';
+import globalStyles from '../../styles/globalStyles';
 
 type AccountDataDisplayProps = {
   label: string;
@@ -10,9 +11,9 @@ type AccountDataDisplayProps = {
 function AccountDataDisplay({ label, value }: AccountDataDisplayProps) {
   return (
     <View style={styles.view}>
-      <Text style={styles.label}>{label}</Text>
+      <Text style={[globalStyles.subtext, styles.label]}>{label}</Text>
       {typeof value === 'string' ? (
-        <Text style={styles.value}>{value}</Text>
+        <Text style={[globalStyles.body1, styles.value]}>{value}</Text>
       ) : (
         value
       )}

src/components/AccountDataDisplay/styles.tsx

@@ -8,18 +8,11 @@ export default StyleSheet.create({
     marginBottom: 26,
   },
   label: {
-    fontSize: 12,
-    fontFamily: 'Manrope-Regular',
-    fontStyle: 'normal',
-    fontWeight: '400',
     color: colors.textGrey,
   },
   value: {
     paddingTop: 18,
     paddingRight: 20,
     fontSize: 14,
-    fontFamily: 'Manrope-Regular',
-    fontStyle: 'normal',
-    fontWeight: '400',
   },
 });

src/components/UserStringInput/styles.tsx

@@ -14,7 +14,6 @@ export default StyleSheet.create({
     borderWidth: 1,
     borderRadius: 5,
     borderColor: 'black',
-    fontFamily: 'Manrope-Regular',
   },
   inputField: {
     flex: 1,

src/styles/globalStyles.ts

@@ -79,6 +79,12 @@ export default StyleSheet.create({
     textAlign: 'left',
     color: 'black',
   },
+  body2Bold: {
+    fontFamily: 'Manrope-Bold',
+    fontSize: 16,
+    textAlign: 'left',
+    color: 'black',
+  },
   body3: {
     fontFamily: 'Manrope-Regular',
     fontSize: 18,
@@ -135,3 +141,5 @@ export default StyleSheet.create({
     marginTop: 20,
   },
 });
+
+export const fonts = ['Manrope-Bold', 'Manrope-Regular', 'Manrope-Semibold'];