diff --git a/package.json b/package.json index 9b60b41a..ee212366 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "stromae", - "version": "2.0.8", + "version": "2.0.9", "private": true, "dependencies": { "@axa-fr/react-oidc-context": "^3.1.6", diff --git a/src/components/designSystem/AppVersion.js b/src/components/designSystem/AppVersion.js new file mode 100644 index 00000000..ac6a3884 --- /dev/null +++ b/src/components/designSystem/AppVersion.js @@ -0,0 +1,21 @@ +import { makeStyles, Typography } from '@material-ui/core'; +import React from 'react'; +import { version, dependencies } from '../../../package.json'; + +const useStyles = makeStyles({ + root: { + textAlign: 'center', + padding: '2px 0 2px 0', + }, +}); + +const lunaticVersion = dependencies['@inseefr/lunatic'].replace('^', ''); + +export const AppVersion = ({ className }) => { + const classes = useStyles(); + return ( + + {`Stromae : ${version} | Lunatic : ${lunaticVersion}`} + + ); +}; diff --git a/src/components/navigation/burgerMenu/burgerMenu.css b/src/components/navigation/burgerMenu/burgerMenu.css index 01976f81..bc2674a7 100644 --- a/src/components/navigation/burgerMenu/burgerMenu.css +++ b/src/components/navigation/burgerMenu/burgerMenu.css @@ -4,32 +4,32 @@ color: white; position: absolute; width: 280px; - height:200%; - display:grid; - transition: transform .4s cubic-bezier(.25, .1, .25, 1); + height: 200%; + display: grid; + transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1); pointer-events: none; } -#burgerMenuSlideBar, #burgerMenuToggleTab { +#burgerMenuSlideBar, +#burgerMenuToggleTab { background: #2a5885; pointer-events: auto; } -#burgerMenuSlideBar{ - position:absolute; - height: 100%; - width:225px; +#burgerMenuSlideBar { + position: absolute; + height: 100vh; + width: 225px; padding: 10px; padding-top: 20px; display: inline-block; - } -#burgerMenuToggleTab{ - position:absolute; +#burgerMenuToggleTab { + position: absolute; left: 225px; height: 138px; - width:55px; + width: 55px; border-left: 1px solid #5181b8; display: inline-block; } @@ -42,26 +42,30 @@ transform: translate3d(0, 0, 0); } -#toggleSlidebarButton{ +#toggleSlidebarButton { position: absolute; top: 45px; - left:15px + left: 15px; } -.slideBarButtonText{ +.slideBarButtonText { text-align: left; font-size: 15px; } - -.burgerMenuButton:hover{ +.burgerMenuButton:hover { border-radius: 8px; } -.burgerMenuButton{ - width: 100% +.burgerMenuButton { + width: 100%; } -.burgerMenuButton > .MuiIconButton-label{ +.burgerMenuButton > .MuiIconButton-label { justify-content: unset; -} \ No newline at end of file +} + +.appVersion { + position: absolute; + bottom: 0; +} diff --git a/src/components/navigation/burgerMenu/burgerMenu.js b/src/components/navigation/burgerMenu/burgerMenu.js index 0968b48b..96afd320 100644 --- a/src/components/navigation/burgerMenu/burgerMenu.js +++ b/src/components/navigation/burgerMenu/burgerMenu.js @@ -8,6 +8,7 @@ import { HOUSEHOLD } from 'utils/constants'; import { OrchestratorContext } from 'components/orchestrator/collector'; import { SIMPLE_CLICK_EVENT, paradataHandler } from 'utils/events'; import './burgerMenu.css'; +import { AppVersion } from 'components/designSystem/AppVersion'; const utilInfo = (type, page) => { return { ...SIMPLE_CLICK_EVENT, id: `${type}-button`, page }; @@ -64,6 +65,7 @@ const BurgerMenu = ({ title }) => { Déconnexion )} +