Feedback

.env

@@ -9,8 +9,8 @@ VITE_GMAIL_FILTERS_EMAIL_VERIFICATION="from:[email protected]
 VITE_LINK_FEMALE_GRADUATES_IN_CS=https://www.wisecampaign.org.uk/core-stem-graduates-2019/
 VITE_LINK_OUTLOOK_HOME=https://outlook.live.com/mail/
 VITE_LINK_SKILLS_FOR_THE_FUTURE=https://www.ocadogroup.com/sustainability/sustainability/
-VITE_LINK_PORTAL_GITHUB_HREF=https://github.com/ocadotechnology/codeforlife-portal
-VITE_LINK_CFL_DOCS_HREF=https://docs.codeforlife.education/
+VITE_LINK_PORTAL_GITHUB=https://github.com/ocadotechnology/codeforlife-portal
+VITE_LINK_CFL_DOCS=https://docs.codeforlife.education/become-a-contributor
 VITE_LINK_PRIMARY_PACK_GITBOOK=https://code-for-life.gitbook.io/teaching-resources/v/code-club-resources-primary
 VITE_LINK_PRIMARY_PACK_DOWNLOAD=https://storage.googleapis.com/codeforlife-assets/club_packs/PrimaryCodingClub.zip
 VITE_LINK_PYTHON_PACK_GITBOOK=https://code-for-life.gitbook.io/teaching-resources/v/rapid-introduction-to-python-code-club

src/pages/aboutUs/AboutUs.tsx

@@ -1,6 +1,5 @@
 import * as page from "codeforlife/components/page"
 import { type FC } from "react"
-import { useTheme } from "@mui/material"
 
 import AboutUsHeroImage from "../../images/about_us_hero_hexagon.png"
 import CodeForLife from "./CodeForLife"
@@ -13,8 +12,6 @@ import Supporters from "./Supporters"
 export interface AboutUsProps {}
 
 const AboutUs: FC<AboutUsProps> = () => {
-  const theme = useTheme()
-
   return (
     <page.Page>
       <page.Banner
@@ -31,19 +28,19 @@ const AboutUs: FC<AboutUsProps> = () => {
       <page.Section>
         <Statistics />
       </page.Section>
-      <page.Section boxProps={{ bgcolor: theme.palette.info.main }}>
+      <page.Section boxProps={{ bgcolor: "info.main" }}>
         <CodeForLife />
       </page.Section>
       <page.Section>
         <OcadoGroup />
       </page.Section>
-      <page.Section boxProps={{ bgcolor: theme.palette.info.main }}>
+      <page.Section boxProps={{ bgcolor: "info.main" }}>
         <Quotes />
       </page.Section>
       <page.Section>
         <Supporters />
       </page.Section>
-      <page.Section boxProps={{ bgcolor: theme.palette.info.main }}>
+      <page.Section boxProps={{ bgcolor: "info.main" }}>
         <Dedication />
       </page.Section>
     </page.Page>

src/pages/aboutUs/Quotes.tsx

@@ -1,11 +1,7 @@
 import { Unstable_Grid2 as Grid, Typography } from "@mui/material"
 import { type FC } from "react"
 
-export interface QuoteProps {
-  children: string
-}
-
-const Quote: FC<QuoteProps> = ({ children }) => {
+const Quote: FC<{ children: string }> = ({ children }) => {
   return (
     <Typography
       sx={{

src/pages/aboutUs/Statistics.tsx

@@ -1,12 +1,10 @@
 import { Stack, Typography } from "@mui/material"
 import { type FC } from "react"
 
-export interface StatisticProps {
+const Statistic: FC<{
   number: string
   description: string
-}
-
-const Statistic: FC<StatisticProps> = ({ number, description }) => (
+}> = ({ number, description }) => (
   <Stack>
     <Typography
       variant="h2"

src/pages/aboutUs/Supporters.tsx

@@ -1,7 +1,12 @@
-import { Unstable_Grid2 as Grid, Link, Stack, Typography } from "@mui/material"
+import {
+  Unstable_Grid2 as Grid,
+  Link as MuiLink,
+  Stack,
+  Typography,
+} from "@mui/material"
 import { type FC } from "react"
-
 import { Image } from "codeforlife/components"
+import { Link } from "codeforlife/components/router"
 
 import BarefootImage from "../../images/barefoot_logo.png"
 import BcsImage from "../../images/bcs_logo.png"
@@ -12,12 +17,10 @@ import Logo10xImage from "../../images/10x_logo.png"
 import MCSaatchiImage from "../../images/mc_saatchi_logo.png"
 import PressureCookerImage from "../../images/pressure_cooker_logo.png"
 
-export interface SupporterProps {
+const Supporter: FC<{
   desc: string
   src: string
-}
-
-const Supporter: FC<SupporterProps> = ({ desc, src }) => (
+}> = ({ desc, src }) => (
   <Image alt={desc} title={desc} src={src} style={{ width: "auto" }} />
 )
 
@@ -52,38 +55,28 @@ const Supporters: FC<SupportersProps> = () => {
           <Typography variant="h5">Developers</Typography>
           <Typography>
             To contribute, head over to{" "}
-            <Link
-              href={import.meta.env.VITE_LINK_PORTAL_GITHUB_HREF}
-              color="inherit"
-              underline="always"
-              target="_blank"
-            >
+            <Link to={import.meta.env.VITE_LINK_PORTAL_GITHUB} target="_blank">
               GitHub
             </Link>
             , check out the issue tracker, and get started. There you can
             suggest new features or assign yourself an issue to develop. You can
             find more info about how to do all these on our{" "}
-            <Link
-              href={import.meta.env.VITE_LINK_CFL_DOCS_HREF}
-              color="inherit"
-              underline="always"
-              target="_blank"
-            >
+            <Link to={import.meta.env.VITE_LINK_CFL_DOCS} target="_blank">
               docs on Gitbook
             </Link>
             .
           </Typography>
           <Typography variant="h5">Teachers, parents, and creatives</Typography>
           <Typography>
             Please get in touch through our{" "}
-            <Link
+            <MuiLink
             // TODO: Implement Freshdesk widget hook
             // onClick={() => {
             //   useFreshworksWidget("open")
             // }}
             >
               contact
-            </Link>{" "}
+            </MuiLink>{" "}
             form and let us know how you would like to get involved.
           </Typography>
           <Typography>