UI fixes

CruGlobal · Jun 28, 2024 · 3f10ca1 · 3f10ca1
1 parent 90aee34
commit 3f10ca1
Showing 1 changed file with 12 additions and 27 deletions.
diff --git a/src/components/Tool/Appeal/AddAppealForm.tsx b/src/components/Tool/Appeal/AddAppealForm.tsx
@@ -50,14 +50,6 @@ const useStyles = makeStyles()((theme: Theme) => ({
     width: '150px',
     color: 'white',
   },
-  blueBox: {
-    border: '1px solid',
-    borderColor: theme.palette.mpdxBlue.main,
-    borderRadius: 5,
-    backgroundColor: theme.palette.cruGrayLight.main,
-    color: theme.palette.mpdxBlue.main,
-    padding: 10,
-  },
   selectAll: {
     color: theme.palette.mpdxBlue.main,
     marginLeft: 5,
@@ -229,8 +221,6 @@ const AddAppealForm: React.FC<AddAppealFormProps> = ({ accountListId }) => {
           title="Add Appeal"
           style={{
             backgroundColor: theme.palette.cruGrayLight.main,
-            borderBottom: '1px solid',
-            borderColor: theme.palette.cruGrayMedium.main,
           }}
         />
         <CardContent>
@@ -283,7 +273,7 @@ const AddAppealForm: React.FC<AddAppealFormProps> = ({ accountListId }) => {
                 </Box>
                 <Box mt={1} mb={1}>
                   <Grid container spacing={0}>
-                    <Grid item xs={12} md={2}>
+                    <Grid item xs={12} sm={2}>
                       <Box
                         display="flex"
                         flexDirection="column"
@@ -303,7 +293,7 @@ const AddAppealForm: React.FC<AddAppealFormProps> = ({ accountListId }) => {
                         />
                       </Box>
                     </Grid>
-                    <Grid item xs={12} md={1}>
+                    <Grid item xs={12} sm={1}>
                       <Box
                         display="flex"
                         alignItems="center"
@@ -315,7 +305,7 @@ const AddAppealForm: React.FC<AddAppealFormProps> = ({ accountListId }) => {
                         <Icon path={mdiPlus} size={1} />
                       </Box>
                     </Grid>
-                    <Grid item xs={12} md={2}>
+                    <Grid item xs={12} sm={2}>
                       <Box
                         display="flex"
                         flexDirection="column"
@@ -334,7 +324,7 @@ const AddAppealForm: React.FC<AddAppealFormProps> = ({ accountListId }) => {
                         />
                       </Box>
                     </Grid>
-                    <Grid item xs={12} md={1}>
+                    <Grid item xs={12} sm={1}>
                       <Box
                         display="flex"
                         alignItems="center"
@@ -346,7 +336,7 @@ const AddAppealForm: React.FC<AddAppealFormProps> = ({ accountListId }) => {
                         <Icon path={mdiClose} size={1} />
                       </Box>
                     </Grid>
-                    <Grid item xs={12} md={2}>
+                    <Grid item xs={12} sm={2}>
                       <Box
                         display="flex"
                         flexDirection="column"
@@ -365,7 +355,7 @@ const AddAppealForm: React.FC<AddAppealFormProps> = ({ accountListId }) => {
                         />
                       </Box>
                     </Grid>
-                    <Grid item xs={12} md={1}>
+                    <Grid item xs={12} sm={1}>
                       <Box
                         display="flex"
                         alignItems="center"
@@ -377,7 +367,7 @@ const AddAppealForm: React.FC<AddAppealFormProps> = ({ accountListId }) => {
                         <Icon path={mdiEqual} size={1} />
                       </Box>
                     </Grid>
-                    <Grid item xs={12} md={3}>
+                    <Grid item xs={12} sm={3}>
                       <Box
                         display="flex"
                         flexDirection="column"
@@ -401,14 +391,11 @@ const AddAppealForm: React.FC<AddAppealFormProps> = ({ accountListId }) => {
                     </Grid>
                   </Grid>
                 </Box>
-                <Box mt={2} mb={1} className={classes.blueBox}>
-                  <Typography variant="body2">
-                    {t(
-                      'You can add contacts to your appeal based on their status and/or tags. You can also add additional contacts individually at a later time.',
-                    )}
-                  </Typography>
-                </Box>
-
+                <Alert severity="info">
+                  {t(
+                    'You can add contacts to your appeal based on their status and/or tags. You can also add additional contacts individually at a later time.',
+                  )}
+                </Alert>
                 <Box mt={1} mb={1}>
                   <Typography display="inline">
                     {t('Add contacts with the following status(es):')}
@@ -428,7 +415,6 @@ const AddAppealForm: React.FC<AddAppealFormProps> = ({ accountListId }) => {
                   {!!contactStatuses && !loadingStatuses && (
                     <Autocomplete
                       multiple
-                      autoSelect
                       autoHighlight
                       id="tags-standard"
                       options={contactStatuses.filter(
@@ -471,7 +457,6 @@ const AddAppealForm: React.FC<AddAppealFormProps> = ({ accountListId }) => {
                   {contactTagsList && !loadingTags && (
                     <Autocomplete
                       multiple
-                      autoSelect
                       autoHighlight
                       id="tags-standard"
                       options={contactTagsList.filter(