Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 8ef2a58

Browse files
aslilacaslilac
committed
emotion: RuntimeErrorState 
1 parent 98b6c8b commit 8ef2a58

File tree

1 file changed

+48
-51
lines changed

1 file changed

+48
-51
lines changed

‎site/src/components/ErrorBoundary/RuntimeErrorState.tsx

Lines changed: 48 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import Button from "@mui/material/Button";
22
import Link from "@mui/material/Link";
3-
import { makeStyles } from "@mui/styles";
43
import RefreshOutlined from "@mui/icons-material/RefreshOutlined";
5-
import { BuildInfoResponse } from "api/typesGenerated";
4+
import { type FC, useEffect, useState } from "react";
5+
import { Helmet } from "react-helmet-async";
6+
import { css } from "@emotion/css";
7+
import { useTheme, type Interpolation, type Theme } from "@emotion/react";
8+
import type { BuildInfoResponse } from "api/typesGenerated";
69
import { CopyButton } from "components/CopyButton/CopyButton";
710
import { CoderIcon } from "components/Icons/CoderIcon";
811
import { FullScreenLoader } from "components/Loader/FullScreenLoader";
912
import { Stack } from "components/Stack/Stack";
10-
import { FC, useEffect, useState } from "react";
11-
import { Helmet } from "react-helmet-async";
1213
import { Margins } from "components/Margins/Margins";
1314

1415
const fetchDynamicallyImportedModuleError =
@@ -17,7 +18,7 @@ const fetchDynamicallyImportedModuleError =
1718
export type RuntimeErrorStateProps = { error: Error };
1819

1920
export const RuntimeErrorState: FC<RuntimeErrorStateProps> = ({ error }) => {
20-
const styles = useStyles();
21+
const theme = useTheme();
2122
const [checkingError, setCheckingError] = useState(true);
2223
const [staticBuildInfo, setStaticBuildInfo] = useState<BuildInfoResponse>();
2324
const coderVersion = staticBuildInfo?.version;
@@ -52,11 +53,11 @@ export const RuntimeErrorState: FC<RuntimeErrorStateProps> = ({ error }) => {
5253
<title>Something went wrong...</title>
5354
</Helmet>
5455
{!checkingError ? (
55-
<Margins className={styles.root}>
56-
<div className={styles.innerRoot}>
57-
<CoderIcon className={styles.logo} />
58-
<h1 className={styles.title}>Something went wrong...</h1>
59-
<p className={styles.text}>
56+
<Margins css={styles.root}>
57+
<div css={{ width: "100%" }}>
58+
<CoderIcon css={styles.logo} />
59+
<h1 css={styles.title}>Something went wrong...</h1>
60+
<p css={styles.text}>
6061
Please try reloading the page, if that doesn&lsquo;t work, you can
6162
ask for help in the{" "}
6263
<Link href="https://discord.gg/coder">
@@ -93,20 +94,33 @@ export const RuntimeErrorState: FC<RuntimeErrorStateProps> = ({ error }) => {
9394
</Button>
9495
</Stack>
9596
{error.stack && (
96-
<div className={styles.stack}>
97-
<div className={styles.stackHeader}>
97+
<div css={styles.stack}>
98+
<div css={styles.stackHeader}>
9899
Stacktrace
99100
<CopyButton
100-
buttonClassName={styles.copyButton}
101+
buttonClassName={css`
102+
backgroundcolor: transparent;
103+
border: 0;
104+
borderradius: 999;
105+
minheight: ${theme.spacing(4)};
106+
minwidth: ${theme.spacing(4)};
107+
height: ${theme.spacing(4)};
108+
width: ${theme.spacing(4)};
109+
110+
& svg {
111+
width: 16px;
112+
height: 16px;
113+
}
114+
`}
101115
text={error.stack}
102116
tooltipTitle="Copy stacktrace"
103117
/>
104118
</div>
105-
<pre className={styles.stackCode}>{error.stack}</pre>
119+
<pre css={styles.stackCode}>{error.stack}</pre>
106120
</div>
107121
)}
108122
{coderVersion && (
109-
<div className={styles.version}>Version: {coderVersion}</div>
123+
<div css={styles.version}>Version: {coderVersion}</div>
110124
)}
111125
</div>
112126
</Margins>
@@ -132,8 +146,8 @@ const getStaticBuildInfo = () => {
132146
}
133147
};
134148

135-
const useStyles = makeStyles((theme) => ({
136-
root: {
149+
const styles = {
150+
root: (theme) => ({
137151
paddingTop: theme.spacing(4),
138152
paddingBottom: theme.spacing(4),
139153
textAlign: "center",
@@ -142,36 +156,34 @@ const useStyles = makeStyles((theme) => ({
142156
justifyContent: "center",
143157
minHeight: "100%",
144158
maxWidth: theme.spacing(75),
145-
},
159+
}),
146160

147-
innerRoot: { width: "100%" },
148-
149-
logo: {
161+
logo: (theme) => ({
150162
fontSize: theme.spacing(8),
151-
},
163+
}),
152164

153-
title: {
165+
title: (theme) => ({
154166
fontSize: theme.spacing(4),
155167
fontWeight: 400,
156-
},
168+
}),
157169

158-
text: {
170+
text: (theme) => ({
159171
fontSize: 16,
160172
color: theme.palette.text.secondary,
161173
lineHeight: "160%",
162174
marginBottom: theme.spacing(4),
163-
},
175+
}),
164176

165-
stack: {
177+
stack: (theme) => ({
166178
backgroundColor: theme.palette.background.paper,
167179
border: `1px solid ${theme.palette.divider}`,
168180
borderRadius: 4,
169181
marginTop: theme.spacing(8),
170182
display: "block",
171183
textAlign: "left",
172-
},
184+
}),
173185

174-
stackHeader: {
186+
stackHeader: (theme) => ({
175187
fontSize: 10,
176188
textTransform: "uppercase",
177189
fontWeight: 600,
@@ -184,33 +196,18 @@ const useStyles = makeStyles((theme) => ({
184196
flexAlign: "center",
185197
justifyContent: "space-between",
186198
alignItems: "center",
187-
},
199+
}),
188200

189-
stackCode: {
201+
stackCode: (theme) => ({
190202
padding: theme.spacing(2),
191203
margin: 0,
192204
wordWrap: "break-word",
193205
whiteSpace: "break-spaces",
194-
},
195-
196-
copyButton: {
197-
backgroundColor: "transparent",
198-
border: 0,
199-
borderRadius: 999,
200-
minHeight: theme.spacing(4),
201-
minWidth: theme.spacing(4),
202-
height: theme.spacing(4),
203-
width: theme.spacing(4),
204-
205-
"& svg": {
206-
width: 16,
207-
height: 16,
208-
},
209-
},
210-
211-
version: {
206+
}),
207+
208+
version: (theme) => ({
212209
marginTop: theme.spacing(4),
213210
fontSize: 12,
214211
color: theme.palette.text.secondary,
215-
},
216-
}));
212+
}),
213+
} satisfies Record<string, Interpolation<Theme>>;

0 commit comments

Comments
 (0)