nwplus · meleongg · Nov 9, 2023 · Jun 8, 2023 · Jul 12, 2023 · Aug 21, 2023
diff --git a/package.json b/package.json
@@ -8,7 +8,9 @@
     "@testing-library/user-event": "^7.1.2",
     "cross-env": "^7.0.2",
     "firebase": "^7.17.1",
+    "html2canvas": "^1.4.1",
     "husky": "^4.3.0",
+    "jspdf": "^2.5.1",
     "next-qrcode": "^2.4.0",
     "react": "^16.13.1",
     "react-csv": "^2.2.1",

diff --git a/public/index.html b/public/index.html
@@ -34,7 +34,7 @@
       crossorigin="anonymous"
       referrerpolicy="no-referrer"
     />
-    <title>nwHacks 2024 Portal</title>
+    <title>HackCamp 2023 Portal</title>
   </head>
 
   <body>

diff --git a/src/assets/hackcamp2023background.png b/src/assets/hackcamp2023background.png
diff --git a/src/assets/hackcamp2023background.svg b/src/assets/hackcamp2023background.svg
diff --git a/src/assets/hackcamp2023qrcode.png b/src/assets/hackcamp2023qrcode.png
diff --git a/src/assets/hc2023login.svg b/src/assets/hc2023login.svg
diff --git a/src/components/Common.js b/src/components/Common.js
@@ -20,7 +20,7 @@ export const CardLike = css`
   h2,
   h3,
   p {
-    color: ${p => p.theme.colors.cardText};
+    color: ${p => p.theme.colors.text};
   }
 `
 

diff --git a/src/components/Icon.js b/src/components/Icon.js
@@ -2,7 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 
 const StyledIcon = styled.i`
-  color: ${p => (p.color ? p.color : '#4d4b4f')};
+  color: ${p => (p.color ? p.color : '#fff')};
   transition: color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 
   &:hover {

diff --git a/src/components/Input/Button.js b/src/components/Input/Button.js
@@ -58,24 +58,23 @@ const StyledButton = styled.a`
     :focus {
       background: ${p.theme.colors.button.hoverbg};
   }`}
-  ${p =>
+  ${(
+    p // old style:       border: 2px solid transparent;
+  ) =>
     p.color === 'secondary' && // secondary color (outline button)
     `color: ${p.theme.colors.button.outlineText};
     border-radius: 10px;
     background: ${p.theme.colors.button.outlineBackground};
-    border: 2px solid ${p.theme.colors.button.outlineBorder};
     :hover {
       ${
         p.disabled
           ? `cursor: not-allowed;`
           : `background: ${hexToRgba(p.theme.colors.primary, 0.2)};`
       }
-      border: 2px solid transparent;  
       color: ${p.theme.colors.button.text};
       background: ${p.theme.colors.button.outlineBackgroundHover};
     }
     :focus {
-      border: 2px solid transparent;  
       color: ${p.theme.colors.button.text};
       background: ${p.theme.colors.button.outlineBackgroundHover};
     }`}

diff --git a/src/components/QrCode.js b/src/components/QrCode.js
@@ -2,21 +2,97 @@ import React from 'react'
 import styled from 'styled-components'
 import { CardWithHeader } from './Common'
 import { useQRCode } from 'next-qrcode'
+import JsPDF from 'jspdf'
+import html2canvas from 'html2canvas'
+import { Button } from './Input'
+import qrcodeBackground from '../assets/hackcamp2023qrcode.png'
 
 const QRContainer = styled(CardWithHeader)`
   display: flex;
 `
 
-const QRContainerInner = styled.div`
-  padding-top: 1rem;
-  display: flex;
+// const QRContainerInner = styled.div`
+//   padding-top: 1rem;
+//   display: flex;
+// `
+
+const QRCodeDesignContainer = styled.div``
+
+const QRCodeDesign = styled.div`
+  width: 300px;
+  height: 500px;
+  background-size: 100% auto;
+  background-repeat: no-repeat;
+  padding: 45px;
+  border-radius: 20px;
+  z-index: 10;
+  background-image: url(${qrcodeBackground});
+  margin: 0 auto;
+  display: block;
+  margin-top: 30px;
+  margin-bottom: -30px;
+`
+
+const HackerName = styled.h1`
+  color: #fff;
+  font-weight: bold;
+  margin-top: 60px;
+  position: relative;
+`
+
+const HackerEmail = styled.p`
+  color: #fff;
+`
+
+const QRTags = styled.div`
+  color: #fff;
+  display: inline-block;
+`
+
+// const SafeWalk = styled.p`
+//   background: #e17505;
+// `
+// const ShirtSize = styled.p`
+//   background: #0383fe;
+// `
+// const Allergies = styled.p`
+//   background: #ec4bfc;
+// `
+
+const QRInstructions = styled.p`
+  color: #fff;
+  padding-right: 20px;
 `
 
