🎨 ajoute un header sur toutes les pages

pull/640/head
Johan Girod 2019-10-14 15:25:27 +02:00
parent d70c64d83f
commit 60bc060c31
5 changed files with 54 additions and 57 deletions

View File

@ -17,6 +17,7 @@ import Tracker, { devTracker } from '../../Tracker'
import { getSessionStorage, inIframe } from '../../utils'
import './App.css'
import Footer from './layout/Footer/Footer'
import Header from './layout/Header'
import trackSimulatorActions from './middlewares/trackSimulatorActions'
import CompanyIndex from './pages/Company'
import Couleur from './pages/Dev/Couleur'
@ -80,6 +81,7 @@ function InFranceRoute({ basename, language }) {
let RouterSwitch = () => {
return (
<>
<Header />
<Switch>
<Route exact path="/" component={Landing} />
<Route path="/iframes" component={Iframes} />

View File

@ -0,0 +1,46 @@
import { SitePathsContext } from 'Components/utils/withSitePaths';
import logoEnSvg from 'Images/logo-mycompany.svg';
import logoSvg from 'Images/logo.svg';
import marianneSvg from 'Images/marianne.svg';
import urssafSvg from 'Images/urssaf.svg';
import React, { useContext } from 'react';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
export default function Header() {
const sitePaths = useContext(SitePathsContext)
const { i18n: { language } } = useTranslation();
return (
<div className="ui__ container" css="display:flex; align-items: center">
<Link css='height: 4rem' to={sitePaths.index}>
<img
alt="logo mon-entreprise.fr"
css={`
padding: 0.5rem 0;
height: 100%;`
}
src={language === 'fr' ? logoSvg : logoEnSvg}
/>
</Link>
<div style={{ flex: 1 }} />
<a
href="https://beta.gouv.fr"
target="_blank"
css={`
height: 4rem;
padding: 1rem;
`}>
<img alt="logo marianne" css={'height: 100%'} src={marianneSvg} />
</a>
<a
href="https://www.urssaf.fr"
target="_blank"
css={`
height: 4rem;
padding: 1rem;
`}
className="landing-header__institutional-logo">
<img alt="logo urssaf" css={'height: 100%'} src={urssafSvg} />
</a>
</div>)
}

View File

@ -60,7 +60,7 @@ export default function SocialSecurity() {
<T k="gérer.index.content.entreprise">
Vous souhaitez vous verser un revenu ou embaucher ? <br />
Vous aurez à payer des cotisations et des impôts. <br />
Pour anticiper leur montant, nous avons conçu des simulateurs adaptés à votre situation.
Anticipez leurs montants grâce aux simulateurs adaptés à votre situation.
</T>
</p>}
<CompanySection company={company} />

View File

@ -1,22 +1,5 @@
.landing-header {
display: flex;
align-items: center;
}
.landing-header__institutional-logo,
.landing-header__brand-logo {
height: 4rem;
}
.landing-header__brand-logo img {
padding: 0.5rem 0;
height: 100%;
}
.landing-header__institutional-logo img {
padding: 1rem;
height: 100%;
}
.landing-title {
margin-top: 1rem;
margin-bottom: 1rem;
display: flex;
align-items: center;

View File

@ -1,51 +1,17 @@
/* @flow */
import { T } from 'Components'
import withSitePaths from 'Components/utils/withSitePaths'
import logoEnSvg from 'Images/logo-mycompany.svg'
import { SitePathsContext } from 'Components/utils/withSitePaths'
import logoSvg from 'Images/logo.svg'
import marianneSvg from 'Images/marianne.svg'
import urssafSvg from 'Images/urssaf.svg'
import React from 'react'
import React, { useContext } from 'react'
import emoji from 'react-easy-emoji'
import { useTranslation } from 'react-i18next'
import { Link } from 'react-router-dom'
import Footer from '../../layout/Footer/Footer'
import illustrationSvg from './illustration.svg'
import './Landing.css'
import type { SitePaths } from 'Components/utils/withSitePaths'
type Props = {
sitePaths: SitePaths
}
export default withSitePaths(({ sitePaths }: Props) => {
const {
i18n: { language }
} = useTranslation()
export default function Landing() {
const sitePaths = useContext(SitePathsContext);
return (
<div className="app-content">
<div className="ui__ container landing-header">
<Link className="landing-header__brand-logo" to={sitePaths.index}>
<img
alt="logo mon-entreprise.fr"
src={language === 'fr' ? logoSvg : logoEnSvg}
/>
</Link>
<div style={{ flex: 1 }} />
<a
href="https://beta.gouv.fr"
target="_blank"
className="landing-header__institutional-logo">
<img alt="logo marianne" src={marianneSvg} />
</a>
<a
href="https://www.urssaf.fr"
target="_blank"
className="landing-header__institutional-logo">
<img alt="logo urssaf" src={urssafSvg} />
</a>
</div>
<section className="ui__ container landing-title">
<img
alt="logo mon-entreprise.fr"
@ -158,4 +124,4 @@ export default withSitePaths(({ sitePaths }: Props) => {
<Footer />
</div>
)
})
}