From bb0a7e5e04ce26e35a2120e72012e5891a3ff525 Mon Sep 17 00:00:00 2001
From: powermaker450 <contact@povario.com>
Date: Wed, 11 Sep 2024 23:41:00 -0400
Subject: [PATCH] Fix various margins

---
 src/components/ButtonRow.tsx   |  5 ++++-
 src/components/ReviewField.tsx |  2 +-
 src/components/ShowReviews.tsx |  1 -
 src/pages/Home.tsx             | 15 +++++----------
 4 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/components/ButtonRow.tsx b/src/components/ButtonRow.tsx
index 0abdbb5..5d64038 100644
--- a/src/components/ButtonRow.tsx
+++ b/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
diff --git a/src/components/ReviewField.tsx b/src/components/ReviewField.tsx
index d9a6a2b..cba50f4 100644
--- a/src/components/ReviewField.tsx
+++ b/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("");
diff --git a/src/components/ShowReviews.tsx b/src/components/ShowReviews.tsx
index 3ee6334..ef5f036 100644
--- a/src/components/ShowReviews.tsx
+++ b/src/components/ShowReviews.tsx
@@ -27,7 +27,6 @@ function ShowReviews({ reviews }: ShowReviewsProps) {
           <Slide
             direction="up"
             in
-            del
             mountOnEnter
             key={review.id}
           >
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index f391701..7f55f2d 100644
--- a/src/pages/Home.tsx
+++ b/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>