From 48bd3b685ff469c49c3d019ebf4f0fc4b3194102 Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Wed, 7 Feb 2024 12:38:20 +0000
Subject: [PATCH] chore: update unsubscribe texts & icons
---
app.config.react.js | 17 +++++
manifest.webapp | 2 +-
src/assets/icons/ico/ecolyo-glow.svg | 58 +++++++++++++++++
.../Options/Unsubscribe/Unsubscribe.tsx | 6 +-
.../__snapshots__/Unsubscribe.spec.tsx.snap | 8 +--
.../Options/Unsubscribe/unsubscribe.scss | 5 +-
src/locales/fr.json | 8 +--
src/targets/public/index.ejs | 14 ++--
src/targets/vendor/assets/unsubscribe.html | 64 -------------------
9 files changed, 96 insertions(+), 86 deletions(-)
create mode 100644 src/assets/icons/ico/ecolyo-glow.svg
delete mode 100644 src/targets/vendor/assets/unsubscribe.html
diff --git a/app.config.react.js b/app.config.react.js
index 7dba378a9..20b70d3b6 100644
--- a/app.config.react.js
+++ b/app.config.react.js
@@ -58,6 +58,23 @@ module.exports = {
from: './src/assets/icons/email',
to: './assets/',
},
+ {
+ from: `./src/targets/vendor/assets/icon.svg`,
+ to: 'public/',
+ },
+ {
+ from: `./src/targets/vendor/assets/favicon*`,
+ to: 'public/',
+ flatten: true,
+ },
+ {
+ from: `./src/targets/vendor/assets/apple-touch-icon.png`,
+ to: 'public/apple-touch-icon.png',
+ },
+ {
+ from: `./src/targets/vendor/assets/safari-pinned-tab.svg`,
+ to: 'public/safari-pinned-tab.svg',
+ },
],
}),
new webpack.DefinePlugin({
diff --git a/manifest.webapp b/manifest.webapp
index d9ba90669..f03b80e21 100644
--- a/manifest.webapp
+++ b/manifest.webapp
@@ -1,7 +1,7 @@
{
"name": "Ecolyo",
"slug": "ecolyo",
- "icon": "icon.svg",
+ "icon": "public/icon.svg",
"categories": ["energy"],
"version": "2.7.2",
"licence": "AGPL-3.0",
diff --git a/src/assets/icons/ico/ecolyo-glow.svg b/src/assets/icons/ico/ecolyo-glow.svg
new file mode 100644
index 000000000..c217712d3
--- /dev/null
+++ b/src/assets/icons/ico/ecolyo-glow.svg
@@ -0,0 +1,58 @@
+<svg width="228" height="249" viewBox="0 0 228 249" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <g filter="url(#filter0_d_4378_69559)">
+ <path
+ d="M110.852 212.899C112.838 213.7 115.162 213.7 117.148 212.899C198.86 179.9 195.538 133.68 191.154 66.0254C190.872 61.6752 187.352 58.2489 183.005 57.844C159.608 55.6649 138.398 48.2952 118.552 36.7284C115.741 35.0905 112.259 35.0905 109.448 36.7284C89.6016 48.2952 68.3915 55.6649 44.9949 57.844C40.6482 58.2489 37.1276 61.6752 36.8457 66.0254C32.462 133.68 29.1399 179.9 110.852 212.899Z"
+ fill="url(#paint0_radial_4378_69559)" />
+ </g>
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M181.256 67.6897C183.459 101.819 184.876 127.581 177.021 149.071C169.536 169.547 152.867 187.663 114 203.547C75.1333 187.663 58.4641 169.547 50.9795 149.071C43.1242 127.581 44.5412 101.819 46.7439 67.6897C71.1918 65.1969 93.3787 57.4376 114 45.5387C134.621 57.4376 156.808 65.1969 181.256 67.6897ZM117.179 213.892C115.174 214.703 112.826 214.703 110.821 213.892C28.6299 180.652 31.64 134.145 36.0399 66.163L36.0913 65.3684C36.376 60.9693 39.9309 57.5045 44.3202 57.0951C67.9456 54.8915 89.3631 47.4389 109.404 35.7422C112.242 34.0859 115.758 34.0859 118.596 35.7422C138.637 47.4389 160.054 54.8915 183.68 57.0951C188.069 57.5045 191.624 60.9693 191.909 65.3684L191.96 66.163C196.36 134.145 199.37 180.652 117.179 213.892Z"
+ fill="#FFC600" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M181.256 67.6897C183.459 101.819 184.876 127.581 177.021 149.071C169.536 169.547 152.867 187.663 114 203.547C75.1333 187.663 58.4641 169.547 50.9795 149.071C43.1242 127.581 44.5412 101.819 46.7439 67.6897C71.1918 65.1969 93.3787 57.4376 114 45.5387C134.621 57.4376 156.808 65.1969 181.256 67.6897ZM117.179 213.892C115.174 214.703 112.826 214.703 110.821 213.892C28.6299 180.652 31.64 134.145 36.0399 66.163L36.0913 65.3684C36.376 60.9693 39.9309 57.5045 44.3202 57.0951C67.9456 54.8915 89.3631 47.4389 109.404 35.7422C112.242 34.0859 115.758 34.0859 118.596 35.7422C138.637 47.4389 160.054 54.8915 183.68 57.0951C188.069 57.5045 191.624 60.9693 191.909 65.3684L191.96 66.163C196.36 134.145 199.37 180.652 117.179 213.892Z"
+ fill="url(#paint1_linear_4378_69559)" fill-opacity="0.75" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M114.002 214.5C115.089 214.5 116.176 214.297 117.178 213.892C199.369 180.652 196.359 134.145 191.959 66.1631L191.908 65.3684C191.623 60.9693 188.068 57.5045 183.679 57.0951C160.054 54.8915 138.636 47.4389 118.595 35.7422C117.177 34.9145 115.589 34.5005 114.002 34.5V45.5402C134.622 57.4382 156.808 65.197 181.255 67.6897C183.458 101.819 184.875 127.581 177.02 149.071C169.535 169.547 152.867 187.663 114.002 203.546V214.5Z"
+ fill="#DB8300" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M114.002 214.5C115.089 214.5 116.176 214.297 117.178 213.892C199.369 180.652 196.359 134.145 191.959 66.1631L191.908 65.3684C191.623 60.9693 188.068 57.5045 183.679 57.0951C160.054 54.8915 138.636 47.4389 118.595 35.7422C117.177 34.9145 115.589 34.5005 114.002 34.5V45.5402C134.622 57.4382 156.808 65.197 181.255 67.6897C183.458 101.819 184.875 127.581 177.02 149.071C169.535 169.547 152.867 187.663 114.002 203.546V214.5Z"
+ fill="url(#paint2_linear_4378_69559)" fill-opacity="0.75" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M79.9999 92.0462C79.9999 87.8785 83.3785 84.5 87.5461 84.5C91.7138 84.5 95.0923 87.8785 95.0923 92.0462V144.916C95.0923 146.081 94.1479 147.026 92.9829 147.026H82.1093C80.9443 147.026 79.9999 146.081 79.9999 144.916V92.0462ZM106.95 119.001C106.95 114.834 110.329 111.455 114.497 111.455C118.664 111.455 122.043 114.834 122.043 119.001V144.921C122.043 146.086 121.098 147.03 119.933 147.03H109.06C107.895 147.03 106.95 146.086 106.95 144.921V119.001ZM141.452 100.672C137.284 100.672 133.906 104.051 133.906 108.218V144.918C133.906 146.083 134.85 147.027 136.015 147.027H146.889C148.054 147.027 148.998 146.083 148.998 144.918V108.218C148.998 104.051 145.62 100.672 141.452 100.672Z"
+ fill="#FFC600" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M79.9999 92.0462C79.9999 87.8785 83.3785 84.5 87.5461 84.5C91.7138 84.5 95.0923 87.8785 95.0923 92.0462V144.916C95.0923 146.081 94.1479 147.026 92.9829 147.026H82.1093C80.9443 147.026 79.9999 146.081 79.9999 144.916V92.0462ZM106.95 119.001C106.95 114.834 110.329 111.455 114.497 111.455C118.664 111.455 122.043 114.834 122.043 119.001V144.921C122.043 146.086 121.098 147.03 119.933 147.03H109.06C107.895 147.03 106.95 146.086 106.95 144.921V119.001ZM141.452 100.672C137.284 100.672 133.906 104.051 133.906 108.218V144.918C133.906 146.083 134.85 147.027 136.015 147.027H146.889C148.054 147.027 148.998 146.083 148.998 144.918V108.218C148.998 104.051 145.62 100.672 141.452 100.672Z"
+ fill="url(#paint3_linear_4378_69559)" />
+ <defs>
+ <filter id="filter0_d_4378_69559" x="-9.15527e-05" y="0.5" width="228" height="248" filterUnits="userSpaceOnUse"
+ color-interpolation-filters="sRGB">
+ <feFlood flood-opacity="0" result="BackgroundImageFix" />
+ <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+ result="hardAlpha" />
+ <feOffset />
+ <feGaussianBlur stdDeviation="17.5" />
+ <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.776471 0 0 0 0 0 0 0 0 0.5 0" />
+ <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4378_69559" />
+ <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4378_69559" result="shape" />
+ </filter>
+ <radialGradient id="paint0_radial_4378_69559" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+ gradientTransform="translate(73.9661 56.9075) rotate(72.5541) scale(133.533 139.851)">
+ <stop stop-color="#2B2D37" />
+ <stop offset="1" stop-color="#15161B" />
+ </radialGradient>
+ <linearGradient id="paint1_linear_4378_69559" x1="110.766" y1="208.686" x2="53.0926" y2="55.609"
+ gradientUnits="userSpaceOnUse">
+ <stop stop-color="#CB6E00" />
+ <stop offset="1" stop-color="#FFC600" stop-opacity="0" />
+ </linearGradient>
+ <linearGradient id="paint2_linear_4378_69559" x1="163.588" y1="209.225" x2="113.998" y2="44.2909"
+ gradientUnits="userSpaceOnUse">
+ <stop stop-color="#793A00" />
+ <stop offset="1" stop-color="#DB8300" stop-opacity="0" />
+ </linearGradient>
+ <linearGradient id="paint3_linear_4378_69559" x1="148.998" y1="144.874" x2="83.234" y2="84.5002"
+ gradientUnits="userSpaceOnUse">
+ <stop stop-color="#DB8300" />
+ <stop offset="1" stop-color="#FFC600" />
+ </linearGradient>
+ </defs>
+</svg>
\ No newline at end of file
diff --git a/src/components/Options/Unsubscribe/Unsubscribe.tsx b/src/components/Options/Unsubscribe/Unsubscribe.tsx
index c5032fbdc..07efaeaf9 100644
--- a/src/components/Options/Unsubscribe/Unsubscribe.tsx
+++ b/src/components/Options/Unsubscribe/Unsubscribe.tsx
@@ -1,6 +1,6 @@
import { Button } from '@material-ui/core'
import * as Sentry from '@sentry/react'
-import BearIcon from 'assets/icons/visu/duelResult/CHALLENGE0001-0.svg'
+import EcolyoGlowIcon from 'assets/icons/ico/ecolyo-glow.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import Loader from 'components/Loader/Loader'
import { useClient } from 'cozy-client'
@@ -50,7 +50,7 @@ const Unsubscribe = () => {
{isLoading && <Loader />}
{!isLoading && (
<>
- <StyledIcon className="profile-icon" icon={BearIcon} size={250} />
+ <StyledIcon icon={EcolyoGlowIcon} size={180} />
<div className="text-20-bold head">{t(`unsubscribe.${status}`)}</div>
{status === 'unsubscribed' && (
<div className="text-16-normal question">
@@ -66,7 +66,7 @@ const Unsubscribe = () => {
</Button>
)}
<Button
- className="btnSecondary"
+ className="btnText"
onClick={() => window.location.replace('/')}
>
{t('unsubscribe.button_home')}
diff --git a/src/components/Options/Unsubscribe/__snapshots__/Unsubscribe.spec.tsx.snap b/src/components/Options/Unsubscribe/__snapshots__/Unsubscribe.spec.tsx.snap
index 181c853d2..f05911f7f 100644
--- a/src/components/Options/Unsubscribe/__snapshots__/Unsubscribe.spec.tsx.snap
+++ b/src/components/Options/Unsubscribe/__snapshots__/Unsubscribe.spec.tsx.snap
@@ -7,9 +7,9 @@ exports[`Unsubscribe component should be rendered correctly 1`] = `
>
<svg
aria-hidden="true"
- class="profile-icon styles__icon___23x3R"
- height="250"
- width="250"
+ class="styles__icon___23x3R"
+ height="180"
+ width="180"
>
<use
xlink:href="#test-file-stub"
@@ -37,7 +37,7 @@ exports[`Unsubscribe component should be rendered correctly 1`] = `
</span>
</button>
<button
- class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnText"
tabindex="0"
type="button"
>
diff --git a/src/components/Options/Unsubscribe/unsubscribe.scss b/src/components/Options/Unsubscribe/unsubscribe.scss
index 1efa15a6f..7f89e3799 100644
--- a/src/components/Options/Unsubscribe/unsubscribe.scss
+++ b/src/components/Options/Unsubscribe/unsubscribe.scss
@@ -7,7 +7,7 @@
gap: 1rem;
max-width: 450px;
margin: auto;
- padding: 2rem;
+ padding: 4rem 2rem;
text-align: center;
.head {
color: $gold-shadow;
@@ -15,4 +15,7 @@
.question {
color: $white;
}
+ .btnText {
+ color: $grey-bright;
+ }
}
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 67181844e..e5b79c184 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -1287,11 +1287,11 @@
},
"unsubscribe": {
"error": "Une erreur est survenue lors de votre désinscription, merci de ré-essayer plus tard.",
- "unsubscribed": "Vous êtes désormais désabonné",
- "subscribed": "Vous allez recevoir les prochaines newsletters",
+ "unsubscribed": "Vous êtes désormais désabonné de la newsletter Ecolyo",
+ "subscribed": "Vous êtes désormais abonné à la newsletter Ecolyo",
"content": "Vous ne recevrez plus la notification de votre bilan ainsi que les conseils associés au mois en cours.",
- "button_subscribe": "Je souhaite me ré-abonner à la newsletter",
- "button_home": "Me connecter",
+ "button_subscribe": "Me ré-abonner",
+ "button_home": "Me connecter à Ecolyo",
"button_accessibility": "Bouton de désinscription"
},
"welcome_modal": {
diff --git a/src/targets/public/index.ejs b/src/targets/public/index.ejs
index ff3f16edf..7ae02d3c7 100644
--- a/src/targets/public/index.ejs
+++ b/src/targets/public/index.ejs
@@ -3,18 +3,14 @@
<head>
<meta charset="utf-8">
<title><%= htmlWebpackPlugin.options.title %> | Me désabonner</title>
- <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
- <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
+ <link rel="icon" type="image/png" href="public/favicon-32x32.png" sizes="32x32">
+ <link rel="icon" type="image/png" href="public/favicon-16x16.png" sizes="16x16">
<!-- PWA Manifest -->
- <link rel="manifest" href="/manifest.json" crossOrigin="use-credentials">
- <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#297EF2">
+ <link rel="mask-icon" href="public/safari-pinned-tab.svg" color="#297EF2">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, viewport-fit=cover">
- <!-- PWA Chrome -->
- <link rel="icon" sizes="192x192" href="/android-chrome-192x192.png">
- <link rel="icon" sizes="512x512" href="/android-chrome-512x512.png">
<!-- PWA iOS -->
- <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
- <link rel="apple-touch-startup-image" href="/apple-touch-icon.png">
+ <link rel="apple-touch-icon" sizes="180x180" href="public/apple-touch-icon.png">
+ <link rel="apple-touch-startup-image" href="public/apple-touch-icon.png">
<meta name="apple-mobile-web-app-title" content="Ecolyo">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
diff --git a/src/targets/vendor/assets/unsubscribe.html b/src/targets/vendor/assets/unsubscribe.html
deleted file mode 100644
index eff28e28a..000000000
--- a/src/targets/vendor/assets/unsubscribe.html
+++ /dev/null
@@ -1,64 +0,0 @@
-<!doctype html>
-<html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <meta
- name="description"
- content="Ecolyo est le service proposé par la Métropole de Lyon pour suivre et comprendre la consommation énergétique globale de votre foyer."
- />
- <meta
- http-equiv="Content-Security-Policy"
- content="style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com;"
- />
- <link rel="stylesheet" href="./style.css" />
- <link
- href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap"
- rel="stylesheet"
- />
- <link rel="icon" href="assets/icon.svg" />
- <title>Ecolyo</title>
- <style type="text/css">
- * {
- margin: 0;
- line-height: 1;
- font-family: 'Lato', sans-serif;
- color: white;
- }
- html,
- body {
- height: 100%;
- margin: auto;
- background: #121212;
- }
- p {
- margin-top: 1rem;
- }
- .container {
- height: 100%;
- display: flex;
- align-items: center;
- text-align: center;
- justify-content: center;
- }
- .text-16-white {
- font-weight: 900;
- font-size: 1rem;
- color: white;
- }
- </style>
- </head>
- <body>
- <nav></nav>
- <div class="container">
- <section>
- <img src="./icon.svg" alt="logo Ecolyo" height="80px" width="80px" />
- <p class="text-16-white">Hors ligne</p>
- <p class="text-16-white">
- Vérifiez votre connexion pour lancer Ecolyo.
- </p>
- </section>
- </div>
- <footer></footer>
- </body>
-</html>
--
GitLab