changed font

This commit is contained in:
ivic00
2024-10-14 20:29:00 +02:00
parent a8717a9a42
commit c6db12a9b6
13 changed files with 841 additions and 631 deletions

View File

@ -62,7 +62,8 @@
"color": "#ffffff", "color": "#ffffff",
"defaultChannel": "default" "defaultChannel": "default"
} }
] ],
"expo-font"
], ],
"experiments": { "experiments": {
"typedRoutes": true "typedRoutes": true

View File

@ -43,7 +43,7 @@ export default function TabLayout() {
return ( return (
<DrawerContentScrollView {...props} style={{ height: "100%" }}> <DrawerContentScrollView {...props} style={{ height: "100%" }}>
<View centerH centerV margin-30> <View centerH centerV margin-30>
<Text text50>Welcome to Cally</Text> <Text text40>Welcome to Cally</Text>
</View> </View>
<View <View
style={{ style={{
@ -101,6 +101,7 @@ export default function TabLayout() {
<Button <Button
onPress={() => props.navigation.navigate("settings")} onPress={() => props.navigation.navigate("settings")}
label={"Manage Settings"} label={"Manage Settings"}
labelStyle={{fontFamily: "Manrope_500Medium"}}
iconSource={() => ( iconSource={() => (
<View <View
backgroundColor="#ededed" backgroundColor="#ededed"
@ -128,13 +129,14 @@ export default function TabLayout() {
marginH-30 marginH-30
paddingV-15 paddingV-15
style={{ style={{
marginTop: "47%", marginTop: "42%",
backgroundColor: "transparent", backgroundColor: "transparent",
borderWidth: 2, borderWidth: 1.3,
borderColor: "#fd1775", borderColor: "#fd1775",
}} }}
label="Sign out of Cally" label="Sign out of Cally"
color="#fd1775" color="#fd1775"
labelStyle={{fontFamily: 'Manrope_700Bold'}}
onPress={() => signOut()} onPress={() => signOut()}
/> />
</DrawerContentScrollView> </DrawerContentScrollView>

View File

@ -1,44 +1,198 @@
import {DefaultTheme, ThemeProvider} from '@react-navigation/native'; import React, { useEffect } from "react";
import {useFonts} from 'expo-font'; import { DefaultTheme, ThemeProvider } from "@react-navigation/native";
import {Stack} from 'expo-router'; import {
import * as SplashScreen from 'expo-splash-screen'; useFonts,
import {useEffect} from 'react'; Manrope_200ExtraLight,
import 'react-native-reanimated'; Manrope_300Light,
import {AuthContextProvider} from "@/contexts/AuthContext"; Manrope_400Regular,
import {QueryClient, QueryClientProvider} from "react-query"; Manrope_500Medium,
import {Toast} from "react-native-ui-lib"; Manrope_600SemiBold,
Manrope_700Bold,
Manrope_800ExtraBold,
} from "@expo-google-fonts/manrope";
import { Stack } from "expo-router";
import * as SplashScreen from "expo-splash-screen";
import "react-native-reanimated";
import { AuthContextProvider } from "@/contexts/AuthContext";
import { QueryClient, QueryClientProvider } from "react-query";
import {
ThemeManager,
Typography,
Toast,
TextProps,
} from "react-native-ui-lib";
SplashScreen.preventAutoHideAsync(); SplashScreen.preventAutoHideAsync();
const queryClient = new QueryClient(); const queryClient = new QueryClient();
export default function RootLayout() { type TextStyleBase =
const [loaded] = useFonts({ | "text10"
SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'), | "text20"
}); | "text30"
| "text40"
| "text50"
| "text60"
| "text70"
| "text80"
| "text90"
| "text100";
type TextStyleModifier = "R" | "M" | "BO" | "H" | "BL" | "L";
type TextStyle = TextStyleBase | `${TextStyleBase}${TextStyleModifier}`;
useEffect(() => { type TextStyleProps = {
if (loaded) { [K in TextStyle]?: boolean;
SplashScreen.hideAsync(); };
}
}, [loaded]);
if (!loaded) { type ExtendedTextProps = TextProps & TextStyleProps;
return null;
}
return ( interface FontStyle {
<QueryClientProvider client={queryClient}> fontFamily: string;
<AuthContextProvider> fontSize: number;
<ThemeProvider value={DefaultTheme}> }
<Stack>
<Stack.Screen name="(auth)" options={{headerShown: false}}/> const getManropeFontStyle = (style: TextStyle): FontStyle => {
<Stack.Screen name="(unauth)" options={{headerShown: false}}/> let fontFamily: string;
<Stack.Screen name="+not-found"/> let fontSize: number;
</Stack>
<Toast/> if (style.includes("L") || style.includes("BL"))
</ThemeProvider> fontFamily = "Manrope_300Light";
</AuthContextProvider> else if (style.includes("R")) fontFamily = "Manrope_400Regular";
</QueryClientProvider> else if (style.includes("M")) fontFamily = "Manrope_500Medium";
); else if (style.includes("BO") || style.includes("H"))
fontFamily = "Manrope_700Bold";
else {
const baseStyle = style.slice(0, 6) as TextStyleBase;
switch (baseStyle) {
case "text10":
case "text20":
fontFamily = "Manrope_700Bold";
break;
case "text30":
case "text40":
fontFamily = "Manrope_600SemiBold";
break;
case "text50":
fontFamily = "Manrope_400Regular";
break;
default:
fontFamily = "Manrope_300Light";
}
}
switch (style.slice(0, 6) as TextStyleBase) {
case "text10":
fontSize = 64;
break;
case "text20":
fontSize = 50;
break;
case "text30":
fontSize = 36;
break;
case "text40":
fontSize = 28;
break;
case "text50":
fontSize = 24;
break;
case "text60":
fontSize = 20;
break;
case "text70":
fontSize = 16;
break;
case "text80":
fontSize = 14;
break;
case "text90":
fontSize = 12;
break;
case "text100":
fontSize = 10;
break;
default:
fontSize = 16;
}
return { fontFamily, fontSize };
};
export default function RootLayout() {
const [loaded] = useFonts({
Manrope_200ExtraLight,
Manrope_300Light,
Manrope_400Regular,
Manrope_500Medium,
Manrope_600SemiBold,
Manrope_700Bold,
Manrope_800ExtraBold,
});
useEffect(() => {
if (loaded) {
SplashScreen.hideAsync();
const typographies: Partial<Record<TextStyle, FontStyle>> = {};
(
[
"text10",
"text20",
"text30",
"text40",
"text50",
"text60",
"text70",
"text80",
"text90",
"text100",
] as const
).forEach((baseStyle) => {
typographies[baseStyle] = getManropeFontStyle(baseStyle);
(["R", "M", "BO", "H", "BL", "L"] as const).forEach((modifier) => {
const style = `${baseStyle}${modifier}` as TextStyle;
typographies[style] = getManropeFontStyle(style);
});
});
Typography.loadTypographies(typographies);
ThemeManager.setComponentTheme(
"Text",
(props: ExtendedTextProps, context: unknown) => {
const textStyle = (
Object.keys(props) as Array<keyof ExtendedTextProps>
).find((key) => typographies[key as TextStyle]) as
| TextStyle
| undefined;
return {
style: [
Typography.text50,
textStyle ? typographies[textStyle] : undefined,
],
};
}
);
}
}, [loaded]);
if (!loaded) {
return null;
}
return (
<QueryClientProvider client={queryClient}>
<AuthContextProvider>
<ThemeProvider value={DefaultTheme}>
<Stack>
<Stack.Screen name="(auth)" options={{ headerShown: false }} />
<Stack.Screen name="(unauth)" options={{ headerShown: false }} />
<Stack.Screen name="+not-found" />
</Stack>
<Toast />
</ThemeProvider>
</AuthContextProvider>
</QueryClientProvider>
);
} }

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 67 KiB

View File

@ -54,21 +54,20 @@ const BrainDumpPage = () => {
height: 40, height: 40,
borderRadius: 30, borderRadius: 30,
backgroundColor: "#fd1775", backgroundColor: "#fd1775",
alignItems: "center",
justifyContent: "center",
}} }}
centerV
color="white" color="white"
enableShadow enableShadow
iconSource={() => (
<MaterialIcons name="add" size={22} color={"white"} />
)}
onPress={() => { onPress={() => {
setIsAddVisible(true); setIsAddVisible(true);
}} }}
label="New" >
text60R <View row centerV centerH>
/> <MaterialIcons name="add" size={22} color={"white"} />
<Text white tex30 style={{ fontSize: 17 }}>
New
</Text>
</View>
</Button>
<AddBrainDump <AddBrainDump
addBrainDumpProps={{ addBrainDumpProps={{
isVisible: isAddVisible, isVisible: isAddVisible,

View File

@ -16,7 +16,7 @@ const BrainDumpItem = (props: { item: IBrainDump }) => {
padding-15 padding-15
style={{ borderRadius: 20, elevation: 2 }} style={{ borderRadius: 20, elevation: 2 }}
> >
<Text text70BL marginB-8> <Text text70B style={{fontSize: 17}} marginB-8>
{props.item.title} {props.item.title}
</Text> </Text>
<Text text70>{props.item.description}</Text> <Text text70>{props.item.description}</Text>

View File

@ -20,7 +20,6 @@ import AddChoreDialog from "../todos/AddChoreDialog";
import { ToDosContextProvider } from "@/contexts/ToDosContext"; import { ToDosContextProvider } from "@/contexts/ToDosContext";
import UploadImageDialog from "./UploadImageDialog"; import UploadImageDialog from "./UploadImageDialog";
export const AddEventDialog = () => { export const AddEventDialog = () => {
const [show, setShow] = useState(false); const [show, setShow] = useState(false);
const [showManualInputModal, setShowManualInputModal] = useState(false); const [showManualInputModal, setShowManualInputModal] = useState(false);
@ -37,127 +36,137 @@ export const AddEventDialog = () => {
const handleScanImageDialog = () => { const handleScanImageDialog = () => {
setShow(false); setShow(false);
setTimeout(() => { setTimeout(() => {
setShowUploadDialog(true); setShowUploadDialog(true);
}, 100); }, 100);
} };
return ( return (
<ToDosContextProvider> <ToDosContextProvider>
<> <>
<Button <Button
style={{
position: "absolute",
bottom: 20,
right: 20,
height: 40,
borderRadius: 30,
backgroundColor: "#fd1775",
alignItems: "center",
justifyContent: "center",
}}
centerV
color="white"
enableShadow
iconSource={() => (
<MaterialIcons name="add" size={22} color={"white"} />
)}
onPress={() => setShow(true)}
label="New"
text60R
/>
<Dialog
visible={show}
onDismiss={() => setShow(false)}
panDirection={PanningProvider.Directions.DOWN}
center
>
<Card
style={{ style={{
paddingHorizontal: 40, position: "absolute",
paddingTop: 40, bottom: 20,
paddingBottom: 20, right: 20,
justifyContent: "center", height: 40,
borderRadius: 30,
backgroundColor: "#fd1775",
alignItems: "center", alignItems: "center",
justifyContent: "center",
}} }}
color="white"
enableShadow
onPress={() => setShow(true)}
> >
<Text text50R>Create a new event</Text> <View row centerV centerH>
<MaterialIcons name="add" size={22} color={"white"} />
<View style={{ marginTop: 20, alignItems: "center", width: "100%" }}> <Text white tex30 style={{ fontSize: 17 }}>
<Button New
style={{ </Text>
marginBottom: 10,
backgroundColor: "#ea156c",
justifyContent: "center",
width: "100%",
paddingVertical: 13,
}}
label="Scan Image"
onPress={handleScanImageDialog}
iconSource={() => (
<Feather
name="camera"
size={21}
style={{ marginRight: 7 }}
color="white"
/>
)}
/>
<Button
style={{
marginBottom: 10,
backgroundColor: "#e28800",
justifyContent: "center",
width: "100%",
paddingVertical: 13,
}}
label="Create Event"
onPress={handleOpenManualInputModal}
iconSource={() => (
<MaterialCommunityIcons
name="calendar-text-outline"
size={22}
style={{ marginRight: 5 }}
color="white"
/>
)}
/>
<Button
style={{
marginBottom: 10,
backgroundColor: "#05a8b6",
justifyContent: "center",
width: "100%",
paddingVertical: 13,
}}
label="Add To Do"
onPress={() => setChoreDialogVisible(true)}
iconSource={() => (
<AntDesign
name="checkcircleo"
size={20}
style={{ marginRight: 7 }}
color="white"
/>
)}
/>
</View> </View>
</Button>
<TouchableOpacity onPress={() => setShow(false)}> <Dialog
<Text style={{ marginTop: 20, color: "#999999" }} text70>Go back to calendar</Text> visible={show}
</TouchableOpacity> onDismiss={() => setShow(false)}
</Card> panDirection={PanningProvider.Directions.DOWN}
</Dialog> center
<AddChoreDialog isVisible={choreDialogVisible} setIsVisible={setChoreDialogVisible} /> >
<ManuallyAddEventModal <Card
show={showManualInputModal} style={{
close={() => setShowManualInputModal(false)} paddingHorizontal: 40,
/> paddingTop: 40,
<UploadImageDialog show={showUploadDialog} setShow={setShowUploadDialog} /> paddingBottom: 20,
</> justifyContent: "center",
alignItems: "center",
}}
>
<Text text50R>Create a new event</Text>
<View
style={{ marginTop: 20, alignItems: "center", width: "100%" }}
>
<Button
style={{
marginBottom: 10,
backgroundColor: "#ea156c",
justifyContent: "center",
width: "100%",
paddingVertical: 13,
}}
label="Scan Image"
onPress={handleScanImageDialog}
iconSource={() => (
<Feather
name="camera"
size={21}
style={{ marginRight: 7 }}
color="white"
/>
)}
/>
<Button
style={{
marginBottom: 10,
backgroundColor: "#e28800",
justifyContent: "center",
width: "100%",
paddingVertical: 13,
}}
label="Create Event"
onPress={handleOpenManualInputModal}
iconSource={() => (
<MaterialCommunityIcons
name="calendar-text-outline"
size={22}
style={{ marginRight: 5 }}
color="white"
/>
)}
/>
<Button
style={{
marginBottom: 10,
backgroundColor: "#05a8b6",
justifyContent: "center",
width: "100%",
paddingVertical: 13,
}}
label="Add To Do"
onPress={() => setChoreDialogVisible(true)}
iconSource={() => (
<AntDesign
name="checkcircleo"
size={20}
style={{ marginRight: 7 }}
color="white"
/>
)}
/>
</View>
<TouchableOpacity onPress={() => setShow(false)}>
<Text style={{ marginTop: 20, color: "#999999" }} text70>
Go back to calendar
</Text>
</TouchableOpacity>
</Card>
</Dialog>
<AddChoreDialog
isVisible={choreDialogVisible}
setIsVisible={setChoreDialogVisible}
/>
<ManuallyAddEventModal
show={showManualInputModal}
close={() => setShowManualInputModal(false)}
/>
<UploadImageDialog
show={showUploadDialog}
setShow={setShowUploadDialog}
/>
</>
</ToDosContextProvider> </ToDosContextProvider>
); );
}; };

View File

@ -41,6 +41,8 @@ export default function CalendarPage() {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
segmentslblStyle: { segmentslblStyle: {
fontSize: 14, fontSize: 14,
fontFamily: 'Manrope',
fontWeight: 'bold'
}, },
calHeader: { calHeader: {
borderWidth: 0, borderWidth: 0,
@ -89,7 +91,7 @@ export default function CalendarPage() {
}; };
return ( return (
<View style={{flex: 1, height: "100%", padding: 10}}> <View style={{flex: 1, height: "100%", padding: 10}} paddingH-22 paddingT-10>
<HeaderTemplate <HeaderTemplate
message={"Let's get your week started!"} message={"Let's get your week started!"}
isWelcome={true} isWelcome={true}

View File

@ -15,7 +15,7 @@ const DrawerButton = (props: IDrawerButtonProps) => {
<Button <Button
onPress={props.pressFunc} onPress={props.pressFunc}
label={props.title} label={props.title}
labelStyle={{ fontSize: 14 }} labelStyle={styles.labelStyle}
color={props.color} color={props.color}
backgroundColor="white" backgroundColor="white"
iconSource={() => ( iconSource={() => (
@ -43,8 +43,9 @@ export default DrawerButton;
const styles = StyleSheet.create({ const styles = StyleSheet.create({
iconContainer: { iconContainer: {
width: '70%', width: "70%",
aspectRatio: 1, aspectRatio: 1,
borderRadius: 50, borderRadius: 50,
}, },
labelStyle: { fontSize: 14, fontFamily: "Manrope_600SemiBold" },
}); });

View File

@ -1,6 +1,7 @@
import { View, Text } from "react-native-ui-lib"; import { View, Text } from "react-native-ui-lib";
import React from "react"; import React from "react";
import { useAuthContext } from "@/contexts/AuthContext"; import { useAuthContext } from "@/contexts/AuthContext";
import { ImageBackground } from "react-native";
const HeaderTemplate = (props: { const HeaderTemplate = (props: {
message: string; message: string;
@ -11,18 +12,23 @@ const HeaderTemplate = (props: {
const { user, profileData } = useAuthContext(); const { user, profileData } = useAuthContext();
return ( return (
<View row centerV marginV-15> <View row centerV marginV-15>
<View <ImageBackground
backgroundColor="pink" source={require("../../assets/images/profile-picture.png")}
height={65} style={{
width={65} width: 65,
style={{ borderRadius: 22 }} height: 65,
marginR-20 borderRadius: 22,
overflow: "hidden",
marginRight: 20,
}}
/> />
<View> <View>
{props.isWelcome && ( {props.isWelcome && (
<Text text70L>Welcome, {profileData?.firstName}!</Text> <Text text70L>Welcome, {profileData?.firstName}!</Text>
)} )}
<Text text70BL>{props.message}</Text> <Text text70B style={{ fontSize: 17 }}>
{props.message}
</Text>
{props.children && <View>{props.children}</View>} {props.children && <View>{props.children}</View>}
{props.link && <View>{props.link}</View>} {props.link && <View>{props.link}</View>}
</View> </View>

View File

@ -27,6 +27,7 @@
"preset": "jest-expo" "preset": "jest-expo"
}, },
"dependencies": { "dependencies": {
"@expo-google-fonts/manrope": "^0.2.3",
"@expo/vector-icons": "^14.0.2", "@expo/vector-icons": "^14.0.2",
"@react-native-community/blur": "^4.4.0", "@react-native-community/blur": "^4.4.0",
"@react-native-community/datetimepicker": "^8.2.0", "@react-native-community/datetimepicker": "^8.2.0",
@ -40,6 +41,7 @@
"date-fns": "^3.6.0", "date-fns": "^3.6.0",
"debounce": "^2.1.1", "debounce": "^2.1.1",
"expo": "~51.0.24", "expo": "~51.0.24",
"expo-app-loading": "^2.1.1",
"expo-auth-session": "^5.5.2", "expo-auth-session": "^5.5.2",
"expo-barcode-scanner": "~13.0.1", "expo-barcode-scanner": "~13.0.1",
"expo-build-properties": "~0.12.4", "expo-build-properties": "~0.12.4",
@ -47,7 +49,7 @@
"expo-constants": "~16.0.2", "expo-constants": "~16.0.2",
"expo-dev-client": "~4.0.27", "expo-dev-client": "~4.0.27",
"expo-device": "~6.0.2", "expo-device": "~6.0.2",
"expo-font": "~12.0.9", "expo-font": "~12.0.10",
"expo-image-picker": "~15.0.7", "expo-image-picker": "~15.0.7",
"expo-linking": "~6.3.1", "expo-linking": "~6.3.1",
"expo-notifications": "~0.28.18", "expo-notifications": "~0.28.18",

952
yarn.lock

File diff suppressed because it is too large Load Diff