@@ -3,30 +3,28 @@ import Button from "@mui/material/Button";
33import GitHubIcon from "@mui/icons-material/GitHub" ;
44import KeyIcon from "@mui/icons-material/VpnKey" ;
55import Box from "@mui/material/Box" ;
6+ import { type FC } from "react" ;
7+ import { useTheme } from "@emotion/react" ;
68import { Language } from "./SignInForm" ;
7- import { AuthMethods } from "api/typesGenerated" ;
8- import { FC } from "react" ;
9- import { makeStyles } from "@mui/styles" ;
9+ import { type AuthMethods } from "api/typesGenerated" ;
1010
1111type OAuthSignInFormProps = {
1212isSigningIn :boolean ;
1313redirectTo :string ;
1414authMethods ?:AuthMethods ;
1515} ;
1616
17- const useStyles = makeStyles ( ( theme ) => ( {
18- buttonIcon :{
19- width :theme . spacing ( 2 ) ,
20- height :theme . spacing ( 2 ) ,
21- } ,
22- } ) ) ;
23-
2417export const OAuthSignInForm :FC < OAuthSignInFormProps > = ( {
2518 isSigningIn,
2619 redirectTo,
2720 authMethods,
2821} ) => {
29- const styles = useStyles ( ) ;
22+ const theme = useTheme ( ) ;
23+
24+ const iconStyles = {
25+ width :theme . spacing ( 2 ) ,
26+ height :theme . spacing ( 2 ) ,
27+ } ;
3028
3129return (
3230< Box display = "grid" gap = "16px" >
@@ -37,7 +35,7 @@ export const OAuthSignInForm: FC<OAuthSignInFormProps> = ({
3735) } }
3836>
3937< Button
40- startIcon = { < GitHubIcon className = { styles . buttonIcon } /> }
38+ startIcon = { < GitHubIcon css = { iconStyles } /> }
4139disabled = { isSigningIn }
4240fullWidth
4341type = "submit"
@@ -61,10 +59,10 @@ export const OAuthSignInForm: FC<OAuthSignInFormProps> = ({
6159< img
6260alt = "Open ID Connect icon"
6361src = { authMethods . oidc . iconUrl }
64- className = { styles . buttonIcon }
62+ css = { iconStyles }
6563/>
6664) :(
67- < KeyIcon className = { styles . buttonIcon } />
65+ < KeyIcon css = { iconStyles } />
6866)
6967}
7068disabled = { isSigningIn }