Skip to content

Commit

Permalink
feat: updated styles of Home screen buttons
Browse files Browse the repository at this point in the history 
Signed-off-by: Sakul <sakulbudhathoki977@gmail.com>
  • Loading branch information
@sakul-budhathoki
Sakul authored and sakul-budhathoki committed Nov 24, 2020
1 parent bd88999 commit 569efbd
Show file tree
Hide file tree
Showing 2 changed files with 113 additions and 42 deletions.
4 changes: 2 additions & 2 deletions js/packages/berty-i18n/locale/en/messages.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,8 +91,8 @@
}
},
"home-modal": {
"left-button": "Scan",
"right-button": "Group"
"top-button": "Create new group",
"bottom-button": "Scan contact or group"
}
},
"settings": {
Expand Down
151 changes: 111 additions & 40 deletions js/packages/components/main/HomeModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import {
import { Icon } from '@ui-kitten/components'
import { useNavigation as useNativeNavigation } from '@react-navigation/native'
import { Translation } from 'react-i18next'
import LinearGradient from 'react-native-linear-gradient'
import { PanGestureHandler, State } from 'react-native-gesture-handler'

import { useStyles } from '@berty-tech/styles'

Expand All @@ -22,33 +24,56 @@ const HomeModalButton: React.FC<{
right?: boolean
onPress: any
children?: any
}> = ({ value, bgColor, icon, iconSize = 30, iconPack, right, left, onPress, children = null }) => {
const [{ border, width, height, padding, color, text, margin }] = useStyles()
hasMarginBottom?: boolean
}> = ({
value,
bgColor,
icon,
iconSize = 60,
iconPack,
onPress,
children = null,
hasMarginBottom,
}) => {
const [{ border, padding, color, text, margin }] = useStyles()

return (
<TouchableOpacity
style={[
{
backgroundColor: bgColor,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
width: '100%',
},
width(75),
height(90),
border.radius.medium,
padding.small,
padding.top.medium,
right ? margin.left.small : null,
left ? margin.right.small : null,
hasMarginBottom && margin.bottom.large,
]}
onPress={onPress}
>
{children ? (
children
) : (
<>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<View
style={[
{
backgroundColor: bgColor,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 4,
},
shadowOpacity: 0.4,
shadowRadius: 4,

elevation: 16,
},
border.radius.large,
padding.vertical.large,
padding.horizontal.medium,
margin.right.large,
]}
>
<Icon
name={icon}
pack={iconPack}
Expand All @@ -60,88 +85,134 @@ const HomeModalButton: React.FC<{
<TextNative
numberOfLines={1}
style={[
text.color.white,
text.color.black,
text.bold.medium,
margin.top.tiny,
text.align.center,
text.size.scale(18),
{ fontFamily: 'Open Sans' },
]}
>
{value}
</TextNative>
</>
</View>
)}
</TouchableOpacity>
)
}

export const HomeModal: React.FC<{}> = () => {
const navigation = useNativeNavigation()
const [{ absolute, color, margin, text }, { windowWidth, scaleSize }] = useStyles()
const [{ absolute, color, margin, text, border, padding }] = useStyles()

return (
<Translation>
{(t: any): React.ReactNode => (
<>
<View>
<LinearGradient
style={[
absolute.bottom,
{
alignItems: 'center',
justifyContent: 'center',
height: '100%',
width: '100%',
opacity: 0.6,
},
]}
colors={['white', 'black']}
/>
<TouchableWithoutFeedback style={[StyleSheet.absoluteFill]} onPress={navigation.goBack}>
<View style={{ width: '100%', height: '100%' }} />
</TouchableWithoutFeedback>
<View
style={[
absolute.bottom,
margin.bottom.scale(100),
{ marginLeft: windowWidth / 2 - 85 * scaleSize },
margin.bottom.scale(95),
{
width: '100%',
},
]}
>
<View
style={[
{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center' },
{
backgroundColor: 'white',
flex: 1,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 9,
},
shadowOpacity: 0.48,
shadowRadius: 11.95,
elevation: 18,
},
border.radius.medium,
padding.large,
padding.top.medium,
]}
>
<HomeModalButton
value={t('main.home-modal.left-button')}
bgColor={color.red}
icon='qr'
iconPack='custom'
onPress={() => navigation.navigate('Main.Scan')}
left
/>
<View
style={[
{
backgroundColor: '#EDEFF3',
height: 5,
width: 70,
alignSelf: 'center',
},
border.radius.small,
margin.bottom.medium,
]}
></View>
<HomeModalButton
bgColor='#527FEC'
onPress={() => navigation.navigate('Main.CreateGroupAddMembers')}
right
hasMarginBottom
>
<>
<View style={{ flexDirection: 'row', alignItems: 'center', paddingRight: 7 }}>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<View
style={[
{
backgroundColor: '#527FEC',
},
border.radius.large,
padding.vertical.large,
padding.horizontal.medium,
margin.right.large,
]}
>
<Icon
name='plus'
pack='custom'
fill={color.white}
width={15}
height={15}
style={{ top: -2, left: 3 }}
style={{ top: 30, left: -7 }}
/>
<Icon name='users' pack='custom' fill={color.white} width={30} height={30} />
<Icon name='users' pack='custom' fill={color.white} width={60} height={60} />
</View>
<TextNative
numberOfLines={1}
style={[
text.color.white,
text.color.black,
text.bold.medium,
margin.top.tiny,
text.align.center,
text.size.scale(18),
{ fontFamily: 'Open Sans' },
]}
>
{t('main.home-modal.right-button')}
{t('main.home-modal.top-button')}
</TextNative>
</>
</View>
</HomeModalButton>
<HomeModalButton
value={t('main.home-modal.bottom-button')}
bgColor={color.red}
icon='qr'
iconPack='custom'
onPress={() => navigation.navigate('Main.Scan')}
/>
</View>
</View>
</>
</View>
)}
</Translation>
)
Expand Down

0 comments on commit 569efbd

Please sign in to comment.