aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next/components/banner.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/@next/components/banner.tsx')
-rw-r--r--packages/website/ts/@next/components/banner.tsx14
1 files changed, 13 insertions, 1 deletions
diff --git a/packages/website/ts/@next/components/banner.tsx b/packages/website/ts/@next/components/banner.tsx
index e779c5889..2620b92ef 100644
--- a/packages/website/ts/@next/components/banner.tsx
+++ b/packages/website/ts/@next/components/banner.tsx
@@ -1,6 +1,8 @@
import * as React from 'react';
import styled from 'styled-components';
+import { colors } from 'ts/style/colors';
+
import {Button} from 'ts/@next/components/button';
import {ThemeInterface} from 'ts/@next/components/siteWrap';
import {Paragraph} from 'ts/@next/components/text';
@@ -46,7 +48,7 @@ export const Banner: React.StatelessComponent<Props> = (props: Props) => {
<CustomHeading>{heading}</CustomHeading>
{subline &&
- <Paragraph isMuted={0.5} isNoMargin={true}>
+ <Paragraph color={colors.white} isMuted={0.5} isNoMargin={true}>
{subline}
</Paragraph>
}
@@ -55,6 +57,7 @@ export const Banner: React.StatelessComponent<Props> = (props: Props) => {
<ButtonWrap>
{mainCta &&
<Button
+ color={colors.white}
isTransparent={false}
href={mainCta.href}
>
@@ -64,6 +67,7 @@ export const Banner: React.StatelessComponent<Props> = (props: Props) => {
{secondaryCta &&
<Button
+ color={colors.white}
href={secondaryCta.href}
onClick={secondaryCta.onClick}
isTransparent={true}
@@ -78,6 +82,7 @@ export const Banner: React.StatelessComponent<Props> = (props: Props) => {
};
const CustomSection = styled(Section)`
+ color: ${colors.white};
margin-top: 30px;
@media (max-width: 900px) {
@@ -137,4 +142,11 @@ const Border = styled.div<BorderProps>`
top: ${props => !props.isBottom && 0 };
bottom: ${props => props.isBottom && 0 };
transform: translate(-112px);
+
+ @media (max-width: 768px) {
+ width: calc(100% + 82px);
+ height: 40px;
+ transform: translate(-41px);
+ background-size: auto 80px;
+ }
`;