Milestone refactor and delete milestone

src/components/stepper/AddNameStep.jsx

@@ -6,7 +6,7 @@ function AddNameStep({setUser}) {
     return (<div>
             <div className={"flex my-9 items-center"}>
                 <p className={"font-bold text-xl text-[#152e40]"}>
-                   Welcome 😃, what's your name?
+                   Welcome, what's your name?
                 </p>
             </div>
 

src/components/stepper/DevelopMilestonesStep.jsx

@@ -36,7 +36,6 @@ function CreateNewGoal({setGoal}) {
                 milestonesCopy[index] = milestoneToEditWithinGoal;
             }
 
-
             return {...prevGoalState, milestones: [...milestonesCopy]}
         })
     }
@@ -46,17 +45,17 @@ function CreateNewGoal({setGoal}) {
         <div className={"flex my-3 font-Normal items-center"}>
             <p className={"inline text-lg font-medium"}>
                 <img width={24} height={24} src={net} alt="edit" className="pr-2 inline"/>
-                To develop this goal, let’s break it down into smaller goals or as we call them, milestones.
+                To develop this goal, let’s break it down into smaller goals or as we like to call them, Milestones.
             </p>
         </div>
         <p className={"text-sm font-normal leading-5 pb-5 text-[#757575]"} variant="caption" display="block" gutterBottom>
             Visualize the end result of the goal you are working on to a high standard.
             Work backwards to plan each step you need to take to increase the chances of achieving this goal.
             Have a go at setting a few milestones you think would be worth celebrating towards your goal and don’t
             worry you can always add or reduce milestones later.</p>
-
 
-    <Alert variant="outlined" severity="info"> 
+
+    <Alert variant="outlined" severity="info">
     We are aware of an issue that causes the last milestone created to be deleted. To <b>avoid</b> this issue, we recommend adding an "empty" milestone as the last one to save all milestones. We are working on resolving this issue and appreciate your patience :D
         </Alert>
 

src/components/stepper/InitialGoalMessage.jsx

@@ -30,7 +30,6 @@ export default function InitialGoalMessage() {
 
         <div className="border divide-neutral-300 rounded-lg border-indigo-50  p-5 bg-white	">
             <Grid display="flex" flexDirection="column" justifyContent="center" alignItems="center">
-
                 <p className="text-xl font-medium leading-9 ">
                     Looks like you don’t have any goals just yet....let’s get that sorted
                 </p>

src/components/stepper/MilestoneInput.jsx

@@ -0,0 +1,40 @@
+import {TextField} from "@mui/material";
+import Typography from "@mui/material/Typography";
+
+const Milestone = ({milestoneInput, setMileStoneInput, milestoneContent, number}) => {
+    return <div className={"snap-end my-2"}>
+        <div className={"p-4"}
+             style={{
+                 width: "100%",
+                 border: "1px solid rgba(65, 84, 114, 0.25)",
+                 borderRadius: "4px",
+             }}
+        >
+            <Typography
+                sx={{
+                    borderRadius: "50%",
+                    border: 'grey 1px  solid',
+                    padding: '16px',
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    gap: "10px",
+                    width: "48px",
+                    height: "48px",
+                }}
+                gutterBottom>
+                <p className="font-bold text-m"> {String(number).padStart(2, '0')} </p>
+            </Typography>
+            <TextField id="filled-basic"
+                       fullWidth
+                       sx={{
+                           border: '0px', background: "#F5F5F5",
+                       }}
+                       mb={1}
+                       value={milestoneContent || milestoneInput}
+                       placeholder={"Ex: The first milestone towards my goal of getting all A’s this semester is creating a schedule so I can manage my time better."}
+                       onChange={(e) => milestoneContent || setMileStoneInput(e.target.value)}/>
+        </div>
+    </div>
+}
+export default Milestone

src/main.jsx

@@ -34,6 +34,7 @@ const router = createBrowserRouter([
     {
         path: '/goals/:goalId',
         element: <GoalPage/>,
+        errorElement: <ErrorPage/>
     },
 ]);