Synthetic image detection UX improvements

AFP-Medialab · May 29, 2024 · 946225d · 946225d
1 parent c718786
commit 946225d
Show file tree

Hide file tree

Showing 5 changed files with 278 additions and 44 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -35,6 +35,7 @@
     "exif-js": "^2.3.0",
     "file-saver": "^2.0.5",
     "history": "^5.3.0",
+    "html2canvas": "^1.4.1",
     "i18next": "^23.6.0",
     "i18next-browser-languagedetector": "^7.1.0",
     "i18next-chained-backend": "^4.5.0",

diff --git a/src/components/NavItems/tools/SyntheticImageDetection/index.jsx b/src/components/NavItems/tools/SyntheticImageDetection/index.jsx
@@ -14,6 +14,7 @@ import {
   CardHeader,
   Grid,
   LinearProgress,
+  Stack,
 } from "@mui/material";
 
 import useMyStyles from "../../../Shared/MaterialUiStyles/useMyStyles";
@@ -211,7 +212,7 @@ const SyntheticImageDetection = () => {
   };
 
   return (
-    <div>
+    <Box>
       <HeaderTool
         name={keywordAllTools("navbar_synthetic_image_detection")}
         description={keywordAllTools(
@@ -224,11 +225,11 @@ const SyntheticImageDetection = () => {
         }
       />
 
-      <Alert severity="warning">
-        {keywordWarning("warning_beta_synthetic_image_detection")}
-      </Alert>
-
-      <Box m={3} />
+      <Stack direction="column" spacing={2} mb={4}>
+        <Alert severity="warning">
+          {keywordWarning("warning_beta_synthetic_image_detection")}
+        </Alert>
+      </Stack>
 
       <Card>
         <CardHeader
@@ -282,7 +283,7 @@ const SyntheticImageDetection = () => {
           handleClose={handleClose}
         />
       )}
-    </div>
+    </Box>
   );
 };