refactor: replace MUI components and refactor styles (#18082)

**Before:**
<img width="1196" alt="Screenshot 2025-05-28 at 13 26 03"
src="https://github.com/user-attachments/assets/86c2830e-6777-441c-aedc-64fef472e369"
/>


**After:**
<img width="1197" alt="Screenshot 2025-05-28 at 13 24 19"
src="https://github.com/user-attachments/assets/08e2dc4e-424a-43d8-a343-0ac8e03c9948"
/>
This commit is contained in:
Bruno Quaresma
2025-05-29 08:27:52 -03:00
committed by GitHub
parent b712d0b23f
commit 5f34d01906
@@ -1,6 +1,6 @@
import Link from "@mui/material/Link";
import { Button } from "components/Button/Button";
import { CoderIcon } from "components/Icons/CoderIcon";
import { Link } from "components/Link/Link";
import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata";
import { type FC, useState } from "react";
import { Helmet } from "react-helmet-async";
@@ -43,14 +43,14 @@ export const GlobalErrorBoundaryInner: FC<GlobalErrorBoundaryInnerProps> = ({
<CoderIcon className="w-11 h-11" />
<div className="text-content-primary flex flex-col gap-1">
<h1 className="text-2xl font-normal m-0">{errorPageTitle}</h1>
<p className="leading-6 m-0">
<h1 className="text-2xl font-semibold m-0">{errorPageTitle}</h1>
<p className="leading-6 m-0 text-content-secondary text-sm">
Please try reloading the page. If reloading does not work, you can
ask for help in the{" "}
<Link
href="https://discord.gg/coder"
target="_blank"
rel="noreferer"
rel="noreferrer"
>
Coder Discord community
<span className="sr-only"> (link opens in a new tab)</span>
@@ -58,7 +58,7 @@ export const GlobalErrorBoundaryInner: FC<GlobalErrorBoundaryInnerProps> = ({
or{" "}
<Link
target="_blank"
rel="noreferer"
rel="noreferrer"
href={publicGithubIssueLink(
coderVersion,
location.pathname,
@@ -73,9 +73,9 @@ export const GlobalErrorBoundaryInner: FC<GlobalErrorBoundaryInnerProps> = ({
</div>
</div>
<div className="flex flex-row flex-nowrap justify-center gap-4">
<Button asChild className="min-w-32 font-medium">
<Link href={location.pathname}>Reload page</Link>
<div className="flex flex-row flex-nowrap justify-center gap-2">
<Button asChild className="min-w-32 ">
<a href={location.pathname}>Reload page</a>
</Button>
{isRenderableError && (