diff --git a/src/assets/png/logos.png b/src/assets/png/logos.png
new file mode 100644
index 0000000000000000000000000000000000000000..95a0f1d3605958bb883346abf1f4a12b9a8ec9d0
Binary files /dev/null and b/src/assets/png/logos.png differ
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
index 6ecb5a9a1dab4dd495055866892f84b1c8982485..153fce9e9b25a29fa488b6df8c3ce25c49eb1ccd 100644
--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@@ -13,10 +13,7 @@ import EcogestesIconOn from 'assets/icons/tabbar/ecogeste/ecogeste-on.svg'
import EcogestesIconOff from 'assets/icons/tabbar/ecogeste/ecogeste-off.svg'
import AnalysisIconOn from 'assets/icons/tabbar/analysis/analysis-on.svg'
import AnalysisIconOff from 'assets/icons/tabbar/analysis/analysis-off.svg'
-import logoGrandLyon from 'assets/icons/tabbar/grand-lyon.svg'
-import logoTiga from 'assets/icons/tabbar/tiga.svg'
-import logoGouv from 'assets/icons/tabbar/gouv.svg'
-import logoTerritory from 'assets/icons/tabbar/territory.svg'
+import logos from 'assets/png/logos.png'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { AppStore } from 'store'
import './navBar.scss'
@@ -96,26 +93,7 @@ export const Navbar: React.FC = () => {
</ul>
</nav>
<div className="logos-container">
- <StyledIcon
- className="logo-grand-lyon"
- icon={logoGrandLyon}
- size={100}
- />
- <div className="secondary-logo">
- <div className="img-container">
- <StyledIcon className="logo-gouv" icon={logoGouv} size={87} />
- </div>
- <div className="img-container">
- <StyledIcon
- className="logo-territory"
- icon={logoTerritory}
- size={125}
- />
- </div>
- <div className="img-container">
- <StyledIcon className="logo-tiga" icon={logoTiga} size={100} />
- </div>
- </div>
+ <img src={logos} alt="ensemble de logos" />
</div>
</aside>
)
diff --git a/src/components/Navbar/navBar.scss b/src/components/Navbar/navBar.scss
index 0916d01be88cb6cb3f33cf5063928df2b04233c0..8c9cf9add5ba3fcbaa6e23d1927f226ccc43970c 100644
--- a/src/components/Navbar/navBar.scss
+++ b/src/components/Navbar/navBar.scss
@@ -20,54 +20,21 @@
@media #{$tablet} {
display: none;
}
- .logo-grand-lyon {
- width: 100%;
- max-width: 100px;
- }
- .logo-tiga {
- width: 100%;
- max-width: 80px;
- }
- .secondary-logo {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin: -4rem 0.5rem 0;
- svg {
- width: 100%;
- }
- }
- .img-container {
- &:not(:nth-last-of-type(2)) {
- flex-basis: 23%;
- }
- &:nth-last-of-type(2) {
- flex-basis: 45%;
- }
+ img {
+ display: inline-block;
+ max-width: 100%;
}
}
.parameters-logos {
- padding: 0 1.5rem 1.5rem 1.5rem;
+ padding: 1.5rem;
display: none;
+ text-align: center;
@media #{$tablet} {
display: block;
}
- .secondary-logo {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin: -3.5rem 0.5rem 0;
- svg {
- width: 100%;
- }
- .img-container {
- &:not(:nth-last-of-type(2)) {
- flex-basis: 23%;
- }
- &:nth-last-of-type(2) {
- flex-basis: 45%;
- }
- }
+ img {
+ display: inline-block;
+ width: 90%;
}
}
.logo-tiga-parameters {
diff --git a/src/components/Options/OptionsView.tsx b/src/components/Options/OptionsView.tsx
index 3e6a0e4da56faf29a64a40134edb22a422eff50c..71ea75be877e6fea2a28e943131b035f3eebed9b 100644
--- a/src/components/Options/OptionsView.tsx
+++ b/src/components/Options/OptionsView.tsx
@@ -9,11 +9,7 @@ import LegalNoticeLink from 'components/LegalNotice/LegalNoticeLink'
import Version from 'components/Version/Version'
import ProfileTypeOptions from './ProfileTypeOptions'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import logoGrandLyon from 'assets/icons/tabbar/grand-lyon.svg'
-import logoTiga from 'assets/icons/tabbar/tiga.svg'
-import logoGouv from 'assets/icons/tabbar/gouv.svg'
-import logoTerritory from 'assets/icons/tabbar/territory.svg'
+import logos from 'assets/png/logos.png'
const OptionsView: React.FC = () => {
const [headerHeight, setHeaderHeight] = useState<number>(0)
@@ -34,26 +30,7 @@ const OptionsView: React.FC = () => {
<FAQLink />
<LegalNoticeLink />
<div className="parameters-logos">
- <StyledIcon
- className="logo-grand-lyon-parameters"
- icon={logoGrandLyon}
- size={100}
- />
- <div className="secondary-logo">
- <div className="img-container">
- <StyledIcon className="logo-gouv" icon={logoGouv} size={68} />
- </div>
- <div className="img-container">
- <StyledIcon
- className="logo-territory"
- icon={logoTerritory}
- size={125}
- />
- </div>
- <div className="img-container">
- <StyledIcon className="logo-tiga" icon={logoTiga} size={62} />
- </div>
- </div>
+ <img src={logos} alt="ensemble de logos" />
</div>
<Version />
</Content>
diff --git a/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap b/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
index 8c4d3e9ba5f63c9f1084d91df5697f0c37e023e6..ebc5cd0a832c6bd2b474650249b2b64200f4a261 100644
--- a/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
+++ b/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
@@ -22,42 +22,10 @@ exports[`OptionsView component should be rendered correctly 1`] = `
<div
className="parameters-logos"
>
- <StyledIcon
- className="logo-grand-lyon-parameters"
- icon="test-file-stub"
- size={100}
+ <img
+ alt="ensemble de logos"
+ src="test-file-stub"
/>
- <div
- className="secondary-logo"
- >
- <div
- className="img-container"
- >
- <StyledIcon
- className="logo-gouv"
- icon="test-file-stub"
- size={68}
- />
- </div>
- <div
- className="img-container"
- >
- <StyledIcon
- className="logo-territory"
- icon="test-file-stub"
- size={125}
- />
- </div>
- <div
- className="img-container"
- >
- <StyledIcon
- className="logo-tiga"
- icon="test-file-stub"
- size={62}
- />
- </div>
- </div>
</div>
<Version />
</Content>
diff --git a/src/components/Splash/SplashScreen.tsx b/src/components/Splash/SplashScreen.tsx
index c948a85e5b832fa581333ad93dea3b7c7b135f99..9112e1f67cf726d7f5f2452e7532c074f16605b3 100644
--- a/src/components/Splash/SplashScreen.tsx
+++ b/src/components/Splash/SplashScreen.tsx
@@ -1,12 +1,8 @@
import React from 'react'
import Lottie from 'react-lottie'
-import logoGrandLyon from 'assets/icons/tabbar/grand-lyon.svg'
-import logoTiga from 'assets/icons/tabbar/tiga.svg'
-import logoGouv from 'assets/icons/tabbar/gouv.svg'
-import logoTerritory from 'assets/icons/tabbar/territory.svg'
+import logos from 'assets/png/logos.png'
import * as loadingData from 'assets/anims/splash.json'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import './splashScreen.scss'
const loadingOptions = {
@@ -24,20 +20,7 @@ const SplashScreen: React.FC = () => {
<div className="splash-content">
<Lottie options={loadingOptions} height={300} width={300} />
<div className="splash-logos-container">
- <StyledIcon
- className="logo-grand-lyon"
- icon={logoGrandLyon}
- size={100}
- />
- <div className="secondary-logo">
- <StyledIcon className="logo-gouv" icon={logoGouv} size={70} />
- <StyledIcon
- className="logo-territory"
- icon={logoTerritory}
- size={130}
- />
- <StyledIcon className="logo-tiga" icon={logoTiga} size={70} />
- </div>
+ <img src={logos} alt="ensemble de logos" />
</div>
</div>
<div className="splash-footer"></div>
diff --git a/src/components/Splash/SplashScreenError.tsx b/src/components/Splash/SplashScreenError.tsx
index 705f30fc20797a0fec77d000c8503cae6bea81cb..4d48a3bde9e75473a233b377f9eaacf20d05ca10 100644
--- a/src/components/Splash/SplashScreenError.tsx
+++ b/src/components/Splash/SplashScreenError.tsx
@@ -4,9 +4,7 @@ import Lottie from 'react-lottie'
import MuiButton from '@material-ui/core/Button'
import logoGrandLyon from 'assets/icons/tabbar/grand-lyon.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import logoTiga from 'assets/icons/tabbar/tiga.svg'
-import logoGouv from 'assets/icons/tabbar/gouv.svg'
-import logoTerritory from 'assets/icons/tabbar/territory.svg'
+import logos from 'assets/png/logos.png'
import * as loadingData from 'assets/anims/splash.json'
import './splashScreen.scss'
@@ -27,20 +25,7 @@ const SplashScreenError: React.FC = () => {
<div className="splash-content">
<Lottie options={loadingOptions} height={300} width={300} />
<div className="splash-logos-container">
- <StyledIcon
- className="logo-grand-lyon"
- icon={logoGrandLyon}
- size={100}
- />
- <div className="secondary-logo">
- <StyledIcon className="logo-gouv" icon={logoGouv} size={70} />
- <StyledIcon
- className="logo-territory"
- icon={logoTerritory}
- size={130}
- />
- <StyledIcon className="logo-tiga" icon={logoTiga} size={70} />
- </div>
+ <img src={logos} alt="ensemble de logos" />
</div>
</div>
<div className="splash-footer">
diff --git a/src/components/Splash/__snapshots__/SplashScreen.spec.tsx.snap b/src/components/Splash/__snapshots__/SplashScreen.spec.tsx.snap
index f98039422b2879556629b3b28949d8946023687f..63adaa7e3d71d00321d1174452614596568137ae 100644
--- a/src/components/Splash/__snapshots__/SplashScreen.spec.tsx.snap
+++ b/src/components/Splash/__snapshots__/SplashScreen.spec.tsx.snap
@@ -4225,30 +4225,10 @@ exports[`SplashScreen component should be rendered correctly 1`] = `
<div
className="splash-logos-container"
>
- <StyledIcon
- className="logo-grand-lyon"
- icon="test-file-stub"
- size={100}
+ <img
+ alt="ensemble de logos"
+ src="test-file-stub"
/>
- <div
- className="secondary-logo"
- >
- <StyledIcon
- className="logo-gouv"
- icon="test-file-stub"
- size={70}
- />
- <StyledIcon
- className="logo-territory"
- icon="test-file-stub"
- size={130}
- />
- <StyledIcon
- className="logo-tiga"
- icon="test-file-stub"
- size={70}
- />
- </div>
</div>
</div>
<div
diff --git a/src/components/Splash/__snapshots__/SplashScreenError.spec.tsx.snap b/src/components/Splash/__snapshots__/SplashScreenError.spec.tsx.snap
index 65d025440ececbb1abe5c30667e60d217c6c2506..c1ccca247ab86cd4a727a708287ec3cc6708c5e3 100644
--- a/src/components/Splash/__snapshots__/SplashScreenError.spec.tsx.snap
+++ b/src/components/Splash/__snapshots__/SplashScreenError.spec.tsx.snap
@@ -4225,30 +4225,10 @@ exports[`SplashScreenError component should be rendered correctly 1`] = `
<div
className="splash-logos-container"
>
- <StyledIcon
- className="logo-grand-lyon"
- icon="test-file-stub"
- size={100}
+ <img
+ alt="ensemble de logos"
+ src="test-file-stub"
/>
- <div
- className="secondary-logo"
- >
- <StyledIcon
- className="logo-gouv"
- icon="test-file-stub"
- size={70}
- />
- <StyledIcon
- className="logo-territory"
- icon="test-file-stub"
- size={130}
- />
- <StyledIcon
- className="logo-tiga"
- icon="test-file-stub"
- size={70}
- />
- </div>
</div>
</div>
<div
diff --git a/src/components/Splash/splashScreen.scss b/src/components/Splash/splashScreen.scss
index 682a92ac5db8c927b85c8d72c424d4df1b08c0b7..73a0fddc48f4f72a2eee18387ca811c6f13df1e8 100644
--- a/src/components/Splash/splashScreen.scss
+++ b/src/components/Splash/splashScreen.scss
@@ -17,20 +17,6 @@
flex-direction: column;
justify-content: center;
align-items: center;
- .secondary-logo {
- display: flex;
- justify-content: center;
- gap: 1.5rem;
- align-items: center;
- margin-top: -3.5rem;
- @media (min-width: $width-large-phone) {
- gap: 3rem;
- }
- }
- .logo-grand-lyon {
- width: 100%;
- max-width: 100px;
- }
}
}
.splash-footer {