From b560e407bd7012a46e203ec587824fc1b2f46b68 Mon Sep 17 00:00:00 2001
From: Alex Lewin <sl2281@cam.ac.uk>
Date: Tue, 4 Mar 2025 16:59:09 +0000
Subject: [PATCH 1/5] Restyle Teacher Features cards

---
 src/app/components/pages/TeacherFeatures.tsx | 141 ++++++++++---------
 src/scss/phy/menu-page-phy.scss              |  24 ++--
 2 files changed, 86 insertions(+), 79 deletions(-)

diff --git a/src/app/components/pages/TeacherFeatures.tsx b/src/app/components/pages/TeacherFeatures.tsx
index 3423a323ca..3224958821 100644
--- a/src/app/components/pages/TeacherFeatures.tsx
+++ b/src/app/components/pages/TeacherFeatures.tsx
@@ -1,10 +1,10 @@
 import React from "react";
-import {Button, Col, Container, Row} from "reactstrap";
+import {Button, Card, Col, Container, Row} from "reactstrap";
 import {TitleAndBreadcrumb} from "../elements/TitleAndBreadcrumb";
 import {useAppSelector, selectors} from "../../state";
 import {isLoggedIn, isTeacherOrAbove, PATHS} from "../../services";
 import {Link} from "react-router-dom";
