chore(frontend): remove @mui/styles, replace react-lottie with lottie-react and remove legacy-peer-deps in Dockerfile

frontend/Dockerfile

@@ -2,7 +2,7 @@
 FROM node:18-alpine AS build
 WORKDIR /app
 COPY package.json ./
-RUN npm install --silent --legacy-peer-deps
+RUN npm install --silent
 COPY . ./
 ENV NODE_OPTIONS=--openssl-legacy-provider
 RUN npm run build

frontend/package.json

@@ -5,7 +5,6 @@
   "dependencies": {
   "@mui/material": "^5.14.0",
   "@mui/icons-material": "^5.14.0",
-  "@mui/styles": "^5.14.0",
   "@emotion/react": "^11.11.0",
   "@emotion/styled": "^11.11.0",
     "@testing-library/jest-dom": "^5.11.9",
@@ -17,7 +16,7 @@
     "react-code-blocks": "^0.0.8",
     "react-dropzone": "^11.3.1",
   "react-helmet": "^6.1.0",
-    "react-lottie": "^1.2.3",
+  "lottie-react": "^2.4.0",
     "react-router-dom": "^6.28.0",
     "react-scripts": "5.0.1",
     "sass": "^1.32.8",

frontend/src/Components/ComponentUtils/LoadingAnimation/Loading.js

@@ -1,26 +1,17 @@
 import '../../../App.css'
 
-import Lottie from 'react-lottie';
+import Lottie from 'lottie-react';
 import animationData from './animation.json';
 
 export default function Loading() {
-  const defaultOptions = {
+  return (
-    loop: true,
-    autoplay: true,
-    animationData: animationData,
-    rendererSettings: {
-      preserveAspectRatio: "xMidYMid slice"
-    },
-  };
-
-return (
     <div className="loading">
       <Lottie 
-        options={defaultOptions}
+        animationData={animationData}
-        height={400}
+        loop={true}
-        width={400}
+        autoplay={true}
-        isClickToPauseDisabled={true} 
+        style={{ width: 400, height: 400 }}
       />
     </div>
-  )
+  );
 }