Skip to content

Commit

Permalink
feat(screen): 💄 MainScreen toolbar + rn-sm
Browse files Browse the repository at this point in the history 
#99
  • Loading branch information
@zheleznov163
zheleznov163 committed Sep 14, 2022
1 parent bd4ff28 commit c1507e7
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 78 deletions.
16 changes: 7 additions & 9 deletions screens/MainScreen/MainScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import { openClaim } from "modals/validator"
import { formatNumber } from "utils/numbers"
import { openSend } from "modals/wallets"
import { s, vs } from "react-native-size-matters"
import { HORIZONTAL_WRAPPER } from "utils/constants"

type ValueTabs = "Coins" | "Fan Tokens"

Expand Down Expand Up @@ -222,7 +223,6 @@ export default observer<Props>(function MainScreen({ navigation }) {
const styles = StyleSheet.create({
container: {
flex: 1,
// flexShrink: 1,
backgroundColor: COLOR.Dark3,
},

Expand Down Expand Up @@ -271,7 +271,7 @@ const styles = StyleSheet.create({
},

reward: {
backgroundColor: "red",
// backgroundColor: "red",
},
reward_title: {
fontFamily: "CircularStd",
Expand All @@ -281,7 +281,6 @@ const styles = StyleSheet.create({
lineHeight: s(20),
color: COLOR.RoyalBlue2,
marginBottom: vs(10),
backgroundColor: "orange",
},
reward_value: {
fontFamily: "CircularStd",
Expand All @@ -297,18 +296,17 @@ const styles = StyleSheet.create({
},

toolbar_short: {
marginHorizontal: 24,
marginHorizontal: s(24),
marginBottom: vs(40),
},
toolbar_full: {
padding: 24,
...StyleSheet.absoluteFillObject,
zIndex: 10,
paddingHorizontal: HORIZONTAL_WRAPPER,
flex: 1,
},

tabs: {
paddingHorizontal: 30,
marginBottom: 18,
paddingHorizontal: HORIZONTAL_WRAPPER,
marginBottom: vs(18),
},
coins: {
flex: 1,
Expand Down
147 changes: 78 additions & 69 deletions screens/MainScreen/components/ToolbarFull.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import { ToolbarAction } from "components/organisms"
import { useTheme } from "hooks"
import { observer } from "mobx-react-lite"
import { COLOR } from "utils"
import { vs } from "react-native-size-matters"
import { BottomSheetView } from "@gorhom/bottom-sheet"

type Props = {
onPressSend?(): void
Expand Down Expand Up @@ -36,79 +38,85 @@ export default observer(function ToolbarFull({
}: Props) {
const theme = useTheme()
return (
<View style={style}>
<BottomSheetView style={style}>
<Text style={[styles.title, theme.text.primary]}>Quick actions</Text>
<View style={styles.row}>
<ToolbarAction
onPress={onPressSend}
title="Send"
mode="gradient"
Icon={<Icon2 size={18} stroke={COLOR.White} name="arrow_up" />}
size={65}
/>
<ToolbarAction
backgroundStyle={styles.actionBackground}
title="Receive"
onPress={onPressReceive}
Icon={<Icon2 size={18} stroke={COLOR.White} name="arrow_down" />}
size={65}
/>
<ToolbarAction
backgroundStyle={styles.actionBackground}
title="Inquire"
Icon={<Icon2 size={18} stroke={COLOR.White} name="inquire" />}
size={65}
/>
<ToolbarAction
onPress={onPressScan}
backgroundStyle={styles.actionBackground}
title="Scan"
Icon={<Icon2 size={18} stroke={COLOR.White} name="scan" />}
size={65}
/>
</View>
<View style={styles.row}>
<ToolbarAction
onPress={onPressClaim}
backgroundStyle={styles.actionBackground}
title="Claim"
Icon={<Icon2 size={18} stroke={COLOR.White} name="claim" />}
size={65}
/>
<ToolbarAction
onPress={onPressStake}
backgroundStyle={styles.actionBackground}
title="Stake"
Icon={<Icon2 size={18} stroke={COLOR.White} name="stake" />}
size={65}
/>
<ToolbarAction
onPress={onPressUnstake}
backgroundStyle={styles.actionBackground}
title="Unstake"
Icon={<Icon2 size={18} stroke={COLOR.White} name="unstake" />}
size={65}
/>
<ToolbarAction
onPress={onPressRestake}
backgroundStyle={styles.actionBackground}
title="Restake"
Icon={<Icon2 size={18} stroke={COLOR.White} name="restake" />}
size={65}
/>
</View>
<View style={styles.row}>
<ToolbarAction backgroundStyle={styles.actionBackground} title="Issue" size={65} />
<ToolbarAction backgroundStyle={styles.actionBackground} title="Mint" size={65} />
<ToolbarAction backgroundStyle={styles.actionBackground} title="Burn" size={65} />
<View style={styles.container}>
<View style={styles.row}>
<ToolbarAction
onPress={onPressSend}
title="Send"
mode="gradient"
Icon={<Icon2 size={18} stroke={COLOR.White} name="arrow_up" />}
size={62}
/>
<ToolbarAction
backgroundStyle={styles.actionBackground}
title="Receive"
onPress={onPressReceive}
Icon={<Icon2 size={18} stroke={COLOR.White} name="arrow_down" />}
size={62}
/>
<ToolbarAction
backgroundStyle={styles.actionBackground}
title="Inquire"
Icon={<Icon2 size={18} stroke={COLOR.White} name="inquire" />}
size={62}
/>
<ToolbarAction
onPress={onPressScan}
backgroundStyle={styles.actionBackground}
title="Scan"
Icon={<Icon2 size={18} stroke={COLOR.White} name="scan" />}
size={62}
/>
</View>
<View style={styles.row}>
<ToolbarAction
onPress={onPressClaim}
backgroundStyle={styles.actionBackground}
title="Claim"
Icon={<Icon2 size={18} stroke={COLOR.White} name="claim" />}
size={62}
/>
<ToolbarAction
onPress={onPressStake}
backgroundStyle={styles.actionBackground}
title="Stake"
Icon={<Icon2 size={18} stroke={COLOR.White} name="stake" />}
size={62}
/>
<ToolbarAction
onPress={onPressUnstake}
backgroundStyle={styles.actionBackground}
title="Unstake"
Icon={<Icon2 size={18} stroke={COLOR.White} name="unstake" />}
size={62}
/>
<ToolbarAction
onPress={onPressRestake}
backgroundStyle={styles.actionBackground}
title="Restake"
Icon={<Icon2 size={18} stroke={COLOR.White} name="restake" />}
size={62}
/>
</View>
<View style={styles.row}>
<ToolbarAction backgroundStyle={styles.actionBackground} title="Issue" size={65} />
<ToolbarAction backgroundStyle={styles.actionBackground} title="Mint" size={65} />
<ToolbarAction backgroundStyle={styles.actionBackground} title="Burn" size={65} />

<ToolbarAction nullContent size={65} />
<ToolbarAction nullContent size={65} />
</View>
</View>
</View>
</BottomSheetView>
)
})

const styles = StyleSheet.create({
container: {
justifyContent: "space-evenly",
flex: 1,
},
contentContainer: {
flex: 1,
alignItems: "center",
Expand All @@ -117,13 +125,14 @@ const styles = StyleSheet.create({
fontFamily: "CircularStd",
fontStyle: "normal",
fontWeight: "500",
fontSize: 18,
lineHeight: 23,
fontSize: vs(18),
lineHeight: vs(23),

marginTop: vs(10),
},
row: {
flexDirection: "row",
justifyContent: "space-between",
marginTop: 38,
},
actionBackground: {
backgroundColor: COLOR.Dark3,
Expand Down

0 comments on commit c1507e7

Please sign in to comment.