#1328 code changes

Author: haderie

src/frontend/src/components/ReactHookEditableList.tsx

@@ -1,7 +1,8 @@
-import { Grid, Button, IconButton, TextField, InputLabel } from '@mui/material';
-import DeleteForeverOutlinedIcon from '@mui/icons-material/DeleteForeverOutlined';
+import { Grid, IconButton, TextField, InputLabel } from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
 import { FieldArrayWithId, UseFieldArrayRemove, UseFormRegister, UseFieldArrayAppend } from 'react-hook-form';
 import { Box } from '@mui/system';
+import { NERButton } from './NERButton';
 
 interface ReactHookEditableListProps {
   name: string;
@@ -17,21 +18,16 @@ const ReactHookEditableList: React.FC<ReactHookEditableListProps> = ({ name, ls,
     <>
       <Grid container columnSpacing={{ xs: 4, sm: 2, md: 3 }}>
         {ls.map((_element, i) => {
-          const formattedName = name
-            .split(/(?=[A-Z])/)
-            .map((name) => name.charAt(0).toUpperCase() + name.slice(1))
-            .join(' ');
-
           return (
-            <Grid item xs={12} md={6} lg={4}>
+            <Grid item xs={12} md={6} lg={4} key={`${name}-${i}`}>
               <InputLabel sx={{ marginBottom: '5px' }}>
-                {bulletName ? `${bulletName}` : formattedName} {i + 1}
+                {bulletName} {i + 1}
               </InputLabel>
               <Box sx={{ display: 'flex', alignItems: 'start', marginBottom: '20px' }}>
                 <TextField
                   required
                   autoComplete="off"
-                  placeholder={'Enter ' + formattedName + ' . . .'}
+                  placeholder={'Enter ' + bulletName + ' . . .'}
                   sx={{ width: 12 / 12 }}
                   multiline
                   maxRows={3}
@@ -42,21 +38,21 @@ const ReactHookEditableList: React.FC<ReactHookEditableListProps> = ({ name, ls,
                   onClick={() => remove(i)}
                   sx={{ mx: 1, color: 'red', marginLeft: '15px', borderRadius: '4px', outline: 'solid' }}
                 >
-                  <DeleteForeverOutlinedIcon />
+                  <DeleteIcon />
                 </IconButton>
               </Box>
             </Grid>
           );
         })}
       </Grid>
-      <Button
+      <NERButton
         variant="contained"
         color="primary"
         onClick={() => append({ bulletId: -1, detail: '' })}
         sx={{ width: 'max-content', marginBottom: '40px' }}
       >
         {bulletName ? `+ Add ${bulletName}` : '+ Add new bullet'}
-      </Button>
+      </NERButton>
     </>
   );
 };

src/frontend/src/pages/WorkPackageDetailPage/WorkPackageEditContainer/WorkPackageEditContainer.tsx

@@ -223,7 +223,7 @@ const WorkPackageEditContainer: React.FC<WorkPackageEditContainerProps> = ({ wor
           ls={expectedActivities}
           append={appendExpectedActivity}
           remove={removeExpectedActivity}
-          bulletName="Expected Activities"
+          bulletName="Expected Activity"
         />
         <Typography variant="h5">Deliverables</Typography>
         <ReactHookEditableList
@@ -232,7 +232,7 @@ const WorkPackageEditContainer: React.FC<WorkPackageEditContainerProps> = ({ wor
           ls={deliverables}
           append={appendDeliverable}
           remove={removeDeliverable}
-          bulletName="Deliverables"
+          bulletName="Deliverable"
         />
         <Box textAlign="right" sx={{ my: 2 }}>
           <NERFailButton variant="contained" onClick={exitEditMode} sx={{ mx: 1 }}>