Skip to content

Commit d573c05

Browse files
coolguyzonecoolguyzone
committed
Redesign homescreen to approximate figma
1 parent 75833c2 commit d573c05

File tree

11 files changed

+191
-37
lines changed

11 files changed

+191
-37
lines changed

‎App.js

Lines changed: 39 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,7 @@ import MixersTab from "./Screens/IngredientsTabs/MixersTab";
1313
import ProduceTab from "./Screens/IngredientsTabs/ProduceTab";
1414
import { Ionicons } from "@expo/vector-icons";
1515
import store from "./src/app/store";
16-
import { Provider } from 'react-redux';
17-
16+
import { Provider } from "react-redux";
1817

1918
const Drawer = createDrawerNavigator();
2019
const BottomTab = createBottomTabNavigator();
@@ -27,35 +26,57 @@ function IngredientsTabNavigator() {
2726
component={LightBoozeTab}
2827
options={{
2928
tabBarIcon: ({ color, size }) => (
30-
<Ionicons name="wine" color={'black'} size={size} />
29+
<Ionicons name="wine" color={"black"} size={size} />
3130
),
31+
tabBarStyle: { backgroundColor: "#717171"},
32+
tabBarLabelStyle: { color: 'white'}
3233
}}
3334
/>
34-
<BottomTab.Screen name="Dark Booze" component={DarkBoozeTab} options={{
35+
<BottomTab.Screen
36+
name="Dark Booze"
37+
component={DarkBoozeTab}
38+
options={{
3539
tabBarIcon: ({ size }) => (
36-
<Ionicons name="wine" color={'brown'} size={size} />
40+
<Ionicons name="wine" color={"brown"} size={size} />
3741
),
38-
}} />
39-
<BottomTab.Screen name="Fruity Booze" component={FruityBoozeTab} options={{
42+
}}
43+
/>
44+
<BottomTab.Screen
45+
name="Fruity Booze"
46+
component={FruityBoozeTab}
47+
options={{
4048
tabBarIcon: ({ size }) => (
41-
<Ionicons name="wine" color={'red'} size={size} />
49+
<Ionicons name="wine" color={"red"} size={size} />
4250
),
43-
}} />
44-
<BottomTab.Screen name="Beer and Wine" component={BeerAndWineBoozeTab} options={{
51+
}}
52+
/>
53+
<BottomTab.Screen
54+
name="Beer and Wine"
55+
component={BeerAndWineBoozeTab}
56+
options={{
4557
tabBarIcon: ({ size }) => (
46-
<Ionicons name="wine" color={'goldenrod'} size={size} />
58+
<Ionicons name="wine" color={"goldenrod"} size={size} />
4759
),
48-
}} />
49-
<BottomTab.Screen name="Mixers" component={MixersTab} options={{
60+
}}
61+
/>
62+
<BottomTab.Screen
63+
name="Mixers"
64+
component={MixersTab}
65+
options={{
5066
tabBarIcon: ({ size }) => (
51-
<Ionicons name="water" color={'blue'} size={size} />
67+
<Ionicons name="water" color={"blue"} size={size} />
5268
),
53-
}} />
54-
<BottomTab.Screen name="Produce" component={ProduceTab} options={{
69+
}}
70+
/>
71+
<BottomTab.Screen
72+
name="Produce"
73+
component={ProduceTab}
74+
options={{
5575
tabBarIcon: ({ size }) => (
56-
<Ionicons name="nutrition" color={'orange'} size={size} />
76+
<Ionicons name="nutrition" color={"orange"} size={size} />
5777
),
58-
}} />
78+
}}
79+
/>
5980
</BottomTab.Navigator>
6081
);
6182
}

‎Screens/HomeScreen.js

Lines changed: 73 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,78 @@
1-
import { Text } from "react-native";
1+
import { Button, Pressable, StyleSheet, Text, View } from "react-native";
2+
import * as Font from "expo-font";
3+
import { useEffect, useState } from "react";
24

