feat: change design of error & sucess feedback

src/assets/icons/ico/warning-yellow.svg

+<svg width="63" height="55" viewBox="0 0 63 55" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33.3426 1.11412C32.4849 -0.37137 30.3408 -0.371375 29.4832 1.11412L0.301852 51.6576C-0.555796 53.1431 0.516259 55 2.23156 55H60.5942C62.3095 55 63.3816 53.1431 62.5239 51.6576L33.3426 1.11412ZM29.1746 32.5018V20.8405H33.5604V32.5018C33.5604 33.4617 33.505 34.4163 33.3941 35.3657C33.2832 36.3047 33.137 37.2646 32.9555 38.2453H29.7795C29.598 37.2646 29.4518 36.3047 29.3409 35.3657C29.23 34.4163 29.1746 33.4617 29.1746 32.5018ZM33.878 42.8463C34.0091 43.1698 34.0747 43.5193 34.0747 43.8949C34.0747 44.2705 34.0091 44.6252 33.878 44.9591C33.7369 45.2825 33.5504 45.5642 33.3185 45.8042C33.0765 46.0441 32.7942 46.2319 32.4715 46.3675C32.1489 46.5032 31.796 46.571 31.4129 46.571C31.0398 46.571 30.692 46.5032 30.3693 46.3675C30.0467 46.2319 29.7644 46.0441 29.5224 45.8042C29.2804 45.5642 29.0939 45.2825 28.9628 44.9591C28.8217 44.6252 28.7511 44.2705 28.7511 43.8949C28.7511 43.5193 28.8217 43.1698 28.9628 42.8463C29.0939 42.5229 29.2804 42.2412 29.5224 42.0013C29.7644 41.7613 30.0467 41.5735 30.3693 41.4379C30.692 41.2918 31.0398 41.2188 31.4129 41.2188C31.796 41.2188 32.1489 41.2918 32.4715 41.4379C32.7942 41.5735 33.0765 41.7613 33.3185 42.0013C33.5504 42.2412 33.7369 42.5229 33.878 42.8463Z" fill="#E3B82A"/>
+</svg>

src/components/ContentComponents/Feedback/FeedbackModal.tsx

@@ -14,7 +14,7 @@ import IdeaOnIcon from 'assets/icons/visu/feedback/idea-on.svg'
 import IdeaOffIcon from 'assets/icons/visu/feedback/idea-off.svg'
 import OtherOnIcon from 'assets/icons/visu/feedback/other-on.svg'
 import OtherOffIcon from 'assets/icons/visu/feedback/other-off.svg'
-import errorIcon from 'assets/icons/visu/data-nok.svg'
+import warningIcon from 'assets/icons/ico/warning-yellow.svg'
 import successIcon from 'assets/icons/visu/data-ok.svg'
 
 const FEEDBACK_EMAIL = 'ecolyo@grandlyon.com'
@@ -173,8 +173,9 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({
             ) : (
               <div className="fb-content-error">
                 <div className="fb-icon">
-                  <StyledIcon icon={errorIcon} size={48} />
+                  <StyledIcon icon={warningIcon} size={48} />
                 </div>
+                <div>{t('feedback.warning')}</div>
                 <div>{error}</div>
               </div>
             )}

src/locales/fr.json

@@ -270,7 +270,8 @@
     "type_idea": "Idée",
     "type_other": "Autre",
     "success_sending": "Nous vous remercions pour votre retour.",
-    "error_empty_description": "Veuillez remplir une description.",
+    "warning": "Attention!",
+    "error_empty_description": "Le champ de description est vide.",
     "error_sending": "Erreur lors de l'envoi, veuillez essayer ultérieurement."
   }
 }

src/styles/components/_feedback.scss

@@ -17,14 +17,23 @@
     flex-direction: column;
     .fb-content-success{
       color: $text-bright;
+      color: $text-bright;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
     }
     .fb-content-error{
       color: $text-bright;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
     }
     .fb-icon {
       display: flex;
       justify-content: center;
-      margin: 1rem 0;
+      margin: 0 0 1.5rem 0;
     }
     .fb-label{
       margin: 0.5rem 0 0 0;