From 9af170b3a02279bb5324ca5341fda63ae3f26be3 Mon Sep 17 00:00:00 2001
From: Carol He <carolhe.che.17@gmail.com>
Date: Mon, 6 May 2024 01:21:10 -0500
Subject: [PATCH 1/2] Add valid image to invalid sign in page

---
 pages/api/auth/[...nextauth].ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/api/auth/[...nextauth].ts b/pages/api/auth/[...nextauth].ts
index b339dd75..7f1196a0 100644
--- a/pages/api/auth/[...nextauth].ts
+++ b/pages/api/auth/[...nextauth].ts
@@ -95,7 +95,7 @@ export default async function auth(req: any, res: any) {
 
 		theme: {
 			colorScheme: 'dark',
-			logo: '/vhlogo-white.svg',
+			logo: '/vh-logo.png',
 		},
 	});
 }

From a67f7ba3a732f83215f657c7fcf40abbb66d3925 Mon Sep 17 00:00:00 2001
From: Carol He <carolhe.che.17@gmail.com>
Date: Mon, 6 May 2024 01:29:29 -0500
Subject: [PATCH 2/2] Fix login page CSS errors

---
 components/signIn.tsx    | 128 ++++++++++++++++++++-------------------
 styles/Signin.module.css |  16 +++++
 2 files changed, 81 insertions(+), 63 deletions(-)

diff --git a/components/signIn.tsx b/components/signIn.tsx
index fa8903d9..14b04c8d 100644
--- a/components/signIn.tsx
+++ b/components/signIn.tsx
@@ -1,6 +1,6 @@
 import { signIn } from 'next-auth/react';
 import { GoogleOutlined, GithubOutlined, MailOutlined } from '@ant-design/icons';
-import { Button, Space, Card, Image, Typography, Form, Input } from 'antd';
+import { Button, Space, Image, Form, Input } from 'antd';
 import styles from '../styles/Signin.module.css';
 
 const { Item } = Form;
@@ -11,70 +11,72 @@ const DEV_DEPLOY =
 export default function SignIn() {
 	return (
 		<div className={styles.SignIn}>
-			<Card bordered={false} className={styles.Card} style={{ height: DEV_DEPLOY ? '80%' : '70%' }}>
-				{/* <button onClick={() => signIn()}>Sign in</button> */}
-				<Space
-					direction="vertical"
-					size="small"
-					style={{
-						alignItems: 'center',
-					}}>
-					<Image className={styles.Logo} src="/vh-logo.png" alt="VandyHacks Logo" preview={false} />
-					<br />
-					<div className={styles.Title} style={{ color: 'white' }}>
-						VandyHacks X
-					</div>
-					<Button
-						size="large"
-						type="primary"
-						icon={<GoogleOutlined />}
-						className={styles.ButtonStyle}
-						onClick={() => signIn('google')}>
-						Sign in with Google
-					</Button>
-					<Button
-						size="large"
-						type="primary"
-						icon={<GithubOutlined />}
-						className={styles.ButtonStyle}
-						onClick={() => signIn('github')}>
-						Sign in with GitHub
-					</Button>
-					{DEV_DEPLOY && ( // email sign in only in dev
-						<Form
-							name="basic"
-							// labelCol={{ span: 8 }}
-							// wrapperCol={{ span: 16 }}
-							layout="vertical"
-							onFinish={values => signIn('credentials', { ...values })}
-							//   onFinishFailed={onFinishFailed}
-							autoComplete="off">
-							<Item
-								label={<label style={{ color: 'white' }}>Email</label>}
-								name="email"
-								rules={[{ required: true, message: 'Please input your email!' }]}>
-								<Input />
-							</Item>
+			<div className={styles.Card}>
+				<div className={styles.Logo}>
+					<Image src="/vh-logo.png" alt="VandyHacks Logo" preview={false} />
+				</div>
 
-							<Item
-								label={<label style={{ color: 'white' }}>Password</label>}
-								name="password"
-								rules={[{ required: true, message: 'Please input your password!' }]}>
-								<Input.Password />
-							</Item>
+				<br />
 
-							<Button
-								size="large"
-								type="primary"
-								icon={<MailOutlined />}
-								className={styles.ButtonStyle}
-								htmlType="submit">
-								Sign in with Email
-							</Button>
-						</Form>
-					)}
-				</Space>
-			</Card>
+				<div className={styles.Title}>VandyHacks X</div>
+
+				<div className={styles.SignInOptions}>
+					<Space direction="vertical" size="small" align="center">
+						{DEV_DEPLOY && ( // email sign in only in dev
+							<>
+								<Form
+									name="basic"
+									layout="vertical"
+									onFinish={values => signIn('credentials', { ...values })}
+									autoComplete="off"
+									style={{ display: 'flex', flexDirection: 'column' }}>
+									<Item
+										name="email"
+										rules={[{ required: true, message: 'Please input your email!' }]}>
+										<Input placeholder="Email" />
+									</Item>
+
+									<Item
+										name="password"
+										rules={[{ required: true, message: 'Please input your password!' }]}>
+										<Input.Password placeholder="Password" />
+									</Item>
+
+									<Button
+										size="large"
+										type="primary"
+										icon={<MailOutlined />}
+										className={styles.ButtonStyle}
+										htmlType="submit"
+										style={{ alignSelf: 'center' }}>
+										Sign in with Email
+									</Button>
+								</Form>
+
+								<div className={styles.Divider} />
+							</>
+						)}
+
+						<Button
+							size="large"
+							type="primary"
+							icon={<GoogleOutlined />}
+							className={styles.ButtonStyle}
+							onClick={() => signIn('google')}>
+							Sign in with Google
+						</Button>
+
+						<Button
+							size="large"
+							type="primary"
+							icon={<GithubOutlined />}
+							className={styles.ButtonStyle}
+							onClick={() => signIn('github')}>
+							Sign in with GitHub
+						</Button>
+					</Space>
+				</div>
+			</div>
 		</div>
 	);
 }
diff --git a/styles/Signin.module.css b/styles/Signin.module.css
index f476d8e0..0aed5442 100644
--- a/styles/Signin.module.css
+++ b/styles/Signin.module.css
@@ -16,6 +16,9 @@
 	justify-content: center;
 	align-items: center;
 	background-color: #00000099;
+	flex-direction: column;
+	max-height: 90%;
+	gap: 1rem;
 }
 
 .Logo {
@@ -28,6 +31,7 @@
 	font-size: 2.5rem;
 	font-weight: 550;
 	margin-bottom: 1rem;
+	color: white;
 }
 
 .ButtonStyle {
@@ -41,6 +45,18 @@
 	border-color: gray;
 }
 
+.SignInOptions {
+	overflow-y: auto;
+	padding: 1rem;
+}
+
+.Divider {
+	height: 1px;
+	width: 50px;
+	background: white;
+	margin: 25px 0;
+}
+
 /* add media query for mobile screen */
 @media (max-width: 768px) {
 	.Logo {