35
function HomeScreen() {
4-
return <Text style={{ marginTop: 20 }}>Home Screen</Text>;
6+
const [fontLoaded, setFontLoaded] = useState(false);
7+
8+
useEffect(() => {
9+
async function loadFont() {
10+
await Font.loadAsync({
11+
"custom-font": require("./../assets/fonts/ProtestRiot-Regular.ttf"),
12+
});
13+
setFontLoaded(true);
14+
}
15+
16+
loadFont();
17+
}, []);
18+
19+
if (!fontLoaded) {
20+
return <Text>Loading...</Text>;
21+
}
22+
23+
return (
24+
<View style={styles.centeredView}>
25+
<Text style={styles.title}>Lazy Bartender</Text>
26+
<View style={styles.welcomeTextWrapper}>
27+
<View style={styles.centeredView}>
28+
<Text style={styles.welcomeText}>
29+
Making the Best of what you got
30+
</Text>
31+
</View>
32+
</View>
33+
<Pressable style={styles.startButton}>
34+
<Text style={styles.startButtonText}>Let's get started!</Text>
35+
</Pressable>
36+
</View>
37+
);
538
}
639

740
export default HomeScreen;
41+
42+
const styles = StyleSheet.create({
43+
centeredView: {
44+
flex: 1,
45+
justifyContent: "center",
46+
alignItems: "center",
47+
marginTop: -80,
48+
},
49+
title: {
50+
fontFamily: "custom-font",
51+
marginBottom: 50,
52+
fontSize: 34,
53+
marginTop: 50,
54+
55+
},
56+
welcomeTextWrapper: {
57+
backgroundColor: "grey",
58+
height: 387,
59+
width: 318,
60+
borderRadius: 400,
61+
paddingHorizontal: 30,
62+
paddingTop: 70,
63+
},
64+
welcomeText: {
65+
fontSize: 34,
66+
color: "black",
67+
fontFamily: "custom-font",
68+
},
69+
startButton: {
70+
backgroundColor:'grey',
71+
marginTop: 70,
72+
paddingVertical: 10,
73+
paddingHorizontal: 40,
74+
},
75+
startButtonText: {
76+
fontSize: 24,
77+
}
78+
});

