Skip to content

Commit e253b01

Browse files
aslilacaslilac
committed
emotion: ExternalAuthPageView 
1 parent 35b1ea0 commit e253b01

File tree

1 file changed

+33
-37
lines changed

1 file changed

+33
-37
lines changed

‎site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx

Lines changed: 33 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1+
import { type Interpolation, type Theme } from "@emotion/react";
12
import OpenInNewIcon from "@mui/icons-material/OpenInNew";
23
import RefreshIcon from "@mui/icons-material/Refresh";
34
import CircularProgress from "@mui/material/CircularProgress";
45
import Link from "@mui/material/Link";
56
import Tooltip from "@mui/material/Tooltip";
6-
import { makeStyles } from "@mui/styles";
7-
import { ApiErrorResponse } from "api/errors";
8-
import { ExternalAuth, ExternalAuthDevice } from "api/typesGenerated";
7+
import type { ApiErrorResponse } from "api/errors";
8+
import type { ExternalAuth, ExternalAuthDevice } from "api/typesGenerated";
99
import { Alert } from "components/Alert/Alert";
1010
import { Avatar } from "components/Avatar/Avatar";
1111
import { CopyButton } from "components/CopyButton/CopyButton";
1212
import { SignInLayout } from "components/SignInLayout/SignInLayout";
1313
import { Welcome } from "components/Welcome/Welcome";
14-
import { type FC } from "react";
14+
import { type FC, type ReactNode } from "react";
1515

