UI/update global UI (#459)

* Update loading screen to use Lottie animation

- Replace simple logo with Lottie animation from loadercalendar.lottie
- Center animation on screen with full viewport coverage
- Set animation width to 175px
- Install @lottiefiles/dotlottie-react package

* update spacing event modal

* add twake workplace logo to loading screen

* update spacing create calendar modal

* fix evenchip description color

* using variant instead of sx

src/components/Loading/Loading.tsx

@@ -1,6 +1,41 @@
 import React from "react";
-import logo from "../../static/images/calendar.svg";
+import { DotLottieReact } from "@lottiefiles/dotlottie-react";
+import { Box } from "@linagora/twake-mui";
+import twakeLogo from "../../static/twake-workplace.svg";
 
 export function Loading() {
-  return <img src={logo} alt="loading" />;
+  return (
+    <Box
+      data-testid="loading"
+      sx={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        width: "100vw",
+        height: "100vh",
+        position: "fixed",
+        top: 0,
+        left: 0,
+      }}
+    >
+      <DotLottieReact
+        src="/loadercalendar.lottie"
+        loop
+        autoplay
+        style={{ width: "175px" }}
+      />
+      <Box
+        component="img"
+        src={twakeLogo}
+        alt="twake workplace"
+        sx={{
+          position: "absolute",
+          bottom: "50px",
+          left: "50%",
+          transform: "translateX(-50%)",
+          width: "210px",
+        }}
+      />
+    </Box>
+  );
 }