1- import { makeStyles } from "@mui/styles " ;
1+ import { css , useTheme } from "@emotion/react " ;
22import Table from "@mui/material/Table" ;
33import TableBody from "@mui/material/TableBody" ;
44import TableCell from "@mui/material/TableCell" ;
55import TableContainer from "@mui/material/TableContainer" ;
66import TableHead from "@mui/material/TableHead" ;
77import TableRow from "@mui/material/TableRow" ;
8- import { DeploymentValues , ExternalAuthConfig } from "api/typesGenerated" ;
8+ import type { DeploymentValues , ExternalAuthConfig } from "api/typesGenerated" ;
99import { Alert } from "components/Alert/Alert" ;
1010import { EnterpriseBadge } from "components/DeploySettingsLayout/Badges" ;
1111import { Header } from "components/DeploySettingsLayout/Header" ;
@@ -18,7 +18,7 @@ export type ExternalAuthSettingsPageViewProps = {
1818export const ExternalAuthSettingsPageView = ( {
1919 config,
2020} :ExternalAuthSettingsPageViewProps ) :JSX . Element => {
21- const styles = useStyles ( ) ;
21+ const theme = useTheme ( ) ;
2222
2323return (
2424< >
@@ -40,15 +40,32 @@ export const ExternalAuthSettingsPageView = ({
4040} }
4141/>
4242
43- < div className = { styles . description } >
43+ < div
44+ css = { {
45+ marginTop :theme . spacing ( 3 ) ,
46+ marginBottom :theme . spacing ( 3 ) ,
47+ } }
48+ >
4449< Alert severity = "info" actions = { < EnterpriseBadge key = "enterprise" /> } >
4550 Integrating with multiple External authentication providers is an
4651 Enterprise feature.
4752</ Alert >
4853</ div >
4954
5055< TableContainer >
51- < Table className = { styles . table } >
56+ < Table
57+ css = { css `
58+ & td {
59+ padding-top : ${ theme . spacing ( 3 ) }
60+ padding-bottom : ${ theme . spacing ( 3 ) }
61+ }
62+
63+ & td : last-child ,
64+ & th : last-child {
65+ padding-left : ${ theme . spacing ( 4 ) }
66+ }
67+ ` }
68+ >
5269< TableHead >
5370< TableRow >
5471< TableCell width = "25%" > ID</ TableCell >
@@ -61,7 +78,7 @@ export const ExternalAuthSettingsPageView = ({
6178config . external_auth ?. length === 0 ) && (
6279< TableRow >
6380< TableCell colSpan = { 999 } >
64- < div className = { styles . empty } >
81+ < div css = { { textAlign : "center" } } >
6582 No providers have been configured!
6683</ div >
6784</ TableCell >
@@ -83,23 +100,3 @@ export const ExternalAuthSettingsPageView = ({
83100</ >
84101) ;
85102} ;
86-
87- const useStyles = makeStyles ( ( theme ) => ( {
88- table :{
89- "& td" :{
90- paddingTop :theme . spacing ( 3 ) ,
91- paddingBottom :theme . spacing ( 3 ) ,
92- } ,
93-
94- "& td:last-child, & th:last-child" :{
95- paddingLeft :theme . spacing ( 4 ) ,
96- } ,
97- } ,
98- description :{
99- marginTop :theme . spacing ( 3 ) ,
100- marginBottom :theme . spacing ( 3 ) ,
101- } ,
102- empty :{
103- textAlign :"center" ,
104- } ,
105- } ) ) ;