fix: styling for action

GenerateNU · Dec 7, 2023 · a5ce98f · a5ce98f
1 parent ea0297d
commit a5ce98f
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 40 deletions.
diff --git a/client-new/src/components/task/Actions.tsx b/client-new/src/components/task/Actions.tsx
@@ -72,35 +72,45 @@ const FormComponent = ({ actions, subTaskName }: FormComponentProps) => {
     }
   };
 
+  // </View >
   return (
-    <View style={{ flex: 1 }}>
-      <ScrollView contentContainerStyle={{ flexGrow: 1, paddingBottom: 80 }}>
+    <View>
         {actions.map((action, index) => (
-          <FormControl
-            isRequired={action.required}
-            // isInvalid={formErrors.some((error) => error.path[0] === action.name)}
-            key={index}
-            mt={4}
-          >
-            <FormControl.Label>
-              <Text>{action.label}</Text>
-            </FormControl.Label>
-            {renderField(action, index)}
-          </FormControl>
+          <ScrollView key={index}>
+            <FormControl
+              isRequired={action.required}
+              // isInvalid={formErrors.some((error) => error.path[0] === action.name)}
+              key={index}
+              mt={4}
+            >
+              <FormControl.Label>
+                <Text>{action.label}</Text>
+              </FormControl.Label>
+              {renderField(action, index)}
+            </FormControl>
+          </ScrollView>
         ))}
-      </ScrollView>
-      <View
-        style={{
-          position: 'absolute',
-          bottom: 0,
-          left: 0,
-          right: 0,
-          paddingHorizontal: 16,
-          paddingBottom: 16,
-          backgroundColor: '#fff',
-          borderTopWidth: 1,
-          borderTopColor: '#ddd',
-        }}
+      <SubmitButton handleSubmit={handleSubmit} />
+    </View>
+  );
+}
+
+export default FormComponent;
+
+type SubmitButtonProps = {
+  handleSubmit: (e: GestureResponderEvent) => void
+}
+
+const SubmitButton = ({ handleSubmit }: SubmitButtonProps) => {
+  return (
+    <View
+      marginBottom={h('3%')}
+      flexDirection="row"
+      justifyContent="center"
+      alignItems="center"
+      marginTop={h('3%')}
+      width={'100%'}
+      backgroundColor={'#FFFAF2'}
       >
         <Button
           textDecorationColor={'#FFFFFF'}
@@ -112,8 +122,5 @@ const FormComponent = ({ actions, subTaskName }: FormComponentProps) => {
           Submit
         </Button>
       </View>
-    </View>
-  );
-}
-
-export default FormComponent;
+  )
+}
diff --git a/client-new/src/screens/app/tasks/SubTaskScreen.tsx b/client-new/src/screens/app/tasks/SubTaskScreen.tsx
@@ -8,6 +8,8 @@ import FormComponent from '@/components/task/Actions';
 import { ISubTask } from '@/interfaces/ISubTask';
 import BackArrowIcon from '@/components/icons/BackArrow';
 import ActivityLoader from '@/components/reusable/ActivityLoader';
+import { heightPercentageToDP as h, widthPercentageToDP as w } from 'react-native-responsive-screen';
+import { moderateScale, verticalScale } from '@/utils/FontSizeUtils';
 
 type SubTaskScreenProps = {
   route: any
@@ -23,7 +25,7 @@ const SubTaskScreen = ({ route, navigation }: SubTaskScreenProps) => {
 
   return (
       <ScrollView backgroundColor={'#FFFAF2'}>
-        <View margin={'30px'} marginTop={'60px'}>
+      <View marginX={w('5%')} marginTop={h('5%')}>
           <HStack flexDirection="row" justifyContent="center" flex={1}>
           <Pressable flex={1} onPress={() => navigation.goBack()}>
             <BackArrowIcon />
@@ -32,19 +34,33 @@ const SubTaskScreen = ({ route, navigation }: SubTaskScreenProps) => {
             <LegacyWordmark />
           </View>
           </HStack>
-          <View width={'100%'} marginTop={'30px'}>
-            <Text marginBottom= '10px' fontSize='24' fontWeight={'400'} fontFamily={"Roca Regular"} color={'barkBrown'}>
+        <View
+          width={'100%'}
+          marginTop={h('2%')}
+        >
+          <Text
+            marginBottom={h('1%')}
+            fontSize='24'
+            fontWeight={'400'}
+            fontFamily={"Roca Regular"}
+            color={'barkBrown'}>
               {subtask.sub_task_name}
-              </Text>
-            <Text marginBottom= '20px' fontSize='16' fontWeight={'400'} fontFamily={"Inter_400Regular"} color={'barkBrown'}>
-              {subtask.sub_task_description}
-            </Text>
-          </View>
+          </Text>
+          <Text
+            marginBottom={h('1%')}
+            fontSize={moderateScale(16)}
+            lineHeight={verticalScale(19)}
+            fontWeight={'400'}
+            fontFamily={"Inter_400Regular"}
+            color={'barkBrown'} >
+            {subtask.sub_task_description}
+          </Text>
+        </View>
         {isLoading && <ActivityLoader />}
         {error && <Text> error </Text>}
         {data === null && <Text> null </Text>}
         {data && data.actions && (
-          <View width={"100%"} marginTop= '15px'>
+          <View width={"100%"}>
             <FormComponent actions={data.actions} subTaskName={subtask.sub_task_name} />
           </View>
         )}