Updates plateform UX to fit Pyronear style & improves UX

[fe51]

Motivation

The style of our platform seems a little too carnival-like to me & the format of the various buttons too rounded with coarse margins. Moreover, the scroll activation button doesn't look natural.

The aim of this PR is to come up with a more coherent design that fits with the Pyronear color code.
Below, You can see various screenshot showing how it renders.

it seemed appropriate to consider a small style update before developing new screens (dashboard cameras) & inspiring the redesign in react

What has been done

Tested on Chrome & Safari on 14inch & big screen (16:9?)

This PR introduces the following modification :

• Updates style of alert panel element
• Adds play-pause icon near slider instead of "Activer/Désactiver l'animation" (the icon button changes color between play and pause) => seems more natural as play pause in any video player.
• Updates center button style
• Updates right side panel style
• Updates info panel style to highlight info
• Switch map and info panel positions
• Updates padding and margins to avoid touching scroll bar and limit of the window

About the right side panel, I've switched map and info panel position. I am not sure what is the best, do you have any opinion ?

Happy to discuss it !

[fe51]

This is how it looks when you remove the borders

[MateoLostanlen]

Hi @fe51, thanks for this PR it works like a charm, this new style is nice !