Overhaul the look of view-hashtag.js
This commit is contained in:
parent
d6fb9eb2e1
commit
a5694fea67
|
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -69,33 +69,33 @@ 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",
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue