felschr/felschr.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: improve footer

Browse source 
- use icon & tooltip for social links
- add LinkedIn link
- improve readability ot Terms of Service link in dark mode
This commit is contained in:
Felix Schröter 2023-01-04 19:30:54 +01:00
parent 45ec9c90cb
commit f86c8b2ea5
Signed by: felschr
GPG key ID: 671E39E6744C807D
3 changed files with 34 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/components/organisms/Layout.tsx
View file

@ -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>
<GatsbyLink to="/terms-of-service">Terms of Service</GatsbyLink>
<Tooltip title="Mastodon">
<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>
)