From 4eb3fbad5fb6234fa120fa1646b69f44b063f68c Mon Sep 17 00:00:00 2001
From: Alexandre Fauquette <alex.fauquette@gmail.com>
Date: Thu, 7 Jul 2022 21:33:47 +0200
Subject: [PATCH 1/7] mathch icon, url and tooltip

---
 src/pages/insights/InsightsGrid.jsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/insights/InsightsGrid.jsx b/src/pages/insights/InsightsGrid.jsx
index cea09a377..f0e0a1951 100644
--- a/src/pages/insights/InsightsGrid.jsx
+++ b/src/pages/insights/InsightsGrid.jsx
@@ -108,9 +108,9 @@ const columns = [
       <GridActionsCellItem
         component="a"
         href={getProductEditUrl(params.row.barcode)}
-        label="Open product page"
+        label="Open product edit"
         icon={
-          <Tooltip title="Open product page">
+          <Tooltip title="Open product edit">
             <EditIcon />
           </Tooltip>
         }
@@ -118,9 +118,9 @@ const columns = [
       <GridActionsCellItem
         component="a"
         href={getProductUrl(params.row.barcode)}
-        label="Open product edit"
+        label="Open product page"
         icon={
-          <Tooltip title="Open product edit">
+          <Tooltip title="Open product page">
             <VisibilityIcon />
           </Tooltip>
         }

From 5acf845edd775463b36e9e14c255cc728b0c9bcf Mon Sep 17 00:00:00 2001
From: Alexandre Fauquette <alex.fauquette@gmail.com>
Date: Thu, 7 Jul 2022 21:49:22 +0200
Subject: [PATCH 2/7] use new translations

---
 src/i18n/common.json                  |  8 ++++----
 src/pages/insights/FilterInsights.jsx |  3 +++
 src/pages/insights/InsightsGrid.jsx   | 11 ++++++++---
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/i18n/common.json b/src/i18n/common.json
index be95073e7..546c3964f 100644
--- a/src/i18n/common.json
+++ b/src/i18n/common.json
@@ -7,7 +7,7 @@
     "ingredients": "Ingredients",
     "product_weight": "product weight",
     "popularity_sort": "Sort by popularity",
-    "see_examples":"See examples of this ",
+    "see_examples": "See examples of this ",
     "no": "No",
     "skip": "Skip",
     "yes": "Yes",
@@ -203,8 +203,8 @@
     }
   },
   "notfound": {
-    "nopage":"Whoops! The page you're looking for can't be found.",
-    "redirect1":"Want to play some games?",
-    "redirect2":"Click here"
+    "nopage": "Whoops! The page you're looking for can't be found.",
+    "redirect1": "Want to play some games?",
+    "redirect2": "Click here"
   }
 }
