Header done for first half

VandyHacks · Sep 30, 2023 · 2d41a47 · 2d41a47
1 parent baa5657
commit 2d41a47
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 14 deletions.
diff --git a/components/hacker/HackerDash.tsx b/components/hacker/HackerDash.tsx
@@ -280,7 +280,6 @@ export default function HackerDash({ userApplicationStatus, setUserApplicationSt
 										label={<p className={styles.Label}>Date of Birth</p>}
 										rules={[{ required: true, message: 'Please select your date of birth!' }]}>
 										<DatePicker
-											disabledDate={disabledDate}
 											placeholder="MM-DD-YYYY"
 											format="MM-DD-YYYY"
 											defaultPickerValue={moment().subtract(18, 'years')}
@@ -735,7 +734,7 @@ export default function HackerDash({ userApplicationStatus, setUserApplicationSt
 						(user.applicationStatus === ApplicationStatus.CONFIRMED ||
 							user.applicationStatus === ApplicationStatus.CHECKED_IN) && (
 							<>
-								<Header />
+								<Header user={session?.user} signOut={signOut} />
 								{/* Hacking start code */}
 								<div style={{ display: 'flex', justifyContent: 'center', paddingBottom: '10px' }}>
 									<Button size="small" type="default" onClick={() => signOut()}>

diff --git a/components/hacker/hacking-start/Header.tsx b/components/hacker/hacking-start/Header.tsx
@@ -2,14 +2,20 @@ import React from 'react';
 import styles from '../../../styles/hacker/hacking-start.module.css';
 import Image from 'next/image';
 import VHLogo from '../../../public/vh-logo.png';
+import { UserData } from '../../../types/database';
 
-const Header = () => {
+const Header = ({ user, signOut }: { user: UserData | any; signOut: () => void }) => {
 	return (
 		<>
 			<div className={styles.HeaderBox}>
 				<div className={styles.HeaderTopBox}>
-					<Image alt="" width={175} height={175} src={VHLogo} className={styles.Logo}></Image>
-					<span className={styles.SignOut}></span>
+					<Image alt="" width={150} height={150} src={VHLogo} className={styles.Logo} />
+					<span className={styles.SignOut}>
+						<span className={styles.Email}>{user.email}</span>
+						<button className={styles.SignOutButton} onClick={() => signOut()}>
+							Sign Out
+						</button>
+					</span>
 				</div>
 				<div className={styles.HeaderMiddleBox}>
 					<span className={styles.UserName}></span>

diff --git a/styles/hacker/hacking-start.module.css b/styles/hacker/hacking-start.module.css
@@ -3,26 +3,49 @@
   flex-direction: column;
   justify-content: space-between;
   align-items: stretch;
-  background-color: white;
+  /* background-color: white; */
   width: 100%;
   height: 300px;
 }
 
 .HeaderTopBox {
   display: flex;
   justify-content: space-between;
-  background-color: pink;
-  height: 175px;
+  /* background-color: pink; */
+  height: 150px;
 }
 
-.Logo {
-  background-color: purple;
-  width: 175px;
+.SignOut {
+  /* background-color: blue; */
+  /* width: 150px; */
+  /* height: 50%; */
+  margin: 25px 25px 0 0;
 }
 
-.SignOut {
-  background-color: blue;
-  width: 50px;
+.Email {
+  /* display: inline-block; */
+  color: #FFF;
+  text-align: right;
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;}
+
+.SignOutButton {
+  border-radius: 5px;
+  background-color: #676767;
+  width: 111px;
+  height: 40px;
+  margin: 0 0 0 20px;
+
+  color: #FFF;
+  text-align: center;
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
 }
 
 .HeaderMiddleBox {