Merge pull request #117 from citrushack/dev

sync prod<-dev 4/2

components/Admin/Row/User/components.tsx

@@ -19,7 +19,7 @@ export function UserBox({
     <motion.div whileHover={{ y: -2 }} className="relative group">
       <div
         className={
-          'h-full border-2 border-sub rounded-md bg-card shadow-md cursor-pointer transform-gpu transition-size duration-150 overflow-hidden ' +
+          'h-full border-2 border-sub rounded-md bg-lightPurple shadow-md cursor-pointer transform-gpu transition-size duration-150 overflow-hidden ' +
           (selectedUsers.includes(user) ? 'border-text ' : ' ') +
           (expandedUsers.includes(user)
             ? 'max-h-[40rem] '
@@ -36,7 +36,7 @@ export function UserBox({
               className={
                 'w-10 p-2 rounded-full text-2xl group-hover:text-text ' +
                 (!pending
-                  ? 'hover:bg-sub '
+                  ? 'hover:bg-lightPurple '
                   : user.criteriaMet
                   ? 'hover:bg-green-200 '
                   : 'hover:bg-red-200 ') +
@@ -112,7 +112,7 @@ export function UserBox({
                 </div>
               )}
             </div>
-            <span className="py-2 text-sm md:text-base">{user.email}</span>
+            <span className="py-2 text-sm md:text-white">{user.email}</span>
           </div>
         </div>
         <div

components/ExternalLink.tsx

@@ -9,7 +9,7 @@ interface Props {
 export default function ExternalLink({ name, link }: Props) {
   return (
     <a target="_blank" rel="noreferrer noopener" href={link}>
-      <span className="font-semibold text-highlight hover:underline cursor-pointer">
+      <span className="font-semibold text-link hover:underline cursor-pointer">
         {name}
       </span>
     </a>

components/FAQ.tsx

@@ -19,7 +19,7 @@ export function FaqAccordion({ question, answer }: Props) {
         className="flex py-3 items-center hover:text-highlight cursor-pointer"
         onClick={() => setOpen(!open)}
       >
-        <h4 className="grow font-bold text-lg text-text">{question}</h4>
+        <h4 className="grow font-semibold text-lg text-text">{question}</h4>
         <div>
           <BiX
             className={
@@ -117,14 +117,19 @@ const faq = [
   {
     question: "My question isn't listed?",
     answer: (
-      <p className="text-text">
+      <>
         Feel free to email us at{' '}
         <ExternalLink
           name="[email protected]"
           link="mailto:[email protected]"
         />{' '}
-        or ask Mika Shanela in-person if you have any more questions.
-      </p>
+        or ask{' '}
+        <ExternalLink
+          name="Mika Shanela"
+          link="https://www.linkedin.com/in/mika-shanela/"
+        />{' '}
+        in-person if you have any more questions.
+      </>
     )
   }
 ];

components/Footer.tsx

@@ -5,6 +5,8 @@ import bus_footer from '@/public/assets/bus_footer.svg';
 import bus_footer_dark from '@/public/assets/bus_footer_dark.svg';
 import { motion } from 'framer-motion';
 import { FiMail, FiInstagram, FiLinkedin } from 'react-icons/fi';
+import { BsBalloonHeartFill } from 'react-icons/bs';
+
 export default function Footer() {
   const { theme } = useTheme();
 
@@ -33,6 +35,7 @@ export default function Footer() {
             alt="footer"
             objectFit="contain"
             layout="responsive"
+            draggable={false}
           />
         ) : (
           <Image
@@ -41,6 +44,7 @@ export default function Footer() {
             objectFit="contain"
             layout="responsive"
             className=""
+            draggable={false}
           />
         )}
       </div>
@@ -50,7 +54,7 @@ export default function Footer() {
         } flex flex-col justify-center items-center w-full h-full`}
       >
         <footer className="flex justify-center w-full py-4 bg-primary">
-          <div className="flex flex-col gap-2 items-center w-full mx-4 text-md font-semibold">
+          <div className="flex flex-col gap-0 items-center w-full text-md font-semibold">
             <div className="flex gap-2.5 text-2xl relative z-30">
               {socials.map(({ icon, link }) => (
                 <a
@@ -61,24 +65,42 @@ export default function Footer() {
                 >
                   <motion.div
                     whileHover={{ y: -4 }}
-                    className="cursor-pointer hover:text-slate-300"
+                    className={`cursor-pointer  ${
+                      theme === 'dark'
+                        ? `hover:text-goldHover`
+                        : `hover:text-[#987a5e]`
+                    }`}
                   >
                     {icon}
                   </motion.div>
                 </a>
               ))}
             </div>
             <a
-              className="text-text relative z-30 hover:text-slate-300"
+              className={`relative z-0  ${
+                theme === 'dark'
+                  ? `hover:text-goldHover`
+                  : `hover:text-[#987a5e]`
+              }`}
               target="_blank"
               rel="noferrer noopener noreferrer"
               href="https://static.mlh.io/docs/mlh-code-of-conduct.pdf"
             >
               MLH Code Of Conduct
             </a>
-            <p className="text-center">
-              Made with {theme === 'dark' ? '🤍' : '🖤'} by the Citrus Hack Team
-            </p>
+            <span className="text-center flex space-x-1">
+              Made with
+              {theme === 'light' ? (
+                <span className="text-black">
+                  <BsBalloonHeartFill />
+                </span>
+              ) : (
+                <span className="text-goldHover">
+                  <BsBalloonHeartFill />
+                </span>
+              )}
+              by Citrus Hack Team
+            </span>
           </div>
         </footer>
       </div>

components/Form/ApplicationForm/components.tsx

@@ -10,7 +10,8 @@ import {
   firstTimeHacker,
   foodPreference,
   shirtSize,
-  MLH
+  MLH,
+  awk
 } from './options';
 
 interface Props {
@@ -124,7 +125,7 @@ export function Education({ register, errors, watch }: Props) {
       {school === 'University of California, Riverside' && (
         <Input
           type="text"
-          label="UCR SID"
+          label="UCR SID (starts with 86...)"
           variable="ucr_sid"
           register={register}
           errors={errors}
@@ -180,6 +181,14 @@ export const HackerApp = ({ register, errors, setFileUploaded }: Props) => (
       errors={errors}
     />
     <span className="flex flex-col mt-4 gap-2">
+      <Checkbox
+        label=""
+        variable="in_person_awk"
+        options={awk[0]}
+        register={register}
+        errors={errors}
+        required
+      />
       <Checkbox
         label=""
         variable="MLH_code_of_conduct"

components/Form/ApplicationForm/index.tsx

@@ -43,14 +43,17 @@ export function ApplicationForm() {
     // used by auto accept "bot" (/api/auto-review)
     // determine if criteria to participate is met
     // auto accept if
-    // if undergrad && UCR
+    // if undergrad or highschool => auto accept
+    const containsHighSchool = school
+      .toLowerCase()
+      .includes('high school'.toLowerCase());
     if (
-      school == 'University of California, Riverside' &&
-      (grade === '1st Year Undergraduate' ||
-        grade === '2nd Year Undergraduate' ||
-        grade === '3rd Year Undergraduate' ||
-        grade === '4th Year Undergraduate' ||
-        grade === '5th+ Year Undergraduate')
+      containsHighSchool ||
+      grade === '1st Year Undergraduate' ||
+      grade === '2nd Year Undergraduate' ||
+      grade === '3rd Year Undergraduate' ||
+      grade === '4th Year Undergraduate' ||
+      grade === '5th+ Year Undergraduate'
     ) {
       criteria_met = true;
     } else {
@@ -93,7 +96,6 @@ export function ApplicationForm() {
   };
 
   const onSubmit = async ({
-    // TODO: add ucr sid in db
     first_name,
     last_name,
     gender,
@@ -119,8 +121,9 @@ export function ApplicationForm() {
     }
     setClickedSubmitOnce(Boolean(true));
 
+    // tshirts only available for 200 people
     // eslint-disable-next-line prefer-const
-    let applied_after_limit = data.numUsersInperson >= 350 ? true : false;
+    let applied_after_limit = data.numUsersInperson >= 200 ? true : false;
 
     // generate other user attributes
     // eslint-disable-next-line prefer-const

components/Form/ApplicationForm/options.tsx

@@ -84,3 +84,7 @@ export const MLH = [
     'I authorize MLH to send me an email where I can further opt into the MLH Hacker, Events, or Organizer Newsletters and other communications from MLH.'
   ]
 ];
+
+export const awk = [
+  ['I acknowledge that I will compete and participate In-Person.']
+];

components/Form/CheckinForm/components.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import { UseFormRegister, FieldValues, UseFormWatch } from 'react-hook-form';
 import { useSession } from 'next-auth/react';
 import { Group, Input, Select, Radio, Checkbox } from '../components';
@@ -22,43 +23,27 @@ export function Confirmation({ register, errors, watch }: Props) {
   return (
     <>
       <Group title="Confirm Details">
-        {session.user.participation === 'In-Person' && (
-          <>
-            <Radio
-              label="Are you still participating in-person?"
-              variable="inperson"
-              options={inperson}
-              register={register}
-              errors={errors}
-              required
-            />
-          </>
-        )}
-        {inperson_confirmation === 'Yes' && (
-          <>
-            <Checkbox
-              label="Do we have your permission to take pictures that may include you?"
-              subtext={
-                <>
-                  These photos will be posted on our Instagram and other social
-                  media. If you have a problem with this, please contact us at{' '}
-                  <ExternalLink
-                    name="[email protected]"
-                    link="mailto:[email protected]"
-                  />
-                  .
-                </>
-              }
-              variable="photo_consent"
-              options={[
-                'Yes, I give you permission to take pictures that may include me.'
-              ]}
-              register={register}
-              errors={errors}
-              required
-            />
-          </>
-        )}
+        <Checkbox
+          label="Do we have your permission to take pictures that may include you?"
+          subtext={
+            <>
+              These photos will be posted on our Instagram and other social
+              media. If you have a problem with this, please contact us at{' '}
+              <ExternalLink
+                name="[email protected]"
+                link="mailto:[email protected]"
+              />
+              .
+            </>
+          }
+          variable="photo_consent"
+          options={[
+            'Yes, I give you permission to take pictures that may include me.'
+          ]}
+          register={register}
+          errors={errors}
+          required
+        />
         <Checkbox
           label="Have you read the MLH Code of Conduct?"
           variable="MLH_code_of_conduct"

components/Form/CheckinForm/index.tsx

@@ -73,9 +73,11 @@ export function CheckinForm() {
 
   return (
     <main className="flex flex-col items-center my-24 px-4 w-full">
-      <h2 className="mb-6">Check-In Form</h2>
-      <p className="pb-4 w-full sm:max-w-2xl">
-        Fill out this form to confirm your participation for Cutie Hack 2022!
+      <h2 className="text-5xl md:text-7xl font-black mb-4 md:mb-8 text-center text-text">
+        Check-In Form
+      </h2>
+      <p className="pb-4 w-full sm:max-w-2xl tex-text text-center">
+        Fill out this form to confirm your participation for Citrus Hack 2023!
       </p>
       <form
         className="flex flex-col gap-4 w-full sm:max-w-2xl self-center"
@@ -86,7 +88,7 @@ export function CheckinForm() {
           whileHover={{ scale: 1.05 }}
           whileTap={{ scale: 0.995 }}
           type="submit"
-          className="w-full py-1.5 rounded bg-highlight hover:bg-highlight-dark font-semibold text-white"
+          className="w-full py-1.5 rounded bg-purple rounded-xl hover:bg-hoverPrimary font-semibold text-white"
           onClick={() => triggerErrorNotification()}
         >
           {clickedSubmitOnce ? 'Submitting...' : 'Submit'}

components/Form/components.tsx

@@ -60,6 +60,7 @@ export const Input = ({
         'w-full rounded-lg focus:border-highlight focus:outline-none focus:ring-highlight file:px-4 file:py-1.5 file:rounded-full file:border-0 file:bg-highlight file:text-sm file:font-semibold file:cursor-pointer hover:cursor-pointer' +
         (type === 'date' ? 'py-1.5 ' : 'py-1 ') +
         (type === 'file' ? ' text-white ' : 'bg-secondary px-2 border-2 ') +
+        (type === 'text' ? ' text-text ' : '') +
         (errors[variable] ? 'border-red-500' : 'border-highlight')
       }
       onChange={onChange}
@@ -144,7 +145,7 @@ export const Radio = ({
 }: RadioProps) => (
   <div>
     <legend className="font-semibold text-white">{label}</legend>
-    {subtext && <p className="m-0 mb-1 text-sm italic">{subtext}</p>}
+    {subtext && <p className="m-0 mb-1 text-sm italic text-gray">{subtext}</p>}
     <div
       className={
         direction === 'row'
@@ -208,7 +209,7 @@ export const Checkbox = ({
 }: CheckboxProps) => (
   <div>
     <legend className="font-semibold text-white">{label}</legend>
-    {subtext && <p className="m-0 mb-1 text-sm italic">{subtext}</p>}
+    {subtext && <p className="m-0 mb-1 text-sm italic text-gray">{subtext}</p>}
     <div className="flex flex-col gap-2 pl-2">
       {options.map((option: string) => (
         <div key={option} id={label} className="flex gap-2">

components/MLHBanner.tsx

@@ -27,6 +27,7 @@ export function MLHBanner() {
         src="https://citrushack2023.s3.us-west-1.amazonaws.com/mlh-trust-badge-2023-white.svg"
         alt="Major League Hacking 2022 Hackathon Season"
         className="w-full"
+        draggable={false}
       />
     </a>
   );