Skip to content

Commit af7d38b

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Imrove layout
1 parent c00d1f0 commit af7d38b

File tree

2 files changed

+44
-34
lines changed

2 files changed

+44
-34
lines changed

‎site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx

Lines changed: 41 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -49,17 +49,24 @@ export const SettingsHeader: React.FC<{
4949
title: string
5050
description: string | JSX.Element
5151
isEnterprise?: boolean
52+
isEnabled?: boolean
5253
docsHref: string
53-
}> = ({ title, description, isEnterprise, docsHref }) => {
54+
}> = ({ title, description, isEnterprise, docsHref, isEnabled }) => {
5455
const styles = useStyles()
5556

5657
return (
5758
<Stack alignItems="baseline" direction="row" justifyContent="space-between">
5859
<div className={styles.headingGroup}>
59-
<h1 className={styles.title}>
60-
{title}
60+
<Stack direction="row" alignItems="center" className={styles.badges} spacing={1}>
61+
{isEnabled ? (
62+
<span className={styles.enabledBadge}>Enabled</span>
63+
) : (
64+
<span className={styles.disabledBadge}>Enabled</span>
65+
)}
6166
{isEnterprise ? <span className={styles.enterpriseBadge}>Enterprise</span> : null}
62-
</h1>
67+
</Stack>
68+
69+
<h1 className={styles.title}>{title}</h1>
6370
<span className={styles.description}>{description}</span>
6471
</div>
6572

@@ -229,7 +236,7 @@ const useStyles = makeStyles((theme) => ({
229236

230237
headingGroup: {
231238
marginBottom: theme.spacing(3),
232-
maxWidth: 550,
239+
maxWidth: 420,
233240
},
234241

235242
title: {
@@ -239,7 +246,7 @@ const useStyles = makeStyles((theme) => ({
239246
alignItems: "center",
240247
lineHeight: "initial",
241248
margin: 0,
242-
marginBottom: theme.spacing(2),
249+
marginBottom: theme.spacing(1),
243250
},
244251

245252
description: {
@@ -248,19 +255,46 @@ const useStyles = makeStyles((theme) => ({
248255
lineHeight: "160%",
249256
},
250257

258+
badges: {
259+
marginBottom: theme.spacing(2),
260+
},
261+
251262
enterpriseBadge: {
252263
fontSize: 10,
253264
fontWeight: 600,
254265
textTransform: "uppercase",
255266
letterSpacing: "0.085em",
256-
marginLeft: theme.spacing(2),
267+
backgroundColor: theme.palette.info.dark,
268+
padding: theme.spacing(0.5, 2),
269+
borderRadius: 9999,
270+
border: `1px solid ${theme.palette.info.light}`,
271+
lineHeight: "160%",
272+
},
273+
274+
enabledBadge: {
275+
fontSize: 10,
276+
fontWeight: 600,
277+
textTransform: "uppercase",
278+
letterSpacing: "0.085em",
257279
backgroundColor: theme.palette.success.dark,
258280
padding: theme.spacing(0.5, 2),
259281
borderRadius: 9999,
260282
border: `1px solid ${theme.palette.success.light}`,
261283
lineHeight: "160%",
262284
},
263285

286+
disabledBadge: {
287+
fontSize: 10,
288+
fontWeight: 600,
289+
textTransform: "uppercase",
290+
letterSpacing: "0.085em",
291+
backgroundColor: theme.palette.background.paper,
292+
padding: theme.spacing(0.5, 2),
293+
borderRadius: 9999,
294+
border: `1px solid ${theme.palette.divider}`,
295+
lineHeight: "160%",
296+
},
297+
264298
settingsList: {
265299
background: theme.palette.background.paper,
266300
borderRadius: theme.shape.borderRadius,

‎site/src/pages/DeploySettingsPage/OIDCSettingsPage.tsx

Lines changed: 3 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
import Box from "@material-ui/core/Box"
2-
import Typography from "@material-ui/core/Typography"
3-
import CheckIcon from "@material-ui/icons/Check"
4-
import ErrorIcon from "@material-ui/icons/Error"
51
import { useActor } from "@xstate/react"
62
import {
73
DeploySettingsLayout,
@@ -22,33 +18,13 @@ export const OIDCSettingsPage: React.FC = () => {
2218
return (
2319
<DeploySettingsLayout>
2420
<SettingsHeader
21+
isEnabled={authState.context.methods?.oidc}
22+
isEnterprise
2523
title="OpenID Connect"
26-
description="Configure external authentication to sign in to Coder."
24+
description="Configure external authentication to sign in to Coder. Use the command-line options in our documentation."
2725
docsHref="https://coder.com/docs/coder-oss/latest/admin/auth#openid-connect-with-google"
2826
/>
29-
<Box display="flex" alignItems="center">
30-
{authState.context.methods?.oidc ? (
31-
<>
32-
<CheckIcon color="primary" /> <Typography color="primary">Enabled</Typography>
33-
</>
34-
) : (
35-
<>
36-
<ErrorIcon color="secondary" /> <Typography color="secondary">Disabled</Typography>
37-
</>
38-
)}
39-
</Box>
40-
<Typography>
41-
Configure OpenID connect using command-line options in our documentation.
42-
</Typography>
4327
<SettingsList>
44-
<SettingsItem
45-
title="Allow Signups"
46-
description="Whether new users can sign up with OIDC."
47-
values={[
48-
{ label: "Value", value: "true" },
49-
]}
50-
/>
51-
5228
<SettingsItem
5329
title="Address"
5430
description="The address to serve the API and dashboard."

0 commit comments

Comments
 (0)