Add chezvous teaser

src/App.js

@@ -14,6 +14,8 @@ import AuthModal from './js/components/auth-modal';
 import AboutModal from './js/components/about-modal';
 import { closeAuth, clearToken } from './js/actions/auth-actions';
 import { openAbout, closeAbout } from './js/actions/about-actions';
+import { closeChezVous } from './js/actions/chez-vous-actions';
+import ChezVousFixedModal from './js/components/chezvous-fixed-modal';
 
 class App extends Component {
   render() {
@@ -23,8 +25,10 @@ class App extends Component {
       authModalIsOpen,
       closeAuth,
       aboutModalIsOpen,
+      chezVousFixedModalIsOpen,
       openAbout,
       closeAbout,
+      closeChezVous,
       useTranslation,
       locale,
     } = this.props;
@@ -46,6 +50,7 @@ class App extends Component {
           </main>
           <AuthModal isOpen={authModalIsOpen} closeModal={closeAuth} locale={locale} />
           <AboutModal isOpen={aboutModalIsOpen} closeModal={closeAbout} locale={locale} />
+          <ChezVousFixedModal isOpen={chezVousFixedModalIsOpen} closeModal={closeChezVous} />
         </Layout>
       </Router>
     );
@@ -55,11 +60,13 @@ class App extends Component {
 export default connect(state => ({
   authModalIsOpen: state.auth.openModal,
   aboutModalIsOpen: state.aboutModal,
+  chezVousFixedModalIsOpen: state.chezVousFixedModal,
   hasToken: state.auth.fetchedToken,
   locale: state.locale,
 }), dispatch => ({
   closeAuth: () => dispatch(closeAuth()),
   disconnect: () => dispatch(clearToken()),
   openAbout: () => dispatch(openAbout()),
   closeAbout: () => dispatch(closeAbout()),
+  closeChezVous: () => dispatch(closeChezVous()),
 }))(App);

src/js/actions/chez-vous-actions.js

@@ -0,0 +1,5 @@
+export const CLOSE_CHEZ_VOUS = 'CLOSE_CHEZ_VOUS';
+
+export const closeChezVous = () => ({
+  type: CLOSE_CHEZ_VOUS
+});

src/js/components/chezvous-fixed-modal.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import ReactSVG from 'react-svg';
+
+const rootPath = process.env.REACT_APP_ROOT_PATH || ''; // for access assets when running on a nested path, i.e. github pages
+
+const ChezVousFixedModal = ({ isOpen, closeModal }) => {
+    if (isOpen === false) {
+        return null;
+    }
+
+    return (
+        <div className="fixed-modal">
+            <div className="fixed-modal__content">
+                <button className="fixed-modal__close" onClick={closeModal}>
+                    <ReactSVG
+                        className="banner-icon"
+                        path={`${rootPath}/assets/svg/close.svg`}
+                    />
+                </button>
+                <span className="subtitle">2 ans du quinquennat</span>
+                <div className="title">Consultez ici ce qui a changé près de chez vous</div>
+            </div>
+            <div className="fixed-modal__footer">
+                <a className="fixed-modal__button" href="https://chezvous.en-marche.fr/" target="_blank" rel="noopener noreferrer">J'entre ma ville</a>
+            </div>
+            <div className="fixed-modal__illustration">
+                <ReactSVG
+                    path={`${rootPath}/assets/svg/chezvous-teaser.svg`}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default ChezVousFixedModal;

src/js/components/dashboard.js

@@ -21,6 +21,7 @@ import Subscribe from './subscribe'
 import ToggleSwitch from './toggle-switch'
 
 import '../../scss/dashboard.css'
+import '../../scss/fixed-modal.css'
 
 const END_OF_TERM = '2022-05-13'
 const START_OF_TERM = '2017-05-14'
@@ -377,47 +378,6 @@ class Dashboard extends Component {
                         </DashboardBox>
                     </DashboardRow>
 
-                    <DashboardRow>
-                        <DashboardBox full className="dashboard-box--gradient">
-                            <div className="dashboard-box__body">
-                                <h3 className="dashboard-box__title">
-                                    Les 2 ans du quinquennat
-                                </h3>
-
-                                <p>
-                                    Consultez les différentes actions qui ont
-                                    été réalisées depuis 2 ans dans votre
-                                    commune et ses environs.
-                                </p>
-
-                                <div className="dashboard-box__cta">
-                                    <a
-                                        href="https://chezvous.en-marche.fr"
-                                        rel="noopener noreferrer"
-                                        target="_blank"
-                                    >
-                                        Ce qui a changé près de chez vous →
-                                    </a>
-                                </div>
-                            </div>
-
-                            <div className="dashboard-box--background">
-                                <ReactSVG
-                                    path={`${rootPath}/assets/svg/city.svg`}
-                                    className="dashboard-svg__city"
-                                />
-                                <ReactSVG
-                                    path={`${rootPath}/assets/svg/cloud-big.svg`}
-                                    className="dashboard-svg__cloud-big"
-                                />
-                                <ReactSVG
-                                    path={`${rootPath}/assets/svg/cloud-small.svg`}
-                                    className="dashboard-svg__cloud-small"
-                                />
-                            </div>
-                        </DashboardBox>
-                    </DashboardRow>
-
                     <DashboardRow>
                         <DashboardBox className="dashboard-box--subscribe">
                             <h3 className="dashboard-box__title">

src/js/reducers/chez-vous-reducer.js

@@ -0,0 +1,9 @@
+import {CLOSE_CHEZ_VOUS } from '../actions/chez-vous-actions';
+
+export default function chezVousReducer(state = true, action) {
+  if (action.type === CLOSE_CHEZ_VOUS) {
+    return false;
+  }
+
+  return state;
+}

src/js/reducers/index.js

@@ -11,6 +11,7 @@ import locale from './translate-reducer';
 import auth from './auth-reducer';
 import majorOnly from './major-reducer.js';
 import aboutModal from './about-reducer.js';
+import chezVousFixedModal from './chez-vous-reducer.js';
 
 export default combineReducers({
   measures,
@@ -24,5 +25,6 @@ export default combineReducers({
   popular: popularReducer,
   status: statusReducer,
   majorOnly,
-  aboutModal
+  aboutModal,
+  chezVousFixedModal
 });

src/scss/dashboard.scss

@@ -3,6 +3,7 @@
 @import "mixins/buttons";
 
 .dashboard {
+  position: relative;
   flex: 1;
   // background-color: $bluewhite;
 }

src/scss/fixed-modal.scss

@@ -0,0 +1,120 @@
+@import "mixins/vars";
+@import "mixins/queries";
+
+.fixed-modal {
+    background-color: white;
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 600;
+    box-shadow: 0 5px 10px 0 rgba(69, 78, 92, .32);
+    overflow: hidden;
+
+    @include mq($medium-and-up) {
+      border-radius: 4px;
+      max-width: 470px;
+      bottom: 30px;
+      left: 30px;
+    }
+
+    &__content {
+        padding: 30px 25px;
+        position: relative;
+        font-family: $font-roboto;
+
+        .subtitle {
+            display: block;
+            font-size: 14px;
+            text-transform: uppercase;
+            font-weight: bold;
+            color: #7F8893;
+            margin-bottom: 12px;
+        }
+
+        .title {
+            font-size: 18px;
+            color: black;
+            font-weight: bold;
+            max-width: 250px;
+        }
+    }
+
+    &__close {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        background: transparent;
+        border: none;
+        padding: 0;
+        font-family: Roboto,Helvetica,sans-serif;
+        font-weight: 700;
+        cursor: pointer;
+        border-radius: 0;
+        -webkit-transition: all .45s;
+        transition: all .45s;
+        width: 25px;
+        height: 25px;
+        outline: 0;
+        opacity: 0.5;
+
+        svg {
+            fill: #7B889B;
+        }
+
+        &:hover {
+            opacity: 1;
+        }
+    }
+
+    &__footer {
+        background-color: $lightgray;
+        height: 60px;
+        width: 100%;
+        padding: 0 25px;
+        display: flex;
+        align-items: center;
+        font-family: $font-roboto;
+    }
+
+    &__button {
+        font-size: 16px;
+        font-weight: bold;
+        color: #2D9FFF;
+        border: none;
+        position: relative;
+        z-index: 2;
+        padding-left: 15px;
+
+        &::before {
+            position: absolute;
+            left: 0;
+            top: 6px;
+            content:'';
+            width: 0;
+            height: 0;
+            border-style: solid;
+            border-width: 5px 0 5px 5px;
+            border-color: transparent transparent transparent #2D9FFF;
+        }
+    }
+
+    &__illustration {
+        position: absolute;
+        right: 0;
+        bottom: -6px;
+        transform-origin: 100% 100%;
+        transform: scale(0.8);
+        z-index: 1;
+        pointer-events: none;
+
+        @include mq($medium-and-up) {
+            transform: scale(1);
+        }
+    }
+}

src/scss/layout.scss

@@ -160,7 +160,7 @@
 }
 
 .header-button {
-  @include orange-button;
+  @include purple-button;
   font-size: 14px;
 }
 

src/scss/mixins/_buttons.scss

@@ -24,6 +24,14 @@
   padding: 7px 15px;
 }
 
+@mixin purple-button {
+  @include button-base;
+  background-color: $purple;
+  color: white;
+  border-radius: 4px;
+  padding: 7px 15px;
+}
+
 @mixin bluepurple-button {
   @include button-base;
   background-color: $bluepurple;