diff --git a/components/BB.js b/components/BB.js index 9b0a7af5e..2ea311001 100644 --- a/components/BB.js +++ b/components/BB.js @@ -18,7 +18,6 @@ import Header from "./typography/header"; import NextSteps from "./next_steps"; import QuickLinks from "./quick_links"; import StickyHeader from "./sticky_header"; -import AlphaBanner from "./alpha_banner"; import SelectionsEditor from "./selections_editor"; const divider = css` @@ -96,8 +95,14 @@ export class BB extends Component { pageTitle={t("breadcrumbs.ben_dir_page_title")} /> - - +
diff --git a/components/alpha_banner.js b/components/alpha_banner.js index 34c145737..e7ffcd071 100644 --- a/components/alpha_banner.js +++ b/components/alpha_banner.js @@ -12,19 +12,16 @@ const white = css` } `; -const bottomMargin = css` - margin-bottom: 24px; -`; - const Banner = css` display: flex; display: -ms-flexbox; align-items: center; -ms-flex-align: center; - padding-bottom: 24px; - border-bottom: 4px solid ${globalTheme.colour.darkPaleGrey}; + background-color: ${globalTheme.colour.paleGreyTwo}; + border-top: 8px solid ${globalTheme.colour.borderGreen}; color: ${globalTheme.colour.charcoalGrey}; - font-family: ${globalTheme.fontFamilySerif}; + font-family: ${globalTheme.fontFamilySansSerif}; + padding: 10px 30px 10px; span:first-of-type { font-weight: 700 !important; padding: 0.2rem 0.7rem; @@ -40,17 +37,15 @@ export class AlphaBanner extends Component { render() { const { t, url, ...rest } = this.props; return ( -
- -
+ ); } } diff --git a/components/favourites.js b/components/favourites.js index 343a8e890..ea4b64e9b 100644 --- a/components/favourites.js +++ b/components/favourites.js @@ -19,7 +19,6 @@ import Cookies from "universal-cookie"; import Paper from "./paper"; import StickyHeader from "./sticky_header"; import QuickLinks from "./quick_links"; -import AlphaBanner from "./alpha_banner"; const divider = css` border-top: 2px solid ${globalTheme.colour.duckEggBlue}; @@ -98,8 +97,13 @@ export class Favourites extends Component { breadcrumbs={breadcrumbs} pageTitle={t("index.your_saved_benefits")} /> - - +
diff --git a/components/guided_experience.js b/components/guided_experience.js index baf2f4d15..3bbab1af1 100644 --- a/components/guided_experience.js +++ b/components/guided_experience.js @@ -16,7 +16,6 @@ import { showQuestion, getPageName } from "../utils/common"; import HeaderButton from "./header_button"; import Button from "./button"; import Link from "next/link"; -import { AlphaBanner } from "./alpha_banner"; const greyBox = css` background-color: ${globalTheme.colour.paleGreyTwo}; @@ -195,8 +194,7 @@ export class GuidedExperience extends Component { pageTitle={t("ge.Find benefits and services")} /> - - + {id === "patronType" ? ( diff --git a/components/paper.js b/components/paper.js index 2a135e246..77c860a34 100644 --- a/components/paper.js +++ b/components/paper.js @@ -3,6 +3,7 @@ import PropTypes from "prop-types"; /** @jsx jsx */ import { css, jsx } from "@emotion/core"; import { globalTheme } from "../theme"; +import AlphaBanner from "./alpha_banner"; class Paper extends Component { padding = { sm: "24px", md: "30px", lg: "63px", xl: "96px" }; @@ -13,17 +14,30 @@ class Paper extends Component { background-color: white; box-sizing: border-box; width: 100%; - border-top: 8px solid ${globalTheme.colour.borderGreen}; @media only screen and (max-width: ${globalTheme.max.xs}) { padding: ${this.paddingMobile[this.props.padding]}; } `; + bannerStyle = css` + box-shadow: ${globalTheme.boxShadow}; + box-sizing: border-box; + `; + render() { return ( -
- {this.props.children} +
+
+ {this.props.includeBanner && this.props.url && this.props.t ? ( + + ) : null} +
+
+ {this.props.children} +
); } @@ -36,7 +50,10 @@ Paper.propTypes = { PropTypes.string, PropTypes.object, PropTypes.array - ]) + ]), + url: PropTypes.object, + t: PropTypes.func, + includeBanner: PropTypes.bool }; export default Paper; diff --git a/pages/feedback.js b/pages/feedback.js index c93830629..c8ba81615 100644 --- a/pages/feedback.js +++ b/pages/feedback.js @@ -14,7 +14,6 @@ import TextArea from "../components/text_area"; import Details from "../components/details"; require("isomorphic-fetch"); import Raven from "raven-js"; -import AlphaBanner from "../components/alpha_banner"; import Link from "next/link"; import BreadCrumbs from "../components/breadcrumbs"; import { getGuidedExperienceUrl } from "../selectors/urls"; @@ -126,8 +125,14 @@ export class Feedback extends Component { pageTitle={t("feedback.page_header")} />
- - +
{t("feedback.page_header")} diff --git a/pages/summary.js b/pages/summary.js index 2613a633c..a96032bff 100644 --- a/pages/summary.js +++ b/pages/summary.js @@ -19,7 +19,6 @@ import GuidedExperienceSummary from "../components/guided_experience_summary"; import Body from "../components/typography/body"; import { getFilteredBenefits } from "../selectors/benefits"; import { getGuidedExperienceUrl } from "../selectors/urls"; -import AlphaBanner from "../components/alpha_banner"; const box = css` padding: 63px 63px 63px 63px; @@ -76,8 +75,7 @@ export class Summary extends Component { pageTitle={t("ge.Find benefits and services")} /> - - +