fixes after Merle's user test

make category icons dependent on user (before in contacts tab system was trying to match own category icons to foreign categories)
expand all gets marginleft auto because justify content does not work on mobile devices
add a description what the "comment" field in meals is for
change photo upload (MIME "image" does not work on mobile, now try "image/*"

client/src/components/Buttons/InnerBoxSelection.jsx

@@ -11,11 +11,11 @@ const useStyles = makeStyles((theme) => ({
     top: '0',
     transform: 'translate(25%, 25%)',
     borderRadius: '100%',
-    border: '1px solid ' + theme.palette.secondary.main,
-    color: theme.palette.secondary.main,
+    border: '1px solid ' + theme.palette.primary.main,
+    color: theme.palette.primary.main,
     padding: 0,
     background: 'transparent',
-     opacity: props.selected ? '100%': '50%',
+    opacity: props.selected ? '100%' : '50%',
 
     '&:hover': {
       color: theme.palette.primary.main,
@@ -27,10 +27,10 @@ const useStyles = makeStyles((theme) => ({
     fontSize: '1.5rem',
     lineHeight: '1.5rem',
   },
-  xBackground: {
+  greenBackground: {
     color: theme.palette.primary.main,
   },
-  x: {
+  white: {
     color: theme.myColors.white,
   }
 }));
@@ -44,8 +44,8 @@ function InnerBoxSelection(props) {
   return (
     <button type="button" className={classes.boxCloseX} onClick={onClick}>
       <span className={`${classes.closeXIcon} fa-layers`}>
-        <FontAwesomeIcon icon={faCircle} className={classes.x}  />
-        <FontAwesomeIcon icon={faCheckCircle} className={classes.xBackground} transform="shrink--2" />
+        <FontAwesomeIcon icon={faCircle} className={classes.white}  />
+        <FontAwesomeIcon icon={faCheckCircle} className={classes.greenBackground} transform="shrink--2" />
       </span>
     </button>
   );

client/src/components/Images/PhotoDropzone.jsx

@@ -38,7 +38,7 @@ function PhotoDropzone(props) {
     isDragAccept,
     isDragReject,
   } = useDropzone({
-    accept: ['image'],
+    accept: ['image/*'],
     maxSize: 10485760,
     multiple: multiple,
     onDrop(acceptedFiles, rejectedFiles, event) {

client/src/components/Meals/AddMeal.jsx

@@ -68,7 +68,9 @@ const AddMeal = (props) => {
   return (
     <>
       <Navbar pageTitle={t('New Meal')} leftSideComponent={<BackButton onClick={() => {
-        deleteAllImagesFromMeal(meal._id);
+        if (meal.images) {
+          deleteAllImagesFromMeal(meal._id);
+        }
         history.goBack();
       }} />} rightSideComponent={meal.title ? <DoneButton onClick={addNewMeal} /> : null} />
 

client/src/components/Meals/CategoryIcons.jsx

@@ -22,7 +22,7 @@ const solidIconNames = [
   'shopping-cart', 'shopping-basket', 'shopping-bag',
   'globe-africa', 'globe-americas', 'globe-asia', 'globe-europe',
   'suitcase-rolling', 'suitcase',
-  'snowflake', 'fire', 'thermometer-empty', 'thermometer-quarter', 'thermometer-half','thermometer-three-quarters', 'thermometer-full',
+  'snowflake', 'fire', 'thermometer-empty', 'thermometer-quarter', 'thermometer-half', 'thermometer-three-quarters', 'thermometer-full',
   'book', 'bookOpen',
   'disease',
   'tag', 'tags', 'thumbtack',
@@ -43,4 +43,5 @@ const categoryIcons = Object.values(SolidIcons)
                             .filter(i => solidIconNames.includes(i.iconName))
                             .sort(sortFunction);
 categoryIcons.push(faYoutube, faPinterest, faGoogle, faFacebook);
+
 export default categoryIcons;

client/src/components/Meals/EditMealCore.jsx

@@ -39,9 +39,22 @@ const EditMealCore = (props) => {
 
   return (
     <>
-      <OutlinedTextField name="title" value={title} label={t('Meal Title')} onChange={e => updateMeal('title', e.target.value)} isSecondary={isSecondary} autoFocus={autoFocusFirstInput} required />
+      <OutlinedTextField name="title"
+                         value={title}
+                         label={t('Meal Title')}
+                         onChange={e => updateMeal('title', e.target.value)}
+                         isSecondary={isSecondary}
+                         autoFocus={autoFocusFirstInput}
+                         required />
       <OutlinedTextField name="recipeLink" value={recipeLink} label={t('Link to Recipe')} onChange={e => updateMeal('recipeLink', e.target.value)} isSecondary={isSecondary} />
-      <OutlinedTextField multiline rowsMax={10} name="comment" label={t('Comment')} value={comment} onChange={e => updateMeal('comment', e.target.value)} isSecondary={isSecondary} />
+      <OutlinedTextField multiline
+                         rowsMax={10}
+                         rows={3}
+                         name="comment"
+                         placeholder={t('You can use this field to add a recipe in text form, instructions, experience or other comments.')}
+                         value={comment}
+                         onChange={e => updateMeal('comment', e.target.value)}
+                         isSecondary={isSecondary} />
 
       <SelectMealCategory currentCategory={category} updateMeal={updateMeal} />
 

client/src/components/Meals/Meals.jsx

@@ -49,6 +49,8 @@ const Meals = (props) => {
   let { path } = useRouteMatch();
   const params = useParams();
 
+  const { own, userId } = props;
+
   const [, updateState] = useState();
   const forceUpdate = React.useCallback(() => updateState({}), []);
 
@@ -59,9 +61,7 @@ const Meals = (props) => {
   const [mealsByCategory,] = useState(new Map());
   const [isCategoryOpen, setIsCategoryOpen] = useState({});
   const [allCategoriesClosed, setAllCategoriesClosed] = useState(false);
-  const [categoryIcons] = useCategoryIcons();
-
-  const { own, userId } = props;
+  const [categoryIcons, fireIconReload] = useCategoryIcons(userId);
 
   const [mealBeingViewed, setMealBeingViewed] = useState(null);
   const [emptyListFound, setEmptyListFound] = useState(false);
@@ -121,6 +121,7 @@ const Meals = (props) => {
 
   const fetchAndUpdateMeals = () => {
     fetchAndUpdateMealsFromUser(userId, updateMealsCallback);
+    fireIconReload();
   }
 
   useEffect(() => {
@@ -223,6 +224,7 @@ const Meals = (props) => {
             </Button>}
             <Button variant="text"
                     className={classes.optionRowButton}
+                    style={{ marginLeft: 'auto' }}
                     color="primary"
                     onClick={toggleAllCategories}>{allCategoriesClosed ? t('expand all') : t('collapse all')}</Button>
           </Box>
@@ -242,11 +244,7 @@ const Meals = (props) => {
             </List>}
         </>
       }
-      <MealDetailView open={path.includes('detail') || path.includes('edit')}
-                      meal={mealBeingViewed}
-                      allowEditing={own}
-                      allowImporting={!own}
-                      closeDialog={closeMealDetailView} />
+      <MealDetailView open={path.includes('detail') || path.includes('edit')} meal={mealBeingViewed} allowEditing={own} allowImporting={!own} closeDialog={closeMealDetailView} />
     </>
   );
 }

client/src/components/Meals/useCategoryIcons.jsx

@@ -2,22 +2,30 @@ import { useAuth0 } from "@auth0/auth0-react";
 import { useEffect, useState } from "react";
 import { getSettingsOfUser } from "../Settings/settings.util";
 
-export default function useCategoryIcons() {
+export default function useCategoryIcons(foreignUserId = undefined) {
   const { user } = useAuth0();
 
+  const [userId, setUserId] = useState(foreignUserId);
   const [allCategories, setAllCategories] = useState([]);
   const [allCategoryIcons, setAllCategoryIcons] = useState({});
   const [categoriesChanged, setCategoriesChanged] = useState(false);
 
   useEffect(() => {
-    if (user) {
-      const userId = user.sub;
-      getSettingsOfUser(userId, (settings) => {
-        setAllCategories(settings.mealCategories || []);
-        setCategoriesChanged(false);
-      });
+    getSettingsOfUser(userId, (settings) => {
+      setAllCategories(settings.mealCategories || []);
+      setCategoriesChanged(false);
+    });
+  }, [userId, categoriesChanged]);
+
+  useEffect(() => {
+    if (!foreignUserId) {
+      if (user) {
+        setUserId(user.sub);
+      }
+    } else {
+      setUserId(foreignUserId);
     }
-  }, [user, categoriesChanged]);
+  }, [foreignUserId, user]);
 
   useEffect(() => {
     allCategories.forEach(c => {

client/src/components/util/OutlinedTextField.jsx

@@ -9,16 +9,14 @@ const useStyles = makeStyles((theme) => ({
     marginTop: '0.5rem',
     marginBottom: '0.5rem',
   },
-  outlinedInput: {
-    padding: '14px',
-  },
   correctFloatingLabel: {
     transform: 'translate(14px, 12px) scale(1)',
   }
 }));
 
-/** component is used by AddMeal and EditMeal and provides their shared core elements: text and photo input.
- *  Does not handle communication to server */
+/** This is a wrapper the Outlined TextField that is used mostly throughout the app.
+ * It bundles common attributes and styles.
+ * Any other Attributes for a MUI TextField are passed through to the actual component */
 const OutlinedTextField = (props) => {
   const classes = useStyles();
 

client/src/translations/_example.translation.json

@@ -92,5 +92,6 @@
   "Import": "",
   "Import Meal": "",
   "Successfully imported meal": "",
+  "You can use this field to add a recipe in text form, instructions, experience or other comments.": "",
   "": ""
 }

client/src/translations/de.translation.json

@@ -75,8 +75,8 @@
   "Filter": "Filter",
   "Filter by Tags": "Nach Tags filtern",
   "No Tags so far": "Noch keine Tags vorhanden",
-  "Type to add Tags": "Tippen, um Tags hinzuzufügen",
-  "Type to add a Category": "Tippen, um eine Kategorie hinzuzufügen",
+  "Type to add Tags": "Sie können neue Tags durch Tastatureingabe hinzufügen",
+  "Type to add a Category": "Neue Kategorie über die Tastatur eingeben, um sie hinzuzufügen",
   "No meals found for filter selection": "Für die derzeitige Filterkombination wurden keine Gerichte gefunden",
   "expand all": "Alle ausklappen",
   "collapse all": "Alle einklappen",
@@ -93,5 +93,6 @@
   "Go to my meals": "Zu meinen Gerichten",
   "Import": "Importieren",
   "Import Meal": "Gericht importieren",
-  "Successfully imported meal": "Gericht erfolgreich importiert"
+  "Successfully imported meal": "Gericht erfolgreich importiert",
+  "You can use this field to add a recipe in text form, instructions, experience or other comments.": "Sie können dieses Feld nutzen, um ein Rezept in Textform, Anweisungen, Erfahrungswerte oder andere Kommentare hinzuzufügen."
 }

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

@@ -92,5 +92,6 @@
   "Go to my meals": "Go to my meals",
   "Import": "Import",
   "Import Meal": "Import Meal",
-  "Successfully imported meal": "Successfully imported meal"
+  "Successfully imported meal": "Successfully imported meal",
+  "You can use this field to add a recipe in text form, instructions, experience or other comments.": "You can use this field to add a recipe in text form, instructions, experience or other comments."
 }

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

@@ -92,5 +92,6 @@
   "Go to my meals": "Go to my meals",
   "Import": "Import",
   "Import Meal": "Import Meal",
-  "Successfully imported meal": "Successfully imported meal"
+  "Successfully imported meal": "Successfully imported meal",
+  "You can use this field to add a recipe in text form, instructions, experience or other comments.": "You can use this field to add a recipe in text form, instructions, experience or other comments."
 }

client/src/translations/es.translation.json

@@ -92,5 +92,6 @@
   "Go to my meals": "A mis comidas",
   "Import": "Importar",
   "Import Meal": "Importar Comida",
-  "Successfully imported meal": "Comida importada con éxito"
+  "Successfully imported meal": "Comida importada con éxito",
+  "You can use this field to add a recipe in text form, instructions, experience or other comments.": "Puede utilizar este campo para añadir una receta en forma de texto, instrucciones, experiencia u otros comentarios."
 }

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

@@ -92,5 +92,6 @@
   "Go to my meals": "A mes repas",
   "Import": "Importer",
   "Import Meal": "Importer un repas",
-  "Successfully imported meal": "Importation réussie du repas"
+  "Successfully imported meal": "Importation réussie du repas",
+  "You can use this field to add a recipe in text form, instructions, experience or other comments.": "Vous pouvez utiliser ce champ pour ajouter une recette sous forme de texte, des instructions, des expériences ou d'autres commentaires."
 }

client/src/translations/it.translation.json

@@ -92,5 +92,6 @@
   "Go to my meals": "Ai miei pasti",
   "Import": "Importare",
   "Import Meal": "Importare pasto",
-  "Successfully imported meal": "Pasto importato con successo"
+  "Successfully imported meal": "Pasto importato con successo",
+  "You can use this field to add a recipe in text form, instructions, experience or other comments.": "Puoi usare questo campo per aggiungere una ricetta in forma di testo, istruzioni, esperienze o altri commenti."
 }