From 03b42e8cfff62d73b9f0889061c4219084fbbe13 Mon Sep 17 00:00:00 2001
From: Carey Gumaer <gumaerc@mit.edu>
Date: Thu, 13 Jun 2024 13:26:09 -0400
Subject: [PATCH 1/4] update background color to lightGray1

---
 .../mit-open/src/pages/UnitsListingPage/UnitsListingPage.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontends/mit-open/src/pages/UnitsListingPage/UnitsListingPage.tsx b/frontends/mit-open/src/pages/UnitsListingPage/UnitsListingPage.tsx
index 51524c90fa..c812f3d732 100644
--- a/frontends/mit-open/src/pages/UnitsListingPage/UnitsListingPage.tsx
+++ b/frontends/mit-open/src/pages/UnitsListingPage/UnitsListingPage.tsx
@@ -55,7 +55,7 @@ const sortUnits = (
 }
 
 const Page = styled.div(({ theme }) => ({
-  backgroundColor: theme.custom.colors.white,
+  backgroundColor: theme.custom.colors.lightGray1,
 }))
 
 const PageContent = styled.div(({ theme }) => ({

From 4bbb5c03aa3c6436ce8f65175fd34a6ebd62c4e0 Mon Sep 17 00:00:00 2001
From: Carey Gumaer <gumaerc@mit.edu>
Date: Thu, 13 Jun 2024 14:19:33 -0400
Subject: [PATCH 2/4] use Card and not MuiCard

---
 .../UnitsListingPage/UnitsListingPage.tsx     | 86 +++++++++----------
 1 file changed, 41 insertions(+), 45 deletions(-)

diff --git a/frontends/mit-open/src/pages/UnitsListingPage/UnitsListingPage.tsx b/frontends/mit-open/src/pages/UnitsListingPage/UnitsListingPage.tsx
index c812f3d732..1660374a9f 100644
--- a/frontends/mit-open/src/pages/UnitsListingPage/UnitsListingPage.tsx
+++ b/frontends/mit-open/src/pages/UnitsListingPage/UnitsListingPage.tsx
@@ -4,10 +4,8 @@ import {
 } from "api/hooks/learningResources"
 import {
   Banner,
-  MuiCard,
-  CardContent,
+  Card,
   Container,
-  Link,
   Skeleton,
   Typography,
   styled,
@@ -149,23 +147,15 @@ const GridContainer = styled.div(({ theme }) => ({
   },
 }))
 
-const UnitCardContainer = styled(MuiCard)({
+const UnitCardContainer = styled.div({
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
+  padding: "16px",
+  height: "100%",
 })
 
-const UnitCardLink = styled(Link)({
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "center",
-  flexGrow: 1,
-  "&:hover": {
-    textDecoration: "none",
-  },
-})
-
-const UnitCardContent = styled(CardContent)({
+const UnitCardContent = styled.div({
   display: "flex",
   flexDirection: "column",
   flexGrow: 1,
@@ -318,41 +308,47 @@ const UnitCard: React.FC<UnitCardProps> = (props) => {
   return channelDetailQuery.isLoading ? (
     <UnitCardLoading />
   ) : (
-    <UnitCardContainer>
-      <UnitCardLink href={unitUrl}>
-        <UnitCardContent>
-          <LogoContainer>
-            <UnitLogo src={logo} alt={unit.name} />
-          </LogoContainer>
-          <ValuePropContainer>
-            <ValuePropText>{unit.value_prop}</ValuePropText>
-          </ValuePropContainer>
-          <CountsTextContainer>
-            <CountsText data-testid={`course-count-${unit.code}`}>
-              {courseCount > 0 ? `Courses: ${courseCount}` : ""}
-            </CountsText>
-            <CountsText data-testid={`program-count-${unit.code}`}>
-              {programCount > 0 ? `Programs: ${programCount}` : ""}
-            </CountsText>
-          </CountsTextContainer>
-        </UnitCardContent>
-      </UnitCardLink>
-    </UnitCardContainer>
+    <Card link={true} href={unitUrl}>
+      <Card.Content>
+        <UnitCardContainer>
+          <UnitCardContent>
+            <LogoContainer>
+              <UnitLogo src={logo} alt={unit.name} />
+            </LogoContainer>
+            <ValuePropContainer>
+              <ValuePropText>{unit.value_prop}</ValuePropText>
+            </ValuePropContainer>
+            <CountsTextContainer>
+              <CountsText data-testid={`course-count-${unit.code}`}>
+                {courseCount > 0 ? `Courses: ${courseCount}` : ""}
+              </CountsText>
+              <CountsText data-testid={`program-count-${unit.code}`}>
+                {programCount > 0 ? `Programs: ${programCount}` : ""}
+              </CountsText>
+            </CountsTextContainer>
+          </UnitCardContent>
+        </UnitCardContainer>
+      </Card.Content>
+    </Card>
   )
 }
 
 const UnitCardLoading = () => {
   return (
-    <UnitCardContainer>
-      <UnitCardContent>
-        <LogoContainer>
-          <Skeleton variant="rectangular" width={500} height={50} />
-        </LogoContainer>
-        <ValuePropContainer>
-          <Skeleton variant="text" width={500} height={200} />
-        </ValuePropContainer>
-      </UnitCardContent>
-    </UnitCardContainer>
+    <Card>
+      <Card.Content>
+        <UnitCardContainer>
+          <UnitCardContent>
+            <LogoContainer>
+              <Skeleton variant="rectangular" width={500} height={50} />
+            </LogoContainer>
+            <ValuePropContainer>
+              <Skeleton variant="text" width={500} height={200} />
+            </ValuePropContainer>
+          </UnitCardContent>
+        </UnitCardContainer>
+      </Card.Content>
+    </Card>
   )
 }
 

From 1216a43f0e454dbfeb3209df0947761bc37f53a1 Mon Sep 17 00:00:00 2001
From: Carey Gumaer <gumaerc@mit.edu>
Date: Fri, 14 Jun 2024 16:48:40 -0400
Subject: [PATCH 3/4] remove link={true} property on Card

---
 .../mit-open/src/pages/UnitsListingPage/UnitsListingPage.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontends/mit-open/src/pages/UnitsListingPage/UnitsListingPage.tsx b/frontends/mit-open/src/pages/UnitsListingPage/UnitsListingPage.tsx
index 1660374a9f..5ce46be225 100644
--- a/frontends/mit-open/src/pages/UnitsListingPage/UnitsListingPage.tsx
+++ b/frontends/mit-open/src/pages/UnitsListingPage/UnitsListingPage.tsx
@@ -308,7 +308,7 @@ const UnitCard: React.FC<UnitCardProps> = (props) => {
   return channelDetailQuery.isLoading ? (
     <UnitCardLoading />
   ) : (
-    <Card link={true} href={unitUrl}>
+    <Card href={unitUrl}>
       <Card.Content>
         <UnitCardContainer>
           <UnitCardContent>

From 4f2a270dcbd382b6fc5757b235d06364d49fc243 Mon Sep 17 00:00:00 2001
From: Carey Gumaer <gumaerc@mit.edu>
Date: Fri, 14 Jun 2024 16:52:55 -0400
Subject: [PATCH 4/4] style the cards on the units listing page with height:
 100% so that the cards are all even height, regardless of the content of
 other cards in the grid

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

diff --git a/frontends/mit-open/src/pages/UnitsListingPage/UnitsListingPage.tsx b/frontends/mit-open/src/pages/UnitsListingPage/UnitsListingPage.tsx
index 5ce46be225..e27489140a 100644
--- a/frontends/mit-open/src/pages/UnitsListingPage/UnitsListingPage.tsx
+++ b/frontends/mit-open/src/pages/UnitsListingPage/UnitsListingPage.tsx
@@ -91,6 +91,10 @@ const PageHeaderText = styled(Typography)(({ theme }) => ({
   ...theme.typography.subtitle1,
 }))
 
+const CardStyled = styled(Card)({
+  height: "100%",
+})
+
 const UnitContainer = styled.div(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
@@ -308,7 +312,7 @@ const UnitCard: React.FC<UnitCardProps> = (props) => {
   return channelDetailQuery.isLoading ? (
     <UnitCardLoading />
   ) : (
-    <Card href={unitUrl}>
+    <CardStyled href={unitUrl}>
       <Card.Content>
         <UnitCardContainer>
           <UnitCardContent>
@@ -329,7 +333,7 @@ const UnitCard: React.FC<UnitCardProps> = (props) => {
           </UnitCardContent>
         </UnitCardContainer>
       </Card.Content>
-    </Card>
+    </CardStyled>
   )
 }