From a44a85be7332b9bd200e2843c0eee472c35a5246 Mon Sep 17 00:00:00 2001
From: "matthias.lotz" <matthias.lotz@hobbyhimmel.de>
Date: Wed, 29 Oct 2025 21:49:09 +0100
Subject: [PATCH] chore(frontend): remove @mui/styles, replace react-lottie
 with lottie-react and remove legacy-peer-deps in Dockerfile

---
 frontend/Dockerfile                           |  2 +-
 frontend/package.json                         |  5 ++--
 .../LoadingAnimation/Loading.js               | 23 ++++++-------------
 3 files changed, 10 insertions(+), 20 deletions(-)

diff --git a/frontend/Dockerfile b/frontend/Dockerfile
index 124408e..d0b9c9a 100644
--- a/frontend/Dockerfile
+++ b/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
diff --git a/frontend/package.json b/frontend/package.json
index 0828314..d3c86b9 100644
--- a/frontend/package.json
+++ b/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",
@@ -16,8 +15,8 @@
     "react-dom": "^18.3.1",
     "react-code-blocks": "^0.0.8",
     "react-dropzone": "^11.3.1",
-    "react-helmet": "^6.1.0",
-    "react-lottie": "^1.2.3",
+  "react-helmet": "^6.1.0",
+  "lottie-react": "^2.4.0",
     "react-router-dom": "^6.28.0",
     "react-scripts": "5.0.1",
     "sass": "^1.32.8",
diff --git a/frontend/src/Components/ComponentUtils/LoadingAnimation/Loading.js b/frontend/src/Components/ComponentUtils/LoadingAnimation/Loading.js
index bef8616..ccd7b72 100644
--- a/frontend/src/Components/ComponentUtils/LoadingAnimation/Loading.js
+++ b/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 = {
-    loop: true,
-    autoplay: true,
-    animationData: animationData,
-    rendererSettings: {
-      preserveAspectRatio: "xMidYMid slice"
-    },
-  };
-
-return (
+  return (
     <div className="loading">
       <Lottie 
-        options={defaultOptions}
-        height={400}
-        width={400}
-        isClickToPauseDisabled={true} 
+        animationData={animationData}
+        loop={true}
+        autoplay={true}
+        style={{ width: 400, height: 400 }}
       />
     </div>
-  )
+  );
 }