From 601999a6bbeb08c71d8908bacc0bade7413d900d Mon Sep 17 00:00:00 2001
From: Nakonkate Tintapura <nak11494@gmail.com>
Date: Sun, 16 Jul 2023 23:08:33 +0700
Subject: [PATCH] Feature/rkm66 55 invite modal logic (#52)

* feat: add modal ui component

* refactor: prepare modal ui set for implementation

* chore: minor changes

* chore: purple color

* chore: typo

---------

Co-authored-by: shalluv <leon555thai@gmail.com>
---
 package.json                                  |  1 +
 pnpm-lock.yaml                                | 15 ++++
 src/components/Modal.tsx                      | 87 +++++++++++++++++++
 src/components/Navbar.tsx                     |  2 +-
 .../BaanSelection/components/BaanPanel.tsx    |  8 +-
 .../BaanSelection/components/GroupPanel.tsx   |  6 +-
 .../BaanSelection/components/InviteLink.tsx   |  2 +-
 .../components/ProfileInfoPanel.tsx           |  2 +-
 src/components/Profile/WaitForBaan/index.tsx  |  2 +-
 src/components/baan-selection/ListBaan.tsx    |  2 +-
 src/components/baan-selection/SearchBar.tsx   |  2 +-
 .../baan-selection/SelectedBaan.tsx           |  6 +-
 src/context/ModalContext.tsx                  | 49 +++++++++++
 src/pages/_app.tsx                            | 14 +--
 src/pages/baan-selection/index.tsx            |  4 +-
 src/pages/faq.tsx                             |  2 +-
 src/pages/privacy-policy.tsx                  |  2 +-
 src/pages/register.tsx                        |  6 +-
 src/pages/terms-conditions.tsx                |  2 +-
 src/pages/wait-baan-selection.tsx             |  2 +-
 tailwind.config.js                            |  6 +-
 21 files changed, 191 insertions(+), 31 deletions(-)
 create mode 100644 src/components/Modal.tsx
 create mode 100644 src/context/ModalContext.tsx

diff --git a/package.json b/package.json
index 0f7284b..b1bc9f8 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
         "prepare": "husky install"
     },
     "dependencies": {
+        "@headlessui/react": "1.7.15",
         "@heroicons/react": "2.0.18",
         "autoprefixer": "10.4.14",
         "axios": "1.4.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 472ac18..977124a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@headlessui/react':
+    specifier: 1.7.15
+    version: 1.7.15(react-dom@18.2.0)(react@18.2.0)
   '@heroicons/react':
     specifier: 2.0.18
     version: 2.0.18(react@18.2.0)
@@ -347,6 +350,18 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
+  /@headlessui/react@1.7.15(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-OTO0XtoRQ6JPB1cKNFYBZv2Q0JMqMGNhYP1CjPvcJvjz8YGokz8oAj89HIYZGN0gZzn/4kk9iUpmMF4Q21Gsqw==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: ^16 || ^17 || ^18
+      react-dom: ^16 || ^17 || ^18
+    dependencies:
+      client-only: 0.0.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /@heroicons/react@2.0.18(react@18.2.0):
     resolution: {integrity: sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw==}
     peerDependencies:
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
new file mode 100644
index 0000000..be29c24
--- /dev/null
+++ b/src/components/Modal.tsx
@@ -0,0 +1,87 @@
+import { Dialog, Transition } from '@headlessui/react';
+import { Fragment, ReactNode } from 'react';
+
+export interface ModalProps {
+    open: boolean;
+    onClose: () => any;
+    children?: ReactNode;
+    answer1?: string;
+    answer2?: string;
+}
+
+export const Modal = ({
+    open,
+    onClose,
+    children,
+    answer1,
+    answer2,
+}: ModalProps) => {
+    return (
+        <>
+            <Transition.Root show={open} as={Fragment}>
+                <Dialog
+                    as="div"
+                    className="relative z-50 text-white"
+                    onClose={onClose}
+                >
+                    <Transition.Child
+                        as={Fragment}
+                        enter="ease-out duration-300"
+                        enterFrom="opacity-0"
+                        enterTo="opacity-100"
+                        leave="ease-in duration-200"
+                        leaveFrom="opacity-100"
+                        leaveTo="opacity-0"
+                    >
+                        <div className="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-lg transition-opacity" />
+                    </Transition.Child>
+
+                    <div className="fixed inset-0 z-10 overflow-y-auto">
+                        <div className="flex min-h-full items-center justify-center p-4 text-center">
+                            <Transition.Child
+                                as={Fragment}
+                                enter="ease-out duration-300"
+                                enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                                enterTo="opacity-100 translate-y-0 sm:scale-100"
+                                leave="ease-in duration-200"
+                                leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+                                leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                            >
+                                <Dialog.Panel className="relative w-full max-w-2xl transform overflow-hidden rounded-3xl bg-gray-900 p-8 py-10 text-center shadow-xl transition-all">
+                                    <div>
+                                        <div className="text-center">
+                                            <div className="text-lg text-white">
+                                                {children}
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div className="mt-6 flex flex-row justify-center gap-6">
+                                        <button
+                                            type="button"
+                                            className={` ${
+                                                `${answer1}` == ''
+                                                    ? 'aria-hidden hidden'
+                                                    : 'inline-flex max-w-fit flex-1 justify-center rounded-3xl bg-pink-600 px-8 py-2 text-lg font-semibold text-white shadow-sm transition-all hover:ring-2 hover:ring-pink-600/20 hover:ring-offset-4 hover:ring-offset-pink-600/50'
+                                            } 
+                                            `}
+                                            onClick={onClose}
+                                        >
+                                            {answer1}
+                                        </button>
+                                        <button
+                                            type="button"
+                                            className="inline-flex max-w-fit flex-1 justify-center rounded-3xl bg-purple-300 px-8 py-2 text-lg font-semibold text-white shadow-sm transition-all hover:ring-2 hover:ring-purple-300/20 hover:ring-offset-4 hover:ring-offset-purple-300/50"
+                                            onClick={onClose}
+                                        >
+                                            {answer2}
+                                        </button>
+                                    </div>
+                                </Dialog.Panel>
+                            </Transition.Child>
+                        </div>
+                    </div>
+                </Dialog>
+            </Transition.Root>
+        </>
+    );
+};
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 7cd9a0f..3a85958 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -7,7 +7,7 @@ function Navbar() {
     const { user, logout, login } = useAuth();
 
     return (
-        <nav className="sticky top-0 z-50 flex h-11 w-full items-center justify-between bg-black/50 px-2 py-2 backdrop-blur-sm md:px-5 lg:h-20 lg:px-10 lg:py-4">
+        <nav className="sticky top-0 z-40 flex h-11 w-full items-center justify-between bg-black/50 px-2 py-2 backdrop-blur-sm md:px-5 lg:h-20 lg:px-10 lg:py-4">
             <div className="relative h-full w-12">
                 <Link href="/">
                     <Image
diff --git a/src/components/Profile/BaanSelection/components/BaanPanel.tsx b/src/components/Profile/BaanSelection/components/BaanPanel.tsx
index bd34d93..5418c66 100644
--- a/src/components/Profile/BaanSelection/components/BaanPanel.tsx
+++ b/src/components/Profile/BaanSelection/components/BaanPanel.tsx
@@ -14,7 +14,7 @@ export default function BaanPanel() {
 
     return (
         <div className="flex flex-col rounded-xl bg-white p-4 ring-8 ring-white ring-opacity-25">
-            <p className="mb-4 text-center text-xl font-bold text-purple lg:text-3xl">
+            <p className="mb-4 text-center text-xl font-bold text-purple-400 lg:text-3xl">
                 บ้านรับเพื่อนที่เลือก
             </p>
             <div className="flex flex-col items-center justify-center gap-4 lg:flex-row">
@@ -24,13 +24,13 @@ export default function BaanPanel() {
                             key={data.name}
                             className="flex h-full w-full flex-col items-center justify-center gap-4 px-4"
                         >
-                            <div className="relative aspect-3/4 w-full max-w-xxs overflow-clip rounded-lg border-2 border-purple lg:w-28">
-                                <p className="text-md absolute flex h-7 items-center justify-center rounded-br-lg bg-purple px-2 font-bold leading-none lg:h-7 lg:text-lg">
+                            <div className="relative aspect-3/4 w-full max-w-xxs overflow-clip rounded-lg border-2 border-purple-400 lg:w-28">
+                                <p className="text-md absolute flex h-7 items-center justify-center rounded-br-lg bg-purple-400 px-2 font-bold leading-none lg:h-7 lg:text-lg">
                                     {data.num}
                                 </p>
                                 <Image fill src={data.imgUrl} alt={data.name} />
                             </div>
-                            <div className="flex select-none flex-col text-center text-xl leading-none text-purple lg:w-28">
+                            <div className="flex select-none flex-col text-center text-xl leading-none text-purple-400 lg:w-28">
                                 <p>{data.name}</p>
                                 <p>({data.size})</p>
                             </div>
diff --git a/src/components/Profile/BaanSelection/components/GroupPanel.tsx b/src/components/Profile/BaanSelection/components/GroupPanel.tsx
index 647ca31..9496220 100644
--- a/src/components/Profile/BaanSelection/components/GroupPanel.tsx
+++ b/src/components/Profile/BaanSelection/components/GroupPanel.tsx
@@ -22,7 +22,7 @@ export default function GroupPanel() {
 
     return (
         <div className="flex flex-col gap-4 rounded-xl bg-white p-4 ring-8 ring-white/30">
-            <p className="h-12 text-center text-xl font-bold text-purple lg:text-3xl">
+            <p className="h-12 text-center text-xl font-bold text-purple-400 lg:text-3xl">
                 สมาชิกในกลุ่ม(2/3)
             </p>
             <div className="flex h-full flex-col justify-center gap-4 lg:flex-row">
@@ -32,10 +32,10 @@ export default function GroupPanel() {
                             className="relative flex h-full w-full flex-col items-center gap-4 px-4"
                             key={data.name}
                         >
-                            <div className="relative aspect-3/4 w-full max-w-xxs overflow-clip rounded-lg border-2 border-purple lg:w-28">
+                            <div className="relative aspect-3/4 w-full max-w-xxs overflow-clip rounded-lg border-2 border-purple-400 lg:w-28">
                                 <Image src={data.imgUrl} fill alt={data.name} />
                             </div>
-                            <div className="relative z-0 flex select-none flex-col text-center text-lg leading-none text-purple">
+                            <div className="relative z-0 flex select-none flex-col text-center text-lg leading-none text-purple-400">
                                 <p>{data.name}</p>
                                 <p>{data.surname}</p>
                             </div>
diff --git a/src/components/Profile/BaanSelection/components/InviteLink.tsx b/src/components/Profile/BaanSelection/components/InviteLink.tsx
index 689ce0a..7e16ed9 100644
--- a/src/components/Profile/BaanSelection/components/InviteLink.tsx
+++ b/src/components/Profile/BaanSelection/components/InviteLink.tsx
@@ -16,7 +16,7 @@ export default function InviteLink() {
     return (
         <div className="flex w-full flex-col items-center justify-center gap-4 text-white xl:flex-row">
             <label className="min-w-max text-xl lg:text-2xl">Invite Link</label>
-            <div className="relative flex w-full overflow-x-auto rounded-full bg-white px-5 py-2 text-sm text-purple ring-8 ring-white/30">
+            <div className="relative flex w-full overflow-x-auto rounded-full bg-white px-5 py-2 text-sm text-purple-400 ring-8 ring-white/30">
                 {inviteLink}
                 <Square2StackIcon
                     className="absolute right-2 top-1/2 w-7 -translate-y-1/2 cursor-pointer rounded-full bg-pink-400 p-1 text-white"
diff --git a/src/components/Profile/BaanSelection/components/ProfileInfoPanel.tsx b/src/components/Profile/BaanSelection/components/ProfileInfoPanel.tsx
index 8211639..657311a 100644
--- a/src/components/Profile/BaanSelection/components/ProfileInfoPanel.tsx
+++ b/src/components/Profile/BaanSelection/components/ProfileInfoPanel.tsx
@@ -11,7 +11,7 @@ export default function ProfileInfoPanel() {
                 <Image src={profilePic} fill alt="profile pic" />
             </div>
             <div className="flex flex-col">
-                <p className="select-none text-center text-3xl font-bold text-purple">
+                <p className="select-none text-center text-3xl font-bold text-purple-400">
                     แจฮยอน <br /> คงแก่การเรียน
                 </p>
                 <button className="mx-auto mt-8 w-36 rounded-lg bg-pink-400 py-2 text-xl ring-4 ring-pink-400/30 transition-all duration-500 hover:ring-8">
diff --git a/src/components/Profile/WaitForBaan/index.tsx b/src/components/Profile/WaitForBaan/index.tsx
index 4edb572..226beb3 100644
--- a/src/components/Profile/WaitForBaan/index.tsx
+++ b/src/components/Profile/WaitForBaan/index.tsx
@@ -6,7 +6,7 @@ import Rocket from '@/public/images/rocket.svg';
 const WaitForBaanselection: NextPage = () => {
     return (
         <div className="relative flex min-h-screen w-full items-center overflow-x-hidden bg-gray-800/30 px-8 backdrop-blur-sm backdrop-filter">
-            <div className="relative mx-auto flex w-full flex-col gap-8 rounded-3xl bg-gradient-to-bl from-purple to-pink-800/20 px-5 pb-8 pt-10 text-center ring-16 ring-purple/30 lg:w-auto lg:rounded-6xl lg:pb-16 lg:pl-16 lg:pr-52 lg:pt-24 lg:text-left lg:ring-32">
+            <div className="relative mx-auto flex w-full flex-col gap-8 rounded-3xl bg-gradient-to-bl from-purple-400 to-pink-800/20 px-5 pb-8 pt-10 text-center ring-16 ring-purple-400/30 lg:w-auto lg:rounded-6xl lg:pb-16 lg:pl-16 lg:pr-52 lg:pt-24 lg:text-left lg:ring-32">
                 <h1 className="text-2xl font-bold lg:text-4xl">
                     กรุณารอการเลือกบ้าน
                 </h1>
diff --git a/src/components/baan-selection/ListBaan.tsx b/src/components/baan-selection/ListBaan.tsx
index 2fcf0ee..1bfcc2b 100644
--- a/src/components/baan-selection/ListBaan.tsx
+++ b/src/components/baan-selection/ListBaan.tsx
@@ -14,7 +14,7 @@ const ListBaan = (props: any) => {
                     className="text-md mx-auto flex h-min w-min flex-col items-center gap-2"
                 >
                     <div
-                        className="relative aspect-square w-36 max-w-full items-center justify-center overflow-clip rounded-xl bg-white ring-4 ring-purple"
+                        className="relative aspect-square w-36 max-w-full items-center justify-center overflow-clip rounded-xl bg-white ring-4 ring-purple-400"
                         draggable
                         onDragStart={(event) =>
                             event.dataTransfer.setData(
diff --git a/src/components/baan-selection/SearchBar.tsx b/src/components/baan-selection/SearchBar.tsx
index 306849e..020d327 100644
--- a/src/components/baan-selection/SearchBar.tsx
+++ b/src/components/baan-selection/SearchBar.tsx
@@ -3,7 +3,7 @@ import { ChangeEvent } from 'react';
 
 const SearchBar = (props: any) => {
     return (
-        <form className="relative w-full text-purple">
+        <form className="relative w-full text-purple-400">
             <label htmlFor="search">
                 <MagnifyingGlassIcon className="absolute left-2 top-1/2 h-5 w-5 -translate-y-1/2 lg:h-6 lg:w-6" />
             </label>
diff --git a/src/components/baan-selection/SelectedBaan.tsx b/src/components/baan-selection/SelectedBaan.tsx
index db23426..e3dc8fc 100644
--- a/src/components/baan-selection/SelectedBaan.tsx
+++ b/src/components/baan-selection/SelectedBaan.tsx
@@ -7,12 +7,12 @@ const SelectedBaan = (props: any) => {
     return (
         <div
             key={props.num}
-            className="flex flex-col items-center gap-2 text-sm text-purple lg:flex-row"
+            className="flex flex-col items-center gap-2 text-sm text-purple-400 lg:flex-row"
             onDrop={props.handleDrop}
             onDragOver={(e) => e.preventDefault()}
         >
-            <div className="relative flex aspect-square w-32 max-w-full items-center justify-center overflow-clip rounded-lg border-2 border-purple bg-white">
-                <p className="text-md absolute left-0 top-0 z-10 flex h-7 items-center justify-center rounded-br-lg bg-purple px-2 font-bold leading-none text-white lg:h-7 lg:text-lg">
+            <div className="relative flex aspect-square w-32 max-w-full items-center justify-center overflow-clip rounded-lg border-2 border-purple-400 bg-white">
+                <p className="text-md absolute left-0 top-0 z-10 flex h-7 items-center justify-center rounded-br-lg bg-purple-400 px-2 font-bold leading-none text-white lg:h-7 lg:text-lg">
                     {props.num}
                 </p>
                 {props.id === -1 ? (
diff --git a/src/context/ModalContext.tsx b/src/context/ModalContext.tsx
new file mode 100644
index 0000000..1a685cc
--- /dev/null
+++ b/src/context/ModalContext.tsx
@@ -0,0 +1,49 @@
+import { createContext, useContext, ReactNode, useState } from 'react';
+
+type ModalId =
+    | 'modal-1'
+    | 'modal-2'
+    | 'modal-3'
+    | 'modal-4'
+    | 'modal-5'
+    | 'modal-6'
+    | 'modal-7'
+    | 'modal-8'
+    | 'modal-9'
+    | 'modal-10';
+
+export interface AppContextProps {
+    modalToOpen: ModalId | null;
+    closeModal: () => void;
+    openModal: (id: ModalId) => void;
+}
+
+export const AppContext = createContext<AppContextProps>({
+    modalToOpen: null,
+    closeModal: () => {},
+    openModal: (id: ModalId) => {},
+});
+
+export interface AppContextProviderProps {
+    children: ReactNode;
+}
+
+export const AppContextProvider = ({ children }: AppContextProviderProps) => {
+    const [modalToOpen, setModalToOpen] = useState<ModalId | null>(null);
+
+    const closeModal = () => {
+        setModalToOpen(null);
+    };
+
+    const openModal = (id: ModalId) => {
+        setModalToOpen(id);
+    };
+
+    return (
+        <AppContext.Provider value={{ modalToOpen, closeModal, openModal }}>
+            {children}
+        </AppContext.Provider>
+    );
+};
+
+export const useAppContext = () => useContext(AppContext);
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 1d6b560..3e1c7ee 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -8,6 +8,7 @@ import Head from 'next/head';
 import Footer from '@/components/Footer';
 import Navbar from '@/components/Navbar';
 import { ToastProvider } from '@/components/Toast';
+import { AppContextProvider } from '@/context/ModalContext';
 
 const ibmPlexSansThai = IBM_Plex_Sans_Thai({
     subsets: ['latin'],
@@ -64,12 +65,15 @@ export default function App({ Component, pageProps }: AppProps) {
         <main className={`${ibmPlexSansThai.variable} font-ibm text-white`}>
             <ToastProvider>
                 <AuthProvider>
-                    <MetaData />
+                    <AppContextProvider>
+                        <MetaData />
 
-                    <Navbar />
-                    <Component {...pageProps} />
-                    <Background />
-                    <Footer />
+                        <Navbar />
+                        <Component {...pageProps} />
+
+                        <Background />
+                        <Footer />
+                    </AppContextProvider>
                 </AuthProvider>
             </ToastProvider>
 
diff --git a/src/pages/baan-selection/index.tsx b/src/pages/baan-selection/index.tsx
index d064396..e0eda8b 100644
--- a/src/pages/baan-selection/index.tsx
+++ b/src/pages/baan-selection/index.tsx
@@ -64,7 +64,7 @@ const BaanChoosing = () => {
     return (
         <div className="flex min-h-screen w-full items-center justify-center px-6 py-24">
             <div className="flex min-h-max w-full flex-col justify-center xl:flex-row">
-                <div className="flex w-full flex-col items-start gap-2 border bg-white px-8 py-10 text-purple max-xl:rounded-t-3xl xl:w-fit xl:items-start xl:justify-center xl:rounded-l-3xl">
+                <div className="flex w-full flex-col items-start gap-2 border bg-white px-8 py-10 text-purple-400 max-xl:rounded-t-3xl xl:w-fit xl:items-start xl:justify-center xl:rounded-l-3xl">
                     <h1 className="select-none text-3xl font-bold xl:text-5xl">
                         เลือกบ้าน
                     </h1>
@@ -97,7 +97,7 @@ const BaanChoosing = () => {
                         <SearchBar input={input} setInput={setInput} />
                     </div>
                     <FilterButton filter={filter} filterBaan={filterBaan} />
-                    <div className="grid w-full grid-flow-row auto-rows-auto grid-cols-1 gap-8 rounded-3xl bg-white p-4 text-purple ring-8 ring-white/40 sm:grid-cols-2 md:grid-cols-4 xl:h-96 xl:overflow-y-auto">
+                    <div className="grid w-full grid-flow-row auto-rows-auto grid-cols-1 gap-8 rounded-3xl bg-white p-4 text-purple-400 ring-8 ring-white/40 sm:grid-cols-2 md:grid-cols-4 xl:h-96 xl:overflow-y-auto">
                         <ListBaan
                             baan={baan}
                             selectedBaan={selectedBaan}
diff --git a/src/pages/faq.tsx b/src/pages/faq.tsx
index d65858e..abe0c42 100644
--- a/src/pages/faq.tsx
+++ b/src/pages/faq.tsx
@@ -27,7 +27,7 @@ const FAQ = () => {
                             key={question.header}
                             className="flex flex-col gap-2 rounded-md bg-white px-8 py-8 shadow-md"
                         >
-                            <h2 className="text-xl font-semibold text-purple">
+                            <h2 className="text-xl font-semibold text-purple-400">
                                 {question.header}
                             </h2>
 
diff --git a/src/pages/privacy-policy.tsx b/src/pages/privacy-policy.tsx
index b7649f6..ef5d455 100644
--- a/src/pages/privacy-policy.tsx
+++ b/src/pages/privacy-policy.tsx
@@ -12,7 +12,7 @@ export async function getStaticProps() {
 const PrivacyPolicy = ({ source }: { source: any }) => {
     return (
         <div className="h-full w-full">
-            <article className="prose w-full list-disc whitespace-pre-line bg-purple/75 p-14 leading-loose backdrop-blur-lg">
+            <article className="prose w-full list-disc whitespace-pre-line bg-purple-400/75 p-14 leading-loose backdrop-blur-lg">
                 <div className="mx-auto w-full max-w-lg px-2">{source}</div>
             </article>
         </div>
diff --git a/src/pages/register.tsx b/src/pages/register.tsx
index 6c83a28..81c2b68 100644
--- a/src/pages/register.tsx
+++ b/src/pages/register.tsx
@@ -222,7 +222,7 @@ const Register = () => {
                                 alt="Bottle"
                             />
 
-                            <h1 className="text-center text-2xl font-bold text-purple">
+                            <h1 className="text-center text-2xl font-bold text-purple-400">
                                 ต้องการรับกระบอกน้ำ <br />
                                 Chula Zero Waste <br />
                                 ในงานรับเพื่อนก้าวใหม่หรือไม่
@@ -262,7 +262,7 @@ const Register = () => {
             )}
 
             <form
-                className="mt-40 flex w-full flex-col items-center justify-start rounded-t-3xl bg-white text-purple lg:mt-0 lg:w-2/3"
+                className="mt-40 flex w-full flex-col items-center justify-start rounded-t-3xl bg-white text-purple-400 lg:mt-0 lg:w-2/3"
                 onSubmit={onFormDone}
                 noValidate={true}
                 id="register-form"
@@ -280,7 +280,7 @@ const Register = () => {
                                 <span className="text-xs">แก้ไข</span>
                             </div>
                         </div>
-                        <span className="text-center text-sm font-extralight text-purple/50">
+                        <span className="text-center text-sm font-extralight text-purple-400/50">
                             รูปภาพจะต้องมีขนาดไม่เกิน 10MB
                         </span>
                         <input
diff --git a/src/pages/terms-conditions.tsx b/src/pages/terms-conditions.tsx
index 0555896..0251803 100644
--- a/src/pages/terms-conditions.tsx
+++ b/src/pages/terms-conditions.tsx
@@ -11,7 +11,7 @@ export async function getStaticProps() {
 const PrivacyPolicy = ({ source }: { source: any }) => {
     return (
         <div className="h-full w-full">
-            <article className="prose w-full list-disc whitespace-pre-line bg-purple/75 p-14 leading-loose backdrop-blur-lg">
+            <article className="prose w-full list-disc whitespace-pre-line bg-purple-400/75 p-14 leading-loose backdrop-blur-lg">
                 <div className="mx-auto w-full max-w-lg px-2">{source}</div>
             </article>
         </div>
diff --git a/src/pages/wait-baan-selection.tsx b/src/pages/wait-baan-selection.tsx
index f2e938d..e10a645 100644
--- a/src/pages/wait-baan-selection.tsx
+++ b/src/pages/wait-baan-selection.tsx
@@ -6,7 +6,7 @@ import Rocket from '@/public/images/rocket.svg';
 const WaitForBaanselection = () => {
     return (
         <div className="relative flex min-h-screen w-full items-center overflow-x-hidden bg-gray-800/30 px-8 backdrop-blur-sm backdrop-filter">
-            <div className="relative mx-auto flex w-full flex-col gap-8 rounded-3xl bg-gradient-to-bl from-purple to-pink-800/20 px-5 pb-8 pt-10 text-center ring-16 ring-purple/30 lg:w-auto lg:rounded-6xl lg:pb-16 lg:pl-16 lg:pr-52 lg:pt-24 lg:text-left lg:ring-32">
+            <div className="relative mx-auto flex w-full flex-col gap-8 rounded-3xl bg-gradient-to-bl from-purple-400 to-pink-800/20 px-5 pb-8 pt-10 text-center ring-16 ring-purple-400/30 lg:w-auto lg:rounded-6xl lg:pb-16 lg:pl-16 lg:pr-52 lg:pt-24 lg:text-left lg:ring-32">
                 <h1 className="text-2xl font-bold lg:text-4xl">
                     กรุณารอการเลือกบ้าน
                 </h1>
diff --git a/tailwind.config.js b/tailwind.config.js
index 841f2e1..7e37048 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,9 +10,13 @@ const config = {
     theme: {
         extend: {
             colors: {
-                purple: '#393061',
+                purple: {
+                    300: '#6B3BF1',
+                    400: '#393061',
+                },
                 pink: {
                     400: '#E95682',
+                    600: '#C03786',
                     800: '#A45BD0',
                 },
                 yellow: '#FFC32A',