Shanbady/search page card mobile updates (#1156)

* making style changes for lr card in mobile view * fixing style prop for list card title
mitodl · Jun 25, 2024 · c1eb250 · c1eb250
1 parent 6a5d2e0
commit c1eb250
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/frontends/ol-components/src/components/Card/ListCard.tsx b/frontends/ol-components/src/components/Card/ListCard.tsx
@@ -78,6 +78,7 @@ const Info = styled.div`
 
 const Title = styled.h3`
   flex-grow: 1;
+  color: ${theme.custom.colors.darkGray2};
   text-overflow: ellipsis;
   ${{ ...theme.typography.subtitle1 }}
   height: ${theme.typography.pxToRem(40)};

diff --git a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCard.tsx b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCard.tsx
@@ -21,6 +21,12 @@ const IMAGE_SIZES = {
   desktop: { width: 236, height: 122 },
 }
 
+const CardLabel = styled.span`
+  ${theme.breakpoints.down("sm")} {
+    display: none;
+  }
+`
+
 const Certificate = styled.div`
   border-radius: 4px;
   background-color: ${theme.custom.colors.lightGray1};
@@ -38,7 +44,6 @@ const Certificate = styled.div`
 
   ${theme.breakpoints.down("md")} {
     ${{ ...theme.typography.body4 }}
-    background: none;
     color: ${theme.custom.colors.darkGray2};
     gap: 2px;
 
@@ -60,7 +65,6 @@ const Price = styled.div`
   color: ${theme.custom.colors.darkGray2};
   ${theme.breakpoints.down("md")} {
     ${{ ...theme.typography.subtitle3 }}
-    color: ${theme.custom.colors.mitRed};
   }
 `
 
@@ -279,7 +283,7 @@ const StartDate: React.FC<{ resource: LearningResource }> = ({ resource }) => {
 
   return (
     <div>
-      {label} <span>{startDate}</span>
+      <CardLabel>{label}</CardLabel> <span>{startDate}</span>
     </div>
   )
 }
@@ -289,7 +293,7 @@ const Format = ({ resource }: { resource: LearningResource }) => {
   if (!format) return null
   return (
     <div>
-      Format: <span>{format}</span>
+      <CardLabel>Format:</CardLabel> <span>{format}</span>
     </div>
   )
 }