update completed screen

Citizen-Knowledge-Graph · Jun 28, 2024 · e58dc8a · e58dc8a
1 parent 6cc5921
commit e58dc8a
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 22 deletions.
diff --git a/src/components/Layout.js b/src/components/Layout.js
@@ -48,7 +48,7 @@ const styles = {
         backgroundColor: 'white',
         boxShadow: 'none',
         color: 'black',
-        height: '80px',
+        height: '10vh',
     },
     contentContainerStyle: {
         flex: 1,

diff --git a/src/screens/profile-section/ProfileSectionScreen.js b/src/screens/profile-section/ProfileSectionScreen.js
@@ -32,21 +32,19 @@ const ProfileSectionScreen = () => {
     return (
         <Layout>
             {profileSectionData ? (
+                !completed ? (
                     <>
                         <ProfileSectionContext title={profileSectionData.title} infoBox={true}/>
-                        {!completed ?
-                            (<ProfileSectionList profileSectionData={profileSectionData}
-                                                 mode={mode}
-                                                 setCompleted={setCompleted}
-                            />)
-                            : (
-                                <ProfileSectionCompleted/>
-                            )
-                        }
-                    </>)
-                :
-                null
-            }
+                        <ProfileSectionList
+                            profileSectionData={profileSectionData}
+                            mode={mode}
+                            setCompleted={setCompleted}
+                        />
+                    </>
+                ) : (
+                    <ProfileSectionCompleted/>
+                )
+            ) : null}
         </Layout>
 
     );

diff --git a/src/screens/profile-section/components/ProfileSectionClass.js b/src/screens/profile-section/components/ProfileSectionClass.js
@@ -19,18 +19,19 @@ const ProfileSectionClass = ({value, currentField, entityData}) => {
     });
 
     useEffect(() => {
-        if (value.length > 0) {
+        if (Array.isArray(value)) {
+            console.log('value', value);
             setObjectsMap({
                 index: value.length,
-                objects: value.map(item => item['@id'])
+                objects: value?.map(item => item['@id'])
             });
         }
     }, [value]);
 
     const handleAddObjectLink = () => {
         setObjectsMap({
             index: objectsMap.index + 1,
-            objects: [...objectsMap.objects, `${currentField.objectClass} ${objectsMap.index}`]
+            objects: [...objectsMap.objects, `${currentField.objectClass}${objectsMap.index}`]
         });
     };
 

diff --git a/src/screens/profile-section/components/ProfileSectionCompleted.js b/src/screens/profile-section/components/ProfileSectionCompleted.js
@@ -4,13 +4,19 @@ import HStack from "../../../components/HStack";
 import {ButtonBase, Card, CardContent, Typography} from "@mui/material";
 import {Link} from "react-router-dom";
 import {green, yellow} from "@mui/material/colors";
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 
 const ProfileSectionCompleted = () => {
     return (
-        <VStack justifyContent={'center'} gap={3}>
+        <VStack justifyContent={'center'} gap={3} sx={{height: "90vh"}}>
             <HStack justifyContent={'center'} sx={{width: "100%"}}>
-                <VStack gap={1} alignItems={'center'}>
-                    <Typography variant="h4">Your quick check profile is ready</Typography>
+                <VStack gap={1} alignItems={'center'} sx={styles.completeTextBox}>
+                    <CheckCircleIcon sx={styles.icon}/>
+                </VStack>
+            </HStack>
+            <HStack justifyContent={'center'} sx={{width: "100%"}}>
+                <VStack gap={1} alignItems={'center'} sx={styles.completeTextBox}>
+                    <Typography variant="h4" sx={styles.completeText}>Your quick check is complete</Typography>
                 </VStack>
             </HStack>
             <VStack data-testid="button-card-container">
@@ -56,9 +62,18 @@ const styles = {
         textAlign: 'center',
         margin: '0',
     },
+    completeTextBox: {
+        paddingLeft: '45px',
+        paddingRight: '45px',
+    },
+    completeText: {
+        fontWeight: 'bold',
+        textAlign: 'center',
+    },
     icon: {
-        width: '30px',
-        height: '30px',
+        width: '80px',
+        height: '80px',
+        color: green[500],
     },
     buttonNext: {
         backgroundColor: green[500],