fix latest feedbacks

idmc-labs · Dec 12, 2022 · 764e943 · 764e943
1 parent ea464f9
commit 764e943
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 19 deletions.
diff --git a/app/components/Image/index.tsx b/app/components/Image/index.tsx
@@ -1,6 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { _cs } from '@togglecorp/fujs';
-import ImageZoom from 'react-image-zooom';
+import InnerImageZoom from 'react-inner-image-zoom';
+
+import 'react-inner-image-zoom/lib/InnerImageZoom/styles.min.css';
 
 import styles from './styles.css';
 
@@ -59,15 +61,13 @@ export interface Props {
     className?: string;
     src?: string;
     srcSet?: string;
-    alt?: string;
 }
 
 function MyImage(props: Props) {
     const {
         className,
         src,
         srcSet,
-        alt = '',
     } = props;
 
     const { isLoading, hasImage } = useImage({ src, srcSet });
@@ -81,10 +81,10 @@ function MyImage(props: Props) {
     }
 
     return (
-        <ImageZoom
+        <InnerImageZoom
             className={_cs(className)}
             src={src}
-            alt={alt}
+            hideHint
         />
     );
 }

diff --git a/app/resources/img/cover-img.jpg b/app/resources/img/cover-img.jpg
diff --git a/app/views/FcdoReport/WayForwardContent/index.tsx b/app/views/FcdoReport/WayForwardContent/index.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback, useRef, useEffect } from 'react';
-import ImageZoom from 'react-image-zooom';
+import InnerImageZoom from 'react-inner-image-zoom';
 import { _cs, isDefined } from '@togglecorp/fujs';
+import 'react-inner-image-zoom/lib/InnerImageZoom/styles.min.css';
 
 import useBooleanState from '#hooks/useBooleanState';
 import { List, RawButton } from '@togglecorp/toggle-ui';
@@ -110,10 +111,9 @@ function Item(props: ItemProps) {
                 )}
             </div>
             {image && active && (
-                <ImageZoom
+                <InnerImageZoom
                     className={styles.image}
                     src={image}
-                    alt=""
                 />
             )}
         </RawButton>

diff --git a/app/views/FcdoReport/index.tsx b/app/views/FcdoReport/index.tsx
@@ -1,6 +1,6 @@
 import React, { useRef, useEffect, useCallback, useState, useMemo } from 'react';
 import { _cs } from '@togglecorp/fujs';
-import ImageZoom from 'react-image-zooom';
+import InnerImageZoom from 'react-inner-image-zoom';
 import {
     MdPictureAsPdf,
     MdArrowRightAlt,
@@ -532,7 +532,6 @@ function FcdoReport(props: Props) {
                             className={styles.keyFindingsImg}
                             src={keyFindings?.find((item) => item.key === selectedKeyFinding)
                                 ?.image}
-                            alt=""
                         />
                     </div>
                 </div>
@@ -702,10 +701,9 @@ function FcdoReport(props: Props) {
                             <p className={styles.descriptionParagraph}>
                                 {estimatingEducationParagraph2}
                             </p>
-                            <ImageZoom
+                            <InnerImageZoom
                                 src="https://www.internal-displacement.org/sites/default/files/221114_IDMC_Equation-Estimating-the-education-costs-for-IDPs.png"
                                 className={styles.background}
-                                alt=""
                             />
                             <DownloadInfographicLink
                                 className={styles.downloadLink}
@@ -715,10 +713,9 @@ function FcdoReport(props: Props) {
                                 {estimatingEducationParagraph3}
                             </p>
                         </div>
-                        <ImageZoom
+                        <InnerImageZoom
                             src={tableData}
                             className={styles.background}
-                            alt=""
                         />
                         <div className={styles.estimatedCaption}>
                             {estimatedCaption}
@@ -763,10 +760,9 @@ function FcdoReport(props: Props) {
                     />
                     <div className={styles.idAccessContainer}>
                         <div className={styles.belowImgContainer}>
-                            <ImageZoom
+                            <InnerImageZoom
                                 src={ageGender}
                                 className={styles.ageGenderImage}
-                                alt=""
                             />
                             <p className={styles.descriptionCaption}>
                                 {descriptionCaption}

diff --git a/app/views/FcdoReport/styles.css b/app/views/FcdoReport/styles.css
@@ -123,7 +123,7 @@
     .hero {
         position: relative;
         background-color: var(--tui-color-brand-light);
-        background-image: url('../../resources/img/cover-img.jpg');
+        background-image: url('https://www.internal-displacement.org/sites/default/files/2022-11/221117_idmc_informing_better_access_to_education_for_idps_banner.jpg');
         background-position: right top;
         background-repeat: no-repeat;
         background-size: cover;
@@ -710,7 +710,7 @@
     .footer {
         position: relative;
         background-color: var(--tui-color-brand-light);
-        background-image: url('../../resources/img/cover-img.jpg');
+        background-image: url('https://www.internal-displacement.org/sites/default/files/2022-11/221117_idmc_informing_better_access_to_education_for_idps_banner.jpg');
         background-position: center;
         background-repeat: no-repeat;
         background-size: cover;

diff --git a/package.json b/package.json
@@ -52,7 +52,7 @@
         "react-dom": "^17.0.2",
         "react-ga": "^3.3.1",
         "react-icons": "^4.3.1",
-        "react-image-zooom": "^1.0.4"
+        "react-inner-image-zoom": "^3.0.2"
     },
     "devDependencies": {
         "@babel/core": "^7.17.9",
@@ -76,6 +76,7 @@
         "@types/mapbox-gl": "^2.7.0",
         "@types/react": "^17.0.14",
         "@types/react-dom": "^17.0.9",
+        "@types/react-inner-image-zoom": "^3.0.0",
         "@types/react-router-dom": "^5.3.3",
         "@types/react-slider": "^1.3.1",
         "@types/sanitize-html": "^2.6.2",