dan/abc-project-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(footer): flex-end the email

Browse Source
This commit is contained in:
Dan Head
2021-01-27 20:54:50 +00:00
parent 8169006bf1
commit 3c760548ea
2 changed files with 39 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/footer.js
View File

@@ -1,6 +1,7 @@
import React from "react";
import styled from "@emotion/styled";
import { Grid, IconWithContent, Icon, Link, Text } from ".";
import { css } from "@emotion/react";
import { Grid, IconWithContent, Icon, Link } from ".";
import Envelope from "../icons/envelope.svg";
import Phone from "../icons/phone.svg";
@@ -17,32 +18,47 @@ const Content = styled.div`
text-align: center;
`;
const Cell = styled.div`
display: flex;
${props =>
props.flexEnd &&
css`
@media (min-width: ${props.flexEnd}) {
justify-content: flex-end;
}
`}
`;
export default function Footer() {
const year = new Date().getFullYear();
return (
<Container>
<Content>
<Grid columns={[1, 2]}>
<IconWithContent>
<Icon color="dark" size="lg">
<Phone />
</Icon>
<Link color="dark" size="lg" to="tel:+447123456789">
07123 456789
</Link>
</IconWithContent>
<IconWithContent>
<Icon color="dark" size="lg">
<Envelope />
</Icon>
<Link
color="dark"
size="md"
to="mailto:quotations@abcprojectdesign.com"
>
quotations@abcprojectdesign.com
</Link>
</IconWithContent>
<Grid columns={[1, 2]} breakpoints={["45em"]}>
<Cell>
<IconWithContent>
<Icon color="dark" size="lg">
<Phone />
</Icon>
<Link color="dark" size="lg" to="tel:+447123456789">
07123 456789
</Link>
</IconWithContent>
</Cell>
<Cell flexEnd={"45em"}>
<IconWithContent>
<Icon color="dark" size="lg">
<Envelope />
</Icon>
<Link
color="dark"
size="md"
to="mailto:quotations@abcprojectdesign.com"
>
quotations@abcprojectdesign.com
</Link>
</IconWithContent>
</Cell>
</Grid>
<div>&copy; {year} Abc Project Ltd</div>
</Content>

1
src/components/icon-with-content.js
View File

@@ -9,6 +9,7 @@ const Container = styled.div`
`;
const IconWrapper = styled.div`
display: flex;
margin-right: var(--spacing-x-sm);
`;