-import {IsaacCard} from "../content/IsaacCard";
+import classNames from "classnames";
 
 export const TeacherFeatures = () => {
 
@@ -12,6 +12,27 @@ export const TeacherFeatures = () => {
 
     const isDisabled = !isLoggedIn(user) || !isTeacherOrAbove(user);
 
+    interface TeacherFeatureCardProps {
+        url: string;
+        imgSrc: string;
+        title: string;
+        subtitle: string;
+        disabled?: boolean;
+    }
+
+    const TeacherFeatureCard = (props: TeacherFeatureCardProps) => {
+        const {url, imgSrc, title, subtitle, disabled} = props;
+        return <Link to={url} className="h-100 w-100" aria-label={title} aria-disabled={disabled} style={{textDecoration: "none"}}>
+            <Card className={classNames("p-3 teacher-features", {"disabled": disabled})}>
+                <div className="d-flex justify-content-between">
+                    <h5 className="mt-3 me-2">{title}</h5>
+                    <img src={imgSrc} alt=""/>
+                </div>
+                <p>{subtitle}</p>
+            </Card>
+        </Link>;
+    };
+
     return<Container>
         <Row className="mb-4">
             <Col>
@@ -36,37 +57,31 @@ export const TeacherFeatures = () => {
         </Row>
         <Row className="isaac-cards-body px-3">
             <Col sm={6} md={4} className="mb-3 mb-md-0">
-                <IsaacCard doc={{ clickUrl: "/groups",
-                    image: {src: "/assets/phy/icons/teacher_features_sprite.svg#groups"},
-                    title: "1. Create a Group",
-                    disabled: isDisabled,
-                    verticalContent: true,
-                    subtitle: "Create and manage class groups, and share them with colleagues."}}
-                imageClassName="teacher-features"
-                className="w-100"
+                <TeacherFeatureCard
+                    url = "/groups"
+                    imgSrc = "/assets/phy/icons/teacher_features_sprite.svg#groups"
+                    title = "1. Create a Group"
+                    subtitle = "Create and manage class groups, and share them with colleagues."
+                    disabled = {isDisabled}
                 />
             </Col>
             <Col sm={6} md={4} className="mb-3 mb-md-0">
-                <IsaacCard doc={{ clickUrl: PATHS.SET_ASSIGNMENTS,
-                    image: {src: "/assets/phy/icons/teacher_features_sprite.svg#set-assignments"},
-                    title: "2. Set Assignments",
-                    disabled: isDisabled,
-                    verticalContent: true,
-                    subtitle: "Set assignments from our skills books, pre-made boards or create your own."}}
-                imageClassName="teacher-features"
-                className="w-100"
+                <TeacherFeatureCard
+                    url = {PATHS.SET_ASSIGNMENTS}
+                    imgSrc = "/assets/phy/icons/teacher_features_sprite.svg#set-assignments"
+                    title = "2. Set Assignments"
+                    subtitle = "Set assignments from our skills books, pre-made boards or create your own."
+                    disabled = {isDisabled}
                 />
             </Col>
             <Col xs={0} sm={3} className="d-md-none"/>
             <Col sm={6} md={4}>
-                <IsaacCard doc={{ clickUrl: PATHS.ASSIGNMENT_PROGRESS, 
-                    image: {src: "/assets/phy/icons/teacher_features_sprite.svg#track-progress"},
-                    title: "3. Assignment Progress",
-                    disabled: isDisabled,
-                    verticalContent: true,
-                    subtitle: "View your students’ progress through their assignments."}}
-                imageClassName="teacher-features"
-                className="w-100"
+                <TeacherFeatureCard
+                    url = {PATHS.ASSIGNMENT_PROGRESS}
+                    imgSrc = "/assets/phy/icons/teacher_features_sprite.svg#track-progress"
+                    title = "3. Assignment Progress"
+                    subtitle = "View your students’ progress through their assignments."
+                    disabled = {isDisabled}
                 />
             </Col>
         </Row>
@@ -77,35 +92,29 @@ export const TeacherFeatures = () => {
         </Row>
         <Row className="isaac-cards-body mt-2 px-3">
             <Col sm={6} md={4} className="mb-3 mb-md-0">
-                <IsaacCard doc={{ clickUrl: "/support/teacher/general",
-                    image: {src: "/assets/phy/icons/teacher_features_sprite.svg#teacher-forum"},
-                    title: "Teacher FAQ",
-                    verticalContent: true,
-                    subtitle: "Answers to your questions and how-to guides."}}
-                imageClassName="teacher-features"
-                className="w-100"
+                <TeacherFeatureCard               
+                    url = "/support/teacher/general"
+                    imgSrc = "/assets/phy/icons/teacher_features_sprite.svg#teacher-forum"
+                    title = "Teacher FAQ"
+                    subtitle = "Answers to your questions and how-to guides."
                 />
             </Col>
             <Col sm={6} md={4} className="mb-3 mb-md-0">
-                <IsaacCard doc={{ clickUrl: "/events?types=teacher",
-                    image: {src: "/assets/phy/icons/teacher_features_sprite.svg#use-with-class"},
-                    title: "Teacher CPD",
-                    verticalContent: true,
-                    subtitle: "Free short courses to help you use Isaac Physics: by topic or by level of experience with Isaac."}}
-                imageClassName="teacher-features"
-                className="w-100"
+                <TeacherFeatureCard
+                    url = "/events?types=teacher"
+                    imgSrc = "/assets/phy/icons/teacher_features_sprite.svg#use-with-class"
+                    title = "Teacher CPD"
+                    subtitle = "Free short courses to help you use Isaac Physics: by topic or by level of experience with Isaac."
                 />
             </Col>
             <Col xs={0} sm={3} className="d-md-none"/>
             <Col sm={6} md={4}>
-                <IsaacCard doc={{ clickUrl: "/teacher_emails",
-                    image: {src: "/assets/phy/icons/computer.svg"},
-                    title: "Teacher Emails",
-                    disabled: isDisabled,
-                    verticalContent: true,
-                    subtitle: "Recent start-of-term emails sent to teachers."}}
-                imageClassName="teacher-features"
-                className="w-100"
+                <TeacherFeatureCard
+                    url = "/teacher_emails"
+                    imgSrc = "/assets/phy/icons/computer.svg"
+                    title = "Teacher Emails"
+                    subtitle = "Recent start-of-term emails sent to teachers."
+                    disabled = {isDisabled}
                 />
             </Col>
         </Row>
@@ -116,34 +125,28 @@ export const TeacherFeatures = () => {
         </Row>
         <Row className="isaac-cards-body mb-5 mt-2 px-3">
             <Col sm={6} md={4} className="mb-3 mb-md-0">
-                <IsaacCard doc={{ clickUrl: "/pages/order_books",
-                    image: {src: "/assets/phy/icons/teacher_features_sprite.svg#skills-book-cover"},
-                    title: "Isaac Physics Books",
-                    verticalContent: true,
-                    subtitle: "Buy one of our Skills Mastery books at cost."}}
-                imageClassName="teacher-features"
-                className="w-100"
+                <TeacherFeatureCard
+                    url = "/pages/order_books"
+                    imgSrc = "/assets/phy/icons/teacher_features_sprite.svg#skills-book-cover"
+                    title = "Isaac Physics Books"
+                    subtitle = "Buy one of our Skills Mastery books at cost."
                 />
             </Col>
             <Col sm={6} md={4} className="mb-3 mb-md-0">
-                <IsaacCard doc={{ clickUrl: "/pages/pre_made_gameboards",
-                    image: {src: "/assets/phy/icons/key_stage_sprite.svg#triple"},
-                    title: "Boards by Topic",
-                    verticalContent: true,
-                    subtitle: isLoggedIn(user) ?  "A selection of our questions organised by topic." : "A selection of our questions organised by lesson topic."}}
-                imageClassName="teacher-features"
-                className="w-100"
+                <TeacherFeatureCard
+                    url = "/pages/pre_made_gameboards"
+                    imgSrc = "/assets/phy/icons/key_stage_sprite.svg#triple"
+                    title = "Boards by Topic"
+                    subtitle = {isLoggedIn(user) ?  "A selection of our questions organised by topic." : "A selection of our questions organised by lesson topic."}
                 />
             </Col>
             <Col xs={0} sm={3} className="d-md-none"/>
             <Col sm={6} md={4}>
-                <IsaacCard doc={{ clickUrl: "/events?types=student",
-                    image: {src: "/assets/phy/icons/teacher_features_sprite.svg#calendar"},
-                    title: "Events",
-                    verticalContent: true,
-                    subtitle: "Browse free events for your KS4 and KS5 students."}}
-                imageClassName="teacher-features"
-                className="w-100"
+                <TeacherFeatureCard
+                    url = "/events?types=student"
+                    imgSrc = "/assets/phy/icons/teacher_features_sprite.svg#calendar"
+                    title = "Events"
+                    subtitle = "Browse free events for your KS4 and KS5 students."
                 />
             </Col>
         </Row>
diff --git a/src/scss/phy/menu-page-phy.scss b/src/scss/phy/menu-page-phy.scss
index c604f754b7..1207e1d778 100644
--- a/src/scss/phy/menu-page-phy.scss
+++ b/src/scss/phy/menu-page-phy.scss
@@ -17,12 +17,6 @@
     margin-bottom: 15px;
     display: flex;
     position: relative;
-
-    &.teacher-features {
-      display: block;
-      width: 62.5%;
-      margin-left: 18.75%;
-    }
   }
 
   .col-centered{
@@ -87,6 +81,20 @@
       border-radius: 0;
       outline: none !important;
     }
+
+    &.teacher-features {
+      border-radius: 8px;
+      border: 2px solid $color-neutral-200;
+      img {
+        width: 15%;
+      }
+      &.disabled {
+        box-shadow: none !important;
+        img {
+          filter: grayscale(1);
+        }
+      }
+    }
   }
 
   button.hexagon-btn-link {
@@ -170,10 +178,6 @@
       margin-right: auto !important;
       margin-left: auto !important;
       display: block;
-
-      &.teacher-features {
-        width: 150px;
-      }
     }
 
     &.disabled {

From 4279fc1000090a97f040eda0227c5bd0baa7dfd9 Mon Sep 17 00:00:00 2001
From: Alex Lewin <sl2281@cam.ac.uk>
Date: Tue, 4 Mar 2025 17:01:34 +0000
Subject: [PATCH 2/5] Left-align headings

---
 src/app/components/pages/TeacherFeatures.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/app/components/pages/TeacherFeatures.tsx b/src/app/components/pages/TeacherFeatures.tsx
index 3224958821..73ec2bc99c 100644
--- a/src/app/components/pages/TeacherFeatures.tsx
+++ b/src/app/components/pages/TeacherFeatures.tsx
@@ -86,9 +86,7 @@ export const TeacherFeatures = () => {
             </Col>
         </Row>
         <Row className="my-4">
-            <Col>
-                <h3 className="h-title text-center">Teacher Support</h3>
-            </Col>
+            <h4>Teacher Support</h4>
         </Row>
         <Row className="isaac-cards-body mt-2 px-3">
             <Col sm={6} md={4} className="mb-3 mb-md-0">
@@ -119,9 +117,7 @@ export const TeacherFeatures = () => {
             </Col>
         </Row>
         <Row className="my-4">
-            <Col>
-                <h3 className="h-title text-end">Teacher Resources</h3>
-            </Col>
+            <h4>Teacher Resources</h4>
         </Row>
         <Row className="isaac-cards-body mb-5 mt-2 px-3">
             <Col sm={6} md={4} className="mb-3 mb-md-0">

From 9421a6ec3fff94e9b288422d08599f6151d2d86b Mon Sep 17 00:00:00 2001
From: Alex Lewin <sl2281@cam.ac.uk>
Date: Tue, 4 Mar 2025 17:05:01 +0000
Subject: [PATCH 3/5] Replace hardcoded "Isaac Physics" with "Isaac"

---
 src/app/components/pages/TeacherFeatures.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/components/pages/TeacherFeatures.tsx b/src/app/components/pages/TeacherFeatures.tsx
index 73ec2bc99c..68abf80edf 100644
--- a/src/app/components/pages/TeacherFeatures.tsx
+++ b/src/app/components/pages/TeacherFeatures.tsx
@@ -33,7 +33,7 @@ export const TeacherFeatures = () => {
         </Link>;
     };
 
-    return<Container>
+    return <Container>
         <Row className="mb-4">
             <Col>
                 <TitleAndBreadcrumb currentPageTitle={"Teacher Features"} />
@@ -43,11 +43,11 @@ export const TeacherFeatures = () => {
             {isDisabled ?
                 <Col md={6}>
                     <p className="subtitle">
-                    Isaac Physics provides you with a huge range of resources to support your teaching of Physics – all for free.                 </p>
+                    Isaac provides you with a huge range of resources to support your teaching of Science subjects – all for free.                 </p>
                 </Col>:
                 <Col>
                     <p className="subtitle">
-                        Isaac Physics provides you with a huge range of resources to support your teaching of Physics – all for free.                 </p>
+                        Isaac provides you with a huge range of resources to support your teaching of Science subjects – all for free.                 </p>
                 </Col>}
             {isDisabled && <Col md={6} className="text-center text-md-end">
                 <Button tag={Link} size="lg" color="secondary" to={isLoggedIn(user) ? "/pages/contact_us_teacher" : "/register"}>
@@ -102,7 +102,7 @@ export const TeacherFeatures = () => {
                     url = "/events?types=teacher"
                     imgSrc = "/assets/phy/icons/teacher_features_sprite.svg#use-with-class"
                     title = "Teacher CPD"
-                    subtitle = "Free short courses to help you use Isaac Physics: by topic or by level of experience with Isaac."
+                    subtitle = "Free short courses to help you use Isaac: by topic or by level of experience with Isaac."
                 />
             </Col>
             <Col xs={0} sm={3} className="d-md-none"/>
@@ -124,7 +124,7 @@ export const TeacherFeatures = () => {
                 <TeacherFeatureCard
                     url = "/pages/order_books"
                     imgSrc = "/assets/phy/icons/teacher_features_sprite.svg#skills-book-cover"
-                    title = "Isaac Physics Books"
+                    title = "Isaac Books"
                     subtitle = "Buy one of our Skills Mastery books at cost."
                 />
             </Col>

From fbdc5474bf3ae6fde9a802d72d596e8806459374 Mon Sep 17 00:00:00 2001
From: Alex Lewin <sl2281@cam.ac.uk>
Date: Tue, 4 Mar 2025 17:11:56 +0000
Subject: [PATCH 4/5] Fix image sizing & overflow on small screens

---
 src/app/components/pages/TeacherFeatures.tsx | 2 +-
 src/scss/phy/menu-page-phy.scss              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/components/pages/TeacherFeatures.tsx b/src/app/components/pages/TeacherFeatures.tsx
index 68abf80edf..8123dab4f1 100644
--- a/src/app/components/pages/TeacherFeatures.tsx
+++ b/src/app/components/pages/TeacherFeatures.tsx
@@ -23,7 +23,7 @@ export const TeacherFeatures = () => {
     const TeacherFeatureCard = (props: TeacherFeatureCardProps) => {
         const {url, imgSrc, title, subtitle, disabled} = props;
         return <Link to={url} className="h-100 w-100" aria-label={title} aria-disabled={disabled} style={{textDecoration: "none"}}>
-            <Card className={classNames("p-3 teacher-features", {"disabled": disabled})}>
+            <Card className={classNames("p-3 teacher-features h-100", {"disabled": disabled})}>
                 <div className="d-flex justify-content-between">
                     <h5 className="mt-3 me-2">{title}</h5>
                     <img src={imgSrc} alt=""/>
diff --git a/src/scss/phy/menu-page-phy.scss b/src/scss/phy/menu-page-phy.scss
index 1207e1d778..e84e43f969 100644
--- a/src/scss/phy/menu-page-phy.scss
+++ b/src/scss/phy/menu-page-phy.scss
@@ -86,7 +86,7 @@
       border-radius: 8px;
       border: 2px solid $color-neutral-200;
       img {
-        width: 15%;
+        width: 3.5rem;
       }
       &.disabled {
         box-shadow: none !important;

From 3a58614e1d1246928ea1145c5d30abd138656fc3 Mon Sep 17 00:00:00 2001
From: Jacob Brown <jeab2@cam.ac.uk>
Date: Mon, 10 Mar 2025 14:17:50 +0000
Subject: [PATCH 5/5] Increase breakpoints to enable wider card widths

---
 src/app/components/pages/TeacherFeatures.tsx | 21 +++++++++-----------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/app/components/pages/TeacherFeatures.tsx b/src/app/components/pages/TeacherFeatures.tsx
index 8123dab4f1..8c7cd1c8bc 100644
--- a/src/app/components/pages/TeacherFeatures.tsx
+++ b/src/app/components/pages/TeacherFeatures.tsx
@@ -56,7 +56,7 @@ export const TeacherFeatures = () => {
             </Col>}
         </Row>
         <Row className="isaac-cards-body px-3">
-            <Col sm={6} md={4} className="mb-3 mb-md-0">
+            <Col md={6} lg={4} className="mb-3 mb-lg-0">
                 <TeacherFeatureCard
                     url = "/groups"
                     imgSrc = "/assets/phy/icons/teacher_features_sprite.svg#groups"
@@ -65,7 +65,7 @@ export const TeacherFeatures = () => {
                     disabled = {isDisabled}
                 />
             </Col>
-            <Col sm={6} md={4} className="mb-3 mb-md-0">
+            <Col md={6} lg={4} className="mb-3 mb-lg-0">
                 <TeacherFeatureCard
                     url = {PATHS.SET_ASSIGNMENTS}
                     imgSrc = "/assets/phy/icons/teacher_features_sprite.svg#set-assignments"
@@ -74,8 +74,7 @@ export const TeacherFeatures = () => {
                     disabled = {isDisabled}
                 />
             </Col>
-            <Col xs={0} sm={3} className="d-md-none"/>
-            <Col sm={6} md={4}>
+            <Col md={{size: 6, offset: 3}} lg={{size: 4, offset: 0}}>
                 <TeacherFeatureCard
                     url = {PATHS.ASSIGNMENT_PROGRESS}
                     imgSrc = "/assets/phy/icons/teacher_features_sprite.svg#track-progress"
@@ -89,7 +88,7 @@ export const TeacherFeatures = () => {
             <h4>Teacher Support</h4>
         </Row>
         <Row className="isaac-cards-body mt-2 px-3">
-            <Col sm={6} md={4} className="mb-3 mb-md-0">
+            <Col md={6} lg={4} className="mb-3 mb-lg-0">
                 <TeacherFeatureCard               
                     url = "/support/teacher/general"
                     imgSrc = "/assets/phy/icons/teacher_features_sprite.svg#teacher-forum"
@@ -97,7 +96,7 @@ export const TeacherFeatures = () => {
                     subtitle = "Answers to your questions and how-to guides."
                 />
             </Col>
-            <Col sm={6} md={4} className="mb-3 mb-md-0">
+            <Col md={6} lg={4} className="mb-3 mb-lg-0">
                 <TeacherFeatureCard
                     url = "/events?types=teacher"
                     imgSrc = "/assets/phy/icons/teacher_features_sprite.svg#use-with-class"
@@ -105,8 +104,7 @@ export const TeacherFeatures = () => {
                     subtitle = "Free short courses to help you use Isaac: by topic or by level of experience with Isaac."
                 />
             </Col>
-            <Col xs={0} sm={3} className="d-md-none"/>
-            <Col sm={6} md={4}>
+            <Col md={{size: 6, offset: 3}} lg={{size: 4, offset: 0}}>
                 <TeacherFeatureCard
                     url = "/teacher_emails"
                     imgSrc = "/assets/phy/icons/computer.svg"
@@ -120,7 +118,7 @@ export const TeacherFeatures = () => {
             <h4>Teacher Resources</h4>
         </Row>
         <Row className="isaac-cards-body mb-5 mt-2 px-3">
-            <Col sm={6} md={4} className="mb-3 mb-md-0">
+            <Col md={6} lg={4} className="mb-3 mb-lg-0">
                 <TeacherFeatureCard
                     url = "/pages/order_books"
                     imgSrc = "/assets/phy/icons/teacher_features_sprite.svg#skills-book-cover"
@@ -128,7 +126,7 @@ export const TeacherFeatures = () => {
                     subtitle = "Buy one of our Skills Mastery books at cost."
                 />
             </Col>
-            <Col sm={6} md={4} className="mb-3 mb-md-0">
+            <Col md={6} lg={4} className="mb-3 mb-lg-0">
                 <TeacherFeatureCard
                     url = "/pages/pre_made_gameboards"
                     imgSrc = "/assets/phy/icons/key_stage_sprite.svg#triple"
@@ -136,8 +134,7 @@ export const TeacherFeatures = () => {
                     subtitle = {isLoggedIn(user) ?  "A selection of our questions organised by topic." : "A selection of our questions organised by lesson topic."}
                 />
             </Col>
-            <Col xs={0} sm={3} className="d-md-none"/>
-            <Col sm={6} md={4}>
+            <Col md={{size: 6, offset: 3}} lg={{size: 4, offset: 0}}>
                 <TeacherFeatureCard
                     url = "/events?types=student"
                     imgSrc = "/assets/phy/icons/teacher_features_sprite.svg#calendar"