diff --git a/source/components/Feedback/Feedback.css b/source/components/Feedback/Feedback.css index eb9bf2fad..f2726d4fd 100644 --- a/source/components/Feedback/Feedback.css +++ b/source/components/Feedback/Feedback.css @@ -1,8 +1,20 @@ .feedback-page { align-items: flex-start; display: flex; - align-items: flex-end; - justify-content: space-between; + justify-content: center; padding-top: 0.6rem; padding-bottom: 0.6rem; + background: var(--lighterColour); + border-radius: 0.9rem; + max-width: 36em; + padding: 0.6em; + margin: 1em 0 1em auto; +} +.feedback-page.stickToFooter { + margin-bottom: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} +.feedback-page button.link-button { + margin: 0 0.6em; } diff --git a/source/components/Feedback/PageFeedback.js b/source/components/Feedback/PageFeedback.js index be32ec981..fa906b422 100644 --- a/source/components/Feedback/PageFeedback.js +++ b/source/components/Feedback/PageFeedback.js @@ -11,6 +11,7 @@ import Form from './FeedbackForm' import type { Tracker } from 'Components/utils/withTracker' import type { Location } from 'react-router-dom' import type { Node } from 'react' +import classNames from 'classnames' type OwnProps = { blacklist: Array, @@ -89,6 +90,7 @@ class PageFeedback extends Component { this.setState({ showForm: true }) } render() { + let { stickToFooter = false } = this.props if (this.feedbackAlreadyGiven) { return null } @@ -96,7 +98,10 @@ class PageFeedback extends Component { this.props.location.pathname === '/' ? '' : this.props.location.pathname return ( !this.props.blacklist.includes(pathname) && ( -
+
{!this.state.showForm && !this.state.showThanks && ( <>
@@ -107,27 +112,24 @@ class PageFeedback extends Component { )}{' '}
{' '} +
- {' '} )} {this.state.showThanks && ( diff --git a/source/sites/mycompanyinfrance.fr/layout/Footer/Footer.js b/source/sites/mycompanyinfrance.fr/layout/Footer/Footer.js index c1ba89b85..f6fd7548b 100644 --- a/source/sites/mycompanyinfrance.fr/layout/Footer/Footer.js +++ b/source/sites/mycompanyinfrance.fr/layout/Footer/Footer.js @@ -60,6 +60,7 @@ const Footer = ({ colours: { colour }, tracker, t, sitePaths }) => { ))} view(lens, sitePaths))} />