Add contact info to the footer

src/client/components/Footer.tsx

@@ -1,9 +1,11 @@
 import { Box, Link } from '@mui/material'
+import { useTranslation } from 'react-i18next'
 import styles from '../styles'
 
 import toskaColor from '../assets/toscalogo_color.svg'
 
 const Footer = () => {
+  const { t } = useTranslation()
   const { footerStyles } = styles
 
   return (
@@ -25,6 +27,10 @@ const Footer = () => {
             <img src={toskaColor} alt="Toska" width="70" />
           </Link>
         </Box>
+        <Box sx={footerStyles.contactBox}>
+          <p>{t('contactInfo')}: </p>
+          <Link href="mailto:[email protected]">[email protected]</Link>
+        </Box>
       </Box>
     </Box>
   )

src/client/locales/en.json

@@ -2,6 +2,7 @@
   "common": {
     "appName": "Prethesis",
     "author": "Author",
+    "contactInfo": "Contact information",
     "grader": "Grader {{index}}",
     "supervisor": "Supervisor {{index}}",
     "userSearchNoOptions": "Type at least 5 characters to search for users",

src/client/locales/fi.json

@@ -2,6 +2,7 @@
   "common": {
     "appName": "Prethesis",
     "author": "Tekijä",
+    "contactInfo": "Yhteystiedot",
     "grader": "Arvioija {{index}}",
     "supervisor": "Ohjaaja {{index}}",
     "userSearchNoOptions": "Kirjoita vähintään 5 merkkiä etsiäksesi käyttäjiä",

src/client/styles.ts

@@ -207,15 +207,23 @@ const footerStyles = {
       px: '3rem',
     },
     display: 'flex',
-    justifyContent: 'space-between',
+    // justifyContent: 'space-between',
     alignItems: 'center',
+    columnGap: '3rem',
   },
   imageBox: {
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
     rowGap: '1rem',
   },
+  contactBox: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    columnGap: '0.5rem',
+    color: 'white',
+  },
 }
 
 const common = {