moved project to docker

code/frontend/src/api/axios.ts

@@ -3,8 +3,18 @@ import { refreshToken } from "./refreshToken";
 
 const excludedUrls: string[] = ["/user/login", "/user/register"];
 
+const getBaseUrl: () => string = () => {
+  // In production builds, NODE_ENV will be "production"
+  if (process.env.NODE_ENV === "production") {
+    // Use relative path when deployed with Express backend
+    return "/api";
+  } else {
+    // Use full URL in development
+    return "http://localhost:3001/api";
+  }
+};
 const api = axios.create({
-  baseURL: "http://localhost:3001/api",
+  baseURL: getBaseUrl(),
   withCredentials: true,
 });
 

code/frontend/src/components/profile/Bio.tsx

@@ -8,7 +8,15 @@ import EditSquareIcon from "@mui/icons-material/EditSquare";
 import ButtonPrimary from "../buttons/buttonRotkehlchen/ButtonRotkehlchen";
 import api from "../../api/axios";
 
-export default function BioTextField({ ownAccount, bioText, setBio } : { ownAccount: boolean, bioText: string | undefined, setBio: (bio: string) => void }) {
+export default function BioTextField({
+  ownAccount,
+  bioText,
+  setBio,
+}: {
+  ownAccount: boolean;
+  bioText: string | undefined;
+  setBio: (bio: string) => void;
+}) {
   const [oldBio, setOldbio] = useState<string>(bioText || "");
   const [editMode, setEditable] = useState(false);
 
@@ -31,11 +39,11 @@ export default function BioTextField({ ownAccount, bioText, setBio } : { ownAcco
     } catch (error) {
       console.error("Error saving bio: ", error);
     }
-  }
+  };
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setBio(event.target.value);
-  }
+  };
 
   return (
     <StyledEngineProvider injectFirst>

code/frontend/src/components/profile/bio.css

@@ -1,35 +1,41 @@
 .bio-input {
-    margin: 0.5rem;
+  margin: 0.5rem;
 }
 
-.css-53g0n7-MuiButtonBase-root-MuiIconButton-root {
-  justify-content: end;
+/* Wichtiger: Verwende wichtige Basis-Selektoren, die sich nicht ändern */
+.bio-input.MuiTextField-root .MuiOutlinedInput-root {
+  color: var(--Rotkehlchen-gray) !important;
+  background-color: transparent !important; /* Expliziter Hintergrund */
 }
 
-/* Root class for the input field */
-.bio-input .MuiOutlinedInput-root {
-  color: var(--Rotkehlchen-gray);
+/* Für Textfarbe innerhalb des Inputs */
+.bio-input.MuiTextField-root .MuiOutlinedInput-input {
+  color: var(--Rotkehlchen-gray) !important;
+  -webkit-text-fill-color: var(--Rotkehlchen-gray) !important;
 }
-/* Class for the border around the input field */
-.bio-input .MuiOutlinedInput-notchedOutline {
-    border-color: var(--Rotkehlchen-brown-light);
+
+/* Rahmen */
+.bio-input.MuiTextField-root .MuiOutlinedInput-notchedOutline {
+  border-color: var(--Rotkehlchen-brown-light) !important;
 }
-/* Class for the label of the input field */
-.bio-input .MuiInputLabel-outlined {
-    color: var(--Rotkehlchen-brown-light);
+
+/* Label */
+.bio-input.MuiTextField-root .MuiInputLabel-root {
+  color: var(--Rotkehlchen-brown-light) !important;
 }
-/* Class for the border in focused state */
-.bio-input .Mui-focused .MuiOutlinedInput-notchedOutline {
-    border-color: var(--Rotkehlchen-yellow-default);
+
+/* Fokus-Zustand */
+.bio-input.MuiTextField-root .Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: var(--Rotkehlchen-yellow-default) !important;
 }
-/* Disabled input field text and border color */
-.bio-input .css-w4nesw-MuiInputBase-input-MuiOutlinedInput-input.Mui-disabled {
-  -webkit-text-fill-color: var(--Rotkehlchen-gray);
+
+/* Deaktivierter Zustand */
+.bio-input.MuiTextField-root .Mui-disabled .MuiOutlinedInput-input {
+  -webkit-text-fill-color: var(--Rotkehlchen-gray) !important;
 }
-.bio-input
-  .MuiInputBase-root.MuiOutlinedInput-root.Mui-disabled
-  .MuiOutlinedInput-notchedOutline {
-  border-color: transparent;
+
+.bio-input.MuiTextField-root .Mui-disabled .MuiOutlinedInput-notchedOutline {
+  border-color: transparent !important;
 }
 
 @media only screen and (min-width: 768px) {
@@ -37,12 +43,13 @@
     width: 100%;
     margin-bottom: 1rem;
   }
-  .bio-input .MuiInputLabel-outlined {
-    font-size: 18px;
+
+  .bio-input.MuiTextField-root .MuiInputLabel-root {
+    font-size: 18px !important;
   }
-  .bio-input .MuiOutlinedInput-input {
-    font-size: 18px;
-    padding: 10px;
+
+  .bio-input.MuiTextField-root .MuiOutlinedInput-input {
+    font-size: 18px !important;
+    padding: 10px !important;
   }
-    
-}
+}

code/frontend/src/pages/404Page/NotFoundPage.tsx

@@ -75,7 +75,6 @@ export const NotFound = () => {
   }, []);
 
   useEffect(() => {
-    let lastBlockTime = Date.now();
     let animationId: number;
 
     function loop() {
@@ -87,7 +86,7 @@ export const NotFound = () => {
 
       velocityRef.current += GRAVITY;
       birdPosRef.current.y += velocityRef.current;
-      setRotation(Math.max(Math.min(velocityRef.current * 2, 90), -15));
+      setRotation(Math.max(Math.min(velocityRef.current * 4, 90), -15));
 
       textPosRef.current -= speedRef.current;
       setTextPos(textPosRef.current);

code/frontend/src/pages/profile.css

@@ -58,3 +58,20 @@
   }
 
 }
+.MuiImageListItem-root {
+  height: auto !important;
+  width: auto !important;
+}
+
+.MuiImageListItem-img {
+  height: 5rem !important;
+  width: 5rem !important;
+  object-fit: cover !important;
+}
+
+@media only screen and (min-width: 768px) {
+  .MuiImageListItem-img {
+    height: 15rem !important;
+    width: 15rem !important;
+  }
+}