chore: rebase with recent changes

cesium · Nov 30, 2023 · 8b081b3 · 8b081b3
2 parents 92e7168 + e176f4f
commit 8b081b3
Show file tree

Hide file tree

Showing 30 changed files with 513 additions and 249 deletions.
diff --git a/components/Button/index.tsx b/components/Button/index.tsx
@@ -1,27 +1,45 @@
-import { ButtonHTMLAttributes } from "react";
+import { ButtonHTMLAttributes, ReactNode } from "react";
 
-interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
-  text: string;
+interface Props extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "title"> {
+  title: ReactNode;
+  description?: string;
   customStyle?: string;
+  bold?: boolean;
+  disabled?: boolean;
+}
+
+interface ButtonTitleProps {
+  title: ReactNode;
+  bold?: boolean;
 }
 
 export default function Button({
-  text,
+  title,
+  description,
   type,
   disabled,
   onClick,
   customStyle,
+  bold,
+  ...rest
 }: Props) {
   return (
     <button
+      {...rest}
       onClick={onClick}
       type={type}
       disabled={disabled}
       className={`${
         customStyle || ""
-      } w-full items-center rounded-full border px-4 py-4 text-center font-iregular text-sm shadow-sm`}
+      } m-auto block rounded-full hover:opacity-75 disabled:bg-gray-400 disabled:opacity-75`}
     >
-      {text}
+      <ButtonTitle title={title} bold={bold} />
+      <p className="font-iregular">{description}</p>
     </button>
   );
 }
+
+function ButtonTitle({ title, bold }: ButtonTitleProps) {
+  const className = bold ? "font-ibold" : "font-iregular";
+  return <div className={className}>{title}</div>;
+}
diff --git a/components/Input/index.tsx b/components/Input/index.tsx
@@ -24,14 +24,6 @@ export function InputBase({
   let textColor = `text-${fgColor}`;
   let backColor = `bg-${bgColor}`;
 
-  if (enabled === false) {
-    textColor = "text-gray-500";
-    backColor = "bg-gray-100";
-  } else if (enabled === true) {
-    textColor = `bg-${fgColor}`;
-    backColor = `bg-${bgColor}`;
-  }
-
   return (
     <div>
       <label
@@ -41,7 +33,9 @@ export function InputBase({
         {text}
       </label>
       <div
-        className={`text-iregular mt-2 flex items-center ${textColor} ${backColor} appearance-none rounded-full border border-gray-300 px-3 py-2 pl-6 placeholder-gray-400 shadow-sm sm:text-sm`}
+        className={`text-iregular mt-2 flex items-center  ${
+          enabled == false ? "text-gray-500" : textColor 
+        } ${backColor} appearance-none rounded-full border border-gray-300 px-3 py-2 pl-6 placeholder-gray-400 shadow-sm sm:text-sm`}
       >
         {children}
       </div>

diff --git a/components/Layout/Layout.tsx b/components/Layout/Layout.tsx
@@ -174,7 +174,7 @@ function MobileNavbar({
 
                   <button type="button" onClick={onClose} className="h-12 w-12">
                     <span className="sr-only">Close sidebar</span>
-                    <FontAwesomeIcon icon={faTimes} />
+                    title={<FontAwesomeIcon icon={faTimes} />}
                   </button>
                 </div>
 

diff --git a/components/QRScanner/index.jsx b/components/QRScanner/index.jsx
@@ -52,7 +52,7 @@ function QRScanner({
       </div>
       {removeClose !== true && (
         <Button
-          text="Close"
+          title="Close"
           onClick={() => {
             setScanner(false);
           }}

diff --git a/components/Select/index.tsx b/components/Select/index.tsx
@@ -0,0 +1,65 @@
+import { SelectHTMLAttributes } from "react";
+
+import { ChevronDownIcon } from "@heroicons/react/solid";
+
+interface Option {
+  key: any;
+  name: string;
+}
+
+interface Props extends SelectHTMLAttributes<HTMLSelectElement> {
+  text: string;
+  options: Option[];
+  customStyle?: string;
+  fgColor: string;
+  bgColor: string;
+  enabled?: boolean;
+}
+
+export default function Select({
+  id,
+  text,
+  options,
+  enabled,
+  fgColor,
+  bgColor,
+  customStyle,
+  ...rest
+}: Props) {
+  let textColor = `text-${fgColor}`;
+  let backColor = `bg-${bgColor}`;
+  let disabled = enabled == false;
+
+  return (
+    <div>
+      <label
+        htmlFor={id}
+        className={`pl-6 font-iregular text-${fgColor} mt-5 block text-sm`}
+      >
+        {text}
+      </label>
+      <div
+        className={`text-iregular relative mt-2 flex ${textColor} ${backColor} block w-full appearance-none rounded-full border border-gray-300 py-2 placeholder-gray-400 shadow-sm focus:outline-none sm:text-sm`}
+      >
+        <select
+          id={id}
+          disabled={disabled}
+          className={`text-iregular ${
+            disabled ? "text-gray-500" : textColor
+          } ${backColor} block w-full appearance-none rounded-full px-3 pr-10 pl-6 placeholder-gray-400 opacity-100 focus:outline-none sm:text-sm`}
+          {...rest}
+        >
+          {options.map((option) => (
+            <option key={option.key} value={option.key}>{option.name}</option>
+          ))}
+        </select>
+        <ChevronDownIcon
+          className={`${
+            !disabled ? "block" : "hidden"
+          } pointer-events-none absolute top-0 bottom-0 right-3 m-auto h-7 text-${fgColor}`}
+          aria-hidden="true"
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/layout/Attendee/Profile/Profile.tsx b/layout/Attendee/Profile/Profile.tsx
@@ -1,11 +1,13 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
 import { withAuth, useAuth } from "@context/Auth";
 
 import Form from "@components/Form";
 import Input from "@components/Input";
+import Select from "@components/Select";
 
 import Layout from "@components/Layout";
+import Button from "@components/Button";
 import Heading from "@components/Heading";
 import ResetPassword from "@components/ResetPassword";
 
@@ -14,11 +16,17 @@ import CVInput from "./components/CVInput";
 import { resetPassword } from "@lib/api";
 import { getFirstName } from "@lib/naming";
 
-function Profile() {
+interface Course {
+  id: any;
+  name: string;
+}
+
+function Profile({ courses }) {
   const { user, editUser } = useAuth();
   const [avatar, setAvatar] = useState(null);
   const [editing, setEditing] = useState(false);
   const [username, setUsername] = useState(user.nickname || "");
+  const [course, setCourse] = useState(user.course || "");
 
   const [photoFileUrl, setPhotoFileUrl] = useState<string>(user.avatar);
 
@@ -51,6 +59,7 @@ function Profile() {
     e.preventDefault();
     const formData = new FormData();
     formData.append("attendee[nickname]", username);
+    formData.append("attendee[course_id]", course);
     formData.append("attendee[avatar]", avatar);
 
     if (editing) {
@@ -83,13 +92,12 @@ function Profile() {
         <div className="col-span-1 float-left w-full xl:w-1/2">
           <Heading text="User Profile">
             <div className="w-auto">
-              <button
-                className="w-full items-center rounded-full border border-quinary bg-quinary py-2 px-4 text-center font-iregular text-sm text-secondary shadow-sm"
-                type="submit"
+              <Button
+                customStyle="w-full items-center rounded-full border border-quinary bg-quinary py-2 px-4 text-center font-iregular text-sm text-secondary shadow-sm"
+                title={editing ? "Save Changes" : "Edit"}
                 form="profile-form"
-              >
-                {editing ? "Save Changes" : "Edit"}
-              </button>
+                type="submit"
+              />
             </div>
           </Heading>
 
@@ -128,7 +136,7 @@ function Profile() {
               id="name"
               name="name"
               value={user.name || ""}
-              bgColor="white"
+              bgColor="primary"
               fgColor="white"
               enabled={false}
             />
@@ -137,11 +145,24 @@ function Profile() {
               id="username"
               name="username"
               value={username}
-              bgColor="white"
+              bgColor="primary"
               fgColor="white"
               enabled={editing}
               onChange={(e) => setUsername(e.currentTarget.value)}
             />
+            <Select
+              text="COURSE"
+              id="course"
+              bgColor="primary"
+              fgColor="white"
+              value={course}
+              options={courses.map((course) => ({
+                key: course.id,
+                name: course.name,
+              }))}
+              enabled={editing}
+              onChange={(e) => setCourse(e.currentTarget.value)}
+            />
 
             <ResetPassword user={user} />
           </Form>
@@ -211,14 +232,6 @@ function Profile() {
               </p>
             )}
           </div>
-
-          <div className="my-10 text-white">
-            <Heading text="Redeem referral code" />
-            <p className="font-iregular">Redeem a badge using a unique code</p>
-
-            <CodeInput />
-          </div>
-
           <div className="mt-10 text-white">
             <Heading text="Upload CV" />
             <CVInput cv={user?.cv} onSubmit={submitCV}></CVInput>

diff --git a/layout/Attendee/Wheel/Wheel.tsx b/layout/Attendee/Wheel/Wheel.tsx
@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
 import { withAuth, useAuth } from "@context/Auth";
 
 import Heading from "@components/Heading";
-
+import Button from "@components/Button";
 import Layout from "@components/Layout";
 
 import {
@@ -202,18 +202,18 @@ function WheelPage() {
             <div className="m-auto h-72 w-72 xs:h-80 xs:w-80 sm:h-96 sm:w-96">
               <WheelComponent steps={16} angle={st.angle} />
             </div>
-            <button
-              className={`${
+            <Button
+              customStyle={`${
                 canSpin()
                   ? "cursor-pointer bg-quinary"
                   : "bg-gray-400 opacity-50"
               } m-auto mt-10 block h-20 w-64 rounded-full`}
               disabled={!canSpin()}
               onClick={spinTheWheel}
-            >
-              <p className="select-none font-ibold font-bold">SPIN THE WHEEL</p>
-              <p className="select-none font-iregular">{price} tokens💰</p>
-            </button>
+              title="SPIN THE WHEEL"
+              description={`${price} tokens💰`}
+              bold={true}
+            />
           </div>
         </div>
         <div className="col-span-1 float-right w-full 2xl:w-1/2 2xl:pl-6">

diff --git a/layout/Challenges/components/Challenges/Challenge/index.tsx b/layout/Challenges/components/Challenges/Challenge/index.tsx
@@ -6,7 +6,7 @@ function Action({ text, url }) {
     <div className="mt-5 w-60">
       <Button
         onClick={(e) => (window.location.href = url)}
-        text={text}
+        title={text}
         customStyle="text-white bg-primary border-tertiary hover:bg-tertiary"
       />
     </div>

diff --git a/layout/Hackathon/components/Hero/index.jsx b/layout/Hackathon/components/Hero/index.jsx
@@ -24,7 +24,7 @@ export default function Hero() {
             <span className="inline-block w-56 content-center items-center text-center align-middle">
               <a href="https://forms.gle/eFft9LTLSQzJjTG29">
                 <Button
-                  text="REGISTER YOUR TEAM"
+                  title="REGISTER YOUR TEAM"
                   customStyle="text-white bg-primary border-tertiary hover:bg-tertiary"
                 />
               </a>

diff --git a/layout/Hackathon/components/Regulations/index.jsx b/layout/Hackathon/components/Regulations/index.jsx
@@ -13,7 +13,7 @@ export default function Regulations() {
         <div className="mt-6 sm:mt-0 sm:w-80">
           <Link href={"/docs/hackathon.pdf"}>
             <Button
-              text="READ THE RULES"
+              title="READ THE RULES"
               customStyle="text-white bg-primary border-tertiary hover:bg-tertiary"
             />
           </Link>

diff --git a/layout/Home/components/Hackathon/index.jsx b/layout/Home/components/Hackathon/index.jsx
@@ -15,7 +15,7 @@ export default function Hackathon() {
             <span className="w-56 self-center">
               <a href="https://forms.gle/8aSEUubkjei1Dpym6">
                 <Button
-                  text="REGISTER YOUR TEAM"
+                  title="REGISTER YOUR TEAM"
                   customStyle="text-white bg-secondary border-quaternary hover:border-quinary"
                 />
               </a>{" "}

diff --git a/layout/Home/components/Hero/Pitch/index.jsx b/layout/Home/components/Hero/Pitch/index.jsx
@@ -10,8 +10,9 @@ export default function Pitch() {
       <div className="mt-8 flex w-56">
         <a href="/team">
           <Button
-            text="MEET THE TEAM"
-            customStyle="hover:text-quinary hover:border-quinary"
+            title="MEET THE TEAM"
+            customStyle="w-56 h-20 border-2 text-white border-white hover:text-quinary hover:border-quinary"
+            bold={false}
           />
         </a>
       </div>

diff --git a/layout/Home/components/Speakers/index.jsx b/layout/Home/components/Speakers/index.jsx
@@ -15,8 +15,9 @@ export default function Speakers() {
         <div className="xs:w-70 w-60 sm:w-80">
           <Link href="/speakers">
             <Button
-              text="MEET THE SPEAKERS"
-              customStyle="text-white bg-secondary border-quaternary hover:border-quinary hover:bg-quinary "
+              title="MEET THE SPEAKERS"
+              customStyle="text-white border-white border-4 h-20 w-full hover:border-quinary hover:bg-quinary"
+              bold={true}
             />
           </Link>
         </div>

diff --git a/layout/Login/components/LoginForm/index.tsx b/layout/Login/components/LoginForm/index.tsx
@@ -51,10 +51,10 @@ export default function LoginForm() {
           href="/forgot-password"
         />
         <Button
-          text={isLoading ? "Authenticating..." : "LET'S GO"}
+          title={isLoading ? "Authenticating..." : "LET'S GO"}
           disabled={isLoading}
           type="submit"
-          customStyle="text-secondary bg-quinary border-quinary"
+          customStyle="text-secondary bg-quinary border-quinary w-full h-16"
         />
         {errors && <p className="text-center text-failure">{errors}</p>}
       </Form>