Ajoute les liens vers les réseaux sociaux sur mon-entreprise
Johan Girod
parent
59fe789770
commit
9f0b341c00
|
|
@ -0,0 +1,80 @@
|
|||
/* @flow */
|
||||
import withColours from 'Components/utils/withColours'
|
||||
import React from 'react'
|
||||
import type { ThemeColours } from 'Components/utils/withColours'
|
||||
|
||||
type OwnProps = {
|
||||
media: 'email' | 'facebook' | 'linkedin' | 'github' | 'twitter'
|
||||
}
|
||||
|
||||
type Props = {
|
||||
colours: ThemeColours
|
||||
} & OwnProps
|
||||
|
||||
const icons = {
|
||||
facebook: {
|
||||
icon:
|
||||
'M34.1,47V33.3h4.6l0.7-5.3h-5.3v-3.4c0-1.5,0.4-2.6,2.6-2.6l2.8,0v-4.8c-0.5-0.1-2.2-0.2-4.1-0.2 c-4.1,0-6.9,2.5-6.9,7V28H24v5.3h4.6V47H34.1z',
|
||||
mask:
|
||||
'M0,0v64h64V0H0z M39.6,22l-2.8,0c-2.2,0-2.6,1.1-2.6,2.6V28h5.3l-0.7,5.3h-4.6V47h-5.5V33.3H24V28h4.6V24 c0-4.6,2.8-7,6.9-7c2,0,3.6,0.1,4.1,0.2V22z'
|
||||
},
|
||||
twitter: {
|
||||
icon:
|
||||
'M48,22.1c-1.2,0.5-2.4,0.9-3.8,1c1.4-0.8,2.4-2.1,2.9-3.6c-1.3,0.8-2.7,1.3-4.2,1.6 C41.7,19.8,40,19,38.2,19c-3.6,0-6.6,2.9-6.6,6.6c0,0.5,0.1,1,0.2,1.5c-5.5-0.3-10.3-2.9-13.5-6.9c-0.6,1-0.9,2.1-0.9,3.3 c0,2.3,1.2,4.3,2.9,5.5c-1.1,0-2.1-0.3-3-0.8c0,0,0,0.1,0,0.1c0,3.2,2.3,5.8,5.3,6.4c-0.6,0.1-1.1,0.2-1.7,0.2c-0.4,0-0.8,0-1.2-0.1 c0.8,2.6,3.3,4.5,6.1,4.6c-2.2,1.8-5.1,2.8-8.2,2.8c-0.5,0-1.1,0-1.6-0.1c2.9,1.9,6.4,2.9,10.1,2.9c12.1,0,18.7-10,18.7-18.7 c0-0.3,0-0.6,0-0.8C46,24.5,47.1,23.4,48,22.1z',
|
||||
mask:
|
||||
'M0,0v64h64V0H0z M44.7,25.5c0,0.3,0,0.6,0,0.8C44.7,35,38.1,45,26.1,45c-3.7,0-7.2-1.1-10.1-2.9 c0.5,0.1,1,0.1,1.6,0.1c3.1,0,5.9-1,8.2-2.8c-2.9-0.1-5.3-2-6.1-4.6c0.4,0.1,0.8,0.1,1.2,0.1c0.6,0,1.2-0.1,1.7-0.2 c-3-0.6-5.3-3.3-5.3-6.4c0,0,0-0.1,0-0.1c0.9,0.5,1.9,0.8,3,0.8c-1.8-1.2-2.9-3.2-2.9-5.5c0-1.2,0.3-2.3,0.9-3.3 c3.2,4,8.1,6.6,13.5,6.9c-0.1-0.5-0.2-1-0.2-1.5c0-3.6,2.9-6.6,6.6-6.6c1.9,0,3.6,0.8,4.8,2.1c1.5-0.3,2.9-0.8,4.2-1.6 c-0.5,1.5-1.5,2.8-2.9,3.6c1.3-0.2,2.6-0.5,3.8-1C47.1,23.4,46,24.5,44.7,25.5z'
|
||||
},
|
||||
linkedin: {
|
||||
icon:
|
||||
'M20.4,44h5.4V26.6h-5.4V44z M23.1,18c-1.7,0-3.1,1.4-3.1,3.1c0,1.7,1.4,3.1,3.1,3.1 c1.7,0,3.1-1.4,3.1-3.1C26.2,19.4,24.8,18,23.1,18z M39.5,26.2c-2.6,0-4.4,1.4-5.1,2.8h-0.1v-2.4h-5.2V44h5.4v-8.6 c0-2.3,0.4-4.5,3.2-4.5c2.8,0,2.8,2.6,2.8,4.6V44H46v-9.5C46,29.8,45,26.2,39.5,26.2z',
|
||||
mask:
|
||||
'M0,0v64h64V0H0z M25.8,44h-5.4V26.6h5.4V44z M23.1,24.3c-1.7,0-3.1-1.4-3.1-3.1c0-1.7,1.4-3.1,3.1-3.1 c1.7,0,3.1,1.4,3.1,3.1C26.2,22.9,24.8,24.3,23.1,24.3z M46,44h-5.4v-8.4c0-2,0-4.6-2.8-4.6c-2.8,0-3.2,2.2-3.2,4.5V44h-5.4V26.6 h5.2V29h0.1c0.7-1.4,2.5-2.8,5.1-2.8c5.5,0,6.5,3.6,6.5,8.3V44z'
|
||||
},
|
||||
github: {
|
||||
icon:
|
||||
'M32,16c-8.8,0-16,7.2-16,16c0,7.1,4.6,13.1,10.9,15.2 c0.8,0.1,1.1-0.3,1.1-0.8c0-0.4,0-1.4,0-2.7c-4.5,1-5.4-2.1-5.4-2.1c-0.7-1.8-1.8-2.3-1.8-2.3c-1.5-1,0.1-1,0.1-1 c1.6,0.1,2.5,1.6,2.5,1.6c1.4,2.4,3.7,1.7,4.7,1.3c0.1-1,0.6-1.7,1-2.1c-3.6-0.4-7.3-1.8-7.3-7.9c0-1.7,0.6-3.2,1.6-4.3 c-0.2-0.4-0.7-2,0.2-4.2c0,0,1.3-0.4,4.4,1.6c1.3-0.4,2.6-0.5,4-0.5c1.4,0,2.7,0.2,4,0.5c3.1-2.1,4.4-1.6,4.4-1.6 c0.9,2.2,0.3,3.8,0.2,4.2c1,1.1,1.6,2.5,1.6,4.3c0,6.1-3.7,7.5-7.3,7.9c0.6,0.5,1.1,1.5,1.1,3c0,2.1,0,3.9,0,4.4 c0,0.4,0.3,0.9,1.1,0.8C43.4,45.1,48,39.1,48,32C48,23.2,40.8,16,32,16z',
|
||||
mask:
|
||||
'M0,0v64h64V0H0z M37.1,47.2c-0.8,0.2-1.1-0.3-1.1-0.8c0-0.5,0-2.3,0-4.4c0-1.5-0.5-2.5-1.1-3 c3.6-0.4,7.3-1.7,7.3-7.9c0-1.7-0.6-3.2-1.6-4.3c0.2-0.4,0.7-2-0.2-4.2c0,0-1.3-0.4-4.4,1.6c-1.3-0.4-2.6-0.5-4-0.5 c-1.4,0-2.7,0.2-4,0.5c-3.1-2.1-4.4-1.6-4.4-1.6c-0.9,2.2-0.3,3.8-0.2,4.2c-1,1.1-1.6,2.5-1.6,4.3c0,6.1,3.7,7.5,7.3,7.9 c-0.5,0.4-0.9,1.1-1,2.1c-0.9,0.4-3.2,1.1-4.7-1.3c0,0-0.8-1.5-2.5-1.6c0,0-1.6,0-0.1,1c0,0,1,0.5,1.8,2.3c0,0,0.9,3.1,5.4,2.1 c0,1.3,0,2.3,0,2.7c0,0.4-0.3,0.9-1.1,0.8C20.6,45.1,16,39.1,16,32c0-8.8,7.2-16,16-16c8.8,0,16,7.2,16,16 C48,39.1,43.4,45.1,37.1,47.2z'
|
||||
},
|
||||
email: {
|
||||
icon:
|
||||
'M17,22v20h30V22H17z M41.1,25L32,32.1L22.9,25H41.1z M20,39V26.6l12,9.3l12-9.3V39H20z',
|
||||
mask:
|
||||
'M41.1,25H22.9l9.1,7.1L41.1,25z M44,26.6l-12,9.3l-12-9.3V39h24V26.6z M0,0v64h64V0H0z M47,42H17V22h30V42z'
|
||||
}
|
||||
}
|
||||
|
||||
export default withColours(function withSocialMedia({
|
||||
media,
|
||||
colours: { colour }
|
||||
}: Props) {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 64 64"
|
||||
style={{
|
||||
borderRadius: '50%',
|
||||
fill: 'transparent',
|
||||
height: '2rem',
|
||||
margin: '0.6rem',
|
||||
fillRule: 'evenodd'
|
||||
}}>
|
||||
<g
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
width: '50px',
|
||||
height: '50px',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
verticalAlign: 'middle'
|
||||
}}>
|
||||
<circle cx="32" cy="32" r="31" />
|
||||
</g>
|
||||
<g>
|
||||
<path d={icons[media].icon} style={{ fill: 'transparent' }} />
|
||||
</g>
|
||||
<g style={{ fill: colour }}>
|
||||
<path d={icons[media].mask} />
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
})
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
.footer-container {
|
||||
margin-top: 2rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
.footer {
|
||||
background-color: rgba(41, 117, 209, 0.133);
|
||||
|
||||
padding: 1rem 0;
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.footer img {
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import React, { useState } from 'react'
|
|||
import emoji from 'react-easy-emoji'
|
||||
import Helmet from 'react-helmet'
|
||||
import { withTranslation } from 'react-i18next'
|
||||
import SocialIcon from 'Ui/SocialIcon'
|
||||
import i18n from '../../../../i18n'
|
||||
import safeLocalStorage from '../../../../storage/safeLocalStorage'
|
||||
import { feedbackBlacklist } from '../../config'
|
||||
|
|
@ -116,6 +117,23 @@ const Footer = ({ colours: { colour }, tracker, t }) => {
|
|||
.
|
||||
</p>
|
||||
)}
|
||||
<div style={{ display: 'flex', justifyContent: 'center' }}>
|
||||
<a href="https://www.facebook.com/monentreprisefr/">
|
||||
<SocialIcon media="facebook" />
|
||||
</a>
|
||||
<a href="https://twitter.com/monentreprisefr">
|
||||
<SocialIcon media="twitter" />
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/company/mon-entreprise-fr/">
|
||||
<SocialIcon media="linkedin" />
|
||||
</a>
|
||||
<a href="mailto:contact@mon-entreprise.beta.gouv.fr">
|
||||
<SocialIcon media="email" />
|
||||
</a>
|
||||
<a href="https://github.com/betagouv/syso/">
|
||||
<SocialIcon media="github" />
|
||||
</a>
|
||||
</div>
|
||||
<p className="ui__ notice" style={{ textAlign: 'center' }}>
|
||||
<LegalNotice />
|
||||
{' • '}
|
||||
|
|
|
|||
Loading…
Reference in New Issue