Image imports

src/components/StudentCredentialsTable.tsx

@@ -15,7 +15,7 @@ import { Print as PrintIcon, SaveAlt as SaveAltIcon } from "@mui/icons-material"
 import { CopyIconButton } from "codeforlife/components"
 import { generatePath } from "react-router-dom"
 
-import CflLogo from "../images/CFLLogoImage.png"
+import CflLogoImage from "../images/logo_cfl.png"
 import { paths } from "../routes"
 
 function makeAutoLoginLink(
@@ -67,7 +67,7 @@ const StudentCredentialsPDF: FC<{
             key={`${student.user.first_name}-pdf`}
             style={pdfStyles.mainView}
           >
-            <Image source={CflLogo} src={CflLogo} style={pdfStyles.image} />
+            <Image source={CflLogoImage} src={CflLogoImage} style={pdfStyles.image} />
             <View>
               {/*TODO: Auto login link is too long and doesn't fit in PDF.*/}
               <Text style={pdfStyles.text}>

src/features/footer/Footer.tsx

@@ -9,12 +9,12 @@ import { Image } from "codeforlife/components"
 import { ThemedBox } from "codeforlife/theme"
 import { primary } from "codeforlife/theme/colors"
 
-import CflLogoPowered from "../../images/CFLPoweredLogoImage.svg"
+import CFLPoweredLogoImage from "../../images/logo_cfl_powered.svg"
 import { LINK_SKILLS_FOR_THE_FUTURE } from "../../app/env"
 import Links from "./Links"
 import RegisterToNewsletterForm from "./RegisterToNewsletterForm.tsx"
 import SocialMediaIcons from "./SocialMediaIcons"
-import TenYearAnniversary from "../../images/10YearsAnniversaryImage.png"
+import TenYearAnniversaryImage from "../../images/10_years_anniversary.png"
 import { themeOptions } from "../../app/theme"
 
 export interface FooterProps {}
@@ -45,13 +45,13 @@ const Footer: FC<FooterProps> = () => {
             >
               <Image
                 alt="Code for Life and Ocado Group logos"
-                src={CflLogoPowered}
+                src={CFLPoweredLogoImage}
                 href={LINK_SKILLS_FOR_THE_FUTURE}
                 hrefInNewTab
               />
               <Image
                 alt="10 year anniversary"
-                src={TenYearAnniversary}
+                src={TenYearAnniversaryImage}
                 maxWidth={{ xs: "60%", sm: "85%" }}
               />
             </Stack>

src/pages/aboutUs/AboutUs.tsx

@@ -1,7 +1,7 @@
 import * as page from "codeforlife/components/page"
 import { type FC } from "react"
 
-import AboutUsHeroImage from "../../images/AboutUsHeroHexagonImage.png"
+import AboutUsHeroImage from "../../images/about_us_hero_hexagon.png"
 import CodeForLife from "./CodeForLife"
 import Dedication from "./Dedication"
 import OcadoGroup from "./OcadoGroup"

src/pages/aboutUs/CodeForLife.tsx

@@ -1,7 +1,7 @@
 import { type FC } from "react"
 import { Typography } from "@mui/material"
 
-import AboutUsCFLImage from "../../images/AboutUsImage.jpg"
+import AboutUsCFLImage from "../../images/about_us.jpg"
 import Introduction from "../../components/Introduction"
 
 export interface CodeForLifeProps {}

src/pages/aboutUs/Dedication.tsx

@@ -2,7 +2,7 @@ import { Stack, Typography } from "@mui/material"
 import { type FC } from "react"
 import { Image } from "codeforlife/components"
 
-import SharonHarrisonImage from "../../images/SharonHarrisonImage.jpg"
+import SharonHarrisonImage from "../../images/sharon_harrison.jpg"
 
 export interface DedicationProps {}
 

src/pages/aboutUs/OcadoGroup.tsx

@@ -2,7 +2,7 @@ import { type FC } from "react"
 import { Link } from "codeforlife/components/router"
 import { Typography } from "@mui/material"
 
-import AboutUsOcadoImage from "../../images/AboutUsOcadoImage.jpg"
+import AboutUsOcadoImage from "../../images/about_us_ocado.jpg"
 import Introduction from "../../components/Introduction"
 import { LINK_SKILLS_FOR_THE_FUTURE } from "../../app/env"
 

src/pages/aboutUs/Supporters.tsx

@@ -4,14 +4,14 @@ import { Image } from "codeforlife/components"
 import { Link } from "codeforlife/components/router"
 
 import { LINK_CFL_DOCS, LINK_PORTAL_GITHUB } from "../../app/env"
-import BarefootImage from "../../images/BarefootLogoImage.png"
-import BcsImage from "../../images/BCSLogoImage.png"
-import GLAImage from "../../images/GLALogoImage.png"
-import HOPEImage from "../../images/HopeLogoImage.png"
-import IclImage from "../../images/ICLLogoImage.png"
-import Logo10xImage from "../../images/10xLogoImage.png"
-import MCSaatchiImage from "../../images/MCSaatchiLogoImage.png"
-import PressureCookerImage from "../../images/PressureCookerLogoImage.png"
+import BarefootImage from "../../images/barefoot_logo.png"
+import BcsImage from "../../images/bcs_logo.png"
+import GLAImage from "../../images/gla_logo.png"
+import HOPEImage from "../../images/hope_logo.png"
+import IclImage from "../../images/icl_logo.png"
+import Logo10xImage from "../../images/10x_logo.png"
+import MCSaatchiImage from "../../images/mc_saatchi_logo.png"
+import PressureCookerImage from "../../images/pressure_cooker_logo.png"
 
 const Supporter: FC<{
   desc: string

src/pages/codingClubs/CodingClubs.tsx

@@ -3,7 +3,7 @@ import { type FC } from "react"
 import { useTheme } from "@mui/material"
 
 import ClubAim from "./ClubAim"
-import CodeClubHeroImage from "../../images/CodingClubHeroHexagonImage.png"
+import CodeClubHeroImage from "../../images/coding_club_hero_hexagon.png"
 import Primary from "./Primary"
 import Python from "./Python"
 

src/pages/codingClubs/Primary.tsx

@@ -7,7 +7,7 @@ import {
   LINK_PRIMARY_PACK_DOWNLOAD,
   LINK_PRIMARY_PACK_GITBOOK,
 } from "../../app/env"
-import AboutUsImage from "../../images/AboutUsImage.jpg"
+import AboutUsImage from "../../images/about_us.jpg"
 import Introduction from "../../components/Introduction"
 
 export interface PrimaryProps {}

src/pages/codingClubs/Python.tsx

@@ -8,7 +8,7 @@ import {
   LINK_PYTHON_PACK_GITBOOK,
 } from "../../app/env"
 import Introduction from "../../components/Introduction"
-import PythonClubImage from "../../images/CodingClubPythonPackImage.png"
+import PythonClubImage from "../../images/coding_club_python_pack.png"
 
 export interface PythonProps {}
 

src/pages/getInvolved/GetInvolved.tsx

@@ -4,10 +4,10 @@ import { type FC } from "react"
 import { Unstable_Grid2 as Grid } from "@mui/material"
 
 import Card from "../../components/Card"
-import ClubsImg from "../../images/ClubsImage.png"
-import GetInvolvedHero from "../../images/GetInvolvedHeroHexagonImage.png"
-import GithubImg from "../../images/GithubImage.png"
-import UniversitiesImg from "../../images/UniversitiesImage.png"
+import ClubsImage from "../../images/clubs.png"
+import GetInvolvedHeroImage from "../../images/get_involved_hero_hexagon.png"
+import GithubImage from "../../images/github.png"
+import UniversitiesImage from "../../images/universities.png"
 import { paths } from "../../routes"
 
 export interface GetInvolvedProps {}
@@ -20,7 +20,7 @@ const GetInvolved: FC<GetInvolvedProps> = () => (
       imageProps={{
         title: "Adult teaching two children",
         alt: "Adult teaching two children",
-        src: GetInvolvedHero,
+        src: GetInvolvedHeroImage,
       }}
     />
     <page.Section>
@@ -31,7 +31,7 @@ const GetInvolved: FC<GetInvolvedProps> = () => (
             description="Become a Code for Life ambassador by starting up a coding club. Find out more about how you can get involved with this by visiting our coding club page."
             mediaProps={{
               title: "Student showing their work to teacher",
-              image: ClubsImg,
+              image: ClubsImage,
             }}
             linkButtonProps={{
               to: paths.codingClubs._,
@@ -44,7 +44,7 @@ const GetInvolved: FC<GetInvolvedProps> = () => (
           <Card
             title="Contribute through code"
             description="We welcome volunteers from all backgrounds to help us with our coding adventure. Take a look at our contribution guide to find out how to get involved in our open source projects."
-            mediaProps={{ title: "Github repository page", image: GithubImg }}
+            mediaProps={{ title: "Github repository page", image: GithubImage }}
             linkButtonProps={{
               to: paths.contribute._,
               children: "Read more",
@@ -58,7 +58,7 @@ const GetInvolved: FC<GetInvolvedProps> = () => (
             description="Please get in touch at codeforlife@ocado.com if you are interested in working on Code for Life projects with your students including coding, user experience, data analytics and new feature design."
             mediaProps={{
               title: "Three students looking at laptops",
-              image: UniversitiesImg,
+              image: UniversitiesImage,
             }}
             linkButtonProps={{
               to: "mailto:codeforlife@ocado.com",

src/pages/home/AboutUs.tsx

@@ -4,11 +4,11 @@ import { ChevronRight as ChevronRightIcon } from "@mui/icons-material"
 import { type FC } from "react"
 import { Image } from "codeforlife/components"
 
-import ControllerIcon from "../../images/ControllerIconImage.png"
-import GlobeIcon from "../../images/GlobeIconImage.png"
+import ControllerIconImage from "../../images/icon_controller.png"
+import FreeIconImage from "../../images/icon_free.png"
+import GlobeIconImage from "../../images/icon_globe.png"
 import { LINK_FEMALE_GRADUATES_IN_CS } from "../../app/env"
-import PieChartIcon from "../../images/PiechartIconImage.png"
-import TicketIcon from "../../images/FreeIconImage.png"
+import PieChartIconImage from "../../images/icon_piechart.png"
 import { paths } from "../../routes"
 
 const Column: FC<{
@@ -32,7 +32,7 @@ const AboutUs: FC<AboutUsProps> = () => (
         Giving everyone the ability to shape technology&apos;s future
       </Typography>
     </Grid>
-    <Column img={{ alt: "pie chart", src: PieChartIcon }}>
+    <Column img={{ alt: "pie chart", src: PieChartIconImage }}>
       <Typography textAlign="center">
         Just 16% of university computer science graduates (2018/19) in the UK
         were women
@@ -42,18 +42,18 @@ const AboutUs: FC<AboutUsProps> = () => (
         , we want to change that.
       </Typography>
     </Column>
-    <Column img={{ alt: "game controller", src: ControllerIcon }}>
+    <Column img={{ alt: "game controller", src: ControllerIconImage }}>
       <Typography textAlign="center">
         Gamification helps children learn whilst having fun!
       </Typography>
     </Column>
-    <Column img={{ alt: "free ticket", src: TicketIcon }}>
+    <Column img={{ alt: "free ticket", src: FreeIconImage }}>
       <Typography textAlign="center">
         That&apos;s right, free forever: our gift to you! We&apos;re also Open
         Source.
       </Typography>
     </Column>
-    <Column img={{ alt: "earth", src: GlobeIcon }}>
+    <Column img={{ alt: "earth", src: GlobeIconImage }}>
       <Typography textAlign="center">
         Code for Life has over 660,000 registered users across the world.
       </Typography>

src/pages/home/CodingClubs.tsx

@@ -16,7 +16,7 @@ const CodingClubs: FC<CodingClubsProps> = () => (
       Take a look at our two club packs that we have put together using our
       Rapid Router resources. These are fast-paced, session based clubs that can
       be run by anyone keen to help people learn to code. There are guides and
-      resource links with printable cerificates for those that complete the
+      resource links with printable certificates for those that complete the
       course.
     </Typography>
     <Stack direction="row" justifyContent="end">

src/pages/home/Quotes.tsx

@@ -3,9 +3,9 @@ import { Image, type ImageProps } from "codeforlife/components"
 import { type FC } from "react"
 import { Link } from "codeforlife/components/router"
 
-import ReubenPhoto from "../../images/ReubenImage.png"
-import RobPhoto from "../../images/RobImage.png"
-import SianPhoto from "../../images/SianImage.png"
+import ReubenImage from "../../images/reuben.png"
+import RobImage from "../../images/rob.png"
+import SianImage from "../../images/sian.png"
 import { paths } from "../../routes"
 
 const Column: FC<{
@@ -56,17 +56,17 @@ const Quotes: FC<QuotesProps> = () => (
       </Typography>
     </Grid>
     <Column
-      img={{ alt: "Reuben", src: ReubenPhoto }}
+      img={{ alt: "Reuben", src: ReubenImage }}
       quote="My year 10's have been using Rapid Router to develop their Python skills and it has been a great transition into the Python IDE."
       person={{ name: "Reuben", title: "Computer Science teacher" }}
     />
     <Column
-      img={{ alt: "Sian", src: SianPhoto }}
+      img={{ alt: "Sian", src: SianImage }}
       quote="I like the slow build of layers of block coding that allows students to work at their own pace and fully embed their understanding of the different blocks."
       person={{ name: "Sian", title: "Head of ICT" }}
     />
     <Column
-      img={{ alt: "Rob", src: RobPhoto }}
+      img={{ alt: "Rob", src: RobImage }}
       quote="You can hit all of the computing curriculum, in a structured way. It is perfect for teachers who are struggling."
       person={{ name: "Rob", title: "ICT teacher" }}
     />

src/pages/home/TargetAudience.tsx

@@ -4,8 +4,8 @@ import { Stack, type SxProps, Typography, useTheme } from "@mui/material"
 import { ChevronRight as ChevronRightIcon } from "@mui/icons-material"
 import { type FC } from "react"
 
-import EducateImage from "../../images/DashboardEducateImage.png"
-import PlayImage from "../../images/DashboardPlayImage.png"
+import EducateImage from "../../images/dashboard_educate.png"
+import PlayImage from "../../images/dashboard_play.png"
 import { paths } from "../../routes"
 
 export interface TargetAudienceProps {}

src/pages/homeLearning/Advanced.tsx

@@ -3,7 +3,7 @@ import { type FC } from "react"
 import { LINK_HOME_LEARNING_ADVANCED } from "../../app/env"
 import Levels from "./Levels"
 import { Link } from "codeforlife/components/router"
-import RRAdvancedImage from "../../images/RRAdvancedImage.png"
+import RRAdvancedImage from "../../images/rr_advanced.png"
 import { paths } from "../../routes"
 
 export interface AdvancedProps {}

src/pages/homeLearning/Beginner.tsx

@@ -2,7 +2,7 @@ import { type FC } from "react"
 
 import { LINK_HOME_LEARNING_BEGINNER } from "../../app/env"
 import Levels from "./Levels"
-import RRBeginnerImage from "../../images/RRBeginnerImage.png"
+import RRBeginnerImage from "../../images/rr_beginner.png"
 
 export interface BeginnerProps {}
 

src/pages/homeLearning/HomeLearning.tsx

@@ -6,7 +6,7 @@ import { Send as SendIcon } from "@mui/icons-material"
 import AboutRR from "./AboutRR"
 import Advanced from "./Advanced"
 import Beginner from "./Beginner"
-import HomeLearningHeroImage from "../../images/HomeLearningHeroHexagonImage.png"
+import HomeLearningHeroImage from "../../images/home_learning_hero_hexagon.png"
 import Intermediate from "./Intermediate"
 import { LINK_IDEAS_BOX } from "../../app/env"
 import { paths } from "../../routes"

src/pages/homeLearning/Intermediate.tsx

@@ -2,7 +2,7 @@ import { type FC } from "react"
 
 import { LINK_HOME_LEARNING_INTERMEDIATE } from "../../app/env"
 import Levels from "./Levels"
-import RRIntermediateImage from "../../images/RRIntermediateImage.png"
+import RRIntermediateImage from "../../images/rr_intermediate.png"
 
 export interface IntermediateProps {}
 

src/pages/studentDashboard/Games.tsx

@@ -2,7 +2,7 @@ import { Stack, Typography } from "@mui/material"
 import { type FC } from "react"
 
 import { Card } from "../../components"
-import RRLogoGreenImage from "../../images/RRGreenLogoImage.svg"
+import RRLogoGreenImage from "../../images/RR_logo_green.svg"
 import { paths } from "../../routes"
 
 export interface GamesProps {}

src/pages/studentDashboard/RapidRouterProgress.tsx

@@ -5,10 +5,10 @@ import { Image } from "codeforlife/components"
 import { LinkButton } from "codeforlife/components/router"
 
 // import { useRetrieveUserQuery } from "../../api/rapidRouter"
-import RRLogoImage from "../../images/RRLogoImage.svg"
+import RRLogoImage from "../../images/RR_logo.svg"
 import { paths } from "../../routes"
 
-const GetRapidRouterScores: React.FC = () => {
+const GetRapidRouterScores: FC = () => {
   // TODO: get real data from rapid-router endpoint.
   // useRetrieveUserQuery()
   const stats = {