Minor UI improvements

frontend/src/components/DesireForm.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { TextField, Button, Box, Typography } from '@mui/material';
+import { TextField, Button, Box, Typography, Snackbar, Alert } from '@mui/material';
 
 interface DesireFormProps {
     onSubmit: (desires: { wants: string[], accepts: string[], noGoes: string[], afraidToAsk: string }) => void;
@@ -10,6 +10,16 @@ const DesireForm: React.FC<DesireFormProps> = ({ onSubmit }) => {
     const [accepts, setAccepts] = useState('');
     const [noGoes, setNoGoes] = useState('');
     const [afraidToAsk, setAfraidToAsk] = useState('');
+    const [alertOpen, setAlertOpen] = useState(false);
+    const [alertMessage, setAlertMessage] = useState('');
+    const [alertSeverity, setAlertSeverity] = useState<'error' | 'warning' | 'info' | 'success'>('error');
+
+    const handleCloseAlert = (event?: React.SyntheticEvent | Event, reason?: string) => {
+        if (reason === 'clickaway') {
+            return;
+        }
+        setAlertOpen(false);
+    };
 
     const handleSubmit = (event: React.FormEvent) => {
         event.preventDefault();
@@ -19,7 +29,9 @@ const DesireForm: React.FC<DesireFormProps> = ({ onSubmit }) => {
 
         // FR-020: The system MUST require a user to enter at least one desire in at least one of the three categories
         if (parsedWants.length === 0 && parsedAccepts.length === 0 && parsedNoGoes.length === 0 && afraidToAsk.length === 0) {
-            alert('Please enter at least one desire in any category.');
+            setAlertMessage('Please enter at least one desire in any category.');
+            setAlertSeverity('error');
+            setAlertOpen(true);
             return;
         }
 
@@ -27,7 +39,9 @@ const DesireForm: React.FC<DesireFormProps> = ({ onSubmit }) => {
         const allItems = [...parsedWants, ...parsedAccepts, ...parsedNoGoes];
         const uniqueItems = new Set(allItems);
         if (allItems.length !== uniqueItems.size) {
-            alert('You have conflicting desires (same item in different categories). Please resolve.');
+            setAlertMessage('You have conflicting desires (same item in different categories). Please resolve.');
+            setAlertSeverity('error');
+            setAlertOpen(true);
             return;
         }
 
@@ -40,7 +54,7 @@ const DesireForm: React.FC<DesireFormProps> = ({ onSubmit }) => {
     };
 
     return (
-        <Box component="form" onSubmit={handleSubmit} sx={{ mt: 3 }}>
+        <Box component="form" onSubmit={handleSubmit} sx={{ mt: 3, display: 'flex', flexDirection: 'column' }}>
             <Typography variant="h6" gutterBottom>What You Want</Typography>
             <TextField
                 multiline
@@ -91,12 +105,16 @@ const DesireForm: React.FC<DesireFormProps> = ({ onSubmit }) => {
 
             <Button
                 type="submit"
-                fullWidth
                 variant="contained"
-                sx={{ mt: 3, mb: 2 }}
+                sx={{ mt: 3, mb: 2, textTransform: 'none', alignSelf: 'flex-start' }}
             >
                 Submit Desires
             </Button>
+            <Snackbar open={alertOpen} autoHideDuration={6000} onClose={handleCloseAlert} anchorOrigin={{ vertical: 'top', horizontal: 'right' }} sx={{ mt: 8 }}>
+                <Alert onClose={handleCloseAlert} severity={alertSeverity} sx={{ width: '100%' }}>
+                    {alertMessage}
+                </Alert>
+            </Snackbar>
         </Box>
     );
 };