Login Layout Changed

Author: kartik-gupta-ij

src/assets/images/login-bg.svg

@@ -26,8 +26,6 @@ const Login: FC = () => {
 							Welcome to Parseable
 						</Text>
 
-						
-
 						{/* <Text mt="xs" className={descriptionStyle}>
 							Add your credentials to login
 						</Text> */}
@@ -59,17 +57,27 @@ const Login: FC = () => {
 
 						{/* <ForgotPassword /> */}
 
-						<Divider label=" Or  " labelPosition="center" my="md"  sx={{width:"100%"}} />
+						<Divider label=" Or  " labelPosition="center" my="md" sx={{ width: '100%' }} />
 
 						<Button
-						mt={rem(10)}
+							mt={rem(10)}
 							component="a"
 							href={`${baseURL}api/v1/o/login?redirect=${window.location.origin}`}
 							variant="outline"
-							color="indigo">
+							color='brandPrimary.0'
+							
+							sx={({ colors }) => ({
+								color: colors.brandPrimary[0],
+								borderColor: colors.brandPrimary[0],
+								'&:hover': {
+									borderColor: colors.brandSecondary[0],
+									color: colors.brandSecondary[0],
+									background: 'transparent',
+								},
+							})}
+							>
 							Login with OAuth
 						</Button>
-
 					</form>
 				</Box>
 			)}

src/pages/Login/index.tsx

@@ -1,4 +1,4 @@
-import loginBg from '@/assets/images/login-bg.svg';
+// import loginBg from '@/assets/images/login-bg.svg';
 import { createStyles } from '@mantine/core';
 
 export const useLoginStyles = createStyles((theme) => {
@@ -14,7 +14,7 @@ export const useLoginStyles = createStyles((theme) => {
 		container: {
 			position: 'relative',
 			flex: 1,
-			backgroundImage: `url(${loginBg})`,
+			// backgroundImage: `url(${loginBg})`,
 			backgroundRepeat: 'no-repeat',
 			backgroundPosition: 'top center',
 			display: 'flex',
@@ -27,7 +27,8 @@ export const useLoginStyles = createStyles((theme) => {
 			background: colors.white,
 			padding: spacing.xl,
 			borderRadius: defaultRadius,
-			boxShadow: shadows.sm,
+			boxShadow: shadows.lg,
+			border: `1px solid ${colors.gray[2]}`,
 			width: widths[96],
 			display: 'flex',
 			flexDirection: 'column',
@@ -39,7 +40,7 @@ export const useLoginStyles = createStyles((theme) => {
 		},
 
 		loginBtnStyle: {
-			background: colors.brandSecondary[1],
+			background: colors.brandPrimary[0],
 			width: widths.full,
 
 			'&:hover': {