minor fixes

ocadotechnology · Aug 15, 2024 · d819bbb · d819bbb
1 parent ec9023b
commit d819bbb
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 16 deletions.
diff --git a/src/pages/fruitDetail/FruitDetail.tsx b/src/pages/fruitDetail/FruitDetail.tsx
@@ -1,9 +1,9 @@
 import * as forms from "codeforlife/components/form"
 import * as pages from "codeforlife/components/page"
 import * as yup from "yup"
+import { Stack, Typography } from "@mui/material"
 import { type FC } from "react"
 import { Link } from "codeforlife/components/router"
-import { Typography } from "@mui/material"
 import { handleQueryState } from "codeforlife/utils/api"
 import { submitForm } from "codeforlife/utils/form"
 import { useParamsRequired } from "codeforlife/hooks"
@@ -37,12 +37,19 @@ const FruitDetail: FC<FruitDetailProps> = () => {
                 },
               })}
             >
-              <forms.TextField name="name" schema={fruitNameSchema} />
-              <forms.CheckboxField
-                name="is_citrus"
-                formControlLabelProps={{ label: "Is Citrus" }}
-              />
-              <forms.SubmitButton>Update fruit</forms.SubmitButton>
+              <Stack>
+                <forms.TextField
+                  name="name"
+                  label="Name"
+                  placeholder="Enter the fruit's name"
+                  schema={fruitNameSchema}
+                />
+                <forms.CheckboxField
+                  name="is_citrus"
+                  formControlLabelProps={{ label: "Is Citrus" }}
+                />
+                <forms.SubmitButton>Update fruit</forms.SubmitButton>
+              </Stack>
             </forms.Form>
             <Link className="back-to" to={paths.fruits._}>
               fruit list

diff --git a/src/pages/fruitList/CreateFruitForm.tsx b/src/pages/fruitList/CreateFruitForm.tsx
@@ -1,6 +1,6 @@
 import * as forms from "codeforlife/components/form"
+import { FormHelperText, Stack } from "@mui/material"
 import { type FC } from "react"
-import { FormHelperText } from "@mui/material"
 import { submitForm } from "codeforlife/utils/form"
 
 import { fruitNameSchema } from "../../app/schemas"
@@ -24,12 +24,20 @@ const CreateFruitForm: FC<CreateFruitFormProps> = () => {
           },
         })}
       >
-        <forms.TextField required name="name" schema={fruitNameSchema} />
-        <forms.CheckboxField
-          name="is_citrus"
-          formControlLabelProps={{ label: "Is Citrus" }}
-        />
-        <forms.SubmitButton>Create fruit</forms.SubmitButton>
+        <Stack>
+          <forms.TextField
+            required
+            name="name"
+            label="Name"
+            placeholder="Enter the fruit's name"
+            schema={fruitNameSchema}
+          />
+          <forms.CheckboxField
+            name="is_citrus"
+            formControlLabelProps={{ label: "Is Citrus" }}
+          />
+          <forms.SubmitButton>Create fruit</forms.SubmitButton>
+        </Stack>
       </forms.Form>
     </>
   )

diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx
@@ -13,13 +13,13 @@ const Home: FC<HomeProps> = () => {
   return (
     <pages.Page>
       <pages.Section>
-        <Image src={CflLogoImage} alt="code for life logo" />
+        <Image src={CflLogoImage} alt="code for life logo" maxWidth="200px" />
         <Typography variant="h1">Example web page</Typography>
         <Typography>
           This is an example of how you can create a web page. This example
           consumes the backend-template's API.
         </Typography>
-        <Link to={paths.fruits._}>See fruits</Link>
+        <Link to={paths.fruits._}>Fruit list</Link>
       </pages.Section>
     </pages.Page>
   )