diff --git a/src/assets/countries.json b/src/assets/countries.json
index 4987938ec..91e69b3d6 100644
--- a/src/assets/countries.json
+++ b/src/assets/countries.json
@@ -1485,7 +1485,7 @@
"id": "en:world",
"label": "World",
"languageCode": "en",
- "countryCode": "world"
+ "countryCode": ""
},
{
"id": "en:yemen",
diff --git a/src/components/ResponsiveAppBar.jsx b/src/components/ResponsiveAppBar.jsx
index d991f7385..07da99c1c 100644
--- a/src/components/ResponsiveAppBar.jsx
+++ b/src/components/ResponsiveAppBar.jsx
@@ -413,21 +413,22 @@ const ResponsiveAppBar = () => {
}}
>
c.countryCode));
export function CountryProvider({ children }) {
- const [country, setCountry] = useLocalStorageState("country", "world");
+ const [country, setCountry] = useLocalStorageState("country", "");
const [searchParams, setSearchParams] = useSearchParams();
const searchParamsCountry = searchParams.get("country")?.toLowerCase();
@@ -26,9 +26,16 @@ export function CountryProvider({ children }) {
);
const value = React.useMemo(() => {
- const lowercasedCountry = (
- ValidCountryCodes.has(searchParamsCountry) ? searchParamsCountry : country
- )?.toLocaleLowerCase();
+ // Try from:
+ // - searchParams
+ // - localStorage
+ // - empty
+
+ const lowercasedCountry = ValidCountryCodes.has(searchParamsCountry)
+ ? searchParamsCountry
+ : ValidCountryCodes.has(country?.toLocaleLowerCase())
+ ? country?.toLocaleLowerCase()
+ : "";
return {
country: lowercasedCountry,
diff --git a/src/pages/nutrition/Instructions.tsx b/src/pages/nutrition/Instructions.tsx
new file mode 100644
index 000000000..beec4202a
--- /dev/null
+++ b/src/pages/nutrition/Instructions.tsx
@@ -0,0 +1,99 @@
+/* eslint-disable react/no-unescaped-entities */
+import * as React from "react";
+import Button from "@mui/material/Button";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogTitle from "@mui/material/DialogTitle";
+import Typography from "@mui/material/Typography";
+
+export default function Instructions() {
+ const [open, setOpen] = React.useState(false);
+
+ const handleClickOpen = () => {
+ setOpen(true);
+ };
+
+ const handleClose = () => {
+ setOpen(false);
+ };
+
+ return (
+
+
+
+
+ );
+}
diff --git a/src/pages/nutrition/NutrimentCell.tsx b/src/pages/nutrition/NutrimentCell.tsx
index 696a37261..2168d85ea 100644
--- a/src/pages/nutrition/NutrimentCell.tsx
+++ b/src/pages/nutrition/NutrimentCell.tsx
@@ -14,6 +14,35 @@ interface NutrimentCellProps {
setValues: (object) => void;
}
+/**
+ * Returns the string value of the input without any space.
+ */
+function clean(input: undefined | string | null | number): string {
+ if (input == undefined) {
+ return "";
+ }
+ return `${input}`.replaceAll(" ", "");
+}
+function getLegendColor(product, prediction, nutrimentId) {
+ const cleanProduct = clean(product);
+ const cleanPrediction = clean(prediction);
+
+ console.log({ nutrimentId, cleanProduct, cleanPrediction });
+
+ if (cleanProduct === cleanPrediction) {
+ return "green";
+ }
+
+ if (cleanProduct === "" || cleanPrediction === "") {
+ return "orange";
+ }
+
+ if (cleanProduct !== cleanPrediction) {
+ return "red";
+ }
+ return undefined;
+}
+
export const NutrimentCell = (props: NutrimentCellProps) => {
const {
nutrimentId,
@@ -64,17 +93,33 @@ export const NutrimentCell = (props: NutrimentCellProps) => {
/>
{displayOFFValue && (
-