Fix various margins

src/components/ButtonRow.tsx

@@ -13,7 +13,10 @@ interface ActionButtonProps {
 
 const ButtonRow = ({ buttons }: ActionButtonProps) => {
   return (
-    <Grid2 container spacing={2}>
+    <Grid2
+      container
+      spacing={2}
+    >
       {buttons.map((button) => {
         return (
           <Button

src/components/ReviewField.tsx

@@ -17,7 +17,7 @@ interface ReviewFieldOpts {
 
 const ReviewField = ({ fields }: ReviewFieldOpts) => {
   return (
-    <Box component="form" noValidate autoComplete="off">
+    <Box sx={{margin: "20px 0"}}> 
       <Stack spacing={1}>
         {fields.map((field) => {
           const [errorText, setErrorText] = useState("");

src/components/ShowReviews.tsx

@@ -27,7 +27,6 @@ function ShowReviews({ reviews }: ShowReviewsProps) {
           <Slide
             direction="up"
             in
-            del
             mountOnEnter
             key={review.id}
           >

src/pages/Home.tsx

@@ -154,31 +154,26 @@ function Home({ endpoint, setEndpoint, secure, setSecure }: HomeProps) {
       <div id="app">
         <Typography variant="h3">Simple Review Client</Typography>
 
-        <br />
-
         <Rating
           name="review-rating"
           precision={0.5}
           size="large"
           value={rating}
+          sx={{marginTop: "10px"}}
           onChange={(event, newRating) => {
             event
             setNewRating(newRating);
           }}
         />
 
-        <br />
-        <br />
-
         <ReviewField fields={fields} />
 
-        <br />
-
         <ButtonRow buttons={buttons} />
 
-        <br />
+        <div
-
+          id="alert-box"
-        <div id="alert-box">
+          style={{margin: "20px 0"}}
+        >
           <Grow in={showAlert} mountOnEnter unmountOnExit>
             {alert}
           </Grow>