update buttons and translations

client/src/components/Buttons/AddButton.jsx

@@ -2,13 +2,12 @@ import React from 'react';
 import { func } from "prop-types";
 import { Add } from '@material-ui/icons';
 import { makeStyles } from '@material-ui/styles';
+import { IconButton } from "@material-ui/core";
 
 const useStyles = makeStyles(theme => ({
   navButton: {
-    border: 'none',
-    background: 'transparent',
-    cursor: 'pointer',
     color: theme.palette.background.default,
+    padding: 0,
   }
 }));
 
@@ -18,7 +17,7 @@ const AddButton = (props) => {
   const { onClick } = props;
 
   return (
-      <Add fontSize="large" className={classes.navButton} onClick={onClick} />
+    <IconButton className={classes.navButton} onClick={onClick}><Add fontSize="large" /></IconButton>
   );
 }
 

client/src/components/Buttons/BackButton.jsx

@@ -8,8 +8,8 @@ const useStyles = makeStyles(theme => ({
     border: 'none',
     background: 'transparent',
     cursor: 'pointer',
-    fontSize: '29px',
-    margin: '3px calc(0.5rem + 1px)', // align placement with Logo
+    fontSize: '28px',
+    margin: '2px 0.5rem', // align placement with Logo
     color: theme.palette.background.default,
   }
 }));

client/src/components/Buttons/DeleteButton.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { func } from "prop-types";
 import { Delete } from '@material-ui/icons';
 import { makeStyles } from '@material-ui/styles';