‎Screens/IngredientsTabs/LightBoozeTab.js

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ function LightBoozeTab() {
1515
// dispatch(inventory.addIngredient('bourbon'))
1616

1717
return (
18-
<ScrollView>
19-
<Text style={{ marginTop: 20 }}>Light Booze</Text>
18+
<ScrollView style = {styles.scrollView}>
19+
<Text style={styles.subHeaderText}>Light Booze</Text>
2020
<View style={styles.IngredientContainer}>
2121
{Constants.clearBooze.map((booze) => {
2222
return (
@@ -42,8 +42,21 @@ function LightBoozeTab() {
4242
export default LightBoozeTab;
4343

4444
const styles = StyleSheet.create({
45+
scrollView: {
46+
backgroundColor: '#717171',
47+
},
4548
IngredientContainer: {
49+
backgroundColor: '#717171',
4650
alignContent: "space-around",
4751
padding: 20,
52+
borderTopWidth: 2,
53+
borderTopColor: 'white',
54+
marginTop: 6,
4855
},
56+
subHeaderText: {
57+
marginTop: 20,
58+
color: 'white',
59+
fontSize: 20,
60+
backgroundColor: '#717171',
61+
}
4962
});

‎Screens/RecipesScreen.js

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,6 @@ function RecipesScreen() {
3232
setModalVisible={setModalVisible}
3333
/>
3434

35-
{ingredients.map((ingredient) => (
36-
<Text>{ingredient}</Text>
37-
))}
38-
3935
{drinkList.map((drink) => {
4036
let drinkIngredients = drink.ingredients;
4137
for (let i = 0; i < drinkIngredients.length; i++) {
@@ -49,7 +45,7 @@ function RecipesScreen() {
4945
onPress={() =>
5046
showDrinkModal(
5147
drink.name,
52-
drink.ingredients[0].toString(),
48+
drink.ingredients.join(", "),
5349
drink.instructions
5450
)
5551
}

‎app.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
{
22
"expo": {
3+
"plugins": [
4+
[
5+
"expo-font",
6+
{
7+
"fonts": ["./assets/fonts/ProtestRiot-Regular.ttf"]
8+
}
9+
]
10+
],
311
"name": "Lazy-Bartender-Native",
412
"slug": "Lazy-Bartender-Native",
513
"version": "1.0.0",

‎assets/fonts/ProtestRiot-Regular.ttf

106 KB
Binary file not shown.

‎components/IngredientCheckBox.js

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useState } from "react";
22
import CheckBox from "react-native-check-box";
33
import { useSelector, useDispatch } from "react-redux";
44
import { addIngredient, removeIngredient } from "../util/slices/inventorySlice";
5+
import { StyleSheet, Text } from "react-native";
56

67
function IngredientCheckBox(props) {
78
const ingredients = useSelector((state) => state.inventory);
@@ -10,6 +11,12 @@ function IngredientCheckBox(props) {
1011
const [CheckBoxState, setCheckBoxState] = useState(false);
1112
return (
1213
<CheckBox
14+
tintColor={"#FFFFFF"}
15+
onTintColor={"#FFFFFF"}
16+
onFillColor={"#FFFFFF"}
17+
onCheckColor={"#FFFFFF"}
18+
tintColors={{ true: '#FFFFFF' }}
19+
style={styles.checkbox}
1320
onClick={() =>
1421
// CheckBoxState === true
1522
// ? setCheckBoxState(false)
@@ -25,9 +32,15 @@ function IngredientCheckBox(props) {
2532
}
2633
}
2734
isChecked={CheckBoxState}
28-
leftText={props.children}
35+
leftText={<Text style={{ color: "white" }}>{props.children}</Text>}
2936
/>
3037
);
3138
}
3239

3340
export default IngredientCheckBox;
41+
42+
const styles = StyleSheet.create({
43+
checkbox: {
44+
borderColor: "#FFFFFF",
45+
},
46+
});

‎components/recipe-components/RecipeModal.js

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,13 @@ function RecipeModal({ recipeTitle, recipeIngredients, recipeInstructions, modal
77
<Modal animationType="slide" transparent={true} visible={modalVisible}>
88
<View style={styles.centeredView}>
99
<View style={styles.modalView}>
10-
<Text style={styles.modalText}>{recipeTitle}</Text>
11-
<Text>Ingredients: {recipeIngredients}</Text>
12-
<Text>Instructions: {recipeInstructions}</Text>
13-
<Pressable onPress={() => setModalVisible(!modalVisible)}>
14-
<Text>Here is a pressable</Text>
10+
<Pressable onPress={() => setModalVisible(!modalVisible)}>
11+
<Text style={styles.xOut}>X</Text>
1512
</Pressable>
13+
<Text style={styles.modalTitle}>{recipeTitle}</Text>
14+
<Text style={styles.modalIngredients}>Ingredients: {recipeIngredients}</Text>
15+
<Text>Instructions: {recipeInstructions}</Text>
16+
1617
</View>
1718
</View>
1819
</Modal>
@@ -44,8 +45,19 @@ const styles = StyleSheet.create({
4445
shadowRadius: 4,
4546
elevation: 5,
4647
},
47-
modalText: {
48+
modalTitle: {
4849
color: "green",
4950
fontSize: 24,
51+
marginVertical: 24,
52+
},
53+
modalIngredients: {
54+
marginBottom: 20,
5055
},
56+
xOut: {
57+
color: 'red',
58+
marginLeft: 270,
59+
marginTop: -20,
60+
fontSize: 20,
61+
fontWeight: 'bold',
62+
}
5163
});

‎package-lock.json

Lines changed: 15 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"@react-navigation/drawer": "^6.6.6",
1515
"@reduxjs/toolkit": "^2.1.0",
1616
"expo": "~49.0.15",
17+
"expo-font": "^11.10.2",
1718
"expo-status-bar": "~1.6.0",
1819
"react": "18.2.0",
1920
"react-native": "0.72.6",

‎react-native.config.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
project: {
3+
ios: {},
4+
android: {},
5+
},
6+
assets: ['./assets/fonts'],
7+
};

0 commit comments

Comments
 (0)