@@ -3,6 +3,7 @@ import FormHelperText from "@material-ui/core/FormHelperText"
33import Link from "@material-ui/core/Link"
44import { makeStyles } from "@material-ui/core/styles"
55import TextField from "@material-ui/core/TextField"
6+ import GitHubIcon from "@material-ui/icons/GitHub"
67import { FormikContextType , useFormik } from "formik"
78import { FC } from "react"
89import * as Yup from "yup"
@@ -49,6 +50,29 @@ const useStyles = makeStyles((theme) => ({
4950submitBtn :{
5051marginTop :theme . spacing ( 2 ) ,
5152} ,
53+ buttonIcon :{
54+ width :14 ,
55+ height :14 ,
56+ } ,
57+ divider :{
58+ paddingTop :theme . spacing ( 3 ) ,
59+ paddingBottom :theme . spacing ( 3 ) ,
60+ display :"flex" ,
61+ alignItems :"center" ,
62+ gap :theme . spacing ( 2 ) ,
63+ } ,
64+ dividerLine :{
65+ width :"100%" ,
66+ height :1 ,
67+ backgroundColor :theme . palette . divider ,
68+ } ,
69+ dividerLabel :{
70+ flexShrink :0 ,
71+ color :theme . palette . text . secondary ,
72+ textTransform :"uppercase" ,
73+ fontSize :12 ,
74+ letterSpacing :1 ,
75+ } ,
5276} ) )
5377
5478export interface SignInFormProps {
@@ -119,13 +143,30 @@ export const SignInForm: FC<SignInFormProps> = ({
119143</ div >
120144</ form >
121145{ authMethods ?. github && (
122- < div className = { styles . submitBtn } >
123- < Link href = { `/api/v2/users/oauth2/github/callback?redirect=${ encodeURIComponent ( redirectTo ) } } >
124- < Button disabled = { isLoading } fullWidth type = "submit" variant = "contained" >
125- { Language . githubSignIn }
126- </ Button >
127- </ Link >
128- </ div >
146+ < >
147+ < div className = { styles . divider } >
148+ < div className = { styles . dividerLine } />
149+ < div className = { styles . dividerLabel } > Or</ div >
150+ < div className = { styles . dividerLine } />
151+ </ div >
152+
153+ < div >
154+ < Link
155+ underline = "none"
156+ href = { `/api/v2/users/oauth2/github/callback?redirect=${ encodeURIComponent ( redirectTo ) } }
157+ >
158+ < Button
159+ startIcon = { < GitHubIcon className = { styles . buttonIcon } /> }
160+ disabled = { isLoading }
161+ fullWidth
162+ type = "submit"
163+ variant = "contained"
164+ >
165+ { Language . githubSignIn }
166+ </ Button >
167+ </ Link >
168+ </ div >
169+ </ >
129170) }
130171</ >
131172)