From 9959678c0b7b9c3b3d8a16c90840fef07a5aa352 Mon Sep 17 00:00:00 2001
From: jeznorth <twenty15creative@gmail.com>
Date: Mon, 11 Sep 2023 11:01:03 -0700
Subject: [PATCH 1/5] Front-end polish and content updates

---
 app/src/features/surveys/CreateSurveyPage.tsx |  4 +-
 .../features/surveys/components/BlockForm.tsx | 32 ++++-----
 .../components/CreateSurveyBlockDialog.tsx    |  5 +-
 .../components/EditSurveyBlockDialog.tsx      |  5 +-
 .../surveys/components/SurveyBlockSection.tsx | 69 +++++++++++--------
 .../surveys/components/SurveyUserForm.tsx     |  4 +-
 .../features/surveys/edit/EditSurveyForm.tsx  |  4 +-
 7 files changed, 62 insertions(+), 61 deletions(-)

diff --git a/app/src/features/surveys/CreateSurveyPage.tsx b/app/src/features/surveys/CreateSurveyPage.tsx
index 4d65d2a87c..93430e05f7 100644
--- a/app/src/features/surveys/CreateSurveyPage.tsx
+++ b/app/src/features/surveys/CreateSurveyPage.tsx
@@ -380,8 +380,8 @@ const CreateSurveyPage = () => {
                 <Divider className={classes.sectionDivider} />
 
                 <HorizontalSplitFormComponent
-                  title="Block Data"
-                  summary="Data for Blocks"
+                  title="Sampling Methods"
+                  summary="Specify site selection methods, stratums and sampling blocks (optional) for this survey."
                   component={<SurveyBlockSection />}
                 />
                 <Divider className={classes.sectionDivider} />
diff --git a/app/src/features/surveys/components/BlockForm.tsx b/app/src/features/surveys/components/BlockForm.tsx
index bb1e68b7b8..cc2492057f 100644
--- a/app/src/features/surveys/components/BlockForm.tsx
+++ b/app/src/features/surveys/components/BlockForm.tsx
@@ -1,4 +1,3 @@
-import Typography from '@mui/material/Typography';
 import { Box } from '@mui/system';
 import CustomTextField from 'components/fields/CustomTextField';
 import React from 'react';
@@ -12,25 +11,20 @@ export interface IBlockData {
 const BlockForm: React.FC = () => {
   return (
     <form>
-      <Box>
-        <Box component={'fieldset'} mb={4}>
-          <Typography component="legend">Name and Description</Typography>
-          <Box mt={0.5} mb={3}>
-            <CustomTextField
-              name="name"
-              label="Name"
-              maxLength={50}
-              other={{ placeholder: 'Maximum 50 characters', required: true }}
-            />
-          </Box>
-          <CustomTextField
-            name="description"
-            label="Description"
-            maxLength={250}
-            other={{ multiline: true, placeholder: 'Maximum 250 characters', required: true, rows: 3 }}
-          />
-        </Box>
+      <Box mb={3}>
+        <CustomTextField
+          name="name"
+          label="Name"
+          maxLength={50}
+          other={{ placeholder: 'Maximum 50 characters', required: true }}
+        />
       </Box>
+      <CustomTextField
+        name="description"
+        label="Description"
+        maxLength={250}
+        other={{ multiline: true, placeholder: 'Maximum 250 characters', required: true, rows: 3 }}
+      />
     </form>
   );
 };
diff --git a/app/src/features/surveys/components/CreateSurveyBlockDialog.tsx b/app/src/features/surveys/components/CreateSurveyBlockDialog.tsx
index 7069429f4d..250250d86d 100644
--- a/app/src/features/surveys/components/CreateSurveyBlockDialog.tsx
+++ b/app/src/features/surveys/components/CreateSurveyBlockDialog.tsx
@@ -20,9 +20,6 @@ const CreateSurveyBlockDialog: React.FC<ICreateBlockProps> = (props) => {
     <>
       <EditDialog
         dialogTitle={'Add Block'}
-        dialogText={
-          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem. Aliquam erat volutpat. Donec placerat nisl magna, et faucibus arcu condimentum sed.'
-        }
         open={open}
         dialogLoading={false}
         component={{
@@ -57,7 +54,7 @@ const CreateSurveyBlockDialog: React.FC<ICreateBlockProps> = (props) => {
         message={
           <>
             <Typography variant="body2" component="div">
-              Block <strong>{blockName}</strong> has been added.
+              Block '<strong>{blockName}</strong>' has been added.
             </Typography>
           </>
         }
diff --git a/app/src/features/surveys/components/EditSurveyBlockDialog.tsx b/app/src/features/surveys/components/EditSurveyBlockDialog.tsx
index 570c03020a..1cb1b8df19 100644
--- a/app/src/features/surveys/components/EditSurveyBlockDialog.tsx
+++ b/app/src/features/surveys/components/EditSurveyBlockDialog.tsx
@@ -21,10 +21,7 @@ const EditSurveyBlockDialog: React.FC<IEditBlockProps> = (props) => {
   return (
     <>
       <EditDialog
-        dialogTitle={'Edit Block'}
-        dialogText={
-          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem. Aliquam erat volutpat. Donec placerat nisl magna, et faucibus arcu condimentum sed.'
-        }
+        dialogTitle={'Edit Block Details'}
         open={open}
         dialogLoading={false}
         component={{
diff --git a/app/src/features/surveys/components/SurveyBlockSection.tsx b/app/src/features/surveys/components/SurveyBlockSection.tsx
index cfb194e0b9..fcb9068b6f 100644
--- a/app/src/features/surveys/components/SurveyBlockSection.tsx
+++ b/app/src/features/surveys/components/SurveyBlockSection.tsx
@@ -2,7 +2,7 @@ import { mdiPencilOutline, mdiPlus, mdiTrashCanOutline } from '@mdi/js';
 import Icon from '@mdi/react';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { ListItemIcon, Menu, MenuItem, MenuProps, Typography } from '@mui/material';
-import Box from '@mui/material/Box';
+// import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Card from '@mui/material/Card';
 import CardHeader from '@mui/material/CardHeader';
@@ -20,8 +20,8 @@ export const SurveyBlockInitialValues = {
 
 // Form validation for Block Item
 export const BlockYupSchema = yup.object({
-  name: yup.string().required().max(50, 'Maximum 50 characters'),
-  description: yup.string().required().max(250, 'Maximum 250 characters')
+  name: yup.string().required('Name is required').max(50, 'Maximum 50 characters'),
+  description: yup.string().required('Description is required').max(250, 'Maximum 250 characters')
 });
 
 export const SurveyBlockYupSchema = yup.array(BlockYupSchema);
@@ -92,7 +92,7 @@ const SurveyBlockSection: React.FC = () => {
         sx={{
           marginBottom: '14px'
         }}>
-        Define Blocks
+        Define Blocks <Typography component="span" color="textSecondary" fontWeight="inherit">(optional)</Typography>
       </Typography>
       <Typography
         variant="body1"
@@ -100,8 +100,7 @@ const SurveyBlockSection: React.FC = () => {
         sx={{
           maxWidth: '90ch'
         }}>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem. Aliquam erat volutpat. Donec
-        placerat nisl magna, et faucibus arcu condimentum sed.
+        Enter a name and description for each block used in this survey.
       </Typography>
       <Menu
         open={Boolean(anchorEl)}
@@ -129,38 +128,50 @@ const SurveyBlockSection: React.FC = () => {
         </MenuItem>
       </Menu>
       <form onSubmit={handleSubmit}>
+        {values.blocks.map((item, index) => {
+          return (
+            <Card 
+              key={`${item.name}-${item.description}`}
+              variant="outlined"
+              sx={{
+                mt: 1,
+                '&:first-child': {
+                  mt: 3
+                },
+                '& .MuiCardHeader-title': {
+                  mb: 0.5
+                }
+              }}
+            >
+              <CardHeader
+                action={
+                  <IconButton
+                    onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) =>
+                      handleMenuClick(event, index)
+                    }
+                    aria-label="settings">
+                    <MoreVertIcon />
+                  </IconButton>
+                }
+                title={item.name}
+                subheader={item.description}
+              />
+            </Card>
+          );
+        })}
         <Button
+          sx={{
+            mt: 3
+          }}
           data-testid="block-form-add-button"
-          sx={{ marginBottom: 2, marginTop: 2 }}
           variant="outlined"
-          color="primary"
+          color="secondary"
           title="Add Block"
           aria-label="Add Block"
           startIcon={<Icon path={mdiPlus} size={1} />}
           onClick={() => setIsCreateModalOpen(true)}>
           Add Block
         </Button>
-        <Box>
-          {values.blocks.map((item, index) => {
-            return (
-              <Card key={`${item.name}-${item.description}`} sx={{ marginTop: 1 }} variant="outlined">
-                <CardHeader
-                  action={
-                    <IconButton
-                      onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) =>
-                        handleMenuClick(event, index)
-                      }
-                      aria-label="settings">
-                      <MoreVertIcon />
-                    </IconButton>
-                  }
-                  title={item.name}
-                  subheader={item.description}
-                />
-              </Card>
-            );
-          })}
-        </Box>
       </form>
     </>
   );
diff --git a/app/src/features/surveys/components/SurveyUserForm.tsx b/app/src/features/surveys/components/SurveyUserForm.tsx
index 178f39a621..483feb796a 100644
--- a/app/src/features/surveys/components/SurveyUserForm.tsx
+++ b/app/src/features/surveys/components/SurveyUserForm.tsx
@@ -146,7 +146,9 @@ const SurveyUserForm: React.FC<ISurveyUser> = (props) => {
         </Typography>
       </Box>
       {errors?.['participants'] && selectedUsers.length > 0 && (
-        <AlertBar severity="error" variant="standard" title={alertBarText().title} text={alertBarText().text} />
+        <Box mt={3}>
+          <AlertBar severity="error" variant="standard" title={alertBarText().title} text={alertBarText().text}/>
+        </Box>
       )}
       <Box mt={3}>
         <Autocomplete
diff --git a/app/src/features/surveys/edit/EditSurveyForm.tsx b/app/src/features/surveys/edit/EditSurveyForm.tsx
index 424efde03b..540f4732b9 100644
--- a/app/src/features/surveys/edit/EditSurveyForm.tsx
+++ b/app/src/features/surveys/edit/EditSurveyForm.tsx
@@ -236,8 +236,8 @@ const EditSurveyForm: React.FC<IEditSurveyForm> = (props) => {
           <Divider className={classes.sectionDivider} />
 
           <HorizontalSplitFormComponent
-            title="Block Data"
-            summary="Data for Blocks"
+            title="Sampling Methods"
+            summary="Specify site selection methods, stratums and optional sampling blocks for this survey."
             component={<SurveyBlockSection />}
           />
           <Divider className={classes.sectionDivider} />

From 0651fa7353e8db64206794353d0857008c7a5c51 Mon Sep 17 00:00:00 2001
From: jeznorth <twenty15creative@gmail.com>
Date: Mon, 11 Sep 2023 11:20:49 -0700
Subject: [PATCH 2/5] Front-end polish and content updates

---
 app/src/features/surveys/CreateSurveyPage.tsx |  2 +-
 .../surveys/components/SurveyBlockSection.tsx | 66 ++++++++++---------
 2 files changed, 36 insertions(+), 32 deletions(-)

diff --git a/app/src/features/surveys/CreateSurveyPage.tsx b/app/src/features/surveys/CreateSurveyPage.tsx
index 93430e05f7..11cc7a80fa 100644
--- a/app/src/features/surveys/CreateSurveyPage.tsx
+++ b/app/src/features/surveys/CreateSurveyPage.tsx
@@ -381,7 +381,7 @@ const CreateSurveyPage = () => {
 
                 <HorizontalSplitFormComponent
                   title="Sampling Methods"
-                  summary="Specify site selection methods, stratums and sampling blocks (optional) for this survey."
+                  summary="Specify site selection methods, stratums and optional sampling blocks for this survey."
                   component={<SurveyBlockSection />}
                 />
                 <Divider className={classes.sectionDivider} />
diff --git a/app/src/features/surveys/components/SurveyBlockSection.tsx b/app/src/features/surveys/components/SurveyBlockSection.tsx
index fcb9068b6f..966db9ce48 100644
--- a/app/src/features/surveys/components/SurveyBlockSection.tsx
+++ b/app/src/features/surveys/components/SurveyBlockSection.tsx
@@ -13,6 +13,8 @@ import React, { useState } from 'react';
 import yup from 'utils/YupSchema';
 import CreateSurveyBlockDialog from './CreateSurveyBlockDialog';
 import EditSurveyBlockDialog from './EditSurveyBlockDialog';
+import { TransitionGroup } from 'react-transition-group';
+import Collapse from '@mui/material/Collapse';
 
 export const SurveyBlockInitialValues = {
   blocks: []
@@ -98,6 +100,7 @@ const SurveyBlockSection: React.FC = () => {
         variant="body1"
         color="textSecondary"
         sx={{
+          mb: 2,
           maxWidth: '90ch'
         }}>
         Enter a name and description for each block used in this survey.
@@ -127,41 +130,42 @@ const SurveyBlockSection: React.FC = () => {
           Remove
         </MenuItem>
       </Menu>
+      <TransitionGroup></TransitionGroup>
       <form onSubmit={handleSubmit}>
-        {values.blocks.map((item, index) => {
-          return (
-            <Card 
-              key={`${item.name}-${item.description}`}
-              variant="outlined"
-              sx={{
-                mt: 1,
-                '&:first-child': {
-                  mt: 3
-                },
-                '& .MuiCardHeader-title': {
-                  mb: 0.5
-                }
-              }}
-            >
-              <CardHeader
-                action={
-                  <IconButton
-                    onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) =>
-                      handleMenuClick(event, index)
+        <TransitionGroup>
+          {values.blocks.map((item, index) => {
+            return (
+              <Collapse key={`${item.name}-${item.description}`}>
+                <Card 
+                  variant="outlined"
+                  sx={{
+                    mt: 1,
+                    '& .MuiCardHeader-title': {
+                      mb: 0.5
                     }
-                    aria-label="settings">
-                    <MoreVertIcon />
-                  </IconButton>
-                }
-                title={item.name}
-                subheader={item.description}
-              />
-            </Card>
-          );
-        })}
+                  }}
+                >
+                  <CardHeader
+                    action={
+                      <IconButton
+                        onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) =>
+                          handleMenuClick(event, index)
+                        }
+                        aria-label="settings">
+                        <MoreVertIcon />
+                      </IconButton>
+                    }
+                    title={item.name}
+                    subheader={item.description}
+                  />
+                </Card>
+              </Collapse>
+            );
+          })}
+        </TransitionGroup>
         <Button
           sx={{
-            mt: 3
+            mt: 1
           }}
           data-testid="block-form-add-button"
           variant="outlined"

From 330abe580f8cbd5c5adc7f6b1e256ffe792ea89a Mon Sep 17 00:00:00 2001
From: jeznorth <twenty15creative@gmail.com>
Date: Mon, 11 Sep 2023 11:26:03 -0700
Subject: [PATCH 3/5] Fix button color

---
 app/src/features/surveys/components/SurveyBlockSection.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/features/surveys/components/SurveyBlockSection.tsx b/app/src/features/surveys/components/SurveyBlockSection.tsx
index 966db9ce48..013fc75c02 100644
--- a/app/src/features/surveys/components/SurveyBlockSection.tsx
+++ b/app/src/features/surveys/components/SurveyBlockSection.tsx
@@ -169,7 +169,7 @@ const SurveyBlockSection: React.FC = () => {
           }}
           data-testid="block-form-add-button"
           variant="outlined"
-          color="secondary"
+          color="primary"
           title="Add Block"
           aria-label="Add Block"
           startIcon={<Icon path={mdiPlus} size={1} />}

From b4b95e942d55133e61afdcac15b80b11eb1c8057 Mon Sep 17 00:00:00 2001
From: Alfred Rosenthal <alfred.k.rosenthal@gmail.com>
Date: Mon, 11 Sep 2023 13:30:05 -0700
Subject: [PATCH 4/5] removed old snack bars, fixed issue with key

---
 .../components/CreateSurveyBlockDialog.tsx    | 34 --------------
 .../components/EditSurveyBlockDialog.tsx      | 44 -------------------
 .../surveys/components/SurveyBlockSection.tsx | 16 ++++---
 .../surveys/components/SurveyUserForm.tsx     |  2 +-
 4 files changed, 10 insertions(+), 86 deletions(-)

diff --git a/app/src/features/surveys/components/CreateSurveyBlockDialog.tsx b/app/src/features/surveys/components/CreateSurveyBlockDialog.tsx
index 250250d86d..0d9a5a6fb2 100644
--- a/app/src/features/surveys/components/CreateSurveyBlockDialog.tsx
+++ b/app/src/features/surveys/components/CreateSurveyBlockDialog.tsx
@@ -1,9 +1,4 @@
-import CloseIcon from '@mui/icons-material/Close';
-import { Typography } from '@mui/material';
-import IconButton from '@mui/material/IconButton';
-import Snackbar from '@mui/material/Snackbar';
 import EditDialog from 'components/dialog/EditDialog';
-import { useState } from 'react';
 import BlockForm from './BlockForm';
 import { BlockYupSchema } from './SurveyBlockSection';
 interface ICreateBlockProps {
@@ -14,8 +9,6 @@ interface ICreateBlockProps {
 
 const CreateSurveyBlockDialog: React.FC<ICreateBlockProps> = (props) => {
   const { open, onSave, onClose } = props;
-  const [isSnackBarOpen, setIsSnackBarOpen] = useState(false);
-  const [blockName, setBlockName] = useState('');
   return (
     <>
       <EditDialog
@@ -34,36 +27,9 @@ const CreateSurveyBlockDialog: React.FC<ICreateBlockProps> = (props) => {
         dialogSaveButtonLabel="Add Block"
         onCancel={() => onClose()}
         onSave={(formValues) => {
-          setBlockName(formValues.name);
-          setIsSnackBarOpen(true);
           onSave(formValues);
         }}
       />
-
-      <Snackbar
-        open={isSnackBarOpen}
-        autoHideDuration={6000}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'center'
-        }}
-        onClose={() => {
-          setIsSnackBarOpen(false);
-          setBlockName('');
-        }}
-        message={
-          <>
-            <Typography variant="body2" component="div">
-              Block '<strong>{blockName}</strong>' has been added.
-            </Typography>
-          </>
-        }
-        action={
-          <IconButton size="small" aria-label="close" color="inherit" onClick={() => setIsSnackBarOpen(false)}>
-            <CloseIcon fontSize="small" />
-          </IconButton>
-        }
-      />
     </>
   );
 };
diff --git a/app/src/features/surveys/components/EditSurveyBlockDialog.tsx b/app/src/features/surveys/components/EditSurveyBlockDialog.tsx
index 1cb1b8df19..fbe3ebf660 100644
--- a/app/src/features/surveys/components/EditSurveyBlockDialog.tsx
+++ b/app/src/features/surveys/components/EditSurveyBlockDialog.tsx
@@ -1,9 +1,4 @@
-import CloseIcon from '@mui/icons-material/Close';
-import { Typography } from '@mui/material';
-import IconButton from '@mui/material/IconButton';
-import Snackbar from '@mui/material/Snackbar';
 import EditDialog from 'components/dialog/EditDialog';
-import { useState } from 'react';
 import BlockForm from './BlockForm';
 import { BlockYupSchema, IEditBlock } from './SurveyBlockSection';
 
@@ -16,8 +11,6 @@ interface IEditBlockProps {
 
 const EditSurveyBlockDialog: React.FC<IEditBlockProps> = (props) => {
   const { open, initialData, onSave, onClose } = props;
-  const [isSnackBarOpen, setIsSnackBarOpen] = useState(false);
-  const [blockName, setBlockName] = useState('');
   return (
     <>
       <EditDialog
@@ -35,49 +28,12 @@ const EditSurveyBlockDialog: React.FC<IEditBlockProps> = (props) => {
         }}
         dialogSaveButtonLabel="Save"
         onCancel={() => {
-          setBlockName('');
-          setIsSnackBarOpen(true);
           onClose();
         }}
         onSave={(formValues) => {
-          setBlockName(formValues.name);
-          setIsSnackBarOpen(true);
           onSave(formValues, initialData?.index);
         }}
       />
-
-      <Snackbar
-        open={isSnackBarOpen}
-        autoHideDuration={6000}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'center'
-        }}
-        onClose={() => {
-          setIsSnackBarOpen(false);
-          setBlockName('');
-        }}
-        message={
-          <>
-            <Typography variant="body2" component="div">
-              {initialData?.block.survey_block_id ? (
-                <>
-                  Block <strong>{blockName}</strong> has been updated.
-                </>
-              ) : (
-                <>
-                  Block <strong>{blockName}</strong> has been added.
-                </>
-              )}
-            </Typography>
-          </>
-        }
-        action={
-          <IconButton size="small" aria-label="close" color="inherit" onClick={() => setIsSnackBarOpen(false)}>
-            <CloseIcon fontSize="small" />
-          </IconButton>
-        }
-      />
     </>
   );
 };
diff --git a/app/src/features/surveys/components/SurveyBlockSection.tsx b/app/src/features/surveys/components/SurveyBlockSection.tsx
index 013fc75c02..3b99548662 100644
--- a/app/src/features/surveys/components/SurveyBlockSection.tsx
+++ b/app/src/features/surveys/components/SurveyBlockSection.tsx
@@ -6,15 +6,15 @@ import { ListItemIcon, Menu, MenuItem, MenuProps, Typography } from '@mui/materi
 import Button from '@mui/material/Button';
 import Card from '@mui/material/Card';
 import CardHeader from '@mui/material/CardHeader';
+import Collapse from '@mui/material/Collapse';
 import IconButton from '@mui/material/IconButton';
 import { useFormikContext } from 'formik';
 import { ICreateSurveyRequest } from 'interfaces/useSurveyApi.interface';
 import React, { useState } from 'react';
+import { TransitionGroup } from 'react-transition-group';
 import yup from 'utils/YupSchema';
 import CreateSurveyBlockDialog from './CreateSurveyBlockDialog';
 import EditSurveyBlockDialog from './EditSurveyBlockDialog';
-import { TransitionGroup } from 'react-transition-group';
-import Collapse from '@mui/material/Collapse';
 
 export const SurveyBlockInitialValues = {
   blocks: []
@@ -94,7 +94,10 @@ const SurveyBlockSection: React.FC = () => {
         sx={{
           marginBottom: '14px'
         }}>
-        Define Blocks <Typography component="span" color="textSecondary" fontWeight="inherit">(optional)</Typography>
+        Define Blocks{' '}
+        <Typography component="span" color="textSecondary" fontWeight="inherit">
+          (optional)
+        </Typography>
       </Typography>
       <Typography
         variant="body1"
@@ -135,16 +138,15 @@ const SurveyBlockSection: React.FC = () => {
         <TransitionGroup>
           {values.blocks.map((item, index) => {
             return (
-              <Collapse key={`${item.name}-${item.description}`}>
-                <Card 
+              <Collapse key={`${item.name}-${item.description}-${index}`}>
+                <Card
                   variant="outlined"
                   sx={{
                     mt: 1,
                     '& .MuiCardHeader-title': {
                       mb: 0.5
                     }
-                  }}
-                >
+                  }}>
                   <CardHeader
                     action={
                       <IconButton
diff --git a/app/src/features/surveys/components/SurveyUserForm.tsx b/app/src/features/surveys/components/SurveyUserForm.tsx
index 483feb796a..dad7fc5d29 100644
--- a/app/src/features/surveys/components/SurveyUserForm.tsx
+++ b/app/src/features/surveys/components/SurveyUserForm.tsx
@@ -147,7 +147,7 @@ const SurveyUserForm: React.FC<ISurveyUser> = (props) => {
       </Box>
       {errors?.['participants'] && selectedUsers.length > 0 && (
         <Box mt={3}>
-          <AlertBar severity="error" variant="standard" title={alertBarText().title} text={alertBarText().text}/>
+          <AlertBar severity="error" variant="standard" title={alertBarText().title} text={alertBarText().text} />
         </Box>
       )}
       <Box mt={3}>

From 9cb77017a641f64b78831e43679852951cf53e70 Mon Sep 17 00:00:00 2001
From: Alfred Rosenthal <alfred.k.rosenthal@gmail.com>
Date: Mon, 11 Sep 2023 13:34:50 -0700
Subject: [PATCH 5/5] clean up

---
 app/src/features/surveys/components/SurveyBlockSection.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/src/features/surveys/components/SurveyBlockSection.tsx b/app/src/features/surveys/components/SurveyBlockSection.tsx
index 3b99548662..01bf12b6d2 100644
--- a/app/src/features/surveys/components/SurveyBlockSection.tsx
+++ b/app/src/features/surveys/components/SurveyBlockSection.tsx
@@ -133,7 +133,6 @@ const SurveyBlockSection: React.FC = () => {
           Remove
         </MenuItem>
       </Menu>
-      <TransitionGroup></TransitionGroup>
       <form onSubmit={handleSubmit}>
         <TransitionGroup>
           {values.blocks.map((item, index) => {