feat: improve footer

- use icon & tooltip for social links
- add LinkedIn link
- improve readability ot Terms of Service link in dark mode

package-lock.json

@@ -31,7 +31,8 @@
         "gatsby-transformer-remark": "^5.19.0",
         "gatsby-transformer-sharp": "^4.19.0",
         "react": "^17.0.2",
-        "react-dom": "^17.0.2"
+        "react-dom": "^17.0.2",
+        "react-icons": "^4.7.1"
       },
       "devDependencies": {
         "@types/node": "^17.0.45",
@@ -17992,6 +17993,14 @@
         "react": ">=16.3.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz",
+      "integrity": "sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -35124,6 +35133,12 @@
         "react-side-effect": "^2.1.0"
       }
     },
+    "react-icons": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz",
+      "integrity": "sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==",
+      "requires": {}
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

package.json

@@ -39,7 +39,8 @@
     "gatsby-transformer-remark": "^5.19.0",
     "gatsby-transformer-sharp": "^4.19.0",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-icons": "^4.7.1"
   },
   "devDependencies": {
     "@types/node": "^17.0.45",

src/components/organisms/Layout.tsx

@@ -1,7 +1,9 @@
 import * as React from "react"
 import { ReactNode, useMemo } from "react"
-import { AppBar, Box, Button, Container, experimental_extendTheme as extendTheme, CssBaseline, Link, Toolbar, Typography, useTheme, Experimental_CssVarsProvider as CssVarsProvider, getInitColorSchemeScript } from "@mui/material"
+import { AppBar, Box, Button, Container, experimental_extendTheme as extendTheme, CssBaseline, Link, Toolbar, Typography, useTheme, Experimental_CssVarsProvider as CssVarsProvider, getInitColorSchemeScript, Tooltip } from "@mui/material"
 import CodeIcon from "@mui/icons-material/Code"
+import LinkedInIcon from "@mui/icons-material/LinkedIn"
+import { BsMastodon } from "react-icons/bs"
 import { Link as GatsbyLink } from "gatsby"
 import { Footer } from "../atoms/Footer"
 
@@ -67,8 +69,19 @@ const Layout = ({ pageTitle, preTitle, children }: LayoutProps) => {
       </Container>
 
       <Footer>
-        <Link rel="me" href="https://todon.eu/@felschr">Mastodon</Link>
+        <Tooltip title="Mastodon">
-        <GatsbyLink to="/terms-of-service">Terms of Service</GatsbyLink>
+          <Link rel="me" href="https://todon.eu/@felschr">
+            <BsMastodon />
+          </Link>
+        </Tooltip>
+        <Tooltip title="LinkedIn">
+          <Link rel="me" href="https://www.linkedin.com/in/schroeter">
+            <LinkedInIcon />
+          </Link>
+        </Tooltip>
+        <Typography component={GatsbyLink} to="/terms-of-service" color="inherit">
+          Terms of Service
+        </Typography>
       </Footer>
     </main>
   )