Loading alert styling

src/components/Dashboard.tsx

@@ -30,7 +30,7 @@ export default function Dashboard() {
         setLoadingEnv(true);
 
         dashboardApi
-            .getFake(envTab.dashboardEndpoint)
+            .get(envTab.dashboardEndpoint)
             .then((response) => {
                 return response.data.content;
             })

src/components/LoadingError.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { DashboardLoadError } from "../types";
 import Alert from "@mui/material/Alert";
 import AlertTitle from "@mui/material/AlertTitle";
+import Paper from "@mui/material/Paper";
 
 interface LoadingErrorProps {
     error: DashboardLoadError;
@@ -9,9 +10,11 @@ interface LoadingErrorProps {
 
 export default function LoadingError({ error }: LoadingErrorProps) {
     return (
-        <Alert severity="error">
-            <AlertTitle>{error.message}</AlertTitle>
-            <p>URL: {error.url}</p>
-        </Alert>
+        <Paper className="loading-error-container">
+            <Alert className="loading-error-alert" severity="error">
+                <AlertTitle className="loading-error-alert-title">{error.message}</AlertTitle>
+                <p>URL: {error.url}</p>
+            </Alert>
+        </Paper>
     );
 }

src/scss/_loading-error-alert.scss

@@ -0,0 +1,10 @@
+.loading-error-container {
+    margin: 2rem auto;
+    max-width: 600px;
+    .loading-error-alert-title {
+        font-weight: bold;
+    }
+    p {
+        margin-bottom: 0;
+    }
+}

src/scss/styles.scss

@@ -2,6 +2,7 @@
 @import "common";
 @import "app-header";
 @import "linear-progress";
+@import "loading-error-alert";
 @import "env-tabs-switcher";
 @import "environment-list";
 @import "tenant-list";