1616
export interface ExternalAuthPageViewProps {
1717
externalAuth: ExternalAuth;
@@ -30,8 +30,6 @@ const ExternalAuthPageView: FC<ExternalAuthPageViewProps> = ({
3030
onReauthenticate,
3131
viewExternalAuthConfig,
3232
}) => {
33-
const styles = useStyles();
34-
3533
if (!externalAuth.authenticated) {
3634
return (
3735
<SignInLayout>
@@ -50,7 +48,7 @@ const ExternalAuthPageView: FC<ExternalAuthPageViewProps> = ({
5048
const hasInstallations = externalAuth.installations.length > 0;
5149

5250
// We only want to wrap this with a link if an install URL is available!
53-
let installTheApp: React.ReactNode = `install the ${externalAuth.display_name} App`;
51+
let installTheApp: ReactNode = `install the ${externalAuth.display_name} App`;
5452
if (externalAuth.app_install_url) {
5553
installTheApp = (
5654
<Link
@@ -68,15 +66,15 @@ const ExternalAuthPageView: FC<ExternalAuthPageViewProps> = ({
6866
<Welcome
6967
message={`You've authenticated with ${externalAuth.display_name}!`}
7068
/>
71-
<p className={styles.text}>
69+
<p css={styles.text}>
7270
{externalAuth.user?.login && `Hey @${externalAuth.user?.login}! 👋 `}
7371
{(!externalAuth.app_installable ||
7472
externalAuth.installations.length > 0) &&
7573
"You are now authenticated. Feel free to close this window!"}
7674
</p>
7775

7876
{externalAuth.installations.length > 0 && (
79-
<div className={styles.authorizedInstalls}>
77+
<div css={styles.authorizedInstalls}>
8078
{externalAuth.installations.map((install) => {
8179
if (!install.account) {
8280
return;
@@ -105,9 +103,9 @@ const ExternalAuthPageView: FC<ExternalAuthPageViewProps> = ({
105103
</div>
106104
)}
107105

108-
<div className={styles.links}>
106+
<div css={styles.links}>
109107
{!hasInstallations && externalAuth.app_installable && (
110-
<Alert severity="warning" className={styles.installAlert}>
108+
<Alert severity="warning" css={styles.installAlert}>
111109
You must {installTheApp} to clone private repositories. Accounts
112110
will appear here once authorized.
113111
</Alert>
@@ -120,7 +118,7 @@ const ExternalAuthPageView: FC<ExternalAuthPageViewProps> = ({
120118
href={externalAuth.app_install_url}
121119
target="_blank"
122120
rel="noreferrer"
123-
className={styles.link}
121+
css={styles.link}
124122
>
125123
<OpenInNewIcon fontSize="small" />
126124
{externalAuth.installations.length > 0
@@ -130,7 +128,7 @@ const ExternalAuthPageView: FC<ExternalAuthPageViewProps> = ({
130128
</Link>
131129
)}
132130
<Link
133-
className={styles.link}
131+
css={styles.link}
134132
href="#"
135133
onClick={() => {
136134
onReauthenticate();
@@ -147,10 +145,8 @@ const GitDeviceAuth: FC<{
147145
externalAuthDevice?: ExternalAuthDevice;
148146
deviceExchangeError?: ApiErrorResponse;
149147
}> = ({ externalAuthDevice, deviceExchangeError }) => {
150-
const styles = useStyles();
151-
152148
let status = (
153-
<p className={styles.status}>
149+
<p css={styles.status}>
154150
<CircularProgress size={16} color="secondary" data-chromatic="ignore" />
155151
Checking for authentication...
156152
</p>
@@ -189,18 +185,18 @@ const GitDeviceAuth: FC<{
189185

190186
return (
191187
<div>
192-
<p className={styles.text}>
188+
<p css={styles.text}>
193189
Copy your one-time code:&nbsp;
194-
<div className={styles.copyCode}>
195-
<span className={styles.code}>{externalAuthDevice.user_code}</span>
190+
<div css={styles.copyCode}>
191+
<span css={styles.code}>{externalAuthDevice.user_code}</span>
196192
&nbsp; <CopyButton text={externalAuthDevice.user_code} />
197193
</div>
198194
<br />
199195
Then open the link below and paste it:
200196
</p>
201-
<div className={styles.links}>
197+
<div css={styles.links}>
202198
<Link
203-
className={styles.link}
199+
css={styles.link}
204200
href={externalAuthDevice.verification_uri}
205201
target="_blank"
206202
rel="noreferrer"
@@ -217,56 +213,56 @@ const GitDeviceAuth: FC<{
217213

218214
export default ExternalAuthPageView;
219215

220-
const useStyles = makeStyles((theme) => ({
221-
text: {
216+
const styles = {
217+
text: (theme) => ({
222218
fontSize: 16,
223219
color: theme.palette.text.secondary,
224220
textAlign: "center",
225221
lineHeight: "160%",
226222
margin: 0,
227-
},
223+
}),
228224

229225
copyCode: {
230226
display: "inline-flex",
231227
alignItems: "center",
232228
},
233229

234-
code: {
230+
code: (theme) => ({
235231
fontWeight: "bold",
236232
color: theme.palette.text.primary,
237-
},
233+
}),
238234

239-
installAlert: {
235+
installAlert: (theme) => ({
240236
margin: theme.spacing(2),
241-
},
237+
}),
242238

243-
links: {
239+
links: (theme) => ({
244240
display: "flex",
245241
gap: theme.spacing(0.5),
246242
margin: theme.spacing(2),
247243
flexDirection: "column",
248-
},
244+
}),
249245

250-
link: {
246+
link: (theme) => ({
251247
display: "flex",
252248
alignItems: "center",
253249
justifyContent: "center",
254250
fontSize: 16,
255251
gap: theme.spacing(1),
256-
},
252+
}),
257253

258-
status: {
254+
status: (theme) => ({
259255
display: "flex",
260256
alignItems: "center",
261257
justifyContent: "center",
262258
gap: theme.spacing(1),
263259
color: theme.palette.text.disabled,
264-
},
260+
}),
265261

266-
authorizedInstalls: {
262+
authorizedInstalls: (theme) => ({
267263
display: "flex",
268264
gap: 4,
269265
color: theme.palette.text.disabled,
270266
margin: theme.spacing(4),
271-
},
272-
}));
267+
}),
268+
} satisfies Record<string, Interpolation<Theme>>;

0 commit comments

Comments
 (0)