Merge pull request #1371 from CodeForAfrica/fix_category_card

fix: update Research category image position

Author: koechkevin

apps/trustlab/src/components/CategoryCard/CategoryCard.js

@@ -36,7 +36,7 @@ const CategoryCard = forwardRef(function CategoryCard(props, ref) {
             position: "relative",
             borderRadius: "10px",
             overflow: "hidden",
-            "&:hover .overlay": { opacity: 1 },
+            "&:hover .overlay": { opacity: { xs: 0, sm: 1 } },
           }}
         >
           <CardMedia
@@ -45,8 +45,8 @@ const CategoryCard = forwardRef(function CategoryCard(props, ref) {
             alt={image.alt ?? title}
             sx={{
               borderRadius: "10px",
-              objectFit: "cover",
-              height: { xs: 380, sm: 220 },
+              objectFit: { xs: "cover", sm: "contain", md: "cover" },
+              height: { xs: 190, sm: 160, md: 220 },
             }}
           />
           <Box

apps/trustlab/src/components/CategoryCard/CategoryCard.snap.js

@@ -7,11 +7,11 @@ exports[`<CategoryCard /> renders unchanged 1`] = `
   style="--Paper-shadow: none;"
 >
   <div
-    class="MuiBox-root css-1x8gdkv"
+    class="MuiBox-root css-1xvjh2y"
   >
     <img
       alt="Test image"
-      class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1tsuscl-MuiCardMedia-root"
+      class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1q7ehxc-MuiCardMedia-root"
       src="/test-image.jpg"
     />
     <div
@@ -90,11 +90,11 @@ exports[`<CategoryCard /> renders without link 1`] = `
   style="--Paper-shadow: none;"
 >
   <div
-    class="MuiBox-root css-1x8gdkv"
+    class="MuiBox-root css-1xvjh2y"
   >
     <img
       alt="Test image"
-      class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1tsuscl-MuiCardMedia-root"
+      class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1q7ehxc-MuiCardMedia-root"
       src="/test-image.jpg"
     />
     <div

apps/trustlab/src/components/CategoryList/ResearchCategoryList.snap.js

@@ -17,11 +17,11 @@ exports[`<CategoryList /> renders unchanged 1`] = `
         style="--Paper-shadow: none;"
       >
         <div
-          class="MuiBox-root css-1x8gdkv"
+          class="MuiBox-root css-1xvjh2y"
         >
           <img
             alt="Test image 1"
-            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1tsuscl-MuiCardMedia-root"
+            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1q7ehxc-MuiCardMedia-root"
             src="/test-image-1.jpg"
           />
           <div
@@ -73,11 +73,11 @@ exports[`<CategoryList /> renders unchanged 1`] = `
         style="--Paper-shadow: none;"
       >
         <div
-          class="MuiBox-root css-1x8gdkv"
+          class="MuiBox-root css-1xvjh2y"
         >
           <img
             alt="Test image 2"
-            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1tsuscl-MuiCardMedia-root"
+            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1q7ehxc-MuiCardMedia-root"
             src="/test-image-2.jpg"
           />
           <div
@@ -129,11 +129,11 @@ exports[`<CategoryList /> renders unchanged 1`] = `
         style="--Paper-shadow: none;"
       >
         <div
-          class="MuiBox-root css-1x8gdkv"
+          class="MuiBox-root css-1xvjh2y"
         >
           <img
             alt="Test image 3"
-            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1tsuscl-MuiCardMedia-root"
+            class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1q7ehxc-MuiCardMedia-root"
             src="/test-image-3.jpg"
           />
           <div

apps/trustlab/src/components/ToolkitList/ToolkitList.snap.js

@@ -24,11 +24,11 @@ exports[`ToolkitList renders initial toolkits 1`] = `
               style="--Paper-shadow: none;"
             >
               <div
-                class="MuiBox-root css-1x8gdkv"
+                class="MuiBox-root css-1g8ogoo"
               >
                 <img
                   alt="A"
-                  class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-17gpfwt-MuiCardMedia-root"
+                  class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-q9n3uj-MuiCardMedia-root"
                   src="/img/a.jpg"
                 />
                 <div
@@ -74,11 +74,11 @@ exports[`ToolkitList renders initial toolkits 1`] = `
               style="--Paper-shadow: none;"
             >
               <div
-                class="MuiBox-root css-1x8gdkv"
+                class="MuiBox-root css-1g8ogoo"
               >
                 <img
                   alt="B"
-                  class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-17gpfwt-MuiCardMedia-root"
+                  class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-q9n3uj-MuiCardMedia-root"
                   src="/img/b.jpg"
                 />
                 <div