88 change app colors to match the website

src/components/AboutDialog.tsx

@@ -21,9 +21,9 @@ export default function AboutDialog() {
           {t("AboutDialog_ItalyDisclaimer")}
           </Typography>
           <Typography sx={{fontWeight: 800, mt: 3}}>
-            {t("AboutDialog_aboutus")} <Link underline="hover" sx={{ color: "inherit"}} href="https://fuzue.tech" target="_blank">fuzue.tech</Link> 
+            {t("AboutDialog_aboutus")} <Link underline="hover" href="https://fuzue.tech" target="_blank">fuzue.tech</Link> 
             <br /> 
-            {t("AboutDialog_aboutapp")} <Link underline="hover" sx={{ color: "inherit"}} href="https://seasonalfood.fuzue.tech/" target="_blank" > here</Link> 
+            {t("AboutDialog_aboutapp")} <Link underline="hover" href="https://seasonalfood.fuzue.tech/" target="_blank" > here</Link> 
           </Typography>
         </DialogContentText>
       </DialogContent>

src/components/ContactDialog.tsx

@@ -17,14 +17,14 @@ export default function ContactDialog() {
         <DialogContentText id="contact-dialog-description"  color="dark-gray" >
           {t("ContactDialog_text1")}
             <Link underline="hover" color="inherit" href="https://seasonalfood.fuzue.tech/" target="_blank"> {t("ContactDialog_text2")}</Link> 
-            &nbsp;{t( "ContactDialog_text3")} <Link underline="hover" color="inherit" href="https://github.com/fuzue/seasonalfood"> {t("ContactDialog_text4")}</Link>
+            &nbsp;{t( "ContactDialog_text3")} <Link underline="hover" sx={{fontWeight: 800}} href="https://github.com/fuzue/seasonalfood"> {t("ContactDialog_text4")}</Link>
           <Box sx={{display: 'flex', justifyContent: 'start', mt:2, }}>
             <AlternateEmailIcon sx={{mr:1}} />
-            <Link underline="hover" color="inherit" href="mailto:[email protected]">[email protected]</Link>
+            <Link underline="hover" sx={{fontWeight: 800}} href="mailto:[email protected]">[email protected]</Link>
           </Box>
           <Box sx={{display: 'flex', justifyContent: 'start', mt:1}}>
             <GitHubIcon sx={{mr:1}}/>
-            <Link underline="hover" color="inherit" href="https://github.com/fuzue/seasonalfood">GitHub Repo</Link>
+            <Link underline="hover" sx={{fontWeight: 800}}  href="https://github.com/fuzue/seasonalfood">GitHub Repo</Link>
           </Box>
         </DialogContentText>
       </DialogContent>

src/components/ContributeDialog.tsx

@@ -14,7 +14,7 @@ export default function ContributeDialog() {
         <DialogContentText id="contribute-dialog-description" color="dark-gray">
           {t("ContributeDialog_desc")}
           <p>{t("ContributeDialog_forthis")}&nbsp;
-            <Link underline="hover" href="https://github.com/fuzue/seasonfood" target="_blank">
+            <Link sx={{fontWeight: 800}} underline="hover" href="https://github.com/fuzue/seasonfood" target="_blank">
               {t("ContributeDialog_githubPage")}
             </Link>
           </p>

src/components/HeaderBar.tsx

@@ -103,7 +103,7 @@ export default function HeaderBar(props: Props) {
   }));
 
   return (
-    <AppBar position="static" sx={{ mb: 1, backgroundColor: "primary.dark" }}>
+    <AppBar position="static" sx={{ mb: 1, backgroundColor: "secondary.light" }}>
       <Toolbar>
         {leftButton()}
         <Box

src/components/MonthBar.tsx

@@ -16,7 +16,7 @@ const MonthBar = () => {
   const ArrowButton = styled(Link)(({ theme }) => ({
     color: alpha(theme.palette.primary.light, 0.75),
     "&:hover": {
-      color: alpha(theme.palette.primary.light, 0.95),
+      color: alpha(theme.palette.primary.light, 1),
     },
     display: "flex",
     alignItems: "center",
@@ -25,15 +25,15 @@ const MonthBar = () => {
   }));
 
   const ShadowBox = styled(Stack)(({ theme }) => ({
-    boxShadow: `0 2px 4px ${theme.palette.secondary}`,
+    boxShadow: `0 2px 4px ${theme.palette.text.primary}`,
   }));
 
   return (
     <ShadowBox
       direction="row"
       alignItems="center"
       justifyContent="space-between"
-      bgcolor="secondary.main"
+      bgcolor="primary.main"
       color="primary.light"
       boxShadow="0 2px 4px #332323"
     >

src/main.css

@@ -1,7 +1,7 @@
 html, body, #root, #root>div {
   height: 100%;
   margin: 0;
-  background-color: #eee;
+  background-color: #fefefe;
   overflow: hidden;
 }
 
@@ -15,5 +15,5 @@ a {
   object-fit: cover;
   width: 100%;
   height: 100%;
-  //color: #074d6790
+  color: #074d6790
 }

src/routes/FoodOfTheMonth.tsx

@@ -51,6 +51,8 @@ export default function FoodOfTheMonth() {
     setFoodType(newFoodCategory);
   };
 
+
+
   return (
     <Stack height="100%">
       <Tabs
@@ -59,7 +61,7 @@ export default function FoodOfTheMonth() {
         variant="fullWidth"
         sx={{ fontWeight: 700 }}
         aria-label="tabs for the selection of fruits, vegetables or others"
-      >
+      > 
         <Tab
           label={
             <span>

src/routes/FoodPage.tsx

@@ -42,13 +42,13 @@ export default function FoodPage() {
   const monthColor = (month: string) => {
     if (seasonMonths.includes(month)) {
       return {
-        backgroundColor: "secondary.dark",
+        backgroundColor: "primary.main",
         color: "primary.light",
         boxShadow: `0 2px 4px #888888`,
       };
     } else {
       return {
-        color: "primary.main",
+        color: "secondary.light",
         backgroundColor: "primary.light",
         opacity: ".5"
       };

src/routes/Layout.tsx

@@ -20,29 +20,21 @@ import MonthBar from "../components/MonthBar";
 const theme = createTheme({
   palette: {
     text: {
-      primary: "#674747",
-      secondary: "#999"
-    },
-    primary: { 
-      main: "#5a175d", //purple
-      light: "#f3ecf1", //cream - bg-color
-      dark: "#67074a", // purple/red
+      primary: "#674747", //dark gray
+      secondary: "rgba(0, 0, 0, 0.28)", //light gray
+
+
     },
-    secondary: {
-      main: "#05878a", //blue-green light
-      light: "#074d6790", // blue-green transparent
+    primary: { // green
+      main: "#6fa128", //light green,
+      dark: "#f9f3e3",
+      light: "#f9f3e3" //light cream - bg-color
     },
-
-    //OP 1 DE CORES
-    /* primary: { //green
-      main: "#36a859",
-      light: "#f3ecf1", //cream - bg-color
-      dark: "#2c6e49",
+    secondary: { // purple/red 
+      main: "#782a33", 
+      light: "#ce3045", 
+
     },
-    secondary: {
-      main: "#d55314", //orange
-      light: "#ffc9b9", //pink
-    }, */
 
   },
 });