Merge pull request #111 from rubyforpeace/l_and_d_update

7riumph · web-flow · commit 1f15bae0bd05 · 2025-03-30T15:52:30.000Z
UI - L and d update
diff --git a/assets/justiceLogo.png b/assets/justiceLogo.png
diff --git a/assets/rfpLogo.png b/assets/rfpLogo.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,7 +13,13 @@
   },
   "jest": {
     "preset": "react-native",
-    "moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json"],
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js",
+      "jsx",
+      "json"
+    ],
     "setupFiles": [
       "./jestSetupFile.js"
     ],
@@ -31,7 +37,7 @@
     "@react-navigation/native-stack": "^7.1.14",
     "@reduxjs/toolkit": "^2.5.0",
     "axios": "^1.8.2",
-    "expo": "^52.0.38",
+    "expo": "^52.0.41",
     "expo-status-bar": "~2.0.1",
     "react": "18.3.1",
     "react-native": "^0.76.7",
@@ -54,7 +60,7 @@
     "eslint-config-universe": "^12.0.1",
     "eslint-plugin-testing-library": "^7.1.1",
     "jest": "^29.7.0",
-    "jest-expo": "~52.0.5",
+    "jest-expo": "^52.0.6",
     "msw": "^2.7.3",
     "prettier": "^3.2.5",
     "prettier-plugin-tailwindcss": "^0.5.11",
