1- import { makeStyles } from "@mui/styles " ;
2- import { FC } from "react" ;
1+ import { type Interpolation , type Theme } from "@emotion/react " ;
2+ import { type FC } from "react" ;
33import { useLocation } from "react-router-dom" ;
44import { SignInForm } from "./SignInForm" ;
55import { retrieveRedirect } from "utils/redirect" ;
66import { CoderIcon } from "components/Icons/CoderIcon" ;
77import { getApplicationName , getLogoURL } from "utils/appearance" ;
8- import { AuthMethods } from "api/typesGenerated" ;
8+ import type { AuthMethods } from "api/typesGenerated" ;
99
1010export interface LoginPageViewProps {
1111authMethods :AuthMethods | undefined ;
@@ -22,7 +22,6 @@ export const LoginPageView: FC<LoginPageViewProps> = ({
2222} ) => {
2323const location = useLocation ( ) ;
2424const redirectTo = retrieveRedirect ( location . search ) ;
25- const styles = useStyles ( ) ;
2625// This allows messages to be displayed at the top of the sign in form.
2726// Helpful for any redirects that want to inform the user of something.
2827const info = new URLSearchParams ( location . search ) . get ( "info" ) || undefined ;
@@ -41,12 +40,12 @@ export const LoginPageView: FC<LoginPageViewProps> = ({
4140} }
4241/>
4342) :(
44- < CoderIcon fill = "white" opacity = { 1 } className = { styles . icon } />
43+ < CoderIcon fill = "white" opacity = { 1 } css = { styles . icon } />
4544) ;
4645
4746return (
48- < div className = { styles . root } >
49- < div className = { styles . container } >
47+ < div css = { styles . root } >
48+ < div css = { styles . container } >
5049{ applicationLogo }
5150< SignInForm
5251authMethods = { authMethods }
@@ -56,40 +55,40 @@ export const LoginPageView: FC<LoginPageViewProps> = ({
5655info = { info }
5756onSubmit = { onSignIn }
5857/>
59- < footer className = { styles . footer } >
58+ < footer css = { styles . footer } >
6059 Copyright ©{ new Date ( ) . getFullYear ( ) } Coder Technologies, Inc.
6160</ footer >
6261</ div >
6362</ div >
6463) ;
6564} ;
6665
67- const useStyles = makeStyles ( ( theme ) => ( {
68- root :{
66+ const styles = {
67+ root :( theme ) => ( {
6968padding :theme . spacing ( 3 ) ,
7069display :"flex" ,
7170alignItems :"center" ,
7271justifyContent :"center" ,
7372minHeight :"100%" ,
7473textAlign :"center" ,
75- } ,
74+ } ) ,
7675
77- container :{
76+ container :( theme ) => ( {
7877width :"100%" ,
7978maxWidth :385 ,
8079display :"flex" ,
8180flexDirection :"column" ,
8281alignItems :"center" ,
8382gap :theme . spacing ( 2 ) ,
84- } ,
83+ } ) ,
8584
86- icon :{
85+ icon :( theme ) => ( {
8786fontSize :theme . spacing ( 8 ) ,
88- } ,
87+ } ) ,
8988
90- footer :{
89+ footer :( theme ) => ( {
9190fontSize :12 ,
9291color :theme . palette . text . secondary ,
9392marginTop :theme . spacing ( 3 ) ,
94- } ,
95- } ) ) ;
93+ } ) ,
94+ } satisfies Record < string , Interpolation < Theme > > ;