units page fixes (#1083)

* update background color to lightGray1

* use Card and not MuiCard

* remove link={true} property on Card

* 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

Author: gumaerc

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,
@@ -55,7 +53,7 @@ const sortUnits = (
 }
 
 const Page = styled.div(({ theme }) => ({
-  backgroundColor: theme.custom.colors.white,
+  backgroundColor: theme.custom.colors.lightGray1,
 }))
 
 const PageContent = styled.div(({ theme }) => ({
@@ -93,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",
@@ -149,23 +151,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 +312,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>
+    <CardStyled 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>
+    </CardStyled>
   )
 }
 
 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>
   )
 }