Loading alert styling

This commit is contained in:
Eden Kirin
2024-01-28 12:46:55 +01:00
parent 0c86009271
commit f6b1dc6562
4 changed files with 19 additions and 5 deletions

View File

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

View File

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

View File

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

View File

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