diff --git a/src/components/AuthForm.tsx b/src/components/AuthForm.tsx
@@ -36,17 +36,17 @@ const AuthForm: React.FC<LoginFieldProps> = ({
   return (
     <>
       <TextInput
-        style={tw`flex text-white border-white border border-2 border-rounded rounded-3xl w-[70] h-10`}
+        style={tw`flex text-[#434343] border-[#434343] border border-2 border-rounded rounded-3xl w-[70] h-10`}
         placeholder="Email"
-        placeholderTextColor="white"
+        placeholderTextColor="#434343"
         autoCapitalize="none"
         autoCorrect={false}
         onChangeText={setEmail}
       />
       <TextInput
-        style={tw`flex text-white border-white border border-2 border-rounded rounded-3xl w-[70] h-10`}
+        style={tw`flex text-[#434343] border-[#434343] border border-2 border-rounded rounded-3xl w-[70] h-10`}
         placeholder="Password"
-        placeholderTextColor="white"
+        placeholderTextColor="#434343"
         secureTextEntry
         autoCapitalize="none"
         autoCorrect={false}
@@ -56,7 +56,7 @@ const AuthForm: React.FC<LoginFieldProps> = ({
       {errorMessage && <Text style={tw`pl-4 text-red-500`}>{errorMessage}</Text>}
       <Button
         buttonStyle={tw`flex bg-[#ea5a4e] rounded-3xl w-40 h-10  flex justify-center items-center
-          ${!email || !password ? 'bg-gray-400' : 'bg-[#ea5a4e]'}`}
+          ${!email || !password ? 'bg-gray-400' : 'bg-[#3a9ca6]'}`}
         textStyle={tw`text-xl font-bold text-white`}
         title="Sign In"
         onPress={handleSignIn}
@@ -75,7 +75,7 @@ const AuthForm: React.FC<LoginFieldProps> = ({
               Your session will stay active until you sign out.
             </Text>
             <Pressable
-              style={tw`rounded-2xl px-4 py-2 bg-[#345073]`}
+              style={tw`rounded-2xl px-4 py-2 bg-[#3a9ca6]`}
               onPress={() => setModalVisible(!modalVisible)}>
               <Text style={tw`text-white font-bold text-center`}>OK</Text>
             </Pressable>
diff --git a/src/components/CaseContactDetailCard.tsx b/src/components/CaseContactDetailCard.tsx
@@ -5,9 +5,9 @@ import tw from 'twrnc';
 const CaseContactDetailCard = ({ item }) => {
   return (
     <View
-      style={tw`flex justify-between flex-col items-center rounded-xl  border-b-4 border-slate-300/70 w-[70]   border-x-2 h-[45] pb-8 px-6`}>
+      style={tw`flex justify-between flex-col items-center rounded-xl  border-b-4 border-slate-300/70 w-[70] border-x-2 h-[45] pb-8 px-6`}>
       <View>
-        <Text style={tw`flex text-center text-lg font-bold text-[#345073]`}>{item.name}</Text>
+        <Text style={tw`flex text-center text-lg font-bold text-[#3A9BA4]`}>{item.name}</Text>
 
         <Text style={tw`flex text-center text-md text-[#b6b6b6] font-bold`}>
           {item.description}
diff --git a/src/components/CheckBox.tsx b/src/components/CheckBox.tsx
@@ -11,9 +11,9 @@ const CheckBox = (props) => {
         <View style={tw`flex-row items-center w-36 mt-1 mx-1`}>
             <Pressable onPress={props.onPress}>
                 <MaterialCommunityIcons 
-                    name={iconName} size={24} color="#FFFFFF" />
+                    name={iconName} size={24} color="#434343" />
             </Pressable>
-            <Text style={tw`text-white text-sm font-semibold ml-1`}>{props.title}</Text>
+            <Text style={tw`text-[#434343] text-sm font-semibold ml-1`}>{props.title}</Text>
         </View>
     );
 };
diff --git a/src/components/FormPages/Page4.tsx b/src/components/FormPages/Page4.tsx
@@ -48,7 +48,7 @@ const Page4 = ({
     />
     <Text style={tw`text-center`}>
       <Button
-        buttonStyle={tw`flex justify-center items-center bg-[#ea5a4e] rounded-3xl w-[30] h-[10] justify-center`}
+        buttonStyle={tw`flex justify-center items-center bg-[#3A9BA4] rounded-3xl w-[30] h-[10] justify-center`}
         textStyle={tw`text-xl font-bold text-white text-center`}
         title="Submit"
         onPress={() => submit(miles, hours, minutes, date, allCheckboxes)}
diff --git a/src/index.tsx b/src/index.tsx
@@ -18,21 +18,21 @@ const RootStack = createNativeStackNavigator();
 
 function CustomTabBar({ navigation }) {
   return (
-    <View style={tw`flex-row pb-10 items-center justify-around h-1/8 w-full bg-[#345073] py-1`}>
+    <View style={tw`flex-row pb-10 items-center justify-around h-1/8 w-full bg-[#434343] py-1`}>
       <Button
-        buttonStyle={tw`flex justify-center items-center bg-[#ea5a4e] rounded-3xl w-[30] h-[10]`}
+        buttonStyle={tw`flex justify-center items-center bg-[#3a9ca6] rounded-3xl w-[30] h-[10]`}
         textStyle={tw`text-xl font-bold text-white`}
         title="My Cases"
         onPress={() => navigation.navigate('CaseContactListScreen')}
       />
       <Button
-        buttonStyle={tw`flex justify-center items-center bg-[#ea5a4e] rounded-3xl w-[25] h-[10]`}
+        buttonStyle={tw`flex justify-center items-center bg-[#3a9ca6] rounded-3xl w-[25] h-[10]`}
         textStyle={tw`text-xl font-bold text-white`}
         title="Create"
         onPress={() => navigation.navigate('CaseContactCreateScreen')}
       />
       <Button
-        buttonStyle={tw`flex justify-center items-center bg-[#ea5a4e] rounded-3xl w-[30] h-[10]`}
+        buttonStyle={tw`flex justify-center items-center bg-[#3a9ca6] rounded-3xl w-[30] h-[10]`}
         textStyle={tw`text-xl font-bold text-white`}
         title="Account"
         onPress={() => navigation.navigate('AccountScreen')}
diff --git a/src/screens/AccountScreen.tsx b/src/screens/AccountScreen.tsx
@@ -19,19 +19,19 @@ const AccountScreen = () => {
   };
 
   return (
-    <View style={tw`flex items-center gap-3 flex-1 bg-[#d5d7da]`}>
+    <View style={tw`flex items-center gap-3 flex-1 bg-[#535353]`}>
       <View style={tw`flex-col justify-center h-1/5`}>
-        <Text style={tw`text-3xl font-bold`} testID="user:display_name">
+        <Text style={tw`text-3xl text-white font-bold`} testID="user:display_name">
           {user?.display_name ?? ''}
         </Text>
       </View>
 
       <View style={tw`flex justify-around items-center h-3/5`}>
-        <Text style={tw`flex text-2xl font-bold`} testID="user:email">
+        <Text style={tw`flex text-2xl text-white font-bold`} testID="user:email">
           {user?.email ?? ''}
         </Text>
         <Button
-          buttonStyle={tw`flex bg-[#ea5a4e] rounded-3xl w-[40] h-[10] flex justify-center items-center`}
+          buttonStyle={tw`flex bg-[#3a9ca6] rounded-3xl w-[40] h-[10] flex justify-center items-center`}
           textStyle={tw`text-xl font-bold text-white`}
           title="Sign out"
           titleColor="white"
diff --git a/src/screens/CaseContactCreateScreen.tsx b/src/screens/CaseContactCreateScreen.tsx
@@ -17,30 +17,30 @@ const CaseContactCreateScreen = () => {
   };
 
   return (
-    <View style={tw`flex items-center gap-3 flex-1 bg-[#d5d7da]`}>
+    <View style={tw`flex items-center gap-3 flex-1 bg-[#535353]`}>
       <View style={tw`flex-col justify-center h-1/6`}>
-        <Text style={tw`text-3xl flex justify-start font-bold`}>Case Contact Create</Text>
+        <Text style={tw`text-3xl text-white flex justify-start font-bold`}>Case Contact Create</Text>
       </View>
 
-      <View style={tw`flex justify-around items-center h-4/6 w-80`}>
-        <ScrollView style={tw`flex p-2 flex-col h-5/6 bg-[#c0c5cd] rounded-xl w-80`}>
+      <View style={tw`flex justify-around items-center rounded-xl bg-[#FEFEFE] h-4/6 w-80`}>
+        <ScrollView style={tw`flex p-2 flex-col h-5/6 rounded-xl w-80`}>
           <RenderFormPages currentPage={currentPage} />
         </ScrollView>
 
         <View style={tw`flex flex-row w-80 justify-around`}>
           {currentPage > 1 && currentPage < 4 && (
             <Button
               title="Previous"
-              textStyle={tw`font-bold text-lg`}
+              textStyle={tw`font-bold text-[#3A9BA4] text-lg`}
               onPress={handlePreviousPage}
             />
           )}
           {currentPage < 4 ? (
-            <Button title="Next" textStyle={tw`font-bold text-lg`} onPress={handleNextPage} />
+            <Button title="Next" textStyle={tw`font-bold text-[#3A9BA4] text-lg`} onPress={handleNextPage} />
           ) : (
             <Button
               title="Previous"
-              textStyle={tw`font-bold text-lg`}
+              textStyle={tw`font-bold text-[#3A9BA4] text-lg`}
               onPress={handlePreviousPage}
             />
           )}
diff --git a/src/screens/CaseContactDetailScreen.tsx b/src/screens/CaseContactDetailScreen.tsx
@@ -34,9 +34,9 @@ const CaseContactDetailScreen = ({ navigation }) => {
   ];
 
   return (
-    <View style={tw`flex items-center gap-3 flex-1 bg-[#d5d7da]`}>
+    <View style={tw`flex items-center gap-3 flex-1 bg-[#535353]`}>
       <View style={tw`flex-col justify-center h-1/6`}>
-        <Text style={tw`flex pt-4 text-3xl font-bold`}>🦋CINA-11-1002</Text>
+        <Text style={tw`flex pt-4 text-white text-3xl font-bold`}>🏛CINA-11-1002</Text>
       </View>
 
       <View style={tw`flex flex-col bg-white rounded-xl items-center w-80 py-4 h-4/6 shadow-xl`}>
diff --git a/src/screens/CaseContactListScreen.tsx b/src/screens/CaseContactListScreen.tsx
@@ -4,20 +4,15 @@ import tw from 'twrnc';
 import CaseContactListCard from '../components/CaseContactListCard';
 
 const CaseContactListScreen = ({ navigation }) => {
-  const data = [{ name: '🦋CINA-11-1002' }, { name: '🦋CINA-11-1003' }, { name: '🦋CINA-11-1004' }];
+  const data = [{ name: '🏛 CINA-11-1002' }, { name: '🏛 CINA-11-1003' }, { name: '🏛 CINA-11-1004' }];
 
   return (
-    <View style={tw`flex items-center gap-3 flex-1 bg-[#d5d7da]`}>
-      <View style={tw`flex-col justify-center h-1/5`}>
-        <Text style={tw`text-3xl font-bold`}>MY CASES</Text>
+    <View style={tw`flex items-center gap-3 flex-1 bg-[#535353]`}> 
+      <View style={tw`flex-col justify-center h-1/4`}>
+        <Text style={tw`text-3xl text-white font-bold`}>MY CASES</Text>
       </View>
 
       <View style={tw`flex items-center h-3/5`}>
-        <View
-          style={tw`flex flex-row h-10 bg-[#c0c5cd] justify-between w-80 shadow-lg flex justify-center items-center`}>
-          <Text style={tw`pl-2 text-xl font-bold`}>Filter By</Text>
-          <Text style={tw`pl-30 text-xl font-bold`}>Show/Hide</Text>
-        </View>
 
         <View style={tw`flex flex-col justify-center my-10 h-80`}>
           <FlatList
diff --git a/src/screens/LoginScreen.tsx b/src/screens/LoginScreen.tsx
