nat
/
resin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Overhaul the look of view-hashtag.js

This commit is contained in:
Nat 2021-04-10 13:48:17 -03:00
parent d6fb9eb2e1
commit a5694fea67
1 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/pages/discover/view-hashtag.js
View File

@ -2,15 +2,15 @@ import React, { useState } from "react";
import { View, Image, Dimensions, Text } from "react-native"; import { View, Image, Dimensions, Text } from "react-native";
import { ScreenWithFullNavigationJsx } from "src/components/navigation/navigators"; import { ScreenWithFullNavigationJsx } from "src/components/navigation/navigators";
import PagedGridJsx from "src/components/posts/paged-grid"; import PagedGridJsx from "src/components/posts/paged-grid";
import { TouchableWithoutFeedback } from "react-native-gesture-handler"; import { TouchableOpacity } from "react-native-gesture-handler";
const FollowHashtagButtonJsx = ({followed, onPress}) => { const FollowHashtagButtonJsx = ({followed, onPress}) => {
return ( return (
<TouchableWithoutFeedback <TouchableOpacity
style = { style = {
[ [
styles.button, styles.button,
followed ? { backgroundColor: "black" } : {} followed ? { backgroundColor: "#888" } : {}
] ]
} }
onPress = { onPress }> onPress = { onPress }>
@ -18,7 +18,7 @@ const FollowHashtagButtonJsx = ({followed, onPress}) => {
style = { followed ? { color: "white" } : {} }> style = { followed ? { color: "white" } : {} }>
{ followed ? "Followed" : "Follow" } { followed ? "Followed" : "Follow" }
</Text> </Text>
</TouchableWithoutFeedback> </TouchableOpacity>
); );
}; };
@ -43,13 +43,13 @@ const ViewHashtagJsx = ({navigation}) => {
</View> </View>
<View style = { styles.headerText }> <View style = { styles.headerText }>
<Text style = { styles.hashtag}> <Text style = { styles.hashtag}>
#{ state.name } #{ state.name }
</Text> </Text>
<Text> <Text>
<Text style = { styles.strong}>{ state.nPosts }</Text> posts <Text style = { styles.strong}>{ state.nPosts }</Text> posts
</Text> </Text>
<FollowHashtagButtonJsx <FollowHashtagButtonJsx
followed = { state.followed } followed = { state.followed }
onPress = { () => { onPress = { () => {
// Send request to follow hashtag and such... // Send request to follow hashtag and such...
@ -69,34 +69,34 @@ const ViewHashtagJsx = ({navigation}) => {
const screen_width = Dimensions.get("window").width; const screen_width = Dimensions.get("window").width;
const styles = { const styles = {
headerContainer: { headerContainer: {
display: "flex",
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
padding: 15, padding: 15,
borderBottom: "2px solid black"
}, },
image: { image: {
width: screen_width / 3, width: screen_width / 3,
height: screen_width / 3, height: screen_width / 3,
border: "2px solid black", borderWidth: 1,
borderColor: "#888",
borderRadius: "100%", borderRadius: "100%",
marginRight: 20 marginRight: 20,
}, },
hashtag: { hashtag: {
fontWeight: "bold", fontWeight: "bold",
fontSize: 20 fontSize: 20
}, },
button: { button: {
border: "2px solid black", borderWidth: 1,
borderColor: "#888",
borderRadius: 5, borderRadius: 5,
padding: 10, padding: 10,
paddingLeft: 30, paddingLeft: 30,
paddingRight: 30, paddingRight: 30,
marginTop: 10 marginTop: 10,
}, },
strong: { strong: {
fontWeight: "bold" fontWeight: "bold",
}, },
} }
export default ViewHashtagJsx; export default ViewHashtagJsx;