Sprint4/profile stack

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 (
+    <View
+      borderBottomColor={'#D9D9D9'}
+      borderBottomWidth={1}
+      minHeight={90}
+      justifyContent={'center'}
+      alignItems={'center'}
+      display={'flex'}
+      flexDirection={'row'}
+    >
+      <Text fontFamily={'Inter'} fontSize={16} fontWeight={600} marginLeft={5}>
+        {props.title}{' '}
+      </Text>
+      <Switch
+        style={{ marginLeft: 'auto', marginRight: 20 }}
+        value={props.toggle}
+        onValueChange={(newValue) => props.toggleChange(newValue)}
+        thumbColor={props.toggle ? '#FFFFFF' : '#2F1D12'}
+        trackColor={{ false: 'transparent', true: '#43A573' }}
+      />
+    </View>
+  );
+}

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 (
+    <View
+      style={[
+        {
+          flexDirection: "row",
+          alignItems: "center",
+          minHeight: 76,
+        },
+      ]}
+    >
+      <View
+        style={{
+          // marginLeft: 16,
+          // marginTop: 16,
+          marginBottom: 16,
+          width: "100%",
+        }}
+      >
+        <Text
+          style={{
+            color: "#2F1D12",
+            fontFamily: "Inter",
+            fontSize: 12,
+            fontWeight: "400",
+            lineHeight: 20,
+            marginBottom: 10,
+          }}
+        >
+          {props.title}
+        </Text>
+        <Input
+          value={props.password}
+          w='100%'
+          h={12}
+          type='password'
+          onChangeText={props.handleOnChange}
+        />
+      </View>
+    </View>
+  );
+}
+
+const containerWithBoarder: StyleProp<ViewStyle> = {
+  borderColor: "#D9D9D9",
+  borderWidth: 1,
+  borderStyle: "solid",
+  borderRadius: 13,
+};
+
+const containerWithOutBoarder: StyleProp<ViewStyle> = {
+  borderBottomColor: "#D9D9D9",
+  borderBottomWidth: 1,
+  borderStyle: "solid",
+};

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 (
+    <View>
+      <Text
+        style={{
+          color: '#252525',
+          fontFamily: 'Open Sans',
+          fontSize: 24,
+          fontWeight: '600',
+          lineHeight: 25,
+          marginTop: 20,
+          marginBottom: 12,
+          marginRight: 'auto',
+          marginLeft: 'auto'
+        }}
+      >
+        {props.personaTitle}
+      </Text>
+      <Text
+        style={{
+          color: '#000',
+          fontFamily: 'Open Sans',
+          fontSize: 12,
+          fontWeight: '300',
+          lineHeight: 20,
+          marginBottom: 16
+        }}
+      >
+        {props.personaDescription}
+      </Text>
+    </View>
+  );
+}

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 (
+    <TouchableOpacity onPress={props.handleOnPress}>
+      <View
+        style={[
+          {
+            flexDirection: 'row',
+            alignItems: 'center',
+            minHeight: 76,
+            backgroundColor: props.backgroundColor
+              ? props.backgroundColor
+              : '#FFFAF2'
+          },
+          containerBorderStyle
+        ]}
+      >
+        {props.image !== undefined && (
+          <View
+            style={{
+              backgroundColor: '#F7F7F8',
+              width: 60,
+              height: 60,
+              borderRadius: 30,
+              marginLeft: 20
+            }}
+          >
+            <Image
+              source={{
+                uri: props.image
+              }}
+              alt="Alternate Text"
+              size="100%"
+            />
+          </View>
+        )}
+        <View
+          style={{
+            marginLeft: 16,
+            marginTop: 16,
+            marginBottom: 16,
+            width: 197
+          }}
+        >
+          <Text
+            style={{
+              color: '#252525',
+              fontFamily: 'Inter',
+              fontSize: 15,
+              fontWeight: '600',
+              lineHeight: 20
+            }}
+          >
+            {props.title}
+          </Text>
+          {props.subtitle !== undefined && (
+            <Text
+              style={{
+                color: '#252525',
+                fontFamily: 'Inter',
+                fontSize: 12,
+                fontWeight: '400',
+                lineHeight: 20
+              }}
+            >
+              {props.subtitle}
+            </Text>
+          )}
+          {props.subheading !== undefined && (
+            <Text
+              style={{
+                color: '#C1C3C7',
+                fontFamily: 'Inter',
+                fontSize: 12,
+                fontWeight: '400',
+                lineHeight: 20
+              }}
+            >
+              {props.subheading}
+            </Text>
+          )}
+        </View>
+        <View style={{ marginLeft: 'auto', marginRight: 16 }}>
+          <Svg width="10" height="20" viewBox="0 0 10 20" fill="none">
+            <Path
+              d="M9.50026 10C9.50026 10.7315 9.2181 11.463 8.66424 12.0169L1.85066 18.8305C1.5476 19.1336 1.04598 19.1336 0.74292 18.8305C0.43986 18.5274 0.43986 18.0258 0.74292 17.7228L7.5565 10.9092C8.05812 10.4076 8.05812 9.59243 7.5565 9.09082L0.742919 2.27719C0.439859 1.97413 0.439859 1.47252 0.742919 1.16946C1.04598 0.8664 1.54759 0.8664 1.85065 1.16946L8.66424 7.98308C9.2181 8.53695 9.50026 9.26847 9.50026 10Z"
+              fill="#D9D9D9"
+            />
+          </Svg>
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+}
+
+const containerWithBoarder: StyleProp<ViewStyle> = {
+  borderColor: '#D9D9D9',
+  borderWidth: 1,
+  borderStyle: 'solid',
+  borderRadius: 13
+};
+
+const containerWithOutBoarder: StyleProp<ViewStyle> = {
+  borderBottomColor: '#D9D9D9',
+  // borderBottomColor: "#EFEFEF",
+  borderBottomWidth: 1,
+  borderStyle: 'solid'
+};

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 (
+    <TouchableOpacity onPress={props.handleOnPress}>
+      <View
+        style={[
+          {
+            flexDirection: 'row',
+            alignItems: 'center',
+            minHeight: 76,
+            backgroundColor: '#FFFAF2',
+            borderBottomColor: '#D9D9D9',
+            borderBottomWidth: 1,
+            borderStyle: 'solid'
+          }
+        ]}
+      >
+        <View
+          style={{
+            marginLeft: 16,
+            marginTop: 16,
+            marginBottom: 16,
+            width: 197
+          }}
+        >
+          <Text
+            style={{
+              color: '#252525',
+              fontFamily: 'Inter',
+              fontSize: 15,
+              fontWeight: '600',
+              lineHeight: 20
+            }}
+          >
+            {props.title}
+          </Text>
+        </View>
+        <View style={{ marginLeft: 'auto', marginRight: 16 }}>
+          <Svg width="10" height="20" viewBox="0 0 10 20" fill="none">
+            <Path
+              d="M9.50026 10C9.50026 10.7315 9.2181 11.463 8.66424 12.0169L1.85066 18.8305C1.5476 19.1336 1.04598 19.1336 0.74292 18.8305C0.43986 18.5274 0.43986 18.0258 0.74292 17.7228L7.5565 10.9092C8.05812 10.4076 8.05812 9.59243 7.5565 9.09082L0.742919 2.27719C0.439859 1.97413 0.439859 1.47252 0.742919 1.16946C1.04598 0.8664 1.54759 0.8664 1.85065 1.16946L8.66424 7.98308C9.2181 8.53695 9.50026 9.26847 9.50026 10Z"
+              fill="#D9D9D9"
+            />
+          </Svg>
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+}

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<React.SetStateAction<boolean>>;
+  children: React.ReactNode;
+};
+
+export default function OurModal(props: ModalProps) {
+  return (
+    <Center>
+      <Modal isOpen={props.showModal} onClose={() => props.setShowModal(false)}>
+        {props.children}
+      </Modal>
+    </Center>
+  );
+}

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) {
     <>
       <Button
         backgroundColor={props.backgroundColor}
-        width={w("80%")}
+        width={props.width ? props.width : w('80%')}
         height={h("5%")}
         borderRadius={w("80%") / 2}
         onPress={props.onClick}

client-new/src/navigation/AppStack.tsx

@@ -1,5 +1,6 @@
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import HomeScreen from "../screens/app/BottomTabNavigator";
+import React from "react";
 
 const Stack = createNativeStackNavigator();