diff --git a/src/i18n/common.json b/src/i18n/common.json index 67b9d34698..5af5a62a7a 100644 --- a/src/i18n/common.json +++ b/src/i18n/common.json @@ -210,7 +210,30 @@ "reportIssue": "Found a bug?, please let us know", "dev_mode_title": "To get more options, activate the dev mode", "dev_mode_label": "Dev Mode", - "dev_page_toggle": "Show {{name}} page" + "dev_page_toggle": "Show {{name}} page", + "join_community":"Join the community", + "text1":"Open Food Facts is a collaborative project built by tens of thousands of volunteers and managed by a non-profit organization with 8 employees. We need your donations to fund the Open Food Facts 2023 budget and to continue to develop the project.", + "thank_you":"Thank you", + "donate":"Donate", + "join_the_community": { + "discover_our":"Discover our ", + "code_of_conduct":"Code of conduct ", + "join_us_on":"Join us on ", + "forum":"Forum", + "subscribe_to_our":"Subscribe to our ", + "newsletter":"newsletter" + }, + "discover_the_project":"Discover the project", + "Who_we_are":"Who we are", + "Vision_Mission_Values_and_Programs":"Vision, Mission, Values and Programs", + "FAQS":"FAQS", + "open_Food_Facts_blog":"Open Food Facts blog", + "Press":"Press", + "Open_Food_Facts_wiki":"Open Food Facts wiki (en)", + "Translators":"Translators", + "Partners":"Partners", + "Open_Beauty_Facts":"Open Beauty Facts - Cosmétiques", + "text2":"A collaborative, free and open database of food products from around the world." }, "helper": { "welcome": { diff --git a/src/i18n/en.json b/src/i18n/en.json index ff326e281f..979637b5ec 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -210,7 +210,30 @@ "reportIssue": "Found a bug?, please let us know", "dev_mode_title": "To get more options, activate the dev mode", "dev_mode_label": "Dev Mode", - "dev_page_toggle": "Show {{name}} page" + "dev_page_toggle": "Show {{name}} page", + "join_community":"Join the community", + "text1":"Open Food Facts is a collaborative project built by tens of thousands of volunteers and managed by a non-profit organization with 8 employees. We need your donations to fund the Open Food Facts 2023 budget and to continue to develop the project.", + "thank_you":"Thank you", + "donate":"Donate", + "join_the_community": { + "discover_our":"Discover our", + "code_of_conduct":"Code of conduct", + "join_us_on":"Join us on", + "forum":"Forum", + "subscribe_to_our":"Subscribe to our", + "newsletter":"newsletter" + }, + "discover_the_project":"Discover the project", + "Who_we_are":"Who we are", + "Vision_Mission_Values_and_Programs":"Vision, Mission, Values and Programs", + "FAQS":"FAQS", + "open_Food_Facts_blog":"Open Food Facts blog", + "Press":"Press", + "Open_Food_Facts_wiki":"Open Food Facts wiki (en)", + "Translators":"Translators", + "Partners":"Partners", + "Open_Beauty_Facts":"Open Beauty Facts - Cosmétiques", + "text2":"A collaborative, free and open database of food products from around the world." }, "helper": { "welcome": { diff --git a/src/pages/settings/DiscoverTheProject.jsx b/src/pages/settings/DiscoverTheProject.jsx new file mode 100644 index 0000000000..17657e43ef --- /dev/null +++ b/src/pages/settings/DiscoverTheProject.jsx @@ -0,0 +1,80 @@ +import { Button, Chip, Divider, Typography } from "@mui/material"; +import { Box } from "@mui/system"; +import { useTranslation } from "react-i18next"; + +const discover = [ + { + text: "settings.Who_we_are", + url: "https://world.openfoodfacts.org/who-we-are", + }, + { + text: "settings.Vision_Mission_Values_and_Programs", + url: "https://world.openfoodfacts.org/open-food-facts-vision-mission-values-and-programs", + }, + { + text: "settings.FAQS", + url: "https://world.openfoodfacts.org/faq", + }, + { + text: "settings.open_Food_Facts_blog", + url: "https://blog.openfoodfacts.org/en/", + }, + { + text: "settings.Press", + url: "https://world.openfoodfacts.org/press", + }, + { + text: "settings.Open_Food_Facts_wiki", + url: "https://wiki.openfoodfacts.org/", + }, + { + text: "settings.Translators", + url: "https://world.openfoodfacts.org/cgi/top_translators.pl", + }, + { + text: "settings.Partners", + url: "https://world.openfoodfacts.org/partners", + }, + { + text: "settings.Open_Beauty_Facts", + url: "https://world-fr.openbeautyfacts.org/", + }, +]; + +const DiscoverTheProject = () => { + const { t } = useTranslation(); + return ( + + + + +
+ + {discover.map((content) => { + return ( + + ); + })} + + + ); +}; + +export default DiscoverTheProject; diff --git a/src/pages/settings/Donate.jsx b/src/pages/settings/Donate.jsx new file mode 100644 index 0000000000..dbc46b7e65 --- /dev/null +++ b/src/pages/settings/Donate.jsx @@ -0,0 +1,54 @@ +import { Button, Typography } from "@mui/material"; +import VolunteerActivismIcon from "@mui/icons-material/VolunteerActivism"; +import { Box } from "@mui/system"; +import { useTranslation } from "react-i18next"; + +const Donate = () => { + const { t } = useTranslation(); + return ( + +
+ +
+ + {t("settings.text1")} +
+
+ {t("settings.thank_you")} ❤️ + + + ); +}; + +export default Donate; diff --git a/src/pages/settings/FooterButtons.jsx b/src/pages/settings/FooterButtons.jsx new file mode 100644 index 0000000000..52f642b083 --- /dev/null +++ b/src/pages/settings/FooterButtons.jsx @@ -0,0 +1,32 @@ +import { Button, IconButton, Typography } from "@mui/material"; +import { Stack } from "@mui/system"; + +const FooterButtons = (props) => { + const { title, subTitle, icon, url } = props; + return ( + + ); +}; + +export default FooterButtons; diff --git a/src/pages/settings/FooterWithLinks.jsx b/src/pages/settings/FooterWithLinks.jsx new file mode 100644 index 0000000000..74db029eaa --- /dev/null +++ b/src/pages/settings/FooterWithLinks.jsx @@ -0,0 +1,87 @@ +import { Box } from "@mui/system"; +import AppleIcon from "@mui/icons-material/Apple"; +import GoogleIcon from "@mui/icons-material/Google"; +import WindowIcon from "@mui/icons-material/Window"; +import AndroidIcon from "@mui/icons-material/Android"; +import FooterButtons from "./FooterButtons"; +import Donate from "./Donate"; +import JoinTheCommunity from "./JoinTheCommunity"; +import DiscoverTheProject from "./DiscoverTheProject"; +import OpenFoodFacts from "./OpenFoodFacts"; + +const footerLinks = [ + { + title: "App Store", + subTitle: "Download on the", + icon: , + url: "https://apps.apple.com/app/open-food-facts/id588797948", + }, + { + title: "Play Store", + subTitle: "Get it on", + icon: , + url: "https://play.google.com/store/apps/details?id=org.openfoodfacts.scanner&hl=en", + }, + { + title: "Microsoft", + subTitle: "Get it from", + icon: , + url: "https://www.microsoft.com/en-us/p/openfoodfacts/9nblggh0dkqr?activetab=pivot:overviewtab", + }, + { + title: "Android APK", + subTitle: "Download", + icon: , + url: "https://github.com/openfoodfacts/smooth-app/releases/tag/v4.4.0", + }, +]; + +const FooterWithLinks = () => { + return ( + <> +
+ {/* Donate to open food facts */} + +
+ {/*App download links for different platforms*/} + + {footerLinks.map((link) => { + return ( + + ); + })} + +
+
+ + + + +
+ + + ); +}; + +export default FooterWithLinks; diff --git a/src/pages/settings/JoinTheCommunity.jsx b/src/pages/settings/JoinTheCommunity.jsx new file mode 100644 index 0000000000..3faedf8f04 --- /dev/null +++ b/src/pages/settings/JoinTheCommunity.jsx @@ -0,0 +1,67 @@ +import { Chip, Divider, Step, StepLabel, Stepper } from "@mui/material"; +import { Box } from "@mui/system"; +import Link from "@mui/material/Link"; +import CheckCircleIcon from "@mui/icons-material/CheckCircle"; +import { useTranslation } from "react-i18next"; + +const content = [ + { + tag: "settings.join_the_community.discover_our", + urlText: "settings.join_the_community.code_of_conduct", + url: "https://world.openfoodfacts.org/code-of-conduct", + }, + { + tag: "settings.join_the_community.join_us_on", + urlText: "slack", + url: "https://slack.openfoodfacts.org/", + }, + { + tag: "", + urlText: "settings.join_the_community.forum", + url: "https://forum.openfoodfacts.org/", + }, + { + tag: "settings.join_the_community.subscribe_to_our", + urlText: "settings.join_the_community.newsletter", + url: "https://link.openfoodfacts.org/newsletter-en", + }, +]; + +const JoinTheCommunity = () => { + const { t } = useTranslation(); + const CustomStepIcon = (props) => { + return
{}
; + }; + + return ( +
+ + + + + + {content.map((step, index) => ( + + + {t(step.tag) + " "} + { + + {t(step.urlText)} + + } + + + ))} + + +
+ ); +}; + +export default JoinTheCommunity; diff --git a/src/pages/settings/OpenFoodFacts.jsx b/src/pages/settings/OpenFoodFacts.jsx new file mode 100644 index 0000000000..4a2b7d4a92 --- /dev/null +++ b/src/pages/settings/OpenFoodFacts.jsx @@ -0,0 +1,68 @@ +import { Box, Button, IconButton, Typography } from "@mui/material"; +import EmailIcon from "@mui/icons-material/Email"; +import TwitterIcon from "@mui/icons-material/Twitter"; +import InstagramIcon from "@mui/icons-material/Instagram"; +import FacebookIcon from "@mui/icons-material/Facebook"; +import { useTranslation } from "react-i18next"; + +const socialMedia = [ + { + icon: , + link: "mailto:contact@openfoodfacts.org", + }, + { + icon: , + link: "https://twitter.com/openfoodfacts", + }, + { + icon: , + link: "https://www.instagram.com/open.food.facts/", + }, + { + icon: , + link: "https://www.facebook.com/OpenFoodFacts", + }, +]; + +const OpenFoodFacts = () => { + const { t } = useTranslation(); + return ( + ({ + backgroundColor: theme.palette.cafeCreme.main, + color: theme.palette.cafeCreme.contrastText, + display: "flex", + flexDirection: "column", + alignItems: "center", + pb: "20px", + })} + > + + + {t("settings.text2")} + + + {socialMedia.map((media) => { + return ( + + {media.icon} + + ); + })} + + + ); +}; + +export default OpenFoodFacts; diff --git a/src/pages/settings/index.jsx b/src/pages/settings/index.jsx index 3a9a251327..c3211eea0c 100644 --- a/src/pages/settings/index.jsx +++ b/src/pages/settings/index.jsx @@ -18,6 +18,8 @@ import { useTranslation } from "react-i18next"; import DevModeContext from "../../contexts/devMode"; import ColorModeContext from "../../contexts/colorMode"; import { localSettings, localSettingsKeys } from "../../localeStorageManager"; +import FooterWithLinks from "./FooterWithLinks"; +import { Divider } from "@mui/material"; export default function Settings() { const { t, i18n } = useTranslation(); @@ -50,95 +52,103 @@ export default function Settings() { }; return ( - - - {t("settings.settings")} - - - {Object.keys(messages).map((lang) => ( - - {lang.toUpperCase()} - - ))} - + <> + + + {t("settings.settings")} + + + {Object.keys(messages).map((lang) => ( + + {lang.toUpperCase()} + + ))} + -
-

{t("settings.dev_mode_title")}

- } - label={t("settings.dev_mode_label")} - labelPlacement="end" - /> -
- {devMode && - [ - { pageUrl: "logos", pageName: "logos", isExperimental: false }, - { - pageUrl: "logos/search", - pageName: "search logos", - isExperimental: false, - }, - { - pageUrl: "logos/product-search", - pageName: "search product logos", - isExperimental: true, - }, - { - pageUrl: "logos/deep-search", - pageName: "deep search logo", - isExperimental: true, - }, - { - pageUrl: "dashboard", - pageName: "dashboard", - isExperimental: false, - }, - { pageUrl: "insights", pageName: "insights", isExperimental: false }, - ].map(({ pageUrl, pageName, isExperimental }) => ( +
+

{t("settings.dev_mode_title")}

} - label={`${t("settings.dev_page_toggle", { name: pageName })}${ - isExperimental ? " (🚧 experimental)" : "" - }`} + label={t("settings.dev_mode_label")} labelPlacement="end" - sx={{ - marginInlineStart: `${2 * (pageUrl.split("/").length - 1)}px`, - }} /> - ))} - {/* color mode */} - - -
- + {devMode && + [ + { pageUrl: "logos", pageName: "logos", isExperimental: false }, + { + pageUrl: "logos/search", + pageName: "search logos", + isExperimental: false, + }, + { + pageUrl: "logos/product-search", + pageName: "search product logos", + isExperimental: true, + }, + { + pageUrl: "logos/deep-search", + pageName: "deep search logo", + isExperimental: true, + }, + { + pageUrl: "dashboard", + pageName: "dashboard", + isExperimental: false, + }, + { + pageUrl: "insights", + pageName: "insights", + isExperimental: false, + }, + ].map(({ pageUrl, pageName, isExperimental }) => ( + } + label={`${t("settings.dev_page_toggle", { name: pageName })}${ + isExperimental ? " (🚧 experimental)" : "" + }`} + labelPlacement="end" + sx={{ + marginInlineStart: `${2 * (pageUrl.split("/").length - 1)}px`, + }} + /> + ))} + {/* color mode */} +
- + {theme.palette.mode} mode + {theme.palette.mode === "dark" ? ( + + ) : ( + + )} + + +
+ + {t("settings.reportIssue")} + +
+ + + + ); }