feat: render backgrounds

client/components/task_creation/AddressComponent.tsx

@@ -7,7 +7,7 @@ export function AddressComponent() {
       <View className="m-4 mb-0">
         <Text className="mb-2">Street Address</Text>
         <TextInput
-          className="border-gray-300 w-full rounded-md border px-4 py-2"
+          className="border-gray-300 w-full rounded-md border bg-carewallet-white px-4 py-2"
           placeholder={'Fill in blank'}
           autoComplete="street-address"
         />
@@ -17,14 +17,14 @@ export function AddressComponent() {
         <View className="w-[49%]">
           <Text className="mb-2">City</Text>
           <TextInput
-            className="border-gray-300 w-full rounded-md border px-4 py-2"
+            className="border-gray-300 w-full rounded-md border bg-carewallet-white px-4 py-2"
             placeholder={'Fill in blank'}
           />
         </View>
         <View className="ml-2 w-[49%]">
           <Text className="mb-2">State</Text>
           <TextInput
-            className="border-gray-300 w-full rounded-md border px-4 py-2"
+            className="border-gray-300 w-full rounded-md border bg-carewallet-white px-4 py-2"
             placeholder={'Fill in blank'}
           />
         </View>
@@ -34,7 +34,7 @@ export function AddressComponent() {
         <View className="w-[49%]">
           <Text className="mb-2">Zip Code</Text>
           <TextInput
-            className="border-gray-300 w-full rounded-md border px-4 py-2"
+            className="border-gray-300 w-full rounded-md border bg-carewallet-white px-4 py-2"
             placeholder={'Fill in blank'}
             autoComplete="postal-code"
             keyboardType="numeric"
@@ -43,7 +43,7 @@ export function AddressComponent() {
         <View className="ml-2 w-[49%]">
           <Text className="mb-2">Phone Number</Text>
           <TextInput
-            className="border-gray-300 w-full rounded-md border px-4 py-2"
+            className="border-gray-300 w-full rounded-md border bg-carewallet-white px-4 py-2"
             placeholder={'Fill in blank'}
             autoComplete="tel"
             keyboardType="phone-pad"

client/components/task_creation/RadioGroup.tsx

@@ -33,6 +33,7 @@ export function RadioGroup({ title, options, onChange }: RadioGroupProps) {
         return <Liquid />;
       case 'Shot':
         return <Shot />;
+      // bathing symbol needs to be fixed
       case 'Bathing':
         return <Bathing />;
       case 'Toileting':
@@ -50,7 +51,7 @@ export function RadioGroup({ title, options, onChange }: RadioGroupProps) {
           return (
             <TouchableOpacity
               key={index}
-              className={`flex h-12 flex-row items-center space-x-2 rounded-md border border-carewallet-gray px-4 py-2 ${option === selectedOption ? 'bg-carewallet-gray' : 'bg-carewallet-white'}`}
+              className={`flex h-12 flex-row items-center space-x-2 rounded-md border border-carewallet-gray px-4 py-2 ${option === selectedOption ? 'bg-carewallet-lightgray' : 'bg-carewallet-white'}`}
               onPress={() => {
                 handleOptionSelect(option);
               }}

client/components/task_creation/TextInputLine.tsx

@@ -20,7 +20,7 @@ export function TextInputLine({ title, onChange }: TextInputLineProps) {
     <View className="m-4 mb-0">
       <Text className="mb-2">{title}</Text>
       <TextInput
-        className="border-gray-300 w-full rounded-md border px-4 py-2"
+        className="border-gray-300 w-full rounded-md border bg-carewallet-white px-4 py-2"
         placeholder={'Fill in blank'}
         onChangeText={handleInputChange}
         value={inputValue}

client/components/task_creation/TextInputParagraph.tsx

@@ -24,7 +24,7 @@ export function TextInputParagraph({
       <Text className="mb-2">{title}</Text>
       <TextInput
         style={{ height: 100 }}
-        className="border-gray-300 w-full rounded-md border px-4 py-2"
+        className="border-gray-300 w-full rounded-md border bg-carewallet-white px-4 py-2"
         placeholder={'Fill in blank'}
         multiline={true}
         numberOfLines={4}

client/screens/TaskCreation.tsx

@@ -7,7 +7,11 @@ import {
   ScrollView
 } from 'react-native-gesture-handler';
 
-import MedicationBg from '../assets/task-creation/big-bg-med.svg';
+import FinancialBg from '../assets/task-creation/financial-bg.svg';
+import HealthBg from '../assets/task-creation/health-bg.svg';
+import HomeBg from '../assets/task-creation/home-bg.svg';
+import OtherBg from '../assets/task-creation/other-bg.svg';
+import PersonalBg from '../assets/task-creation/personal-bg.svg';
 import { BackButton } from '../components/nav_buttons/BackButton';
 import { AddressComponent } from '../components/task_creation/AddressComponent.tsx';
 import { RadioGroup } from '../components/task_creation/RadioGroup.tsx';
@@ -29,10 +33,32 @@ export function TaskCreation() {
     taskType.includes(t.Header)
   )?.Header;
 
-  // how to render this dynamically
-  // const background = TaskCreationJson.types.find((t) =>
-  //   taskType.includes(t.Header)
-  // )?.Background;
+  const renderBackground = (header: string) => {
+    switch (header) {
+      case 'Medication Management':
+        return <HealthBg />;
+      case 'Physician Appointments':
+        return <HealthBg />;
+      case 'Grooming':
+        return <PersonalBg />;
+      case 'Family Conversations':
+        return <PersonalBg />;
+      case 'Shopping & Errands':
+        return <PersonalBg />;
+      case 'Pay Bills':
+        return <FinancialBg />;
+      case 'Diet':
+        return <HomeBg />;
+      case 'Activities':
+        return <HomeBg />;
+      case 'Health Insurance':
+        return <FinancialBg />;
+      case 'Other':
+        return <OtherBg />;
+      default:
+        return null;
+    }
+  };
 
   const body = TaskCreationJson.types.find((t) =>
     taskType.includes(t.Header)
@@ -67,7 +93,7 @@ export function TaskCreation() {
         </Text>
       </View>
       <View className="absolute top-16 w-full border-t border-carewallet-gray" />
-      <MedicationBg className="" />
+      {renderBackground(header ?? '')}
       <ScrollView className="absolute top-20 mt-3 min-h-full min-w-full">
         <Text className="mx-5 font-carewallet-manrope-bold text-2xl font-bold">
           {header}

client/types/task-creation-json.tsx

@@ -40,7 +40,7 @@ export const TaskCreationJson = {
     {
       Header: 'Pay Bills',
       Body: [
-        { 'Bill Reveicer Name': 'TextInputLine' },
+        { 'Bill Receiver Name': 'TextInputLine' },
         { Address: '' },
         { 'Proxy Agent': 'TextInputLine' }
       ]