From 3f724dc68baad51566cb213a573e06cae4f224e7 Mon Sep 17 00:00:00 2001 From: Justin Lee <91563628+jjstnlee@users.noreply.github.com> Date: Wed, 27 Mar 2024 00:07:31 -0700 Subject: [PATCH 1/8] [auth] Style onboarding screen (#66) * Added birthday boxand link for skip button on onboarding * Revert "Added birthday boxand link for skip button on onboarding" This reverts commit 8fdf6d804782cc39f9deb904f296cf6296e68e31. Mistake yes * Revert "Revert "Added birthday boxand link for skip button on onboarding"" This reverts commit 7c2d1b5595e1be593c50752d0518bb9c37fb8ade. * Created Birthday input box placeholder, implemented Skip For Now Button, and styled according to Figma * Added pseduo birthday input button, implemented Skip For Now, and styled onboarding screen * Added back commented/changed out code and also fixed the screen to be white * Fix login button * Fix merge errors * Fixed requested changes Yur * Fix spacing * Fix UserSelectorInput height * Fix pronouns * Remove logs * Various style changes * Various style changes * Run prettier --------- Co-authored-by: Aditya Pawar Co-authored-by: Aditya Pawar <34043950+adityapawar1@users.noreply.github.com> --- package-lock.json | 2 +- package.json | 2 +- src/app/(tabs)/home/index.tsx | 4 +- src/app/auth/onboarding/index.tsx | 189 ++++++++++-------- src/app/auth/onboarding/styles.tsx | 28 ++- src/app/auth/signup/index.tsx | 6 +- src/app/auth/signup/styles.tsx | 6 +- src/app/settings/index.tsx | 59 +++--- src/app/settings/styles.tsx | 4 + .../UserSelectorInput/UserSelectorInput.tsx | 4 +- src/components/UserSelectorInput/styles.tsx | 8 +- .../UserStringInput/UserStringInput.tsx | 4 +- 12 files changed, 169 insertions(+), 147 deletions(-) diff --git a/package-lock.json b/package-lock.json index 93232be4..b1f5b69e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,7 @@ "@mui/styled-engine-sc": "^6.0.0-alpha.1", "@mui/system": "^5.14.13", "@react-native-async-storage/async-storage": "^1.18.2", - "@react-native-community/datetimepicker": "7.2.0", + "@react-native-community/datetimepicker": "^7.2.0", "@react-navigation/bottom-tabs": "^6.5.9", "@react-navigation/material-bottom-tabs": "^6.2.17", "@react-navigation/native": "^6.1.8", diff --git a/package.json b/package.json index 5518a736..7ba5f154 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "@mui/styled-engine-sc": "^6.0.0-alpha.1", "@mui/system": "^5.14.13", "@react-native-async-storage/async-storage": "^1.18.2", - "@react-native-community/datetimepicker": "7.2.0", + "@react-native-community/datetimepicker": "^7.2.0", "@react-navigation/bottom-tabs": "^6.5.9", "@react-navigation/material-bottom-tabs": "^6.2.17", "@react-navigation/native": "^6.1.8", diff --git a/src/app/(tabs)/home/index.tsx b/src/app/(tabs)/home/index.tsx index 7c224297..81ffc8db 100644 --- a/src/app/(tabs)/home/index.tsx +++ b/src/app/(tabs)/home/index.tsx @@ -68,7 +68,7 @@ function HomeScreen() { contentContainerStyle={{ paddingHorizontal: 8 }} > - + {username ? `Welcome, ${username}` : 'Welcome!'} router.push('/settings')}> @@ -86,7 +86,7 @@ function HomeScreen() { {featuredStories.map(story => ( - - setShowDatePicker(false)} - date={displayDate} - display="inline" - isDarkModeEnabled={isDark} - themeVariant={isDark ? 'dark' : 'light'} - /> - - Welcome, {user?.user_metadata.username} - - - Input your profile information below. - - - - - This information is only used for outreach efforts, and will not be - visible to other users on the app. + + + + setShowDatePicker(false)} + date={displayDate} + display="inline" + isDarkModeEnabled={isDark} + themeVariant={isDark ? 'dark' : 'light'} + /> + + Welcome, {user?.user_metadata.username} - - - - { - setShowDatePicker(!showDatePicker); - }} - > - - + Input your profile information below. + + + + + This information is only used for outreach efforts, and will not + be visible to other users on the app. + + + + + { + setShowDatePicker(!showDatePicker); + }} > - - + + + + + + - + + + + - - - - - - - router.replace('/home')} - disabled={false} - /> - - + + + + + + Skip For Now + + + + ); } diff --git a/src/app/auth/onboarding/styles.tsx b/src/app/auth/onboarding/styles.tsx index 688d843b..6555413a 100644 --- a/src/app/auth/onboarding/styles.tsx +++ b/src/app/auth/onboarding/styles.tsx @@ -4,35 +4,41 @@ import colors from '../../../styles/colors'; export default StyleSheet.create({ container: { - flex: 1, backgroundColor: 'white', + flex: 1, + }, + flex: { + flexGrow: 1, + justifyContent: 'space-between', paddingTop: 64, - paddingLeft: 44, + paddingBottom: 54, + paddingLeft: 43, paddingRight: 44, }, - verticallySpaced: { + inputContainer: { flex: 1, - justifyContent: 'space-between', - }, - datePickerButton: { - paddingBottom: 16, + gap: 16, }, subtext: { color: colors.darkGrey, marginLeft: 8, }, - h1: { - marginTop: 66, - }, body1: { marginTop: 26, }, info: { flexDirection: 'row', marginTop: 12, - marginBottom: 16, width: 250, }, + updateProfileButton: { + marginBottom: 24, + }, + skipButton: { + flex: 1, + alignSelf: 'center', + color: colors.darkGrey, + }, icon: { paddingLeft: 8, }, diff --git a/src/app/auth/signup/index.tsx b/src/app/auth/signup/index.tsx index f7c9506f..84a9e511 100644 --- a/src/app/auth/signup/index.tsx +++ b/src/app/auth/signup/index.tsx @@ -262,12 +262,12 @@ function SignUpScreen() { onPress={signUpWithEmail} /> - - Already have an account?{' '} + + Already have an account? Log In - + diff --git a/src/app/auth/signup/styles.tsx b/src/app/auth/signup/styles.tsx index 600bcb26..51de2d40 100644 --- a/src/app/auth/signup/styles.tsx +++ b/src/app/auth/signup/styles.tsx @@ -14,9 +14,11 @@ export default StyleSheet.create({ textDecorationLine: 'underline', }, redirectText: { - textAlign: 'center', - marginBottom: 64, + gap: 8, + flexDirection: 'row', + justifyContent: 'center', marginTop: 16, + marginBottom: 64, }, title: { paddingTop: 64, diff --git a/src/app/settings/index.tsx b/src/app/settings/index.tsx index bd846b2b..40f501ad 100644 --- a/src/app/settings/index.tsx +++ b/src/app/settings/index.tsx @@ -57,7 +57,7 @@ function SettingsScreen() { const { data, error, status } = await supabase .from('profiles') .select( - `first_name, last_name, username, birthday, gender, race_ethnicity`, + `first_name, last_name, username, birthday, gender, race_ethnicity, pronouns`, ) .eq('user_id', session?.user.id) .single(); @@ -81,7 +81,7 @@ function SettingsScreen() { } setGender(data.gender || gender); - // setPronouns(data.pronouns || pronouns); + setPronouns(data.pronouns || pronouns); setRaceEthnicity(data.race_ethnicity || raceEthnicity); } } catch (error) { @@ -115,8 +115,6 @@ function SettingsScreen() { // Only update values that are not blank const updates = { - ...(firstName && { first_name: firstName }), - ...(lastName && { last_name: lastName }), ...(gender && { gender }), ...(pronouns && { pronouns }), ...(raceEthnicity && { race_ethnicity: raceEthnicity }), @@ -189,7 +187,6 @@ function SettingsScreen() { {' - - - - + + + + + {birthdayChanged && ( diff --git a/src/app/settings/styles.tsx b/src/app/settings/styles.tsx index 580f7838..944c1819 100644 --- a/src/app/settings/styles.tsx +++ b/src/app/settings/styles.tsx @@ -2,6 +2,10 @@ import { StyleSheet } from 'react-native'; import colors from '../../styles/colors'; export default StyleSheet.create({ + selectors: { + flex: 1, + gap: 16, + }, container: { flex: 1, backgroundColor: 'white', diff --git a/src/components/UserSelectorInput/UserSelectorInput.tsx b/src/components/UserSelectorInput/UserSelectorInput.tsx index dd5be4fc..a032b1ab 100644 --- a/src/components/UserSelectorInput/UserSelectorInput.tsx +++ b/src/components/UserSelectorInput/UserSelectorInput.tsx @@ -24,7 +24,7 @@ function UserSelectorInput({ value, }: UserSelectorInputProps) { return ( - + {label} ( diff --git a/src/components/UserSelectorInput/styles.tsx b/src/components/UserSelectorInput/styles.tsx index ad54c0ab..734f782b 100644 --- a/src/components/UserSelectorInput/styles.tsx +++ b/src/components/UserSelectorInput/styles.tsx @@ -10,17 +10,15 @@ export default StyleSheet.create({ position: 'relative', zIndex: 1, }, - container: { - marginBottom: 16, - }, label: { - marginBottom: 10, + marginBottom: 8, }, dropdown: { - height: 50, + height: 44, borderWidth: 1, borderRadius: 5, paddingHorizontal: 10, + paddingVertical: 10, }, dropdownContainer: { borderRadius: 5, diff --git a/src/components/UserStringInput/UserStringInput.tsx b/src/components/UserStringInput/UserStringInput.tsx index f7cd12d6..6d2d586b 100644 --- a/src/components/UserStringInput/UserStringInput.tsx +++ b/src/components/UserStringInput/UserStringInput.tsx @@ -2,8 +2,8 @@ import { ReactNode } from 'react'; import { View, Text, TextInput } from 'react-native'; import styles from './styles'; -import globalStyles from '../../styles/globalStyles'; import colors from '../../styles/colors'; +import globalStyles from '../../styles/globalStyles'; type UserStringInputProps = { placeholder: string; @@ -23,7 +23,7 @@ export default function UserStringInput({ label, children, labelColor = '#000', - placeholderTextColor = '#000', + placeholderTextColor = colors.darkGrey, onChange = _ => {}, }: UserStringInputProps) { return ( From 9a84783aa056b5eb69d8cc5ad2274be5c3910eee Mon Sep 17 00:00:00 2001 From: emilysunaryo <99292788+emilysunaryo@users.noreply.github.com> Date: Thu, 28 Mar 2024 21:58:50 -0700 Subject: [PATCH 2/8] [reactions] Database schema changes for reacting to stories (#65) * committing changes from previous branch * finished queries for reactions * fixing merge conflicts * Fix compiler error --------- Co-authored-by: Aditya Pawar --- src/queries/reactions.tsx | 79 +++++++++++++++++++++++++++++++++++++++ src/queries/stories.tsx | 16 ++++++++ src/queries/types.tsx | 15 ++++++++ 3 files changed, 110 insertions(+) create mode 100644 src/queries/reactions.tsx diff --git a/src/queries/reactions.tsx b/src/queries/reactions.tsx new file mode 100644 index 00000000..8a9da888 --- /dev/null +++ b/src/queries/reactions.tsx @@ -0,0 +1,79 @@ +import { Reactions } from './types'; +import supabase from '../utils/supabase'; + +export async function addReactionToStory( + input_profile_id: number, + input_story_id: number, + input_reaction_id: number, +): Promise { + const { data, error } = await supabase.rpc('add_reaction_to_story', { + story_id: input_story_id, + profile_id: input_profile_id, + reaction_id: input_reaction_id, + }); + if (error) { + console.log(error); + throw new Error( + `An error occured when trying to insert author reaction to story: ${error}`, + ); + } else { + return data; + } +} + +export async function deleteReactionToStory( + input_profile_id: number, + input_story_id: number, + input_reaction_id: number, +): Promise { + const { data, error } = await supabase.rpc('remove_reaction_from_story', { + story_id: input_story_id, + profile_id: input_profile_id, + reaction_id: input_reaction_id, + }); + if (error) { + console.log(error); + throw new Error( + `An error occured when trying to delete reaction to story by a user: ${error}`, + ); + } else { + return data; + } +} + +export async function fetchAllReactionsToStory( + storyId: number, +): Promise { + const { data, error } = await supabase.rpc('curr_get_reactions_for_story', { + input_story_id: storyId, + }); + if (error) { + console.log(error); + throw new Error( + `An error occured when trying to fetch reactions to a story', ${error}`, + ); + } else { + return data; + } +} + +export async function fetchReactionsToStoryByUser( + story_id: number, + profile_id: number, +): Promise { + const { data, error } = await supabase.rpc( + 'get_reactions_for_user_and_story', + { + _story_id: story_id, + _profile_id: profile_id, + }, + ); + if (error) { + console.log(error); + throw new Error( + `An error occured when trying to fetch reactions for user and story ${error}`, + ); + } else { + return data; + } +} diff --git a/src/queries/stories.tsx b/src/queries/stories.tsx index e9fd3683..86747ad9 100644 --- a/src/queries/stories.tsx +++ b/src/queries/stories.tsx @@ -82,3 +82,19 @@ export async function fetchNewStories(): Promise { return data; } } + +export async function fetchStoryPreviewById( + storyId: number, +): Promise { + const { data, error } = await supabase.rpc('curr_story_preview_by_id', { + input_story_id: storyId, + }); + if (error) { + console.log(error); + throw new Error( + `An error occured when trying to fetch story preview by ID: ${error}`, + ); + } else { + return data; + } +} diff --git a/src/queries/types.tsx b/src/queries/types.tsx index 04ec7d19..55821c54 100644 --- a/src/queries/types.tsx +++ b/src/queries/types.tsx @@ -59,3 +59,18 @@ export interface Genre { parent_name: string; subgenres: Subgenre[]; } + +export interface GenreStories { + parent_id: number; + parent_name: string; + subgenre_id: number; + subgenre_name: string; + genre_story_previews: string[]; +} + +export interface Reactions { + profile_id: number; + story_id: number; + emoji_id: number; + emoji: string; +} From 9470964cf3bdeeb2d24d01aadec8312fa708c305 Mon Sep 17 00:00:00 2001 From: Aditya Pawar <34043950+adityapawar1@users.noreply.github.com> Date: Fri, 29 Mar 2024 00:51:07 -0700 Subject: [PATCH 3/8] [chore] Standardize fonts for other files (#75) * Finish standardizing story page * Finish authors page * Finish standardizing fonts * Run prettier --- src/app/(tabs)/author/index.tsx | 14 +++-- src/app/(tabs)/author/styles.tsx | 21 +------- src/app/(tabs)/story/index.tsx | 45 +++++++++++----- src/app/(tabs)/story/styles.ts | 54 ++----------------- .../AccountDataDisplay/AccountDataDisplay.tsx | 5 +- src/components/AccountDataDisplay/styles.tsx | 7 --- src/components/UserStringInput/styles.tsx | 1 - src/styles/globalStyles.ts | 8 +++ 8 files changed, 56 insertions(+), 99 deletions(-) diff --git a/src/app/(tabs)/author/index.tsx b/src/app/(tabs)/author/index.tsx index 9b8065c5..c460e112 100644 --- a/src/app/(tabs)/author/index.tsx +++ b/src/app/(tabs)/author/index.tsx @@ -76,12 +76,14 @@ function AuthorScreen() { {authorInfo.name} {authorInfo?.pronouns && ( - {authorInfo.pronouns} + + {authorInfo.pronouns} + )} )} @@ -91,17 +93,19 @@ function AuthorScreen() { {authorInfo?.bio && ( <> - {decode(authorInfo.bio)} + {decode(authorInfo.bio)} )} {authorInfo?.artist_statement && ( <> - + Artist's Statement - + {decode(authorInfo.artist_statement)} diff --git a/src/app/(tabs)/author/styles.tsx b/src/app/(tabs)/author/styles.tsx index d85a4dd7..213b9e7b 100644 --- a/src/app/(tabs)/author/styles.tsx +++ b/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,9 +24,6 @@ const styles = StyleSheet.create({ borderTopWidth: 20, }, authorStatementTitle: { - fontWeight: 'bold', - fontFamily: 'Manrope-Regular', - fontSize: 16, marginBottom: 8, }, storyCountText: { @@ -50,7 +31,7 @@ const styles = StyleSheet.create({ marginBottom: 8, }, pronouns: { - color: '#797979', + color: colors.textGrey, }, }); diff --git a/src/app/(tabs)/story/index.tsx b/src/app/(tabs)/story/index.tsx index 646a1e4a..a3505219 100644 --- a/src/app/(tabs)/story/index.tsx +++ b/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); @@ -74,7 +76,7 @@ function StoryScreen() { > {/* */} - {story?.title} + {story?.title} { router.push({ @@ -88,7 +90,9 @@ function StoryScreen() { style={styles.authorImage} source={{ uri: story.author_image ? story.author_image : '' }} /> - By {story.author_name} + + By {story.author_name} + @@ -99,50 +103,63 @@ function StoryScreen() { data={story.genre_medium} renderItem={({ item }) => ( - {item} + + {item} + )} /> - Author's Process + + Author's Process + @@ -150,7 +167,9 @@ function StoryScreen() { style={styles.authorImage} source={{ uri: story.author_image }} /> - By {story.author_name} + + By {story.author_name} + )} diff --git a/src/app/(tabs)/story/styles.ts b/src/app/(tabs)/story/styles.ts index cbe432a8..9a173b05 100644 --- a/src/app/(tabs)/story/styles.ts +++ b/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: { @@ -22,11 +23,6 @@ const styles = StyleSheet.create({ borderRadius: 100 / 2, }, title: { - fontFamily: 'Manrope-Regular', - fontSize: 24, - fontWeight: '400', - textAlign: 'left', - color: 'black', marginBottom: 16, }, author: { @@ -35,13 +31,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', @@ -59,61 +48,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; diff --git a/src/components/AccountDataDisplay/AccountDataDisplay.tsx b/src/components/AccountDataDisplay/AccountDataDisplay.tsx index a2d464f3..4faccfff 100644 --- a/src/components/AccountDataDisplay/AccountDataDisplay.tsx +++ b/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 ( - {label} + {label} {typeof value === 'string' ? ( - {value} + {value} ) : ( value )} diff --git a/src/components/AccountDataDisplay/styles.tsx b/src/components/AccountDataDisplay/styles.tsx index 5d769230..78da8ddb 100644 --- a/src/components/AccountDataDisplay/styles.tsx +++ b/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', }, }); diff --git a/src/components/UserStringInput/styles.tsx b/src/components/UserStringInput/styles.tsx index a11509d5..5642a55e 100644 --- a/src/components/UserStringInput/styles.tsx +++ b/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, diff --git a/src/styles/globalStyles.ts b/src/styles/globalStyles.ts index ef9e2cb3..12e17283 100644 --- a/src/styles/globalStyles.ts +++ b/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']; From 02bcb3059ab4bcd2f102aae647d507da5edd0541 Mon Sep 17 00:00:00 2001 From: Aditya Pawar <34043950+adityapawar1@users.noreply.github.com> Date: Fri, 29 Mar 2024 00:54:14 -0700 Subject: [PATCH 4/8] Fix router call (#76) --- src/app/auth/signup/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/auth/signup/index.tsx b/src/app/auth/signup/index.tsx index 84a9e511..fbaeb5cd 100644 --- a/src/app/auth/signup/index.tsx +++ b/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' }, }); From 06a6101b5c5cbffaf8d7512a3d79c47693be49a6 Mon Sep 17 00:00:00 2001 From: Aditya Pawar <34043950+adityapawar1@users.noreply.github.com> Date: Mon, 1 Apr 2024 17:33:57 -0700 Subject: [PATCH 5/8] Fix going back to login from home bug (#77) --- src/app/auth/onboarding/index.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/app/auth/onboarding/index.tsx b/src/app/auth/onboarding/index.tsx index a514b849..936624fb 100644 --- a/src/app/auth/onboarding/index.tsx +++ b/src/app/auth/onboarding/index.tsx @@ -128,6 +128,9 @@ function OnboardingScreen() { } } + while (router.canGoBack()) { + router.back(); + } router.replace('/home'); } catch (error) { if (error instanceof Error) { From 3c28469bec52c40b93a26c616b5bf6dbd8167c89 Mon Sep 17 00:00:00 2001 From: Marcoss28 <69034384+Marcoss28@users.noreply.github.com> Date: Wed, 3 Apr 2024 20:40:45 -0700 Subject: [PATCH 6/8] [home] Update content card (#63) * accidently forgot to branch * merging * fixing scaling * need to create add reactions and plus button * fixed Content Card to new look, however having trouble styling the authors * included temporary author image to style * Higher res + image * accidently forgot to branch * merging * fixing scaling * need to create add reactions and plus button * fixed Content Card to new look, however having trouble styling the authors * included temporary author image to style * resolved PR * Run prettier * Fix search screen key error * Live author images * Small style changes * Run prettier --------- Co-authored-by: Marcos Hernandez Co-authored-by: Aditya Pawar Co-authored-by: Aditya Pawar <34043950+adityapawar1@users.noreply.github.com> --- src/app/(tabs)/author/index.tsx | 1 - src/app/(tabs)/home/index.tsx | 7 +- src/app/(tabs)/home/styles.ts | 10 ++- src/app/(tabs)/search/index.tsx | 7 +- src/app/(tabs)/story/index.tsx | 3 +- src/app/(tabs)/story/styles.ts | 5 -- src/components/ContentCard/ContentCard.tsx | 66 ++++++++++++++++-- .../ContentCard/savedStoriesIcon.png | Bin 0 -> 1052 bytes src/components/ContentCard/styles.ts | 62 +++++++++++++++- src/components/PreviewCard/PreviewCard.tsx | 2 +- src/queries/types.tsx | 1 + 11 files changed, 141 insertions(+), 23 deletions(-) create mode 100644 src/components/ContentCard/savedStoriesIcon.png diff --git a/src/app/(tabs)/author/index.tsx b/src/app/(tabs)/author/index.tsx index c460e112..12c5bc73 100644 --- a/src/app/(tabs)/author/index.tsx +++ b/src/app/(tabs)/author/index.tsx @@ -6,7 +6,6 @@ import { SafeAreaView } from 'react-native-safe-area-context'; import styles from './styles'; import BackButton from '../../../components/BackButton/BackButton'; -import ContentCard from '../../../components/ContentCard/ContentCard'; import HorizontalLine from '../../../components/HorizontalLine/HorizontalLine'; import PreviewCard from '../../../components/PreviewCard/PreviewCard'; import { diff --git a/src/app/(tabs)/home/index.tsx b/src/app/(tabs)/home/index.tsx index 81ffc8db..c2517b49 100644 --- a/src/app/(tabs)/home/index.tsx +++ b/src/app/(tabs)/home/index.tsx @@ -43,6 +43,7 @@ function HomeScreen() { fetchRecommendedStories().catch(() => []), fetchNewStories().catch(() => []), ]); + setUsername(usernameResponse); setFeaturedStories(featuredStoryResponse); setFeaturedStoriesDescription(featuredStoryDescriptionResponse); @@ -115,13 +116,14 @@ function HomeScreen() { horizontal showsHorizontalScrollIndicator={false} bounces={false} - style={styles.scrollView} + style={styles.scrollView1} > {recommendedStories.map(story => ( router.push({ pathname: '/story', @@ -143,13 +145,14 @@ function HomeScreen() { horizontal showsHorizontalScrollIndicator={false} bounces={false} - style={styles.scrollView} + style={styles.scrollView2} > {newStories.map(story => ( router.push({ pathname: '/story', diff --git a/src/app/(tabs)/home/styles.ts b/src/app/(tabs)/home/styles.ts index 231f5d9d..e24896bc 100644 --- a/src/app/(tabs)/home/styles.ts +++ b/src/app/(tabs)/home/styles.ts @@ -19,9 +19,15 @@ const styles = StyleSheet.create({ marginTop: 12, marginBottom: 16, }, - scrollView: { - marginBottom: 20, + scrollView1: { + paddingBottom: 16, flexGrow: 0, + padding: 8, + }, + scrollView2: { + paddingBottom: 80, + flexGrow: 0, + padding: 8, }, headerContainer: { flexDirection: 'row', diff --git a/src/app/(tabs)/search/index.tsx b/src/app/(tabs)/search/index.tsx index 23450af4..337119a7 100644 --- a/src/app/(tabs)/search/index.tsx +++ b/src/app/(tabs)/search/index.tsx @@ -1,7 +1,7 @@ import AsyncStorage from '@react-native-async-storage/async-storage'; import { SearchBar } from '@rneui/themed'; import { router } from 'expo-router'; -import { useEffect, useState } from 'react'; +import { Fragment, useEffect, useState } from 'react'; import { Button, FlatList, @@ -286,7 +286,7 @@ function SearchScreen() { contentContainerStyle={{ paddingHorizontal: 8 }} > {allGenres.map((genre, index) => ( - <> + {genre.parent_name} See All @@ -299,13 +299,14 @@ function SearchScreen() { > {genre.subgenres.map(subgenre => ( null} /> ))} - + ))} ) : ( diff --git a/src/app/(tabs)/story/index.tsx b/src/app/(tabs)/story/index.tsx index a3505219..73cbdfef 100644 --- a/src/app/(tabs)/story/index.tsx +++ b/src/app/(tabs)/story/index.tsx @@ -74,9 +74,8 @@ function StoryScreen() { ref={scrollRef} showsVerticalScrollIndicator={false} > - {/* */} - {story?.title} + { router.push({ diff --git a/src/app/(tabs)/story/styles.ts b/src/app/(tabs)/story/styles.ts index 9a173b05..7e6e2c8c 100644 --- a/src/app/(tabs)/story/styles.ts +++ b/src/app/(tabs)/story/styles.ts @@ -11,11 +11,6 @@ const styles = StyleSheet.create({ paddingRight: 24, paddingTop: 48, }, - image: { - width: '100%', - height: 153, - marginBottom: 16, - }, authorImage: { backgroundColor: '#D9D9D9', width: 21, diff --git a/src/components/ContentCard/ContentCard.tsx b/src/components/ContentCard/ContentCard.tsx index 99486907..4301cb9f 100644 --- a/src/components/ContentCard/ContentCard.tsx +++ b/src/components/ContentCard/ContentCard.tsx @@ -4,6 +4,7 @@ import { Pressable, Text, View, + TouchableOpacity, } from 'react-native'; import styles from './styles'; @@ -13,6 +14,7 @@ type ContentCardProps = { title: string; author: string; image: string; + authorImage: string; pressFunction: (event: GestureResponderEvent) => void; }; @@ -20,19 +22,73 @@ function ContentCard({ title, author, image, + authorImage, pressFunction, }: ContentCardProps) { + const saveStory = () => { + console.log("testing '+' icon does something for story " + title); + }; + return ( - + + + + + - + {title} - - {author} - + + + By + + + {author} + + + + + null} + style={{ flexDirection: 'row' }} + > + + + + + + 14{/*change number to work*/} + + + + + saveStory()}> + + + diff --git a/src/components/ContentCard/savedStoriesIcon.png b/src/components/ContentCard/savedStoriesIcon.png new file mode 100644 index 0000000000000000000000000000000000000000..65b2ea6e4dd47e1c590ef1cbe5d7afc29d8fcca7 GIT binary patch literal 1052 zcmV+%1mpXOP)Px#L}ge>W=%~1DgXcg2mk?xX#fNO00031000^Q000001E2u_0{{R30RRC20H6W@ z1ONa40RR91JfH&r1ONa40RR91JOBUy0E^%0TmS$AhDk(0RA>e5n@@7uFciimr$e`7 zhCjm&P7v1VhMpkVWYbNP6Eryi^aM>$(8;zeN=^{ENH^V(6Qo@wfn;E^B&pr+b1h;E2p>P%^ zpbQq?-QDePZEbx)!+h{wlCB94d0Rp7Dd53i@ClWUJ+Q82S)K8Cd|s(k*x2~g@AvBv zl1CH3Rpd;qVzKz~->L8O;o+ePUuKrbW`fVi zqM-RzouJ&`-(P#ciMQ+o$~yrUE$teUld(|NMSdNuoR(_(yQfn;M+^dj^sVI7We(n$i%k7S&sd<5^duoYdS(=jKw9*6>g(U-yqNOC) z$t;{?>qU`$<1GA2r@nU*mXIMN=))V14f=4r*LT@(7=xLG;_HeuMsDMM!AIJIj+ z-`aK91W&7fuzLz$U`I&ND}KE^SwwMKU=uto54IuPy_rRDh0p@0&C}8Xm)bw*$iH1o zujaJQW@&S55sxI9h2znyIlX2UHpdq6NTS^USeB<1wpTUrpfqe!iaLA_ZvBkld~lhZ zpF%t`^;e5_9bT5F6}DG3@u235?{~1Uza|=*>cZb3SXT?YEKe(JugVe5m2@KfhX)Ho z@W>Wszd=xStsT;;;yUxe!J7-$vX1B$+n4|4^{FA9&C=_%S$Gv%UgtA13$IiA zt9W*1;ZQ8bmrI=+zT z9%pIy_a(shlL!-0X8zg|h$sEc;L`8BK;WetRm=0VB}580$ppr4fxLNn~&jVDeU zEM9H+KsFT*Zf$RGk1(8%JPkB`<2~{0FeYC?Y7t~69vrU$oKh3CHY3NAPD{&z$sM_P z-@%0@)71V7V0ptG@80a)V&HhGRB|UaHZVDHrOD-TdyttEaD%eK!k;1k#DG)4tbieX zh|K@q4~vtSMgTu5m&+Z$@H4>bCc$B4&fHZTbyaS1&QS@A_V9h}K0ZF4)oQg-P~N|w WSfpXwp?D_%0000 Date: Thu, 4 Apr 2024 18:07:13 -0700 Subject: [PATCH 7/8] [search] Update search styling (#74) * accidently forgot to branch * updated search styling and added screens for when there are no search results and no recent searches/stories * chnages made * changes made to color options * Small style changes * Run prettier --------- Co-authored-by: Marcos Hernandez Co-authored-by: Aditya Pawar <34043950+adityapawar1@users.noreply.github.com> Co-authored-by: Aditya Pawar --- src/app/(tabs)/home/index.tsx | 1 + src/app/(tabs)/search/index.tsx | 76 +++++++++++++++---- src/app/(tabs)/search/styles.ts | 26 ++++--- src/components/PreviewCard/styles.ts | 4 +- .../RecentSearchCard/RecentSearchCard.tsx | 8 +- src/components/RecentSearchCard/styles.ts | 11 ++- src/styles/colors.ts | 1 + 7 files changed, 92 insertions(+), 35 deletions(-) diff --git a/src/app/(tabs)/home/index.tsx b/src/app/(tabs)/home/index.tsx index c2517b49..871b0eed 100644 --- a/src/app/(tabs)/home/index.tsx +++ b/src/app/(tabs)/home/index.tsx @@ -78,6 +78,7 @@ function HomeScreen() { + {featuredStories.length > 0 && ( Featured Stories diff --git a/src/app/(tabs)/search/index.tsx b/src/app/(tabs)/search/index.tsx index 337119a7..fd64c5b7 100644 --- a/src/app/(tabs)/search/index.tsx +++ b/src/app/(tabs)/search/index.tsx @@ -190,18 +190,21 @@ function SearchScreen() { setShowRecents(true); setShowGenreCarousals(false); }} - searchIcon={false} - clearIcon + searchIcon + clearIcon={false} + cancelButtonProps={{ + buttonTextStyle: [globalStyles.body1Bold, styles.cancelButton], + }} containerStyle={[ styles.searchContainer, showGenreCarousals && { marginRight: 24 }, ]} inputContainerStyle={styles.inputContainer} - inputStyle={{ color: 'black' }} + inputStyle={globalStyles.body1Bold} leftIconContainerStyle={{}} rightIconContainerStyle={{}} - placeholder="Search" - placeholderTextColor="black" + placeholder="What do you want to read?" + placeholderTextColor="grey" onChangeText={text => searchFunction(text)} value={search} onSubmitEditing={searchString => { @@ -222,19 +225,44 @@ function SearchScreen() { )} {showRecents && - (search ? ( + (search && searchResults.length > 0 ? ( - - {searchResults.length}{' '} - {searchResults.length === 1 ? 'Story' : 'Stories'} + + Showing results 1-{searchResults.length} - ) : ( + ) : search && searchResults.length === 0 ? ( + + + + There are no stories + + + for "{search}". + + + + Try searching by title or author, or + + + check if your spelling is correct. + + + ) : recentSearches.length > 0 || recentlyViewed.length > 0 ? ( - Recent Searches + + Recent Searches + - Clear All + + Clear All + @@ -252,9 +280,18 @@ function SearchScreen() { - Recently Viewed + + Recently Viewed + - Clear All + + Clear All + @@ -278,6 +315,17 @@ function SearchScreen() { ))} + ) : ( + + + + Find stories from young creators. + + + + Search for stories, authors, or collections. + + ))} {showGenreCarousals ? ( diff --git a/src/app/(tabs)/search/styles.ts b/src/app/(tabs)/search/styles.ts index 648752e0..c1d184be 100644 --- a/src/app/(tabs)/search/styles.ts +++ b/src/app/(tabs)/search/styles.ts @@ -16,12 +16,15 @@ const styles = StyleSheet.create({ searchContainer: { backgroundColor: 'transparent', borderRadius: 10, - borderColor: 'transparent', marginBottom: 8, + borderColor: colors.grey, }, inputContainer: { - backgroundColor: '#D9D9D9', + backgroundColor: 'transparent', borderRadius: 10, + borderColor: colors.grey2, + borderWidth: 1, + borderBottomWidth: 1, }, greyOverlay: { flex: 1, @@ -51,19 +54,10 @@ const styles = StyleSheet.create({ marginBottom: 8, marginHorizontal: 8, }, - searchText: { - fontWeight: '500', - fontSize: 14, - }, numDisplay: { marginTop: 24, marginBottom: 8, }, - clearAll: { - color: colors.gwnOrange, - fontSize: 12, - fontWeight: '400', - }, contentContainerRecents: { paddingHorizontal: 8, marginBottom: 8, @@ -86,6 +80,16 @@ const styles = StyleSheet.create({ fontSize: 12, textDecorationLine: 'underline', }, + emptySearch: { + display: 'flex', + flexDirection: 'column', + textAlign: 'center', + alignItems: 'center', + marginTop: '60%', + }, + cancelButton: { + color: colors.grey, + }, }); export default styles; diff --git a/src/components/PreviewCard/styles.ts b/src/components/PreviewCard/styles.ts index d69aae26..e8af8f2c 100644 --- a/src/components/PreviewCard/styles.ts +++ b/src/components/PreviewCard/styles.ts @@ -11,8 +11,8 @@ const styles = StyleSheet.create({ marginTop: 8, marginBottom: 8, shadowColor: 'black', - shadowOffset: { width: 0, height: 4 }, - shadowOpacity: 0.5, + shadowOffset: { width: 0, height: 0 }, + shadowOpacity: 0.2, elevation: 4, }, image: { diff --git a/src/components/RecentSearchCard/RecentSearchCard.tsx b/src/components/RecentSearchCard/RecentSearchCard.tsx index eb77fcc6..e142baee 100644 --- a/src/components/RecentSearchCard/RecentSearchCard.tsx +++ b/src/components/RecentSearchCard/RecentSearchCard.tsx @@ -21,10 +21,14 @@ function RecentSearchCard({ - {value} + + {value} + - {numResults} Results + + {numResults} Results + diff --git a/src/components/RecentSearchCard/styles.ts b/src/components/RecentSearchCard/styles.ts index 676937de..b0cb9012 100644 --- a/src/components/RecentSearchCard/styles.ts +++ b/src/components/RecentSearchCard/styles.ts @@ -1,4 +1,5 @@ import { StyleSheet } from 'react-native'; +import colors from '../../styles/colors'; const styles = StyleSheet.create({ card: { @@ -13,10 +14,11 @@ const styles = StyleSheet.create({ paddingRight: 12, paddingBottom: 10, paddingTop: 10, + shadowColor: 'black', - shadowOffset: { width: 0, height: 4 }, - shadowOpacity: 0.5, - elevation: 4, + shadowOffset: { width: 0, height: 0 }, + shadowOpacity: 0.3, + elevation: 7, }, leftItems: { gap: 8, @@ -29,9 +31,6 @@ const styles = StyleSheet.create({ alignItems: 'center', }, searchValueText: { - color: 'black', - fontWeight: '400', - fontSize: 14, justifyContent: 'center', }, numResultsText: { diff --git a/src/styles/colors.ts b/src/styles/colors.ts index 73d10142..af1f15f4 100644 --- a/src/styles/colors.ts +++ b/src/styles/colors.ts @@ -14,6 +14,7 @@ const colors = { fadedBlack: '#2D2D2D', white: '#FBFBFB', grey: '#A7A5A5', + grey2: '#D9D9D9', darkGrey: '#797979', textPrimary: '#000000', // black From 9a3d7077df3e634b88c3ead0e78552ea1932b11b Mon Sep 17 00:00:00 2001 From: Kyle Ramachandran <156966341+kylezryr@users.noreply.github.com> Date: Thu, 4 Apr 2024 18:34:26 -0700 Subject: [PATCH 8/8] [setting] Update setting style (#78) * updated styling * Small style changes --------- Co-authored-by: Kyle Ramachandran Co-authored-by: Aditya Pawar --- src/app/(tabs)/_layout.tsx | 9 ++++++++- src/app/{ => (tabs)}/settings/_layout.tsx | 0 src/app/{ => (tabs)}/settings/index.tsx | 19 +++++++++++-------- src/app/{ => (tabs)}/settings/styles.tsx | 2 +- src/app/_layout.tsx | 1 - src/components/StyledButton/styles.tsx | 2 +- 6 files changed, 21 insertions(+), 12 deletions(-) rename src/app/{ => (tabs)}/settings/_layout.tsx (100%) rename src/app/{ => (tabs)}/settings/index.tsx (94%) rename src/app/{ => (tabs)}/settings/styles.tsx (96%) diff --git a/src/app/(tabs)/_layout.tsx b/src/app/(tabs)/_layout.tsx index 3040918a..c496d43f 100644 --- a/src/app/(tabs)/_layout.tsx +++ b/src/app/(tabs)/_layout.tsx @@ -1,5 +1,5 @@ import { Tabs } from 'expo-router'; -import { Platform } from 'react-native'; +import { Platform, View } from 'react-native'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; import Icon from '../../../assets/icons'; @@ -88,6 +88,13 @@ function TabNav() { tabBarIcon: ({ color }) => LibraryIcon({ color }), }} /> + ); } diff --git a/src/app/settings/_layout.tsx b/src/app/(tabs)/settings/_layout.tsx similarity index 100% rename from src/app/settings/_layout.tsx rename to src/app/(tabs)/settings/_layout.tsx diff --git a/src/app/settings/index.tsx b/src/app/(tabs)/settings/index.tsx similarity index 94% rename from src/app/settings/index.tsx rename to src/app/(tabs)/settings/index.tsx index 40f501ad..10bf4af9 100644 --- a/src/app/settings/index.tsx +++ b/src/app/(tabs)/settings/index.tsx @@ -13,13 +13,13 @@ import { SafeAreaView } from 'react-native-safe-area-context'; import { Icon } from 'react-native-elements'; import styles from './styles'; -import colors from '../../styles/colors'; -import AccountDataDisplay from '../../components/AccountDataDisplay/AccountDataDisplay'; -import StyledButton from '../../components/StyledButton/StyledButton'; -import UserSelectorInput from '../../components/UserSelectorInput/UserSelectorInput'; -import globalStyles from '../../styles/globalStyles'; -import { useSession } from '../../utils/AuthContext'; -import supabase from '../../utils/supabase'; +import colors from '../../../styles/colors'; +import AccountDataDisplay from '../../../components/AccountDataDisplay/AccountDataDisplay'; +import StyledButton from '../../../components/StyledButton/StyledButton'; +import UserSelectorInput from '../../../components/UserSelectorInput/UserSelectorInput'; +import globalStyles from '../../../styles/globalStyles'; +import { useSession } from '../../../utils/AuthContext'; +import supabase from '../../../utils/supabase'; import DateTimePickerModal from 'react-native-modal-datetime-picker'; function SettingsScreen() { @@ -175,7 +175,10 @@ function SettingsScreen() { } return ( - + - diff --git a/src/components/StyledButton/styles.tsx b/src/components/StyledButton/styles.tsx index 4e664ced..b2c4dc94 100644 --- a/src/components/StyledButton/styles.tsx +++ b/src/components/StyledButton/styles.tsx @@ -13,7 +13,7 @@ export default StyleSheet.create({ }, titleStyle: { paddingHorizontal: 24, - paddingVertical: 10, + paddingVertical: 5, color: 'white', }, });