Skip to content

Commit

Permalink
Onboarding hifis with colors and fonts
Browse files Browse the repository at this point in the history
  • Loading branch information
akale22 committed Nov 16, 2023
1 parent d2d381a commit 64584e7
Show file tree
Hide file tree
Showing 11 changed files with 415 additions and 212 deletions.
31 changes: 31 additions & 0 deletions client-new/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,22 @@ import {
DMSans_700Bold_Italic,
} from "@expo-google-fonts/dm-sans";

import { Inter_400Regular, Inter_600SemiBold } from "@expo-google-fonts/inter";

export default function App() {
const [fontsLoaded] = useFonts({
"MADE Dillan": require("./assets/fonts/MADE-Dillan.otf"),
// "Roca Heavy": require("./assets/fonts/Roca-Bold.ttf"),
// "Roca Light": require("./assets/fonts/Roca-Light.ttf"),
// "Roca Regular": require("./assets/fonts/Roca-Regular.ttf"),
DMSans_400Regular,
DMSans_400Regular_Italic,
DMSans_500Medium,
DMSans_500Medium_Italic,
DMSans_700Bold,
DMSans_700Bold_Italic,
Inter_400Regular,
Inter_600SemiBold,
});

const theme = extendTheme({
Expand All @@ -41,14 +48,38 @@ export default function App() {
italic: "DMSans_700Bold_Italic",
},
},
// Roca_One: {
// Light: {
// normal: "Roca Light",
// },
// Regular: {
// normal: "Roca Regular",
// },
// Bold: {
// normal: "Roca Heavy",
// },
// },
Inter: {
Regular: {
normal: "Inter_400Regular",
},
Bold: {
normal: "Inter_600SemiBold",
},
},
},
colors: {
deepEvergreen: "#0C362F",
lightGreen: "#43A574",
darkGreen: "#0F4F43",
muteEggplant: "#251B22",
creamyCanvas: "#FFF9EE",
},
fonts: {
madeDillan: "MADE Dillan", // access fontFamily="madeDillan"
dmSans: "DM_Sans", // access fontFamily={"dmSans"} fontWeight={"Regular"} fontStyle={"normal"}
// rocaOne: "Roca_One", // access fontFamily={"rocaOne"} fontWeight={"Regular"} fontStyle={"normal"}
inter: "Inter", // access fontFamily={"inter"} fontWeight={"Regular"} fontStyle={"normal"}
},
});

Expand Down
3 changes: 2 additions & 1 deletion client-new/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
},
"dependencies": {
"@expo-google-fonts/dm-sans": "^0.2.3",
"@expo-google-fonts/inter": "^0.2.3",
"@react-native-community/slider": "^4.4.3",
"@react-navigation/native": "^6.1.8",
"@react-navigation/native-stack": "^6.9.14",
Expand Down Expand Up @@ -43,4 +44,4 @@
"typescript": "^5.1.3"
},
"private": true
}
}
28 changes: 0 additions & 28 deletions client-new/src/components/reusable/CompaniesFooter.tsx

This file was deleted.

