putting to netlify and first fixes after mobile test

client/.env

@@ -1,8 +1,8 @@
-REACT_APP_SERVER_URL=http://localhost:5000
+REACT_APP_SERVER_URL=https://emealay-server.herokuapp.com
 REACT_APP_NAV_BOTTOM_HEIGHT=55
 REACT_APP_NAV_TOP_HEIGHT=55
 REACT_APP_GRID_LIST_ROW_HEIGHT=140
 REACT_APP_LOGIN_REDIRECT=http://localhost:3000/plans
 REACT_APP_LOGOUT_REDIRECT=http://localhost:3000/
 REACT_APP_AUTH0_DOMAIN=emealay.eu.auth0.com
-REACT_APP_AUTH0_CLIENT_ID=OLWo3TleqtrIithLd6dU5GsyVL3lNoRI
+REACT_APP_AUTH0_CLIENT_ID=UNfghTAFOtxlEzYL49xiUqFZ9aRNabcX

client/.env.heroku

@@ -1,8 +0,0 @@
-REACT_APP_SERVER_URL=https://emealay-server.herokuapp.com/
-REACT_APP_NAV_BOTTOM_HEIGHT=55
-REACT_APP_NAV_TOP_HEIGHT=55
-REACT_APP_GRID_LIST_ROW_HEIGHT=140
-REACT_APP_LOGIN_REDIRECT=https://emealay.herokuapp.com/plans
-REACT_APP_LOGOUT_REDIRECT=https://emealay.herokuapp.com/
-REACT_APP_AUTH0_DOMAIN=emealay.eu.auth0.com
-REACT_APP_AUTH0_CLIENT_ID=OLWo3TleqtrIithLd6dU5GsyVL3lNoRI

client/.gitignore

@@ -1 +1,5 @@
 .eslintcache
+node_modules/
+*.env
+docs/
+build/

client/package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "client",
+  "name": "emealay-client",
   "version": "0.1.0",
   "lockfileVersion": 1,
   "requires": true,

client/package.json

