diff --git a/client-new/src/components/profile/NotificationsToggle.tsx b/client-new/src/components/profile/NotificationsToggle.tsx
new file mode 100644
index 0000000..fe2ac0b
--- /dev/null
+++ b/client-new/src/components/profile/NotificationsToggle.tsx
@@ -0,0 +1,36 @@
+import { View, Text, Input } from 'native-base';
+import { Switch } from 'react-native';
+import { useEffect, useState } from 'react';
+import { color } from 'native-base/lib/typescript/theme/styled-system';
+import React from 'react';
+
+export type NotificationsToggleProps = {
+ title: string;
+ toggle: boolean;
+ toggleChange: (value: boolean) => void;
+};
+
+export default function NotificationsToggle(props: NotificationsToggleProps) {
+ return (
+
+
+ {props.title}{' '}
+
+ props.toggleChange(newValue)}
+ thumbColor={props.toggle ? '#FFFFFF' : '#2F1D12'}
+ trackColor={{ false: 'transparent', true: '#43A573' }}
+ />
+
+ );
+}
diff --git a/client-new/src/components/profile/PasswordInput.tsx b/client-new/src/components/profile/PasswordInput.tsx
new file mode 100644
index 0000000..953a29f
--- /dev/null
+++ b/client-new/src/components/profile/PasswordInput.tsx
@@ -0,0 +1,66 @@
+import {View, Text, Input, Pressable, Icon} from "native-base";
+import {StyleProp, ViewStyle} from "react-native";
+import React, {useState} from "react";
+
+export type PasswordInputProps = {
+ title: string;
+ password: string;
+ handleOnChange: (newPassword: string) => void;
+};
+
+export default function PasswordInput(props: PasswordInputProps) {
+ const [show, setShow] = useState(false);
+ return (
+
+
+
+ {props.title}
+
+
+
+
+ );
+}
+
+const containerWithBoarder: StyleProp = {
+ borderColor: "#D9D9D9",
+ borderWidth: 1,
+ borderStyle: "solid",
+ borderRadius: 13,
+};
+
+const containerWithOutBoarder: StyleProp = {
+ borderBottomColor: "#D9D9D9",
+ borderBottomWidth: 1,
+ borderStyle: "solid",
+};
diff --git a/client-new/src/components/profile/Persona.tsx b/client-new/src/components/profile/Persona.tsx
new file mode 100644
index 0000000..d463aa6
--- /dev/null
+++ b/client-new/src/components/profile/Persona.tsx
@@ -0,0 +1,40 @@
+import { View, Text } from 'native-base';
+import React from 'react';
+export type PersonaProps = {
+ personaTitle: string;
+ personaDescription: string;
+};
+
+export default function Persona(props: PersonaProps) {
+ return (
+
+
+ {props.personaTitle}
+
+
+ {props.personaDescription}
+
+
+ );
+}
diff --git a/client-new/src/components/profile/PersonaCard.tsx b/client-new/src/components/profile/PersonaCard.tsx
new file mode 100644
index 0000000..8b5ccd6
--- /dev/null
+++ b/client-new/src/components/profile/PersonaCard.tsx
@@ -0,0 +1,133 @@
+import { View, Text, Image } from 'native-base';
+import Svg, { Path } from 'react-native-svg';
+import { StyleProp, ViewStyle } from 'react-native';
+import { TouchableOpacity } from 'react-native';
+import { useEffect } from 'react';
+import React from 'react';
+
+export type PersonaCardProps = {
+ image?: string;
+ title: string;
+ subtitle?: string;
+ subheading?: string;
+ border?: boolean;
+ backgroundColor?: string;
+ handleOnPress?: () => void;
+};
+
+export default function PersonaCard(props: PersonaCardProps) {
+ const containerBorderStyle =
+ props.border !== undefined && props.border === true
+ ? containerWithBoarder
+ : containerWithOutBoarder;
+
+ useEffect(() => {
+ console.log('props', props);
+ }, []);
+
+ return (
+
+
+ {props.image !== undefined && (
+
+
+
+ )}
+
+
+ {props.title}
+
+ {props.subtitle !== undefined && (
+
+ {props.subtitle}
+
+ )}
+ {props.subheading !== undefined && (
+
+ {props.subheading}
+
+ )}
+
+
+
+
+
+
+ );
+}
+
+const containerWithBoarder: StyleProp = {
+ borderColor: '#D9D9D9',
+ borderWidth: 1,
+ borderStyle: 'solid',
+ borderRadius: 13
+};
+
+const containerWithOutBoarder: StyleProp = {
+ borderBottomColor: '#D9D9D9',
+ // borderBottomColor: "#EFEFEF",
+ borderBottomWidth: 1,
+ borderStyle: 'solid'
+};
diff --git a/client-new/src/components/profile/ProfileCard.tsx b/client-new/src/components/profile/ProfileCard.tsx
new file mode 100644
index 0000000..3e66efa
--- /dev/null
+++ b/client-new/src/components/profile/ProfileCard.tsx
@@ -0,0 +1,60 @@
+import { View, Text, Image } from 'native-base';
+import Svg, { Path } from 'react-native-svg';
+import { StyleProp, ViewStyle } from 'react-native';
+import { TouchableOpacity } from 'react-native';
+import { useEffect } from 'react';
+import React from 'react';
+
+export type ProfileCardProps = {
+ title: string;
+ handleOnPress?: () => void;
+};
+
+export default function ProfileCard(props: ProfileCardProps) {
+ return (
+
+
+
+
+ {props.title}
+
+
+
+
+
+
+
+ );
+}
diff --git a/client-new/src/components/reusable/Modal.tsx b/client-new/src/components/reusable/Modal.tsx
new file mode 100644
index 0000000..994a541
--- /dev/null
+++ b/client-new/src/components/reusable/Modal.tsx
@@ -0,0 +1,23 @@
+import { View, Text, Center, Modal } from 'native-base';
+import Circle from './Circle';
+import { color } from 'native-base/lib/typescript/theme/styled-system';
+import Svg, { Path } from 'react-native-svg';
+import { StyleProp, ViewStyle } from 'react-native';
+import { ScrollView, TouchableHighlight, TouchableOpacity } from 'react-native';
+import React from 'react';
+
+export type ModalProps = {
+ showModal: boolean;
+ setShowModal: React.Dispatch>;
+ children: React.ReactNode;
+};
+
+export default function OurModal(props: ModalProps) {
+ return (
+
+ props.setShowModal(false)}>
+ {props.children}
+
+
+ );
+}
diff --git a/client-new/src/components/reusable/ScreenWideButton.tsx b/client-new/src/components/reusable/ScreenWideButton.tsx
index 3e9016c..2030cf8 100644
--- a/client-new/src/components/reusable/ScreenWideButton.tsx
+++ b/client-new/src/components/reusable/ScreenWideButton.tsx
@@ -10,6 +10,7 @@ type ScreenWideButtonProps = {
textColor: string;
backgroundColor: string;
borderColor: string;
+ width?:string;
onClick?: (input) => any;
};
@@ -18,7 +19,7 @@ export default function ScreenWideButton(props: ScreenWideButtonProps) {
<>