diff --git a/src/footer/footer.style.tsx b/src/footer/footer.style.tsx index 8f53eb5c4..003202dd4 100644 --- a/src/footer/footer.style.tsx +++ b/src/footer/footer.style.tsx @@ -2,6 +2,7 @@ import styled from "styled-components"; import { Colour, MediaQuery } from "../theme"; import { Typography } from "../typography"; import { Layout } from "../layout"; +import { Divider } from "../divider"; // ============================================================================= // GENERIC @@ -19,6 +20,10 @@ export const StyledFooterLink = styled(Typography.LinkSM)` // TOP SECTION // ============================================================================= +export const FullWidthDivider = styled(Divider)` + width: 100%; +`; + export const TopSection = styled(Layout.Content)` padding: 4rem 0; @@ -107,16 +112,6 @@ export const AddonSection = styled.div` // BOTTOM SECTION // ============================================================================= -export const MobileOnlyBorder = styled.div` - display: none; - - ${MediaQuery.MaxWidth.lg} { - display: block; - height: 1px; - background: ${Colour["bg-strong"]}; - } -`; - export const BottomSection = styled(Layout.Content)` padding: 1.375rem 0; diff --git a/src/footer/footer.tsx b/src/footer/footer.tsx index 88a508de0..c6326661f 100644 --- a/src/footer/footer.tsx +++ b/src/footer/footer.tsx @@ -9,15 +9,14 @@ import { BottomSectionContent, CopyrightSection, DisclaimerTextLink, + FullWidthDivider, LinkSection, LogoSection, - MobileOnlyBorder, StyledFooterLink, TopSection, } from "./footer.style"; import { FooterLinkProps, FooterProps } from "./types"; import { useTheme } from "styled-components"; -import { Divider } from "../divider"; export const Footer = ({ children, @@ -134,11 +133,7 @@ export const Footer = ({ {component} - + ); } @@ -148,7 +143,6 @@ export const Footer = ({ return ( {renderTopSection()} - {renderDisclaimerLinks()}