From cb004ab010558392d4ab34347f9386f41b178f27 Mon Sep 17 00:00:00 2001 From: Sudhanva-Nadiger Date: Mon, 6 Feb 2023 00:30:00 +0530 Subject: [PATCH 1/3] feat: add relavant links to footer in settings page --- src/pages/settings/Donate.jsx | 55 ++++++++++++++++++ src/pages/settings/FooterButtons.jsx | 26 +++++++++ src/pages/settings/FooterWithLinks.jsx | 80 ++++++++++++++++++++++++++ src/pages/settings/index.jsx | 4 ++ 4 files changed, 165 insertions(+) create mode 100644 src/pages/settings/Donate.jsx create mode 100644 src/pages/settings/FooterButtons.jsx create mode 100644 src/pages/settings/FooterWithLinks.jsx diff --git a/src/pages/settings/Donate.jsx b/src/pages/settings/Donate.jsx new file mode 100644 index 0000000000..5c8add5c6f --- /dev/null +++ b/src/pages/settings/Donate.jsx @@ -0,0 +1,55 @@ +import { Button, Typography } from "@mui/material"; +import VolunteerActivismIcon from "@mui/icons-material/VolunteerActivism"; +import { Box } from "@mui/system"; + +const Donate = () => { + return ( + +
+ +
+ + 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 ❤️ + + + ); +}; + +export default Donate; diff --git a/src/pages/settings/FooterButtons.jsx b/src/pages/settings/FooterButtons.jsx new file mode 100644 index 0000000000..e530cf66a5 --- /dev/null +++ b/src/pages/settings/FooterButtons.jsx @@ -0,0 +1,26 @@ +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..0fd6b287e3 --- /dev/null +++ b/src/pages/settings/FooterWithLinks.jsx @@ -0,0 +1,80 @@ +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"; + +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 socialMedia = [ + { + platform: "Twitter", + link: "https://twitter.com/openfoodfacts", + }, + { + platform: "Instagram", + link: "https://www.instagram.com/open.food.facts/", + }, + { + platform: "facebook", + link: "https://www.facebook.com/OpenFoodFacts", + }, +]; + +const FooterWithLinks = () => { + return ( + <> + + + {footerLinks.map((link) => { + return ( + + ); + })} + + + ); +}; + +export default FooterWithLinks; diff --git a/src/pages/settings/index.jsx b/src/pages/settings/index.jsx index 3a9a251327..8c79e2d026 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(); @@ -139,6 +141,8 @@ export default function Settings() { {t("settings.reportIssue")} + + ); } From 406c118a2c6551192e3a1ec500dc799aa2d66110 Mon Sep 17 00:00:00 2001 From: Sudhanva-Nadiger Date: Mon, 6 Feb 2023 22:57:27 +0530 Subject: [PATCH 2/3] feat: add relavent links in settings footer page - added DiscoverProjects, JoinTheCommunity, OpenFoodFacts footer components - made responsive for mobile layout. --- src/pages/settings/DiscoverTheProject.jsx | 78 ++++++++++ src/pages/settings/FooterButtons.jsx | 8 +- src/pages/settings/FooterWithLinks.jsx | 37 +++-- src/pages/settings/JoinTheCommunity.jsx | 65 ++++++++ src/pages/settings/OpenFoodFacts.jsx | 67 +++++++++ src/pages/settings/index.jsx | 174 +++++++++++----------- 6 files changed, 329 insertions(+), 100 deletions(-) create mode 100644 src/pages/settings/DiscoverTheProject.jsx create mode 100644 src/pages/settings/JoinTheCommunity.jsx create mode 100644 src/pages/settings/OpenFoodFacts.jsx diff --git a/src/pages/settings/DiscoverTheProject.jsx b/src/pages/settings/DiscoverTheProject.jsx new file mode 100644 index 0000000000..6dc98112f8 --- /dev/null +++ b/src/pages/settings/DiscoverTheProject.jsx @@ -0,0 +1,78 @@ +import { Button, Chip, Divider, Typography } from "@mui/material"; +import { Box } from "@mui/system"; + +const discover = [ + { + text: "Who we are", + url: "https://world.openfoodfacts.org/who-we-are", + }, + { + text: "Vision, Mission, Values and Programs", + url: "https://world.openfoodfacts.org/open-food-facts-vision-mission-values-and-programs", + }, + { + text: "FAQs", + url: "https://world.openfoodfacts.org/faq", + }, + { + text: "Open Food Facts blog", + url: "https://blog.openfoodfacts.org/en/", + }, + { + text: "Press", + url: "https://world.openfoodfacts.org/press", + }, + { + text: "Open Food Facts wiki (en)", + url: "https://wiki.openfoodfacts.org/", + }, + { + text: "Translators", + url: "https://world.openfoodfacts.org/cgi/top_translators.pl", + }, + { + text: "Partners", + url: "https://world.openfoodfacts.org/partners", + }, + { + text: "Open Beauty Facts-Cosmétiques", + url: "https://world-fr.openbeautyfacts.org/", + }, +]; + +const DiscoverTheProject = () => { + return ( + + + + +
+ + {discover.map((content) => { + return ( + + ); + })} + + + ); +}; + +export default DiscoverTheProject; diff --git a/src/pages/settings/FooterButtons.jsx b/src/pages/settings/FooterButtons.jsx index e530cf66a5..8083c8d34d 100644 --- a/src/pages/settings/FooterButtons.jsx +++ b/src/pages/settings/FooterButtons.jsx @@ -8,7 +8,13 @@ const FooterButtons = (props) => { href={url} target="_blank" variant="contained" - sx={{ width: "200px", pr: "1", pl: "0", backgroundColor: "#a08d84" }} + sx={{ + width: "200px", + pr: "1", + pl: "0", + backgroundColor: "#a08d84", + "&:hover": { backgroundColor: "#887369" }, + }} > {icon} diff --git a/src/pages/settings/FooterWithLinks.jsx b/src/pages/settings/FooterWithLinks.jsx index 0fd6b287e3..74db029eaa 100644 --- a/src/pages/settings/FooterWithLinks.jsx +++ b/src/pages/settings/FooterWithLinks.jsx @@ -5,6 +5,9 @@ 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 = [ { @@ -33,25 +36,14 @@ const footerLinks = [ }, ]; -const socialMedia = [ - { - platform: "Twitter", - link: "https://twitter.com/openfoodfacts", - }, - { - platform: "Instagram", - link: "https://www.instagram.com/open.food.facts/", - }, - { - platform: "facebook", - link: "https://www.facebook.com/OpenFoodFacts", - }, -]; - const FooterWithLinks = () => { return ( <> +
+ {/* Donate to open food facts */} +
+ {/*App download links for different platforms*/} { ); })} +
+
+ + + + +
+ ); }; diff --git a/src/pages/settings/JoinTheCommunity.jsx b/src/pages/settings/JoinTheCommunity.jsx new file mode 100644 index 0000000000..2532354d9b --- /dev/null +++ b/src/pages/settings/JoinTheCommunity.jsx @@ -0,0 +1,65 @@ +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"; + +const content = [ + { + tag: "Discover our ", + urlText: "Code of conduct", + url: "https://world.openfoodfacts.org/code-of-conduct", + }, + { + tag: "Join us on ", + urlText: "slack", + url: "https://slack.openfoodfacts.org/", + }, + { + tag: "", + urlText: "Forum", + url: "https://forum.openfoodfacts.org/", + }, + { + tag: "Subscribe to our ", + urlText: "newsletter", + url: "https://link.openfoodfacts.org/newsletter-en", + }, +]; + +const JoinTheCommunity = () => { + const CustomStepIcon = (props) => { + return
{}
; + }; + + return ( +
+ + + + + + {content.map((step, index) => ( + + + {step.tag} + { + + {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..1011063987 --- /dev/null +++ b/src/pages/settings/OpenFoodFacts.jsx @@ -0,0 +1,67 @@ +import { Box, 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"; + +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 = () => { + return ( + ({ + backgroundColor: theme.palette.cafeCreme.main, + color: theme.palette.cafeCreme.contrastText, + display: "flex", + flexDirection: "column", + alignItems: "center", + pb: "20px", + })} + > + + openFoodFacts + + + A collaborative, free and open database of food products from around the + world. + + + {socialMedia.map((media) => { + return ( + + {media.icon} + + ); + })} + + + ); +}; + +export default OpenFoodFacts; diff --git a/src/pages/settings/index.jsx b/src/pages/settings/index.jsx index 8c79e2d026..c3211eea0c 100644 --- a/src/pages/settings/index.jsx +++ b/src/pages/settings/index.jsx @@ -52,97 +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")} + +
+ - + ); } From 09c44f77b33b2aa30f8dd3c05dba9f60067f20e7 Mon Sep 17 00:00:00 2001 From: Sudhanva-Nadiger Date: Tue, 7 Feb 2023 13:40:27 +0530 Subject: [PATCH 3/3] feat: add all text to tranlations --- src/i18n/common.json | 25 ++++++++++++++++++++++- src/i18n/en.json | 25 ++++++++++++++++++++++- src/pages/settings/DiscoverTheProject.jsx | 22 +++++++++++--------- src/pages/settings/Donate.jsx | 11 +++++----- src/pages/settings/FooterButtons.jsx | 2 +- src/pages/settings/JoinTheCommunity.jsx | 20 ++++++++++-------- src/pages/settings/OpenFoodFacts.jsx | 11 +++++----- 7 files changed, 83 insertions(+), 33 deletions(-) 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 index 6dc98112f8..17657e43ef 100644 --- a/src/pages/settings/DiscoverTheProject.jsx +++ b/src/pages/settings/DiscoverTheProject.jsx @@ -1,46 +1,48 @@ import { Button, Chip, Divider, Typography } from "@mui/material"; import { Box } from "@mui/system"; +import { useTranslation } from "react-i18next"; const discover = [ { - text: "Who we are", + text: "settings.Who_we_are", url: "https://world.openfoodfacts.org/who-we-are", }, { - text: "Vision, Mission, Values and Programs", + text: "settings.Vision_Mission_Values_and_Programs", url: "https://world.openfoodfacts.org/open-food-facts-vision-mission-values-and-programs", }, { - text: "FAQs", + text: "settings.FAQS", url: "https://world.openfoodfacts.org/faq", }, { - text: "Open Food Facts blog", + text: "settings.open_Food_Facts_blog", url: "https://blog.openfoodfacts.org/en/", }, { - text: "Press", + text: "settings.Press", url: "https://world.openfoodfacts.org/press", }, { - text: "Open Food Facts wiki (en)", + text: "settings.Open_Food_Facts_wiki", url: "https://wiki.openfoodfacts.org/", }, { - text: "Translators", + text: "settings.Translators", url: "https://world.openfoodfacts.org/cgi/top_translators.pl", }, { - text: "Partners", + text: "settings.Partners", url: "https://world.openfoodfacts.org/partners", }, { - text: "Open Beauty Facts-Cosmétiques", + text: "settings.Open_Beauty_Facts", url: "https://world-fr.openbeautyfacts.org/", }, ]; const DiscoverTheProject = () => { + const { t } = useTranslation(); return ( @@ -66,7 +68,7 @@ const DiscoverTheProject = () => { href={content.url} target="_blank" > - {content.text} + {t(content.text)} ); })} diff --git a/src/pages/settings/Donate.jsx b/src/pages/settings/Donate.jsx index 5c8add5c6f..dbc46b7e65 100644 --- a/src/pages/settings/Donate.jsx +++ b/src/pages/settings/Donate.jsx @@ -1,8 +1,10 @@ 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 ( { variant="outlined" startIcon={} > - Donate + {t("settings.donate")}
- 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. + {t("settings.text1")}

- Thank you ❤️ + {t("settings.thank_you")} ❤️ ); diff --git a/src/pages/settings/FooterButtons.jsx b/src/pages/settings/FooterButtons.jsx index 8083c8d34d..52f642b083 100644 --- a/src/pages/settings/FooterButtons.jsx +++ b/src/pages/settings/FooterButtons.jsx @@ -9,7 +9,7 @@ const FooterButtons = (props) => { target="_blank" variant="contained" sx={{ - width: "200px", + width: "220px", pr: "1", pl: "0", backgroundColor: "#a08d84", diff --git a/src/pages/settings/JoinTheCommunity.jsx b/src/pages/settings/JoinTheCommunity.jsx index 2532354d9b..3faedf8f04 100644 --- a/src/pages/settings/JoinTheCommunity.jsx +++ b/src/pages/settings/JoinTheCommunity.jsx @@ -2,31 +2,33 @@ 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: "Discover our ", - urlText: "Code of conduct", + tag: "settings.join_the_community.discover_our", + urlText: "settings.join_the_community.code_of_conduct", url: "https://world.openfoodfacts.org/code-of-conduct", }, { - tag: "Join us on ", + tag: "settings.join_the_community.join_us_on", urlText: "slack", url: "https://slack.openfoodfacts.org/", }, { tag: "", - urlText: "Forum", + urlText: "settings.join_the_community.forum", url: "https://forum.openfoodfacts.org/", }, { - tag: "Subscribe to our ", - urlText: "newsletter", + 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
{}
; }; @@ -34,7 +36,7 @@ const JoinTheCommunity = () => { return (
- + { {content.map((step, index) => ( - {step.tag} + {t(step.tag) + " "} { - {step.urlText} + {t(step.urlText)} } diff --git a/src/pages/settings/OpenFoodFacts.jsx b/src/pages/settings/OpenFoodFacts.jsx index 1011063987..4a2b7d4a92 100644 --- a/src/pages/settings/OpenFoodFacts.jsx +++ b/src/pages/settings/OpenFoodFacts.jsx @@ -1,8 +1,9 @@ -import { Box, IconButton, Typography } from "@mui/material"; +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 = [ { @@ -24,6 +25,7 @@ const socialMedia = [ ]; const OpenFoodFacts = () => { + const { t } = useTranslation(); return ( ({ @@ -35,7 +37,7 @@ const OpenFoodFacts = () => { pb: "20px", })} > - { src="/logo192.png" alt="openFoodFacts" /> - + - A collaborative, free and open database of food products from around the - world. + {t("settings.text2")} {socialMedia.map((media) => {