[TICKET] Corriger l'agrandissement des images d'évènements

[hydrielax]

Description

L'agrandissement pour les images d'évènements est moche :

ll faut donc changer ça.

Definition of done

The ticket can be considered as done if all theses criteria are completed:

• L'image est centrée en mode plen écran
• Si l'image d'origine est plus petite que l'écran, elle n'est pas agrandie plus que sa taille d'origine (éviter la pixellisation)
• Si l'image d'origine est plus grande que la taille de l'écran, alors elle est réduite pour ne pas dépasser de l'écran
• L'image est directement affichée sur un fond noir transparent (pas de modal)
• J'ai une croix pour fermer l'image en haut à droite
• Je peux fermer l'image en cliquant sur la zone noire

Mock-Up and Designs

Le résultat devrait ressembler à ça (avec la croix en haut à droite en plus - utiliser la même croix que l'actuel, juste adapter la transparence et sans fond)

Technical strategy

• Utiliser le composant Modal de MUI brut (sans aucun design) : https://mui.com/material-ui/react-modal/
  • L'image devrait être centrée automatiquement
  • Corriger le backdrop (ie la zone noire d'arrière plan) pour le rendre plus sombre
• Afficher l'image avec <img>
  • Ajouter un max-height et max-width pour que l'image soit retailée automatiquement si l'écran est trop petit (tester avec des écrans très petits - utiliser le simulateur de portable sur navigateur)
  • Encadrer le bloc <img> dans un bloc <Paper> pour ajouter une ombre sous l'image avec la prop elevation
• Ajouter la croix en haut à droite avec une position absolute

[elkhayder]

Je pense que c'est déjà réglé ?