+import { IconButton } from "@material-ui/core";
 
 const useStyles = makeStyles(theme => ({
   deleteButton: {
@@ -9,6 +10,7 @@ const useStyles = makeStyles(theme => ({
     background: 'transparent',
     cursor: 'pointer',
     color: theme.palette.error.main,
+    padding: 0,
   }
 }));
 
@@ -18,7 +20,7 @@ const DeleteButton = (props) => {
   const { onClick } = props;
 
   return (
-      <Delete className={classes.deleteButton} onClick={onClick} />
+    <IconButton className={classes.deleteButton} onClick={onClick}><Delete /></IconButton>
   );
 }
 

client/src/components/Buttons/DoneButton.jsx

@@ -2,14 +2,13 @@ import React from 'react';
 import { func } from "prop-types";
 import { Check } from '@material-ui/icons';
 import { makeStyles } from '@material-ui/styles';
+import { IconButton } from "@material-ui/core";
 
 const useStyles = makeStyles(theme => ({
   doneButton: {
-    border: 'none',
-    background: 'transparent',
-    cursor: 'pointer',
     fontSize: '2rem',
     color: theme.palette.background.default,
+    padding: 0,
   }
 }));
 
@@ -19,7 +18,7 @@ const DoneButton = (props) => {
   const { onClick } = props;
 
   return (
-      <Check fontSize="large" className={classes.doneButton} onClick={onClick} />
+    <IconButton onClick={onClick}><Check className={classes.doneButton} /></IconButton>
   );
 }
 

client/src/components/Buttons/EditButton.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { func } from "prop-types";
+import { IconButton } from '@material-ui/core';
 import { Edit } from '@material-ui/icons';
 import { makeStyles } from '@material-ui/styles';
 
@@ -10,6 +11,7 @@ const useStyles = makeStyles(theme => ({
     cursor: 'pointer',
     fontSize: '1.5rem',
     color: theme.palette.background.default,
+    padding: 0,
   }
 }));
 
@@ -19,7 +21,7 @@ const EditButton = (props) => {
   const { onClick } = props;
 
   return (
-      <Edit fontSize="large" className={classes.editButton} onClick={onClick} />
+    <IconButton className={classes.editButton} onClick={onClick}><Edit /></IconButton>
   );
 }
 

client/src/components/Buttons/SearchButton.jsx

@@ -2,14 +2,14 @@ import React from 'react';
 import { func } from "prop-types";
 import { Search } from '@material-ui/icons';
 import { makeStyles } from '@material-ui/styles';
+import { IconButton } from '@material-ui/core';
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(theme => ({
   navButton: {
-    border: 'none',
-    background: 'transparent',
-    cursor: 'pointer',
+    color: theme.palette.background.default,
+    padding: 0,
   }
-});
+}));
 
 /** Button in form of a magnifying glass */
 const SearchButton = (props) => {
@@ -17,7 +17,7 @@ const SearchButton = (props) => {
   const { onClick } = props;
 
   return (
-      <Search fontSize="large" className={classes.navButton} onClick={onClick} />
+    <IconButton className={classes.navButton} onClick={onClick}><Search fontSize="large" /></IconButton>
   );
 }
 

client/src/components/Buttons/SimpleCloseX.jsx

@@ -2,25 +2,12 @@ import React from 'react';
 import { func } from "prop-types";
 import { makeStyles } from "@material-ui/styles";
 import { Close } from "@material-ui/icons";
+import { IconButton } from "@material-ui/core";
 
-const useStyles = makeStyles((theme) => ({
-  boxCloseX: {
-    position: 'absolute',
-    right: '0',
-    top: '0',
-    transform: 'translate(-25%, 25%)',
-    padding: 0,
-    background: 'transparent',
-    // opacity: '80%',
-
-    '&:hover': {
-      cursor: 'pointer',
-    },
-  },
+const useStyles = makeStyles(theme => ({
   navButton: {
-    border: 'none',
-    background: 'transparent',
-    cursor: 'pointer',
+    color: theme.palette.background.default,
+    padding: 0,
   }
 }));
 
@@ -31,7 +18,7 @@ function SimpleCloseX(props) {
   const { onClick } = props;
 
   return (
-    <Close fontSize="large" className={classes.navButton} onClick={onClick} />
+    <IconButton className={classes.navButton} onClick={onClick}><Close fontSize="large" /></IconButton>
   );
 }
 

client/src/components/util/ShareButton.jsx

@@ -2,18 +2,20 @@ import React, { useState } from 'react';
 import { IconButton, Button, DialogTitle, Dialog, TextField, InputAdornment, Grid } from '@material-ui/core';
 import { Share, Link, FileCopy, AssignmentTurnedInRounded } from '@material-ui/icons';
 import { string } from "prop-types";
+import { useTranslation } from "react-i18next";
 
 /** Button that opens native share API on the devices or provides the link if API is not supported */
 const ShareButton = (props) => {
-  const { title, link } = props;
+  const { title, link, text } = props;
+  const { t } = useTranslation();
   const [isCopyLinkOpen, setIsCopyLinkOpen] = useState(false);
   const [isCopied, setIsCopied] = useState(false);
 
   const share = () => {
-    console.log('share ', link);
     if (navigator.share) {
       navigator.share({
         title,
+        text,
         url: link,
       }).then(() => {
         console.log('Thanks for sharing!');
@@ -44,11 +46,11 @@ const ShareButton = (props) => {
         <Share />
         {/*<FontAwesomeIcon icon={faShareSquare} />*/}
       </IconButton>
-      <Dialog open={isCopyLinkOpen} onClose={() => {setIsCopyLinkOpen(false)}} PaperProps={{style: {padding: '2em'}}}>
+      <Dialog open={isCopyLinkOpen} onClose={() => {setIsCopyLinkOpen(false); setIsCopied(false);}} PaperProps={{style: {padding: '2em'}}}>
         <DialogTitle style={{padding: '0 0 0.5em'}}>{title}</DialogTitle>
         <Grid container spacing={2} justify="space-between" alignItems="center" wrap="wrap">
           <Grid item xs style={{flexGrow: 5}}>
-          <TextField id="link-input" variant="standard" value={link} color="secondary" InputProps={{
+          <TextField id="link-input" variant="standard" value={link} color="secondary" style={{minWidth: '160px'}} InputProps={{
             startAdornment: (
               <InputAdornment position="start">
                 <Link />
@@ -57,8 +59,8 @@ const ShareButton = (props) => {
           }} />
           </Grid>
           <Grid item xs>
-          <Button startIcon={isCopied ? <AssignmentTurnedInRounded /> : <FileCopy />} variant="contained" color={"secondary"} onClick={copyToClipboard}>
-            {isCopied ? 'Copied' : 'Copy'}
+          <Button style={{textAlign: 'right'}} startIcon={isCopied ? <AssignmentTurnedInRounded /> : <FileCopy />} variant="contained" color={"secondary"} onClick={copyToClipboard}>
+            {isCopied ? t('Copied') : t('Copy')}
           </Button>
         </Grid>
         </Grid>
@@ -70,6 +72,7 @@ const ShareButton = (props) => {
 ShareButton.propTypes = {
   link: string.isRequired,
   title: string.isRequired,
+  text: string.isRequired,
 }
 
 export default ShareButton;

client/src/translations/_example.translation.json

@@ -74,5 +74,8 @@
   "expand all": "",
   "collapse all": "",
   "Search for users": "",
+  "Copy": "",
+  "Copied": "",
+  "Check out the following meal: {{mealTitle}}": "",
   "": ""
 }

client/src/translations/de.translation.json

@@ -75,5 +75,8 @@
   "No meals found for filter selection": "Für die derzeitige Filterkombination wurden keine Gerichte gefunden",
   "expand all": "Alle ausklappen",
   "collapse all": "Alle einklappen",
-  "Search for users": "Nutzer suchen"
+  "Search for users": "Nutzer suchen",
+  "Copy": "Kopieren",
+  "Copied": "Kopiert",
+  "Check out the following meal: {{mealTitle}}": "Schau dir das Gericht \"{{mealTitle}}\" unter folgendem Link an:"
 }

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

@@ -73,5 +73,9 @@
   "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"
+  "collapse all": "collapse all",
+  "Search for users": "Search for users",
+  "Copy": "Copy",
+  "Copied": "Copied",
+  "Check out the following meal: {{mealTitle}}": "Check out the following meal: {{mealTitle}}"
 }

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

@@ -73,5 +73,9 @@
   "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"
+  "collapse all": "collapse all",
+  "Search for users": "Search for users",
+  "Copy": "Copy",
+  "Copied": "Copied",
+  "Check out the following meal: {{mealTitle}}": "Check out the following meal: {{mealTitle}}"
 }

client/src/translations/es.translation.json

@@ -73,5 +73,9 @@
   "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"
+  "collapse all": "colapsar todo",
+  "Search for users": "Buscar usuarios",
+  "Copy": "Copiar",
+  "Copied": "Copiado",
+  "Check out the following meal: {{mealTitle}}": "Consulte la comida {{mealTitle}}:"
 }

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

@@ -73,5 +73,9 @@
   "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"
+  "collapse all": "réduire tout",
+  "Search for users": "Chercher des utilisateurs",
+  "Copy": "Copier",
+  "Copied": "Copié",
+  "Check out the following meal: {{mealTitle}}": "Consultez le repas {{mealTitle}}:"
 }

client/src/translations/it.translation.json

@@ -73,5 +73,9 @@
   "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"
+  "collapse all": "crolla tutti",
+  "Search for users": "Cerca gli utenti",
+  "Copy": "Copia",
+  "Copied": "Copiato",
+  "Check out the following meal: {{mealTitle}}": "Guarda il pasto {{mealTitle}}:"
 }