ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-11-26 16:34:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

ui fixes

Browse Source
This commit is contained in:
ivic00
2024-11-05 22:00:16 +01:00
parent 6dc81ae653
commit dac3f3c0a3
3 changed files with 96 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
components/pages/settings/user_settings_views/UserMenu.tsx
View File

@ -1,51 +1,78 @@
import React from 'react';
import {Button, Card, Dialog, Text, TouchableOpacity} from 'react-native-ui-lib';
import QRCode from 'react-native-qrcode-svg';
import {PanningDirectionsEnum} from "react-native-ui-lib/src/components/panningViews/panningProvider";
import React from "react";
import {
Button,
Card,
Dialog,
Text,
TouchableOpacity,
} from "react-native-ui-lib";
import QRCode from "react-native-qrcode-svg";
import { PanningDirectionsEnum } from "react-native-ui-lib/src/components/panningViews/panningProvider";
import Ionicons from "@expo/vector-icons/Ionicons";
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
import { UserProfile } from "@/hooks/firebase/types/profileTypes";
import { StyleSheet } from "react-native";
import { ProfileType } from "@/contexts/AuthContext";
const UserMenu = ({
userId,
showQRCodeDialog,
setShowQRCodeDialog
}: {
userId: string,
showQRCodeDialog: boolean,
setShowQRCodeDialog: (value: string | boolean) => void
user,
showQRCodeDialog,
setShowQRCodeDialog,
}: {
user: UserProfile;
showQRCodeDialog: boolean;
setShowQRCodeDialog: (value: string | boolean) => void;
}) => {
const handleShowQRCode = () => {
setShowQRCodeDialog(userId);
};
const handleShowQRCode = () => {
setShowQRCodeDialog(user.uid!);
};
return (
<>
<TouchableOpacity onPress={handleShowQRCode}>
<Ionicons name="qr-code-outline" size={24} color="black" />
</TouchableOpacity>
return (
<>
<TouchableOpacity
onPress={handleShowQRCode}
>
<Ionicons name="qr-code-outline" size={24} color="black"/>
</TouchableOpacity>
<Dialog
visible={showQRCodeDialog}
onDismiss={() => setShowQRCodeDialog(false)}
panDirection={PanningDirectionsEnum.DOWN}
>
<Card padding-20 center>
<Text center marginB-10 style={{fontSize: 16, maxWidth: "80%"}}>Ask your family to download the app
and then scan the
QR Code to join the family group:
</Text>
<QRCode value={userId} size={150}/>
<Button
marginT-20
label="Close"
onPress={() => setShowQRCodeDialog(false)}
/>
</Card>
</Dialog>
</>
);
<Dialog
visible={showQRCodeDialog}
onDismiss={() => setShowQRCodeDialog(false)}
panDirection={PanningDirectionsEnum.DOWN}
>
<Card padding-20 center>
<Text
center
marginT-15
marginH-15
marginB-25
style={{ fontSize: 18, fontFamily: "Manrope_500Medium" }}
>
{user.userType !== ProfileType.FAMILY_DEVICE
? `Open Cally on ${user.firstName}'s device and scan the code to link it to your family group`
: "Open Cally on the family device and scan the code to link it to your family group"}
</Text>
<QRCode value={user.uid!} size={150} />
<Button
marginT-20
style={styles.button}
label="Close"
labelStyle={{
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 15,
}}
onPress={() => setShowQRCodeDialog(false)}
/>
</Card>
</Dialog>
</>
);
};
const styles = StyleSheet.create({
button: {
backgroundColor: "#d9d9d9",
width: 117,
height: 47,
},
});
export default UserMenu;