@@ -1,8 +1,11 @@
 {
-  "name": "client",
+  "name": "emealay-client",
   "version": "0.1.0",
   "private": true,
-  "proxy": "http://localhost:5000",
+  "author": {
+    "name": "Ramona Plogmann",
+    "email": "ramona.plogmann@gmail.com"
+  },
   "dependencies": {
     "@auth0/auth0-react": "^1.2.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.32",

client/public/_redirects

@@ -0,0 +1 @@
+/* /index.html 200

client/public/index.html

@@ -17,7 +17,7 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cookie&display=swap">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
-    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, height=device-height"/>
+    <meta name="viewport" content="minimum-scale=1, initial-scale=1, maximum-scale=1.0, user-scalable=no, width=device-width, height=device-height"/>
 
     <!--
       manifest.json provides metadata used when your web app is installed on a

client/src/App.jsx

@@ -44,6 +44,7 @@ const App = () => {
         background:{
           default: prefersDarkMode ? '#202020' : '#ffffff',
           paper: prefersDarkMode ? '#252525' : '#fafafa',
+          // paper: prefersDarkMode ? '#202020' : '#ffffff',
         },
       },/*
       typography: {

client/src/components/Home.jsx

@@ -31,11 +31,6 @@ const useStyles = makeStyles(theme => ({
     lineHeight: '1.8rem',
     marginTop: '1rem',
   },
-  languageButton: {
-    position: "fixed",
-    bottom: '2rem',
-    transform: 'translateX(-50%)',
-  },
   select: {
     color: theme.palette.secondary.main,
     paddingLeft: '0.5rem',
@@ -83,11 +78,8 @@ const Home = () => {
             <br />
             <br />
             <br />
-            <br />
-            <br />
-            <br />
 
-            <Button variant="outlined" color="secondary" size="medium" className={classes.languageButton} startIcon={<Translate />}>
+            <Button variant="outlined" color="secondary" size="medium" startIcon={<Translate />}>
               <Select input={<InputBase />}
                       className={classes.select}
                       labelId="language-select-label"

client/src/components/Images/ImageGrid.jsx

@@ -39,7 +39,7 @@ const useStyles = makeStyles((theme) => ({
 
 /**
  * Image grid that displays an array of images in a 3 column grid and includes optional buttons to delete or select an image.
- * Height of each row can be controlled via `.env.REACT_APP_GRID_LIST_ROW_HEIGHT`
+ * Height of each row can be controlled via `localhost.env.REACT_APP_GRID_LIST_ROW_HEIGHT`
  * allows children to be wrapped within ImageGrid component, they will be displayed within the grid, before the photos (e.g., Dropzone)
  */
 const ImageGrid = (props) => {

client/src/components/Meals/EditMeal.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Button, Dialog, Grid } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
 import axios from 'axios';
-import { arrayOf, bool, func, object, shape, string } from "prop-types";
+import { arrayOf, bool, func, shape, string } from "prop-types";
 import DeleteButton from "../Buttons/DeleteButton";
 import { useTranslation } from "react-i18next";
 import EditMealCore from "./EditMealCore";
@@ -14,10 +14,11 @@ import { withAuthenticationRequired } from "@auth0/auth0-react";
 import Loading from "../Loading";
 import useSnackbars from "../util/useSnackbars";
 import DoneButton from "../Buttons/DoneButton";
+import FullScreenDialog from "../util/FullScreenDialog";
 
 const useStyles = makeStyles((theme) => ({
   form: {
-    padding: '1em 2.5em',
+    padding: '1em 1.5em',
     backgroundColor: theme.palette.background.default,
   },
   cancelButton: {
@@ -118,7 +119,7 @@ const EditMeal = (props) => {
     <>
 
       {meal ?
-        <Dialog open={open} fullScreen onClose={closeDialog} TransitionComponent={SlidingTransitionLeft}>
+        <FullScreenDialog open={open} onClose={closeDialog}>
           <Navbar pageTitle={t('Edit Meal')}
                   leftSideComponent={<BackButton onClick={closeDialog} />}
                   rightSideComponent={meal.title ? <DoneButton onClick={editAndClose} /> : null}
@@ -137,7 +138,7 @@ const EditMeal = (props) => {
               </Grid>
             </Grid>
           </form>
-        </Dialog>
+        </FullScreenDialog>
         : ''}
 
       {Snackbars}

client/src/components/Meals/EditMealCore.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { TextField } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
-import { arrayOf, bool, func, object, shape, string } from "prop-types";
+import { arrayOf, bool, func, shape, string } from "prop-types";
 import { useTranslation } from "react-i18next";
 import ImageUpload from "../Images/ImageUpload";
 import { withAuthenticationRequired } from "@auth0/auth0-react";

client/src/components/Meals/MealAvatar.jsx

@@ -1,7 +1,7 @@
 import { Avatar } from "@material-ui/core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faUtensils } from "@fortawesome/free-solid-svg-icons";
-import { arrayOf, object, shape, string } from "prop-types";
+import { arrayOf, shape, string } from "prop-types";
 import React from "react";
 import { makeStyles } from "@material-ui/styles";
 

client/src/components/Meals/MealDetailView.jsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import { Box, Card, CardContent, Dialog, Link, Typography } from '@material-ui/core';
+import { Box, Dialog, Link, Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
 import axios from 'axios';
-import { arrayOf, bool, func, object, shape, string } from "prop-types";
+import { arrayOf, bool, func, shape, string } from "prop-types";
 import EditMeal from "./EditMeal";
 import Navbar from "../Navbar";
 import BackButton from "../Buttons/BackButton";

client/src/components/Meals/SelectMealCategory.jsx

@@ -1,9 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { ListItem, ListItemIcon, ListItemText, useTheme } from '@material-ui/core';
 import CreatableSelect from 'react-select/creatable';
-// import MuiAlert from '@material-ui/lab/Alert';
 import { makeStyles } from '@material-ui/styles';
-import { func, object, shape, string } from "prop-types";
+import { func, string } from "prop-types";
 import { useTranslation } from "react-i18next";
 import { useAuth0, withAuthenticationRequired } from "@auth0/auth0-react";
 import { LoadingBody } from "../Loading";
@@ -11,7 +10,7 @@ import { getSettingsOfUser } from "../Settings/settings.util";
 import { faPlusCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { ChooseIconDialog, updateMealCategories } from "../Settings/EditMealCategories";
-import { useCategoryIcons } from "./meals.util";
+import { reactSelectTheme, useCategoryIcons } from "./meals.util";
 
 const useStyles = makeStyles((theme) => ({
   textField: {
@@ -107,13 +106,6 @@ const SelectMealCategory = (props) => {
     }
   }
 
-  const theme = (givenTheme) => {
-    givenTheme.colors.primary = muiTheme.palette.primary.main;
-    givenTheme.colors.danger = muiTheme.palette.error.main;
-    givenTheme.spacing.baseUnit = 4;
-    return givenTheme;
-  }
-
   console.log(categoryIcons);
   console.log(categoryName, currentCategory, allCategories);
   return (
@@ -124,7 +116,7 @@ const SelectMealCategory = (props) => {
                        components={{ Option: SelectOption, SingleValue: ChosenOption }}
                        getOptionLabel={option => option.name}
                        onChange={handleCategoryChange}
-                       theme={givenTheme => theme(givenTheme)}
+                       theme={givenTheme => reactSelectTheme(givenTheme, muiTheme, true)}
                        getNewOptionData={(value) => {
                          return {
                            name: value,

client/src/components/Meals/SelectMealTags.jsx

@@ -7,6 +7,7 @@ import { useTranslation } from "react-i18next";
 import { useAuth0, withAuthenticationRequired } from "@auth0/auth0-react";
 import { LoadingBody } from "../Loading";
 import { getSettingsOfUser, updateUserSettingsForCategory } from "../Settings/settings.util";
+import { reactSelectTheme } from "./meals.util";
 
 const SelectMealTags = (props) => {
   const { t } = useTranslation();
@@ -49,12 +50,6 @@ const SelectMealTags = (props) => {
     }
   };
 
-  const theme = (givenTheme) => {
-    givenTheme.colors.primary = muiTheme.palette.secondary.main;
-    givenTheme.colors.danger = muiTheme.palette.error.main;
-    return givenTheme;
-  }
-
   const customStyles = {
     control: (provided, state) => ({
       ...provided,
@@ -67,7 +62,7 @@ const SelectMealTags = (props) => {
     isClearable: true,
     isMulti: true,
     styles: customStyles,
-    theme: givenTheme => theme(givenTheme),
+    theme: givenTheme => reactSelectTheme(givenTheme, muiTheme, true),
     placeholder: <ListItemText primary={placeholderText || t('Select Tags') + '...'} />,
     options: allTags,
     value: currentTags,

client/src/components/Meals/meals.util.jsx

@@ -3,6 +3,7 @@ import axios from "axios";
 import { useAuth0 } from "@auth0/auth0-react";
 import { useEffect, useState } from "react";
 import { getSettingsOfUser } from "../Settings/settings.util";
+import { lighten, darken } from "@material-ui/core";
 
 const serverURL = process.env.REACT_APP_SERVER_URL;
 
@@ -60,3 +61,35 @@ export const useCategoryIcons = () => {
 
   return allCategoryIcons;
 }
+
+export const reactSelectTheme = (givenTheme, muiTheme, secondary = false) => {
+  const muiPrimary = secondary ?  muiTheme.palette.secondary.main : muiTheme.palette.primary.main;
+  const muiBackground = muiTheme.palette.background.default;
+  const isLight = muiTheme.palette.type === 'light';
+  const shade = (color, coefficient) => isLight ? darken(color, coefficient) : lighten(color, coefficient);
+  const shadeInverse = (color, coefficient) => isLight ? lighten(color, coefficient) : darken(color, coefficient);
+
+  givenTheme.colors = {
+    primary: muiPrimary,
+    primary75: shadeInverse(muiPrimary, 0.25),
+    primary50: shadeInverse(muiPrimary, 0.5),
+    primary25: shadeInverse(muiPrimary, 0.75),
+
+    danger: isLight ? muiTheme.palette.error.dark : muiTheme.palette.error.light,
+    dangerLight: isLight ? lighten(muiTheme.palette.error.light, .3) : darken(muiTheme.palette.error.dark, 0.3),
+
+    neutral0: muiBackground,
+    neutral5: shade(muiPrimary, 0.05),
+    neutral10: shade(muiBackground, 0.1) , // option background
+    neutral20: shade(muiPrimary, 0.2), // border and controls
+    neutral30: shade(muiPrimary, 0.3), // border on hover
+    neutral40: shade(muiPrimary, 0.4), // controls on hover
+    neutral50: shade(muiPrimary, 0.5), // placeholder
+    neutral60: shade(muiPrimary, 0.6), // control active
+    neutral70: shade(muiPrimary, 0.7),
+    neutral80: shade(muiBackground, 0.8), // option text & controls on focus+hover
+    neutral90: shade(muiPrimary, 0.9),
+  };
+  givenTheme.spacing.baseUnit = 4;
+  return givenTheme;
+}

client/src/components/Navbar.jsx

@@ -16,7 +16,7 @@ const useStyles = makeStyles((theme) => ({
     alignItems: 'center',
   },
   headline: {
-    fontSize: '30px',
+    fontSize: '25px',
     lineHeight: '35px',
     whiteSpace: 'nowrap',
     overflow: "hidden",

client/src/components/Plans/EditPlanItem.jsx

@@ -13,11 +13,12 @@ import { useAuth0, withAuthenticationRequired } from "@auth0/auth0-react";
 import Loading from "../Loading";
 import useSnackbars from "../util/useSnackbars";
 import DoneButton from "../Buttons/DoneButton";
+import FullScreenDialog from "../util/FullScreenDialog";
 
 /** Dialog page that allows user to edit plan */
 const useStyles = makeStyles((theme) => ({
   form: {
-    padding: '1em 2.5em',
+    padding: '1em 1.5em',
     backgroundColor: theme.palette.background.default,
     height: `calc(100% - ${process.env.REACT_APP_NAV_BOTTOM_HEIGHT}px)`,
   },
@@ -127,7 +128,7 @@ const EditPlanItem = (props) => {
 
   return (
     <>{planItem ?
-      <Dialog open={open} fullScreen onClose={closeDialog} TransitionComponent={SlidingTransitionLeft}>
+      <FullScreenDialog open={open} onClose={closeDialog}>
         <Navbar pageTitle={t('Edit Plan')}
                 leftSideComponent={<BackButton onClick={closeDialog} />}
                 rightSideComponent={planItem.title ? <DoneButton onClick={editAndClose} /> : null}
@@ -147,7 +148,7 @@ const EditPlanItem = (props) => {
             </Grid>
           </Grid>
         </form>
-      </Dialog>
+      </FullScreenDialog>
       : ''}
       {Snackbars}
     </>

client/src/components/Settings/EditProfile.jsx

@@ -27,6 +27,7 @@ import { SlidingTransitionLeft } from "../util/SlidingTransition";
 import Navbar from "../Navbar";
 import BackButton from "../Buttons/BackButton";
 import { muiTableBorder } from "../util";
+import FullScreenDialog from "../util/FullScreenDialog";
 
 const serverURL = process.env.REACT_APP_SERVER_URL;
 
@@ -137,7 +138,7 @@ const EditProfile = (props) => {
   }
 
   return (
-    <Dialog open={open} fullScreen onClose={closeDialog} TransitionComponent={SlidingTransitionLeft}>
+    <FullScreenDialog open={open} onClose={closeDialog}>
       <Navbar pageTitle={t('Edit Profile')} leftSideComponent={<BackButton onClick={closeDialog} />} secondary={isSecondary} />
       <Box className={classes.userProfile}>
         <ImageUpload uploadedImages={[profileImage]}
@@ -197,7 +198,7 @@ const EditProfile = (props) => {
           </Button>
         </form>
       </Box>
-    </Dialog>
+    </FullScreenDialog>
   );
 };
 

client/src/components/util/FullScreenDialog.jsx

@@ -0,0 +1,21 @@
+import { SlidingTransitionLeft } from "./SlidingTransition";
+import { Dialog } from "@material-ui/core";
+import React from "react";
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles(theme => ({
+  fullScreenDialog: {
+    backgroundColor: theme.palette.background.default,
+  }
+}));
+const FullScreenDialog = (props) => {
+  const classes = useStyles();
+
+  return (
+    <Dialog {...props} fullScreen classes={{paper: classes.fullScreenDialog}} TransitionComponent={SlidingTransitionLeft}>
+      {props.children}
+    </Dialog>
+  )
+}
+
+export default FullScreenDialog;

client/src/translations/_example.translation.json

@@ -71,5 +71,7 @@
   "Meals without category": "",
   "Filter by Tags": "",
   "No meals found for filter selection": "",
+  "expand all": "",
+  "collapse all": "",
   "": ""
 }

client/src/translations/de.translation.json

@@ -72,5 +72,7 @@
   "Create tag \"{{input}}\"": "Tag \"{{input}}\" erstellen",
   "Meals without category": "Ohne Kategorie",
   "Filter by Tags": "Nach Tags filtern",
-  "No meals found for filter selection": "Für die derzeitige Filterkombination wurden keine Gerichte gefunden"
+  "No meals found for filter selection": "Für die derzeitige Filterkombination wurden keine Gerichte gefunden",
+  "expand all": "Alle ausklappen",
+  "collapse all": "Alle einklappen"
 }

client/src/translations/en-GB.translation.json

@@ -60,5 +60,18 @@
   "Use dark mode?": "Use dark mode?",
   "Missing Ingredients": "Missing Ingredients",
   "List is currently empty": "List is currently empty",
-  "Without Date": "Without Date"
+  "Without Date": "Without Date",
+  "Choose Icon for {{categoryName}}": "Choose Icon for {{categoryName}}",
+  "Categories": "Categories",
+  "Category": "Category",
+  "Select Category": "Select Category",
+  "Tags": "Tags",
+  "Tag": "Tag",
+  "Select Tags": "Select Tags",
+  "Create tag \"{{input}}\"": "Create tag \\\"{{input}}\\\"",
+  "Meals without category": "Meals without category",
+  "Filter by Tags": "Filter by Tags",
+  "No meals found for filter selection": "No meals found for filter selection",
+  "expand all": "expand all",
+  "collapse all": "collapse all"
 }

client/src/translations/en-US.translation.json

@@ -60,5 +60,18 @@
   "Use dark mode?": "Use dark mode?",
   "Missing Ingredients": "Missing Ingredients",
   "List is currently empty": "List is currently empty",
-  "Without Date": "Without Date"
+  "Without Date": "Without Date",
+  "Choose Icon for {{categoryName}}": "Choose Icon for {{categoryName}}",
+  "Categories": "Categories",
+  "Category": "Category",
+  "Select Category": "Select Category",
+  "Tags": "Tags",
+  "Tag": "Tag",
+  "Select Tags": "Select Tags",
+  "Create tag \"{{input}}\"": "Create tag \\\"{{input}}\\\"",
+  "Meals without category": "Meals without category",
+  "Filter by Tags": "Filter by Tags",
+  "No meals found for filter selection": "No meals found for filter selection",
+  "expand all": "expand all",
+  "collapse all": "collapse all"
 }

client/src/translations/es.translation.json

@@ -60,5 +60,18 @@
   "Use dark mode?": "Modo oscuro",
   "Missing Ingredients": "Ingredientes faltantes",
   "List is currently empty": "La lista está actualmente vacía",
-  "Without Date": "Sin fecha"
+  "Without Date": "Sin fecha",
+  "Choose Icon for {{categoryName}}": "Seleccionar l'icono para {{categoryName}}",
+  "Categories": "Categorías",
+  "Category": "Categoría",
+  "Select Category": "Seleccionar la categoría",
+  "Tags": "Tags",
+  "Tag": "Tag",
+  "Select Tags": "Seleccionar tags",
+  "Create tag \"{{input}}\"": "Crear tag \"{{input}}\"",
+  "Meals without category": "Comidas sin categoría",
+  "Filter by Tags": "Filtrar por tags",
+  "No meals found for filter selection": "No se ha encontrado ninguna comida para la selección de filtros",
+  "expand all": "expandir todo",
+  "collapse all": "colapsar todo"
 }

client/src/translations/fr-FR.translation.json

@@ -60,5 +60,18 @@
   "Use dark mode?": "mode sombre",
   "Missing Ingredients": "Ingrédients manquants",
   "List is currently empty": "La liste est actuellement vide",
-  "Without Date": "Sans date"
+  "Without Date": "Sans date",
+  "Choose Icon for {{categoryName}}": "Sélectionnez l'icône pour {{categoryName}}",
+  "Categories": "Catégories",
+  "Category": "Catégorie",
+  "Select Category": "Sélectionnez la catégorie",
+  "Tags": "Tags",
+  "Tag": "Tag",
+  "Select Tags": "Sélectionner les tags",
+  "Create tag \"{{input}}\"": "Créer le tag \"{{input}}\"",
+  "Meals without category": "Repas sans catégorie",
+  "Filter by Tags": "Filtrer par Tags",
+  "No meals found for filter selection": "Aucun repas trouvé pour la sélection de filtres",
+  "expand all": "développer tout",
+  "collapse all": "réduire tout"
 }

client/src/translations/it.translation.json

@@ -60,5 +60,18 @@
   "Use dark mode?": "modo scuro",
   "Missing Ingredients": "Ingredienti mancanti",
   "List is currently empty": "La lista è attualmente vuota",
-  "Without Date": "Senza Data"
+  "Without Date": "Senza Data",
+  "Choose Icon for {{categoryName}}": "Scegli l'icona per {{categoryName}}",
+  "Categories": "Categorie",
+  "Category": "Categoria",
+  "Select Category": "Scegli la categoria",
+  "Tags": "Tag",
+  "Tag": "Tag",
+  "Select Tags": "Scegli i tag",
+  "Create tag \"{{input}}\"": "Crea tag \"{{input}}\"",
+  "Meals without category": "Pasti senza categoria",
+  "Filter by Tags": "Filtrare per tag",
+  "No meals found for filter selection": "Nessun pasto trovato per la selezione dei filtri",
+  "expand all": "espandi tutti",
+  "collapse all": "crolla tutti"
 }

server/.gitignore

@@ -0,0 +1 @@
+*.env