Update reef check data available link and image

aqualinkorg · Jan 15, 2025 · ca8e1bf · ca8e1bf
1 parent d3739c1
commit ca8e1bf
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 26 deletions.
diff --git a/packages/website/src/assets/img/reef-check-logo.png b/packages/website/src/assets/img/reef-check-logo.png
diff --git a/packages/website/src/common/SiteDetails/FeaturedMedia/__snapshots__/index.test.tsx.snap b/packages/website/src/common/SiteDetails/FeaturedMedia/__snapshots__/index.test.tsx.snap
@@ -13,23 +13,23 @@ exports[`Featured Media Card should render with given state from Redux store 1`]
       >
         <mock-box
           alignitems="center"
+          classname="FeaturedMedia-noVideoCardHeaderText-4"
+          component="[object Object]"
           display="flex"
+          gap="1"
+          to="/sites/1#surveys"
         >
+          <img
+            alt="Reef Check"
+            src="reef-check-logo.png"
+            width="50"
+          />
           <mock-typography
-            classname="FeaturedMedia-noVideoCardHeaderText-4"
             variant="h5"
           >
             REEF CHECK DATA AVAILABLE
           </mock-typography>
-          <mock-iconbutton
-            classname="FeaturedMedia-noVideoCardHeaderText-4"
-            component="[object Object]"
-            size="large"
-            smooth="true"
-            to="/sites/1#surveys"
-          >
-            <mock-keyboarddoublearrowdown />
-          </mock-iconbutton>
+          <mock-keyboarddoublearrowdown />
         </mock-box>
       </div>
     </div>

diff --git a/packages/website/src/common/SiteDetails/FeaturedMedia/index.tsx b/packages/website/src/common/SiteDetails/FeaturedMedia/index.tsx
@@ -24,6 +24,7 @@ import { convertOptionsToQueryParams } from 'helpers/video';
 import { reefCheckSurveyListSelector } from 'store/ReefCheckSurveys';
 import reefImage from '../../../assets/reef-image.jpg';
 import uploadIcon from '../../../assets/icon_upload.svg';
+import reefCheckLogo from '../../../assets/img/reef-check-logo.png';
 
 const playerOptions = {
   autoplay: 1,
@@ -101,22 +102,17 @@ const FeaturedMedia = ({
               </Grid>
             </>
           ) : hasReefCheckSurveys ? (
-            <Box display="flex" alignItems="center">
-              <Typography
-                className={classes.noVideoCardHeaderText}
-                variant="h5"
-              >
-                REEF CHECK DATA AVAILABLE
-              </Typography>
-              <IconButton
-                className={classes.noVideoCardHeaderText}
-                component={HashLink}
-                to={`/sites/${siteId}#surveys`}
-                smooth
-                size="large"
-              >
-                <KeyboardDoubleArrowDown />
-              </IconButton>
+            <Box
+              component={HashLink}
+              to={`/sites/${siteId}#surveys`}
+              display="flex"
+              alignItems="center"
+              gap={1}
+              className={classes.noVideoCardHeaderText}
+            >
+              <img src={reefCheckLogo} alt="Reef Check" width={50} />
+              <Typography variant="h5">REEF CHECK DATA AVAILABLE</Typography>
+              <KeyboardDoubleArrowDown />
             </Box>
           ) : (
             <Typography className={classes.noVideoCardHeaderText} variant="h5">