\ No newline at end of file
diff --git a/src/pages/insights/FilterInsights.jsx b/src/pages/insights/FilterInsights.jsx
index ea5f2f31e..55424739f 100644
--- a/src/pages/insights/FilterInsights.jsx
+++ b/src/pages/insights/FilterInsights.jsx
@@ -10,6 +10,9 @@ const typeOptions = [
   { value: "category", labelKey: "insights.category" },
   { value: "expiration_date", labelKey: "insights.expiration_date" },
   { value: "packager_code", labelKey: "insights.packager_code" },
+  { value: "brand", labelKey: "logos.brand" },
+  { value: "packaging", labelKey: "logos.packaging" },
+  { value: "qr_code", labelKey: "logos.qr_code" },
 ];
 
 const annotationOptions = [
diff --git a/src/pages/insights/InsightsGrid.jsx b/src/pages/insights/InsightsGrid.jsx
index f0e0a1951..f499be1c1 100644
--- a/src/pages/insights/InsightsGrid.jsx
+++ b/src/pages/insights/InsightsGrid.jsx
@@ -46,6 +46,9 @@ const typeKeyToTranslationKey = {
   category: "insights.category",
   expiration_date: "insights.expiration_date",
   packager_code: "insights.packager_code",
+  brand: "logos.brand",
+  packaging: "logos.packaging",
+  qr_code: "logos.qr_code",
 };
 
 const annotationValueToTranslationKey = {
@@ -141,14 +144,16 @@ const columns = [
     renderCell: ({ row }) =>
       row.type && row.value_tag ? (
         <Link href={getQuestionUrl(row.type, row.value_tag)}>
-          {row.value_tag}
+          {row.value_tag} : {row.value}
         </Link>
       ) : (
-        row.value_tag
+        <span>
+          {row.value_tag} : {row.value}
+        </span>
       ),
   },
   { field: "barcode", minWidth: 180, flex: 1, maxWidth: 200 },
-  { field: "id" },
+  { field: "id", flex: 1 },
   { field: "timestamp", ...dateTimeColumn },
   {
     field: "completed_at",

From 6fa581ec1b70ca8ba80ace74e25bf82ef1c1456b Mon Sep 17 00:00:00 2001
From: Alexandre Fauquette <alex.fauquette@gmail.com>
Date: Thu, 7 Jul 2022 22:10:51 +0200
Subject: [PATCH 3/7] click on barcode modify the filters

---
 src/pages/insights/FilterInsights.jsx | 18 +++++++---
 src/pages/insights/InsightsGrid.jsx   | 47 +++++++++++++++++++++++++--
 src/pages/insights/index.jsx          |  5 ++-
 3 files changed, 63 insertions(+), 7 deletions(-)

diff --git a/src/pages/insights/FilterInsights.jsx b/src/pages/insights/FilterInsights.jsx
index 55424739f..e98a6ffde 100644
--- a/src/pages/insights/FilterInsights.jsx
+++ b/src/pages/insights/FilterInsights.jsx
@@ -23,19 +23,29 @@ const annotationOptions = [
   { value: "not_annotated", labelKey: "insights.not_annotated" },
 ];
 
+const useControled = (exteriorValue) => {
+  const [innerValue, setInnerValue] = React.useState(exteriorValue ?? "");
+
+  React.useEffect(() => {
+    setInnerValue((v) => (v !== exteriorValue ? exteriorValue : v));
+  }, [exteriorValue]);
+
+  return [innerValue, setInnerValue];
+};
+
 const FilterForm = ({ filterState = {}, setFilterState }) => {
   const { t } = useTranslation();
 
-  const [innerBarcode, setInnerBarcode] = React.useState(
+  const [innerBarcode, setInnerBarcode] = useControled(
     filterState.barcode ?? ""
   );
-  const [innerValueTag, setInnerValueTag] = React.useState(
+  const [innerValueTag, setInnerValueTag] = useControled(
     filterState.valueTag ?? ""
   );
-  const [innerInsightType, setInnerInsightType] = React.useState(
+  const [innerInsightType, setInnerInsightType] = useControled(
     filterState.insightType ?? ""
   );
-  const [innerAnnotationStatus, setInnerAnnotationStatus] = React.useState(
+  const [innerAnnotationStatus, setInnerAnnotationStatus] = useControled(
     filterState.annotationStatus ?? ""
   );
 
diff --git a/src/pages/insights/InsightsGrid.jsx b/src/pages/insights/InsightsGrid.jsx
index f499be1c1..289358f24 100644
--- a/src/pages/insights/InsightsGrid.jsx
+++ b/src/pages/insights/InsightsGrid.jsx
@@ -8,6 +8,8 @@ import VisibilityIcon from "@mui/icons-material/Visibility";
 import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
 import CancelOutlinedIcon from "@mui/icons-material/CancelOutlined";
 import QuestionMarkOutlinedIcon from "@mui/icons-material/QuestionMarkOutlined";
+import FaceIcon from "@mui/icons-material/Face";
+import SmartToyIcon from "@mui/icons-material/SmartToy";
 
 import Tooltip from "@mui/material/Tooltip";
 import Link from "@mui/material/Link";
@@ -17,6 +19,15 @@ import offService from "../../off";
 import { useTranslation } from "react-i18next";
 import { Typography } from "@mui/material";
 
+const RenderLink = (props) => {
+  const { value, ...other } = props;
+  return (
+    <Link component="button" {...other}>
+      {props.value}
+    </Link>
+  );
+};
+
 const getProductUrl = (code) => {
   if (!code) {
     return "";
@@ -103,7 +114,7 @@ const dateTimeColumn = {
   valueGetter: (params) => (params.value ? new Date(params.value) : null),
 };
 
-const columns = [
+const staticColumnsDef = [
   {
     field: "actions",
     type: "actions",
@@ -173,18 +184,50 @@ const columns = [
     minWidth: 70,
     flex: 1,
     maxWidth: 110,
+    renderCell: ({ value }) =>
+      value ? (
+        <Tooltip title="Automatic">
+          <SmartToyIcon color="action" />
+        </Tooltip>
+      ) : (
+        <Tooltip title="Human required">
+          <FaceIcon color="action" />
+        </Tooltip>
+      ),
   },
 ].map((col) => ({ ...col, sortable: false }));
 
 const PAGE_SIZE = 25;
 
-const InsightGrid = ({ filterState = {} }) => {
+const InsightGrid = ({ filterState = {}, setFilterState }) => {
   const { t } = useTranslation();
 
   const [pageState, setPageState] = React.useState({ page: 1, rowCount: 0 });
   const [isLoading, setIsLoading] = React.useState(false);
   const [rows, setRows] = React.useState([]);
 
+  const columns = React.useMemo(() => {
+    return staticColumnsDef.map((col) => {
+      if (col.field !== "barcode") {
+        return col;
+      }
+      return {
+        ...col,
+        renderCell: ({ value, tabIndex }) => {
+          return (
+            <RenderLink
+              value={value}
+              tabIndex={tabIndex}
+              onClick={() => {
+                setFilterState((f) => ({ ...f, barcode: value }));
+              }}
+            />
+          );
+        },
+      };
+    });
+  }, [setFilterState]);
+
   React.useEffect(() => {
     setIsLoading(true);
     let isValid = true;
diff --git a/src/pages/insights/index.jsx b/src/pages/insights/index.jsx
index 555c012c6..382225aba 100644
--- a/src/pages/insights/index.jsx
+++ b/src/pages/insights/index.jsx
@@ -26,7 +26,10 @@ export default function Insights() {
       />
       <Divider />
       <div style={{ height: "250px" }}>
-        <InsightGrid filterState={filterState} />
+        <InsightGrid
+          filterState={filterState}
+          setFilterState={setFilterState}
+        />
       </div>
     </Stack>
   );

From 11a1c40153cf5bc5d661c6836c5c9101eca0be6c Mon Sep 17 00:00:00 2001
From: Alexandre Fauquette <alex.fauquette@gmail.com>
Date: Thu, 7 Jul 2022 22:20:42 +0200
Subject: [PATCH 4/7] center the toolbar

---
 src/components/ResponsiveAppBar.jsx | 85 ++++++++++++++++-------------
 1 file changed, 46 insertions(+), 39 deletions(-)

diff --git a/src/components/ResponsiveAppBar.jsx b/src/components/ResponsiveAppBar.jsx
index 6d2315d43..1a0cec794 100644
--- a/src/components/ResponsiveAppBar.jsx
+++ b/src/components/ResponsiveAppBar.jsx
@@ -114,49 +114,56 @@ const ResponsiveAppBar = () => {
           </Typography>
 
           {/* Desktop content */}
-          <MuiLink
-            sx={{ display: { xs: "none", md: "flex" }, mr: 1 }}
-            href="https://world.openfoodfacts.org/"
-            target="_blank"
-          >
-            <img
-              src={logo}
-              width="30px"
-              height="30px"
-              alt="OpenFoodFact logo"
-            />
-          </MuiLink>
-          <Typography
-            variant="h6"
-            noWrap
-            component="a"
-            href="/"
+          <Box
             sx={{
-              mr: 2,
               display: { xs: "none", md: "flex" },
-              fontFamily: "monospace",
-              fontWeight: 700,
-              letterSpacing: ".3rem",
-              color: "inherit",
-              textDecoration: "none",
+              flexDirection: "row",
+              alignItems: "center",
             }}
           >
-            Hunger Games
-          </Typography>
-          <Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
-            {pages.map((page) =>
-              page.url ? (
-                <Button
-                  key={page.url}
-                  onClick={handleCloseNavMenu}
-                  sx={{ my: 2, color: "white", display: "block" }}
-                  component={Link}
-                  to={`/${page.url}`}
-                >
-                  {t(page.translationKey)}
-                </Button>
-              ) : null
-            )}
+            <MuiLink
+              sx={{ mr: 1, display: "flex" }}
+              href="https://world.openfoodfacts.org/"
+              target="_blank"
+            >
+              <img
+                src={logo}
+                width="30px"
+                height="30px"
+                alt="OpenFoodFact logo"
+              />
+            </MuiLink>
+            <Typography
+              variant="h6"
+              noWrap
+              component="a"
+              href="/"
+              sx={{
+                mr: 2,
+                fontFamily: "monospace",
+                fontWeight: 700,
+                letterSpacing: ".3rem",
+                color: "inherit",
+                textDecoration: "none",
+              }}
+            >
+              Hunger Games
+            </Typography>
+            <Box sx={{ display: "flex" }}>
+              {pages.map((page) =>
+                page.url ? (
+                  <Button
+                    key={page.url}
+                    onClick={handleCloseNavMenu}
+                    sx={{ my: 2, color: "white", display: "block" }}
+                    component={Link}
+                    to={`/${page.url}`}
+                  >
+                    {t(page.translationKey)}
+                  </Button>
+                ) : null
+              )}
+            </Box>
           </Box>
         </Toolbar>
       </Container>

From 04e3060a040e4927d32f39662b193a32c1c06d57 Mon Sep 17 00:00:00 2001
From: Alexandre Fauquette <alex.fauquette@gmail.com>
Date: Thu, 7 Jul 2022 22:50:04 +0200
Subject: [PATCH 5/7] add dev mode

---
 src/App.js                          | 34 +++++++++++++++++------------
 src/components/ResponsiveAppBar.jsx | 11 ++++++++--
 src/contexts/devMode.jsx            |  9 ++++++++
 src/localeStorageManager.js         |  5 +++++
 src/pages/settings/index.jsx        | 27 ++++++++++++++++++++---
 5 files changed, 67 insertions(+), 19 deletions(-)
 create mode 100644 src/contexts/devMode.jsx

diff --git a/src/App.js b/src/App.js
index 95e770ffa..7a3b1c1c4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -13,27 +13,33 @@ import {
   NotFoundPage,
 } from "./pages";
 import ResponsiveAppBar from "./components/ResponsiveAppBar";
+import DevModeContext from "./contexts/devMode";
+import { getIsDevMode } from "./localeStorageManager";
 
 const theme = createTheme({});
 
 export default function App() {
+  const [devMode, setDevMode] = React.useState(getIsDevMode);
+
   return (
     <Router>
       <ThemeProvider theme={theme}>
-        <CssBaseline />
-        <ResponsiveAppBar />
-        <Routes>
-          {/* TODO: put a home page for root url */}
-          <Route path="/" element={<QuestionsPage />} />
-          <Route path="/eco-score" element={<EcoScorePage />} />
-          <Route path="/logos" element={<LogoAnnotationPage />} />
-          <Route path="/logos/search" element={<LogoSearchPage />} />
-          <Route path="/logos/:logoId" element={<LogoUpdatePage />} />
-          <Route path="/settings" element={<SettingsPage />} />
-          <Route path="/questions" element={<QuestionsPage />} />
-          <Route path="/insights" element={<InsightsPage />} />
-          <Route path="*" element={<NotFoundPage />} />
-        </Routes>
+        <DevModeContext.Provider value={{ devMode, setDevMode }}>
+          <CssBaseline />
+          <ResponsiveAppBar />
+          <Routes>
+            {/* TODO: put a home page for root url */}
+            <Route path="/" element={<QuestionsPage />} />
+            <Route path="/eco-score" element={<EcoScorePage />} />
+            <Route path="/logos" element={<LogoAnnotationPage />} />
+            <Route path="/logos/search" element={<LogoSearchPage />} />
+            <Route path="/logos/:logoId" element={<LogoUpdatePage />} />
+            <Route path="/settings" element={<SettingsPage />} />
+            <Route path="/questions" element={<QuestionsPage />} />
+            <Route path="/insights" element={<InsightsPage />} />
+            <Route path="*" element={<NotFoundPage />} />
+          </Routes>
+        </DevModeContext.Provider>
       </ThemeProvider>
     </Router>
   );
diff --git a/src/components/ResponsiveAppBar.jsx b/src/components/ResponsiveAppBar.jsx
index 1a0cec794..9cae44f83 100644
--- a/src/components/ResponsiveAppBar.jsx
+++ b/src/components/ResponsiveAppBar.jsx
@@ -12,6 +12,7 @@ import MenuItem from "@mui/material/MenuItem";
 import ListSubheader from "@mui/material/ListSubheader";
 import MuiLink from "@mui/material/Link";
 
+import DevModeContext from "../contexts/devMode";
 import logo from "../assets/logo.png";
 import { Link } from "react-router-dom";
 
@@ -40,6 +41,12 @@ const ResponsiveAppBar = () => {
     setAnchorElNav(null);
   };
 
+  const { devMode: isDevMode } = React.useContext(DevModeContext);
+
+  const displayedPages = pages.filter(
+    (page) => page.url !== "insights" || isDevMode
+  );
+
   return (
     <AppBar position="static">
       <Container maxWidth="xl">
@@ -74,7 +81,7 @@ const ResponsiveAppBar = () => {
                 display: { xs: "block", md: "none" },
               }}
             >
-              {pages.map((page) =>
+              {displayedPages.map((page) =>
                 page.url ? (
                   <MenuItem
                     key={page.translationKey}
@@ -150,7 +157,7 @@ const ResponsiveAppBar = () => {
               Hunger Games
             </Typography>
             <Box sx={{ display: "flex" }}>
-              {pages.map((page) =>
+              {displayedPages.map((page) =>
                 page.url ? (
                   <Button
                     key={page.url}
diff --git a/src/contexts/devMode.jsx b/src/contexts/devMode.jsx
new file mode 100644
index 000000000..d9864e27f
--- /dev/null
+++ b/src/contexts/devMode.jsx
@@ -0,0 +1,9 @@
+import * as React from "react";
+import { getIsDevMode } from "../localeStorageManager";
+
+const DevModeContext = React.createContext({
+  devMode: getIsDevMode(),
+  setDevMode: () => {},
+});
+
+export default DevModeContext;
diff --git a/src/localeStorageManager.js b/src/localeStorageManager.js
index 15758d5fc..94b5e9c88 100644
--- a/src/localeStorageManager.js
+++ b/src/localeStorageManager.js
@@ -14,6 +14,11 @@ export const localSettings = {
   },
 };
 
+export const getIsDevMode = () => {
+  const settings = localSettings.fetch();
+  return settings.devMode ?? false;
+};
+
 export const getLang = () => {
   const settings = localSettings.fetch();
 
diff --git a/src/pages/settings/index.jsx b/src/pages/settings/index.jsx
index dbc993512..b8428a363 100644
--- a/src/pages/settings/index.jsx
+++ b/src/pages/settings/index.jsx
@@ -4,9 +4,12 @@ import TextField from "@mui/material/TextField";
 import MenuItem from "@mui/material/MenuItem";
 import Typography from "@mui/material/Typography";
 import Stack from "@mui/material/Stack";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Switch from "@mui/material/Switch";
 
 import { useTranslation } from "react-i18next";
 
+import DevModeContext from "../../contexts/devMode";
 import { localSettings } from "../../localeStorageManager";
 
 export default function Settings() {
@@ -14,14 +17,21 @@ export default function Settings() {
 
   const [language, setLanguage] = React.useState(i18n.language);
 
-  const handleChange = (e) => {
+  const { devMode, setDevMode } = React.useContext(DevModeContext);
+
+  const handleDevModeChange = (event) => {
+    localSettings.update("devMode", event.target.checked);
+    setDevMode(event.target.checked);
+  };
+
+  const handleLangChange = (e) => {
     localSettings.update("lang", e.target.value);
     i18n.changeLanguage(e.target.value);
     setLanguage(e.target.value);
   };
 
   return (
-    <Stack sx={{ my: 5, mx: 2, alignItems: "flex-start" }}>
+    <Stack sx={{ my: 5, mx: 2, alignItems: "flex-start" }} spacing={4}>
       <Typography variant="h4" component="h2" sx={{ mb: 5 }}>
         Settings
       </Typography>
@@ -30,7 +40,7 @@ export default function Settings() {
         sx={{ minWidth: 150 }}
         label={t("settings.language")}
         value={language}
-        onChange={handleChange}
+        onChange={handleLangChange}
       >
         {Object.keys(messages).map((lang) => (
           <MenuItem key={lang} value={lang}>
@@ -38,6 +48,17 @@ export default function Settings() {
           </MenuItem>
         ))}
       </TextField>
+
+      <div>
+        <p>To explore data base content, activate the dev mode</p>
+        <FormControlLabel
+          checked={devMode}
+          onChange={handleDevModeChange}
+          control={<Switch color="primary" />}
+          label="Dev Mode"
+          labelPlacement="end"
+        />
+      </div>
     </Stack>
   );
 }

From 59b866fad1b8ae995255baf662023cacb3ddaa25 Mon Sep 17 00:00:00 2001
From: Alexandre Fauquette <alex.fauquette@gmail.com>
Date: Thu, 7 Jul 2022 23:05:05 +0200
Subject: [PATCH 6/7] small fixes

---
 src/components/QuestionFilter/QuestionFilter.jsx |  1 +
 src/components/ResponsiveAppBar.jsx              |  2 +-
 src/i18n/common.json                             |  1 +
 src/i18n/en.json                                 |  1 +
 src/pages/questions/ProductInformation.jsx       | 12 +++++++++++-
 src/pages/questions/QuestionDisplay.jsx          | 10 ++++++++--
 6 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/components/QuestionFilter/QuestionFilter.jsx b/src/components/QuestionFilter/QuestionFilter.jsx
index 7d1aa6d43..e8d61e49f 100644
--- a/src/components/QuestionFilter/QuestionFilter.jsx
+++ b/src/components/QuestionFilter/QuestionFilter.jsx
@@ -110,6 +110,7 @@ export const QuestionFilter = ({ filterState, setFilterState }) => {
             size="small"
             value={filterState?.insightType}
             onChange={handleInsightTypeChange}
+            label={t(`questions.insightTypeLabel`)}
           >
             {Object.keys(insightTypesNames).map((insightType) => (
               <MenuItem key={insightType} value={insightType}>
diff --git a/src/components/ResponsiveAppBar.jsx b/src/components/ResponsiveAppBar.jsx
index 9cae44f83..661c7acd4 100644
--- a/src/components/ResponsiveAppBar.jsx
+++ b/src/components/ResponsiveAppBar.jsx
@@ -49,7 +49,7 @@ const ResponsiveAppBar = () => {
 
   return (
     <AppBar position="static">
-      <Container maxWidth="xl">
+      <Container maxWidth={null}>
         <Toolbar disableGutters>
           {/* Mobile content */}
           <Box sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}>
diff --git a/src/i18n/common.json b/src/i18n/common.json
index 546c3964f..2a14dc2d2 100644
--- a/src/i18n/common.json
+++ b/src/i18n/common.json
@@ -4,6 +4,7 @@
     "label": "label",
     "brand": "brand",
     "brands": "Brands",
+    "insightTypeLabel": "Only shows",
     "ingredients": "Ingredients",
     "product_weight": "product weight",
     "popularity_sort": "Sort by popularity",
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 6fa9ce4dd..446f347a2 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -4,6 +4,7 @@
     "label": "label",
     "brand": "brand",
     "brands": "Brands",
+    "insightTypeLabel": "Only shows",
     "ingredients": "Ingredients",
     "product_weight": "product weight",
     "popularity_sort": "Sort by popularity",
diff --git a/src/pages/questions/ProductInformation.jsx b/src/pages/questions/ProductInformation.jsx
index 82c6f1d81..757c11661 100644
--- a/src/pages/questions/ProductInformation.jsx
+++ b/src/pages/questions/ProductInformation.jsx
@@ -10,6 +10,9 @@ import Stack from "@mui/material/Stack";
 import Zoom from "react-medium-image-zoom";
 import "react-medium-image-zoom/dist/styles.css";
 
+import EditIcon from "@mui/icons-material/Edit";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+
 import { useTranslation } from "react-i18next";
 import { NO_QUESTION_LEFT } from "../../const";
 import offService from "../../off";
@@ -71,20 +74,27 @@ const ProductInformation = ({ question }) => {
       {/* Main information about the product */}
       <Typography>{productData?.productName}</Typography>
       <Button
+        size="small"
         component={Link}
         target="_blank"
         href={offService.getProductUrl(question.barcode)}
+        variant="outlined"
+        startIcon={<VisibilityIcon />}
       >
         {t("questions.view")}
       </Button>
       <Button
+        size="small"
         component={Link}
         target="_blank"
         href={offService.getProductEditUrl(question.barcode)}
+        variant="contained"
+        sx={{ ml: 2 }}
+        startIcon={<EditIcon />}
       >
         {t("questions.edit")}
       </Button>
-      <Divider />
+      <Divider sx={{ my: 1 }} />
 
       {/* Image display section */}
       <FormControlLabel
diff --git a/src/pages/questions/QuestionDisplay.jsx b/src/pages/questions/QuestionDisplay.jsx
index 7dc20b8fc..f28a882d2 100644
--- a/src/pages/questions/QuestionDisplay.jsx
+++ b/src/pages/questions/QuestionDisplay.jsx
@@ -9,6 +9,7 @@ import LinkIcon from "@mui/icons-material/Link";
 import DeleteIcon from "@mui/icons-material/Delete";
 import DoneIcon from "@mui/icons-material/Done";
 import QuestionMarkIcon from "@mui/icons-material/QuestionMark";
+import MuiLink from "@mui/material/Link";
 
 import Zoom from "react-medium-image-zoom";
 import "react-medium-image-zoom/dist/styles.css";
@@ -88,9 +89,14 @@ const QuestionDisplay = ({ question, answerQuestion }) => {
         </Button>
       )}
       {valueTagExamplesURL && (
-        <a href={valueTagExamplesURL} target="_blank" rel="noreferrer">
+        <MuiLink
+          href={valueTagExamplesURL}
+          target="_blank"
+          rel="noreferrer"
+          sx={{ mb: 2 }}
+        >
           <div>{`${t("questions.see_examples")} ${question.insight_type}`}</div>
-        </a>
+        </MuiLink>
       )}
       <Divider />
       <Box flexGrow={1} flexShrink={1} sx={{ height: 0, marginBottom: 1 }}>

From 7a273d2b1de464a1d89490a7f856fe572ca05172 Mon Sep 17 00:00:00 2001
From: Alexandre Fauquette <alex.fauquette@gmail.com>
Date: Fri, 8 Jul 2022 23:12:37 +0200
Subject: [PATCH 7/7] feedback

---
 src/pages/settings/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/settings/index.jsx b/src/pages/settings/index.jsx
index b8428a363..e1d9efc67 100644
--- a/src/pages/settings/index.jsx
+++ b/src/pages/settings/index.jsx
@@ -50,7 +50,7 @@ export default function Settings() {
       </TextField>
 
       <div>
-        <p>To explore data base content, activate the dev mode</p>
+        <p>To explore the database content, activate the dev mode</p>
         <FormControlLabel
           checked={devMode}
           onChange={handleDevModeChange}