fix: align sizes of icons in footer

This commit is contained in:
Felix Schröter 2023-01-05 10:52:33 +01:00
parent 05c4fca47e
commit 372116ca80
Signed by: felschr
GPG key ID: 671E39E6744C807D
2 changed files with 12 additions and 4 deletions

View file

@ -1,16 +1,19 @@
import * as React from "react" import * as React from "react"
import { ReactNode } from "react" import { ReactNode } from "react"
import { Box, useTheme } from "@mui/material" import { Box, useTheme } from "@mui/material"
import styled from "@emotion/styled"
export type FooterProps = { export type FooterProps = {
className?: string
children: ReactNode children: ReactNode
} }
export const Footer = ({ children }: FooterProps) => { export const Footer = styled(({ className, children }: FooterProps) => {
const theme = useTheme() const theme = useTheme()
return ( return (
<Box <Box
{...{ className }}
position="fixed" position="fixed"
display="flex" display="flex"
bottom={0} bottom={0}
@ -22,4 +25,9 @@ export const Footer = ({ children }: FooterProps) => {
{children} {children}
</Box> </Box>
) )
})`
> a {
display: flex;
align-items: center;
} }
`

View file

@ -76,7 +76,7 @@ const Layout = ({ pageTitle, preTitle, children }: LayoutProps) => {
<Footer> <Footer>
<Tooltip title="GitLab"> <Tooltip title="GitLab">
<Link rel="me" href="https://gitlab.com/felschr"> <Link rel="me" href="https://gitlab.com/felschr">
<FaGitlab /> <FaGitlab size="1.25em" />
</Link> </Link>
</Tooltip> </Tooltip>
<Tooltip title="GitHub"> <Tooltip title="GitHub">
@ -86,7 +86,7 @@ const Layout = ({ pageTitle, preTitle, children }: LayoutProps) => {
</Tooltip> </Tooltip>
<Tooltip title="Mastodon"> <Tooltip title="Mastodon">
<Link rel="me" href="https://todon.eu/@felschr"> <Link rel="me" href="https://todon.eu/@felschr">
<BsMastodon /> <BsMastodon size="1.25em" />
</Link> </Link>
</Tooltip> </Tooltip>
<Tooltip title="LinkedIn"> <Tooltip title="LinkedIn">