-const QrCode = ({ userId }) => {
+const SavePDFBtn = styled(Button)`
+  width: 150px;
+  margin: 0 auto;
+  display: block;
+`
+
+const generatePDF = () => {
+  // const report = new JsPDF('portrait', 'pt', [300, 500.01])
+
+  // report.html(document.querySelector('#QRCodeContainer')).then(() => {
+  //   report.addImage(qrcodeBackground, "JPEG", 0, 0, 300, 500);
+  //   report.save('Hackcamp2023QRCode.pdf')
+  // })
+
+  const input = document.getElementById('QRCodeContainer')
+  html2canvas(input).then(canvas => {
+    const imgData = canvas.toDataURL('img/png')
+    const pdf = new JsPDF('portrait', 'pt', [300, 400])
+    pdf.addImage(imgData, 'PNG', 0, 0, 300, 500)
+    pdf.save('Hackcamp2023QRCode.pdf')
+  })
+}
+
+const QrCode = ({ userInfo, userId }) => {
   const { Canvas } = useQRCode()
 
   return (
     <QRContainer header="Check-In Code">
+      {/*
       <QRContainerInner>
         <Canvas
           text={userId}
@@ -31,7 +107,44 @@ const QrCode = ({ userId }) => {
             },
           }}
         />
-      </QRContainerInner>
+        </QRContainerInner> */}
+
+      {/* <button>Save to Google Wallet</button>
+      <button>Save to Apple Wallet</button> */}
+
+      <QRCodeDesignContainer>
+        <QRCodeDesign id="QRCodeContainer">
+          <HackerName>{userInfo.displayName}</HackerName>
+          <HackerEmail>{userInfo.email}</HackerEmail>
+
+          <QRTags>
+            {/* {userInfo.safewalkNote ? <SafeWalk>SafeWalk: Yes</SafeWalk> : <SafeWalk >SafeWalk: No</SafeWalk>}
+            <ShirtSize></ShirtSize>
+            <Allergies></Allergies> */}
+          </QRTags>
+
+          <Canvas
+            text={userId}
+            options={{
+              level: 'M',
+              margin: 1,
+              scale: 4,
+              width: 120,
+              color: {
+                dark: '#000000',
+                light: '#FFFFFF',
+              },
+            }}
+          />
+
+          <QRInstructions>Please hold onto this QR Code for check-in, meals, etc</QRInstructions>
+        </QRCodeDesign>
+      </QRCodeDesignContainer>
+
+      <SavePDFBtn color="secondary" onClick={generatePDF}>
+        {' '}
+        Save as PDF
+      </SavePDFBtn>
     </QRContainer>
   )
 }

diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
@@ -92,8 +92,8 @@ const StyledA = styled(A)`
   ${p =>
     p.selected &&
     `
-    background: #F1E9DF;
-    color: #4D4B4F;
+    background: #433860;
+    color: #ffffff;
 
     &:hover {
       color: #ffffff;
@@ -104,19 +104,19 @@ const StyledA = styled(A)`
 
   &:hover {
     color: ${p => p.theme.colors.text};
-    background: ${p => p.theme.colors.secondaryBackgroundTransparent};
+    background: ${p => p.theme.colors.card};
     border-bottom: none;
   }
   &:focus {
-    color: #4d4b4f;
+    color: ${p => p.theme.colors.text};
     border-bottom: none;
   }
 `
 
 const LiveDot = styled.span`
   height: 10px;
   width: 10px;
-  background: ${p => p.theme.colors.cardText};
+  background: ${p => p.theme.colors.accent};
   border-radius: 50%;
   margin: 0 7px 0 4px;
   display: inline-block;
@@ -129,7 +129,7 @@ const LiveLabel = styled.p`
   font-weight: bold;
   font-size: 0.9em;
   border-radius: 7px;
-  background: ${p => p.theme.colors.primaryGradient};
+  background: ${p => p.theme.colors.primary};
   color: ${p => p.theme.colors.cardText};
   width: 4em;
   padding: 5px;

diff --git a/src/components/Typography.js b/src/components/Typography.js
@@ -90,7 +90,7 @@ export const A = styled.a`
   text-decoration: none;
   font-weight: ${p => (p.bolded ? 600 : 400)};
   border-bottom: 1px solid ${p => (p.color ? p.theme.colors.primary : p.theme.colors.link)};
-  color: black;
+  color: #fff;
   transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
   &:hover {
     color: ${p => p.theme.colors.linkHover};

diff --git a/src/containers/Application/Dashboard.js b/src/containers/Application/Dashboard.js
@@ -63,6 +63,11 @@ const ApplicationDashboardContainer = () => {
     hackerStatus = applicationStatus
   }
 
+  const shareQRCode = (hackerEmail, hackerName) => {
+    // alert("rsvp")
+    // Display QR code
+  }
+
   const canRSVP = hackerStatus === 'acceptedNoResponseYet' || hackerStatus === 'acceptedNoRSVP'
   const setRSVP = rsvpStatus => {
     updateApplication({
@@ -73,6 +78,11 @@ const ApplicationDashboardContainer = () => {
       },
     })
     forceSave()
+
+    if (rsvpStatus) {
+      // hacker RSVP'd for the hackathon -> send email
+      shareQRCode(user.email, user.displayName)
+    }
   }
 
   const setSafewalkInput = safewalkNote => {

diff --git a/src/containers/Landing/index.js b/src/containers/Landing/index.js
@@ -6,14 +6,18 @@ import nwhacks_logo from '../../assets/nwhacks_logo.svg'
 import cmdf_logo from '../../assets/cmdf_logo.png'
 import Footer from './Footer'
 import { H1, P } from '../../components/Typography'
+import hcloginbc from '../../assets/hc2023login.svg'
 
 const LandingContainer = styled.div`
-  position: relative;
+  position: absolute;
   width: 100vw;
   height: 100vh;
   overflow-x: hidden;
-  ${p => p.background && `background: ${p.background};`}
-  ${p => !p.showFooter && 'overflow-y: hidden;'}
+  background-image: url(${hcloginbc});
+  background-repeat: no-repeat;
+  background-size: cover;
+  top: 0;
+  z-index: 101;
 `
 
 const FlexLandingContainer = styled.div`
@@ -46,7 +50,7 @@ const StyledLogoLockup = styled.img`
     p.theme.name !== 'nwPlus' &&
     `
       top: 15em;
-      width: 60px;
+      width: 160px;
   `}
   ${p =>
     p.theme.name === 'cmdf' &&
@@ -113,6 +117,7 @@ export default ({ heading, description, showFooter, hackathon, children, backgro
             <P>{description}</P>
             {children}
           </StyledBanner>
+          {showFooter && <Footer />}
         </LandingContainer>
       )
     case 'cmdf':

diff --git a/src/pages/Application/Closed.js b/src/pages/Application/Closed.js
@@ -1,23 +1,29 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import Landing from '../../containers/Landing'
 import { A } from '../../components/Typography'
 import { SOCIAL_LINKS } from '../../utility/Constants'
 import { copyText } from '../../utility/Constants'
+import { ThemeContext } from 'styled-components'
 
-export default () => (
-  <Landing
-    heading={`Thanks for your interest in ${copyText.hackathonName}`}
-    description={
-      <>
-        We are no longer accepting applications, but we do hope to see you at our future events!
-        Visit our site{' '}
-        <A bolded color="primary" href={SOCIAL_LINKS.WEBSITE}>
-          nwplus.io
-        </A>{' '}
-        or follow us on social media to learn about our events and other ways to engage with the
-        technology community!
-      </>
-    }
-    showFooter
-  />
-)
+export default () => {
+  const theme = useContext(ThemeContext)
+
+  return (
+    <Landing
+      heading={`Thanks for your interest in ${copyText.hackathonName}`}
+      description={
+        <>
+          We are no longer accepting applications, but we do hope to see you at our future events!
+          Visit our site{' '}
+          <A bolded color="primary" href={SOCIAL_LINKS.WEBSITE}>
+            nwplus.io
+          </A>{' '}
+          or follow us on social media to learn about our events and other ways to engage with the
+          technology community!
+        </>
+      }
+      showFooter
+      hackathon={theme.name}
+    />
+  )
+}
diff --git a/src/pages/Home.js b/src/pages/Home.js
@@ -35,7 +35,7 @@ export default withTheme(({ announcements, theme }) => {
       {/* 
       <CommonLinks />
       <Announcements announcements={announcements} /> */}
-      {isAuthed && user.uid && <QrCode userId={user.uid} />}
+      {isAuthed && user.uid && <QrCode userInfo={user} userId={user.uid} />}
     </HomeContainer>
   )
 })
diff --git a/src/pages/Login.js b/src/pages/Login.js
@@ -42,7 +42,8 @@ const BoundingBox = styled.img`
 `
 
 const StyledButton = styled(Button)`
-  border-radius: 100px;
+  border-radius: 5px;
+
   && {
     filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.2));
     margin-bottom: 0.25em;