Event UI improvements - event transitions

[rossbulat]

Following on from #150, this issue documents 2 improvements to the events UI:

Issue: Event item fade out when closed

When an event is dismissed by clicking the "x" icon, it instantly gets removed from the DOM instead of fading out (the desired behaviour).

According to the Framer Motion docs, each removed item needs to be surrounded with the <AnimatePresence> component, and have a unique key as specified here: https://www.framer.com/motion/animate-presence/##exit-animations

However, after providing a unique key by calling JSON.stringify(data), event items still don't fade out. I have removed the key prop, and the current code state is as follows:

<AnimatePresence>
  <EventItem
    whileHover={{ scale: 1.01 }}
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    exit={{ opacity: 0 }}
  >
  ...
</AnimatePresence>

[rossbulat]

Resolved in #150