2 changes: 1 addition & 1 deletion client-new/src/components/reusable/LetsGo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { Text, View } from "native-base";
export default function LetsGo() {
return (
<>
<Text fontWeight={"bold"} fontSize={"6xl"}>
<Text fontWeight={"bold"} fontSize={"6xl"} color={"darkGreen"}>
Let's go!
</Text>
</>
Expand Down
2 changes: 1 addition & 1 deletion client-new/src/components/reusable/ScreenWideButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export default function ScreenWideButton(props: ScreenWideButtonProps) {
borderColor={props.borderColor}
borderWidth={1}
>
<Text color={props.textColor} fontWeight={"semibold"}>{props.text}</Text>
<Text color={props.textColor} fontWeight={"400"}>{props.text}</Text>
</Button>
</>
);
Expand Down
8 changes: 5 additions & 3 deletions client-new/src/components/reusable/ScreenWideInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default function ScreenWideInput(props: ScreenWideInputProps) {

const inputLeftIcon = props.iconName ? (
<View paddingLeft={w("4%")} paddingRight={w("1%")}>
<Icon name={props.iconName} size={20} color={"black"} />
<Icon name={props.iconName} size={20} color={"#CDCBCB"} />
</View>
) : null;

Expand All @@ -45,14 +45,16 @@ export default function ScreenWideInput(props: ScreenWideInputProps) {
return (
<>
<View>
<FormControl>{props.title}</FormControl>
<FormControl>
<FormControl.Label color={"white"}>{props.title}</FormControl.Label>
</FormControl>
<Input
type={showPassword || !props.password ? "text" : "password"}
width={w("80%")}
height={h("5%")}
paddingX={"auto"}
value={props.value}
backgroundColor={"#FFFFFF"}
backgroundColor={"#CDCBCB"}
onChangeText={(value) => props.onChangeText(value)}
placeholder={props.placeholderText}
InputLeftElement={inputLeftIcon}
Expand Down
22 changes: 0 additions & 22 deletions client-new/src/components/reusable/SquareButton.tsx

This file was deleted.

274 changes: 226 additions & 48 deletions client-new/src/screens/auth/AccessScreen.tsx

Large diffs are not rendered by default.

162 changes: 56 additions & 106 deletions client-new/src/screens/auth/LoginScreen.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
import { KeyboardAvoidingView, View } from "native-base";
import { Alert, StyleSheet } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { View } from "native-base";
import { useAuth } from "../../contexts/AuthContext";
import { useState } from "react";
import ScreenWideInput from "../../components/reusable/ScreenWideInput";
import ScreenWideButton from "../../components/reusable/HalfScreenWideButton";
import SquareButton from "../../components/reusable/SquareButton";
import CompaniesFooter from "../../components/reusable/CompaniesFooter";
import HalfScreenWideButton from "../../components/reusable/HalfScreenWideButton";
import SmallRoundedButton from "../../components/reusable/SmallRoundedButton";
import Footer from "../../components/reusable/Footer";
import {
widthPercentageToDP as w,
heightPercentageToDP as h,
Expand Down Expand Up @@ -45,110 +43,62 @@ export default function LoginScreen({ route, navigation }) {
};

return (
<SafeAreaView>
<KeyboardAvoidingView alignItems="center">
<View bg={"creamyCanvas"} alignItems="center" h={h("100%")} w={w("100%")}>
<View height={h("8%")}></View>
<View
width={w("80%")}
flexDirection="row"
justifyContent="space-between"
justifyItems={"center"}
>
<LegacyWordmark />
<SmallRoundedButton title="Sign Up" onClick={switchToSignUp} />
</View>
<View paddingTop={h("7%")}>
<LetsGo />
</View>
<View alignItems={"center"} paddingTop={h("6.5%")}>
<ScreenWideInput
placeholderText="[email protected]"
title="Email"
iconName="envelope-o"
onChangeText={(value) => setEmail(value)}
value={email}
/>
<View paddingTop={h("3%")} paddingBottom={h("4%")}>
<ScreenWideInput
placeholderText="Must be at least 8 characters long"
title="Password"
iconName="lock"
password={true}
onChangeText={(value) => setPassword(value)}
value={password}
/>
</View>
<View
width={w("80%")}
flexDirection="row"
justifyContent="space-between"
justifyItems={"center"}
alignItems={"center"}
flexDirection={"row"}
justifyContent={"space-between"}
>
<LegacyWordmark />
<SquareButton title="SIGN UP" onClick={switchToSignUp} />
</View>
<View paddingTop={h("7%")}>
<LetsGo />
</View>
<View alignItems={"center"} paddingTop={h("6.5%")}>
<ScreenWideInput
placeholderText="[email protected]"
title="Email"
iconName="envelope-o"
onChangeText={(value) => setEmail(value)}
value={email}
<HalfScreenWideButton
text="Login with SSO"
textColor="#8F8F8F"
backgroundColor="#FFFFFF"
borderColor="#8F8F8F"
/>
<HalfScreenWideButton
text="Login to Legacy"
textColor="#FFFFFF"
backgroundColor="#8F8F8F"
borderColor="#8F8F8F"
onClick={signIn}
/>
<View paddingTop={h("3%")} paddingBottom={h("4%")}>
<ScreenWideInput
placeholderText="Must be at least 8 characters long"
title="Password"
iconName="lock"
password={true}
onChangeText={(value) => setPassword(value)}
value={password}
/>
</View>
<View
width={w("80%")}
alignItems={"center"}
flexDirection={"row"}
justifyContent={"space-between"}
>
<ScreenWideButton
text="Login with SSO"
textColor="#8F8F8F"
backgroundColor="#FFFFFF"
borderColor="#8F8F8F"
/>
<ScreenWideButton
text="Login to Legacy"
textColor="#FFFFFF"
backgroundColor="#8F8F8F"
borderColor="#8F8F8F"
onClick={signIn}
/>
</View>
<View paddingTop={h("4%")}>
<CompaniesFooter />
</View>
</View>
</KeyboardAvoidingView>
</SafeAreaView>
<View paddingTop={h("4%")}>
<Footer />
</View>
</View>
</View>
);
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
inputContainer: {
width: "80%",
},
input: {
backgroundColor: "white",
paddingHorizontal: 15,
paddingVertical: 10,
borderRadius: 10,
marginTop: 5,
},
buttonContainer: {
width: "60%",
justifyContent: "center",
alignItems: "center",
marginTop: 40,
},
button: {
backgroundColor: "#0782F9",
width: "100%",
padding: 15,
borderRadius: 10,
alignItems: "center",
},
buttonOutline: {
backgroundColor: "white",
marginTop: 5,
borderColor: "#0782F9",
borderWidth: 2,
},
buttonText: {
color: "white",
fontWeight: "700",
fontSize: 16,
},
buttonOutlineText: {
color: "#0782F9",
fontWeight: "700",
fontSize: 16,
},
});
4 changes: 2 additions & 2 deletions client-new/src/screens/auth/SignUpScreen.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ import { useAuth } from "../../contexts/AuthContext";
import { useState } from "react";
import ScreenWideInput from "../../components/reusable/ScreenWideInput";
import ScreenWideButton from "../../components/reusable/HalfScreenWideButton";
import SquareButton from "../../components/reusable/SquareButton";
import CompaniesFooter from "../../components/reusable/CompaniesFooter";
import SquareButton from "../../components/reusable/SmallRoundedButton";
import CompaniesFooter from "../../components/reusable/Footer";
import {
widthPercentageToDP as w,
heightPercentageToDP as h,
Expand Down
Loading

0 comments on commit 64584e7

Please sign in to comment.