Style edits plus added shadow to the bottom tab bar

This commit is contained in:
Erick Clark 2020-01-18 12:42:13 -06:00
parent 57f146a790
commit d0654b55a2
5 changed files with 33 additions and 10 deletions

Binary file not shown.

View file

@ -17,10 +17,10 @@ export const Thumbnail = ({ thumb }: { thumb: ?string }) => (
width: theme.itemTile.thumbnailSize, width: theme.itemTile.thumbnailSize,
borderRadius: Math.round(theme.itemTile.thumbnailSize / 2), borderRadius: Math.round(theme.itemTile.thumbnailSize / 2),
backgroundColor: theme.itemTile.thumbnailColor, backgroundColor: theme.itemTile.thumbnailColor,
marginLeft: 15, marginLeft: 16,
marginRight: 15, marginRight: 16,
marginTop: 5, marginTop: 4,
marginBottom: 5, marginBottom: 4,
}} }}
> >
{!!thumb && ( {!!thumb && (

View file

@ -89,7 +89,18 @@ class TopToolbar extends Component {
const searchPlaceholder = /\/food/.test(route) ? 'Search Food...' : 'Search Places...'; const searchPlaceholder = /\/food/.test(route) ? 'Search Food...' : 'Search Places...';
return ( return (
<View style={{ backgroundColor: palette.primaryColor }}> <View style={{
backgroundColor: palette.primaryColor,
shadowRadius: 2,
shadowOpacity: 0.24,
shadowColor: 'black',
shadowOffset: {
height: 2,
width: 0,
},
elevation: 2,
}}
>
<SafeAreaView> <SafeAreaView>
{!showSearch && ( {!showSearch && (
<Toolbar <Toolbar

View file

@ -14,6 +14,7 @@ export const palette = {
facebook: '#3B5998', facebook: '#3B5998',
google: '#DB4437', google: '#DB4437',
errorColor: '#B92D00', errorColor: '#B92D00',
atcStdGrey: '#757575',
}; };
export default { export default {
@ -71,14 +72,14 @@ export default {
width: 150, width: 150,
}, },
itemTile: { itemTile: {
thumbnailSize: 50, thumbnailSize: 48,
thumbnailColor: COLOR.grey400, thumbnailColor: COLOR.grey400,
itemNameStyle: { itemNameStyle: {
fontSize: 16, fontSize: 16,
color: COLOR.black, color: COLOR.black,
}, },
itemPlaceStyle: { itemPlaceStyle: {
color: COLOR.grey700, color: 'palette.atcStdGrey',
paddingTop: 1, paddingTop: 1,
}, },
availableCountStyle: { availableCountStyle: {
@ -136,18 +137,29 @@ export default {
}, },
bottomNavigation: { bottomNavigation: {
container: { container: {
height: 56,
paddingTop: 8,
justifyContent: 'space-around', justifyContent: 'space-around',
alignItems: 'baseline', alignItems: 'baseline',
borderWidth: 0, borderWidth: 0,
backgroundColor : "#0000",
shadowRadius: 2,
shadowOpacity: 0.24,
shadowColor: 'black',
shadowOffset: { shadowOffset: {
height: -2, height: 2,
width: 0, width: 0,
}, },
shadowRadius: 2, elevation: 2,
shadowColor: 'black',
}, },
}, },
bottomNavigationAction: { bottomNavigationAction: {
icon: {
color: palette.atcStdGrey,
},
label: {
color: palette.atcStdGrey,
},
iconActive: { iconActive: {
color: palette.accentColor, color: palette.accentColor,
}, },