Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[search] Update search styling #74

Merged
merged 8 commits into from
Apr 5, 2024
Merged

[search] Update search styling #74

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
20370e3
accidently forgot to branch
Nov 12, 2023
ce09251
updated search styling and added screens for when there are no search…
Mar 26, 2024
de73b5c
chnages made
Mar 27, 2024
57330e9
Merge branch 'main' into marcos/update-search-styling
adityapawar1 Mar 27, 2024
ffdaaeb
changes made to color options
Mar 29, 2024
1ff0877
merging
Mar 29, 2024
d18469a
Small style changes
adityapawar1 Apr 5, 2024
3e8f269
Run prettier
adityapawar1 Apr 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
"@mui/material": "^5.14.13",
"@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-async-storage/async-storage": "^1.18.2",
"@react-native-community/datetimepicker": "7.2.0",
"@react-navigation/bottom-tabs": "^6.5.9",
"@react-navigation/material-bottom-tabs": "^6.2.17",
Expand Down
44 changes: 35 additions & 9 deletions src/app/(tabs)/search/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,18 +190,19 @@ function SearchScreen() {
setShowRecents(true);
setShowGenreCarousals(false);
}}
searchIcon={false}
clearIcon
searchIcon
clearIcon={false}
cancelButtonProps={{ color: colors.grey }}
Marcoss28 marked this conversation as resolved.
Show resolved Hide resolved
containerStyle={[
styles.searchContainer,
showGenreCarousals && { marginRight: 24 },
]}
inputContainerStyle={styles.inputContainer}
inputStyle={{ color: 'black' }}
inputStyle={globalStyles.body1} // this is where we put the styling
Marcoss28 marked this conversation as resolved.
Show resolved Hide resolved
leftIconContainerStyle={{}}
rightIconContainerStyle={{}}
placeholder="Search"
placeholderTextColor="black"
placeholder="What do you want to read?"
placeholderTextColor="grey"
onChangeText={text => searchFunction(text)}
value={search}
onSubmitEditing={searchString => {
Expand All @@ -222,19 +223,31 @@ function SearchScreen() {
)}

{showRecents &&
(search ? (
(search && searchResults.length > 0 ? (
<View style={styles.default}>
<Text style={[styles.searchText, styles.numDisplay]}>
{searchResults.length}{' '}
{searchResults.length === 1 ? 'Story' : 'Stories'}
</Text>
</View>
) : (
) : search && searchResults.length === 0 ? (
<View style={styles.emptySearch}>
<View style={{ paddingBottom: 16 }}>
<Text style={globalStyles.h3}>There are no stories</Text>
Marcoss28 marked this conversation as resolved.
Show resolved Hide resolved
<Text style={globalStyles.h3}>matching your filters.</Text>
</View>
<Text style={globalStyles.subHeading2}>
Try removing some filters.
</Text>
</View>
) : recentSearches.length > 0 || recentlyViewed.length > 0 ? (
<ScrollView showsVerticalScrollIndicator={false} bounces={false}>
<View style={styles.recentSpacing}>
<Text style={styles.searchText}>Recent Searches</Text>
<Pressable onPress={clearRecentSearches}>
<Text style={styles.clearAll}>Clear All</Text>
<Text style={[globalStyles.button1, styles.clearAll]}>
Clear All
</Text>
</Pressable>
</View>
<View style={styles.contentContainerRecents}>
Expand All @@ -254,7 +267,9 @@ function SearchScreen() {
<View style={styles.recentSpacing}>
<Text style={styles.searchText}>Recently Viewed</Text>
<Pressable onPress={clearRecentlyViewed}>
<Text style={styles.clearAll}>Clear All</Text>
<Text style={[globalStyles.button1, styles.clearAll]}>
Clear All
</Text>
</Pressable>
</View>
<View style={styles.contentContainerRecents}>
Expand All @@ -278,6 +293,17 @@ function SearchScreen() {
))}
</View>
</ScrollView>
) : (
<View style={styles.emptySearch}>
<View style={{ paddingBottom: 16 }}>
<Text style={globalStyles.h3}>
Find stories from young creators.
</Text>
</View>
<Text style={globalStyles.subHeading2}>
Search for stories, authors, or collections.
</Text>
</View>
))}

{showGenreCarousals ? (
Expand Down
15 changes: 12 additions & 3 deletions src/app/(tabs)/search/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,14 @@ const styles = StyleSheet.create({
searchContainer: {
backgroundColor: 'transparent',
borderRadius: 10,
Marcoss28 marked this conversation as resolved.
Show resolved Hide resolved
borderColor: 'transparent',
marginBottom: 8,
},
inputContainer: {
backgroundColor: '#D9D9D9',
backgroundColor: 'transparent',
borderRadius: 10,
borderColor: 'grey',
borderWidth: 1,
borderBottomWidth: 1,
},
greyOverlay: {
flex: 1,
Expand Down Expand Up @@ -62,7 +64,7 @@ const styles = StyleSheet.create({
clearAll: {
color: colors.gwnOrange,
fontSize: 12,
fontWeight: '400',
fontWeight: '600',
Marcoss28 marked this conversation as resolved.
Show resolved Hide resolved
},
contentContainerRecents: {
paddingHorizontal: 8,
Expand All @@ -86,6 +88,13 @@ const styles = StyleSheet.create({
fontSize: 12,
textDecorationLine: 'underline',
},
emptySearch: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
textAlign: 'center',
marginTop: '60%',
},
});

export default styles;
8 changes: 6 additions & 2 deletions src/components/RecentSearchCard/RecentSearchCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,14 @@ function RecentSearchCard({
<View style={styles.card}>
<View style={styles.leftItems}>
<Icon name="search1" size={16} color="#A7A5A5" />
<Text style={styles.searchValueText}>{value}</Text>
<Text style={[globalStyles.body1, styles.searchValueText]}>
{value}
</Text>
</View>
<View style={styles.rightItems}>
<Text style={styles.numResultsText}>{numResults} Results</Text>
<Text style={[globalStyles.body1, styles.numResultsText]}>
{numResults} Results
</Text>
<Icon name="caretright" size={12} color="black" />
</View>
</View>
Expand Down
2 changes: 1 addition & 1 deletion src/components/RecentSearchCard/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const styles = StyleSheet.create({
searchValueText: {
color: 'black',
fontWeight: '400',
Marcoss28 marked this conversation as resolved.
Show resolved Hide resolved
fontSize: 14,
fontSize: 10,
justifyContent: 'center',
},
numResultsText: {
Marcoss28 marked this conversation as resolved.
Show resolved Hide resolved
Expand Down
Loading