ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-07-09 22:57:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

changed font

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

3
app.json
View File

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

8
app/(auth)/_layout.tsx
View File

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

224
app/_layout.tsx
View File

@ -1,44 +1,198 @@
import {DefaultTheme, ThemeProvider} from '@react-navigation/native';
import {useFonts} from 'expo-font';
import {Stack} from 'expo-router';
import * as SplashScreen from 'expo-splash-screen';
import {useEffect} from 'react';
import 'react-native-reanimated';
import {AuthContextProvider} from "@/contexts/AuthContext";
import {QueryClient, QueryClientProvider} from "react-query";
import {Toast} from "react-native-ui-lib";
import React, { useEffect } from "react";
import { DefaultTheme, ThemeProvider } from "@react-navigation/native";
import {
useFonts,
Manrope_200ExtraLight,
Manrope_300Light,
Manrope_400Regular,
Manrope_500Medium,
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();
const queryClient = new QueryClient();
export default function RootLayout() {
const [loaded] = useFonts({
SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
});
type TextStyleBase =
| "text10"
| "text20"
| "text30"
| "text40"
| "text50"
| "text60"
| "text70"
| "text80"
| "text90"
| "text100";
type TextStyleModifier = "R" | "M" | "BO" | "H" | "BL" | "L";
type TextStyle = TextStyleBase | `${TextStyleBase}${TextStyleModifier}`;
useEffect(() => {
if (loaded) {
SplashScreen.hideAsync();
}
}, [loaded]);
type TextStyleProps = {
[K in TextStyle]?: boolean;
};
if (!loaded) {
return null;
}
type ExtendedTextProps = TextProps & TextStyleProps;
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>
);
interface FontStyle {
fontFamily: string;
fontSize: number;
}
const getManropeFontStyle = (style: TextStyle): FontStyle => {
let fontFamily: string;
let fontSize: number;
if (style.includes("L") || style.includes("BL"))
fontFamily = "Manrope_300Light";
else if (style.includes("R")) fontFamily = "Manrope_400Regular";
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>
);
}

BIN
assets/fonts/Manrope-VariableFont_wght.ttf Normal file
View File

Binary file not shown.

BIN
assets/images/profile-picture.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 67 KiB

17
components/pages/brain_dump/BrainDumpPage.tsx
View File

@ -54,21 +54,20 @@ const BrainDumpPage = () => {
height: 40,
borderRadius: 30,
backgroundColor: "#fd1775",
alignItems: "center",
justifyContent: "center",
}}
centerV
color="white"
enableShadow
iconSource={() => (
<MaterialIcons name="add" size={22} color={"white"} />
)}
onPress={() => {
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
addBrainDumpProps={{
isVisible: isAddVisible,

2
components/pages/brain_dump/DumpItem.tsx
View File

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

233
components/pages/calendar/AddEventDialog.tsx
View File

@ -20,7 +20,6 @@ import AddChoreDialog from "../todos/AddChoreDialog";
import { ToDosContextProvider } from "@/contexts/ToDosContext";
import UploadImageDialog from "./UploadImageDialog";
export const AddEventDialog = () => {
const [show, setShow] = useState(false);
const [showManualInputModal, setShowManualInputModal] = useState(false);
@ -37,127 +36,137 @@ export const AddEventDialog = () => {
const handleScanImageDialog = () => {
setShow(false);
setTimeout(() => {
setShowUploadDialog(true);
setShowUploadDialog(true);
}, 100);
}
};
return (
<ToDosContextProvider>
<>
<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
<>
<Button
style={{
paddingHorizontal: 40,
paddingTop: 40,
paddingBottom: 20,
justifyContent: "center",
position: "absolute",
bottom: 20,
right: 20,
height: 40,
borderRadius: 30,
backgroundColor: "#fd1775",
alignItems: "center",
justifyContent: "center",
}}
color="white"
enableShadow
onPress={() => setShow(true)}
>
<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 row centerV centerH>
<MaterialIcons name="add" size={22} color={"white"} />
<Text white tex30 style={{ fontSize: 17 }}>
New
</Text>
</View>
</Button>
<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} />
</>
<Dialog
visible={show}
onDismiss={() => setShow(false)}
panDirection={PanningProvider.Directions.DOWN}
center
>
<Card
style={{
paddingHorizontal: 40,
paddingTop: 40,
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>
);
};

4
components/pages/calendar/CalendarPage.tsx
View File

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

5
components/shared/DrawerButton.tsx
View File

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

20
components/shared/HeaderTemplate.tsx
View File

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

4
package.json
View File

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

952
yarn.lock
View File

File diff suppressed because it is too large Load Diff