From 6102feec1f659e75740a1fffd97e2fbb3e2b09b0 Mon Sep 17 00:00:00 2001
From: Syed Ali Shahbaz <alishahbaz7@gmail.com>
Date: Thu, 5 Aug 2021 10:03:08 +0530
Subject: [PATCH 1/3] improved styling and dark mode for add-guest button

---
 pages/[user]/book.tsx    | 59 ++++++++++++++++++++++------------------
 pages/api/book/[user].ts |  2 +-
 styles/globals.css       | 59 +++++++++++++++++++++++++++++++++++++++-
 3 files changed, 91 insertions(+), 29 deletions(-)

diff --git a/pages/[user]/book.tsx b/pages/[user]/book.tsx
index c96c2439..bce1c3ac 100644
--- a/pages/[user]/book.tsx
+++ b/pages/[user]/book.tsx
@@ -16,7 +16,7 @@ import Button from "../../components/ui/Button";
 import { EventTypeCustomInputType } from "../../lib/eventTypeInput";
 import Theme from "@components/Theme";
 import { ReactMultiEmail, isEmail } from 'react-multi-email';
-import 'react-multi-email/style.css';
+// import 'react-multi-email/style.css';
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
@@ -332,33 +332,38 @@ export default function Book(props: any): JSX.Element {
                           className="block text-sm font-medium dark:text-white text-blue-500 mb-1 hover:cursor-pointer">
                           + Additional Guests
                         </label>       
-
                       }
-                      {
-                        guestToggle &&
-                        <ReactMultiEmail
-                        placeholder="Input your Email Address"
-                        emails={guestEmails}
-                        onChange={(_emails: string[]) => {
-                          setGuestEmails(_emails);
-                        }}
-                        getLabel={(
-                          email: string,
-                          index: number,
-                          removeEmail: (index: number) => void
-                        ) => {
-                          return (
-                            <div data-tag key={index}>
-                              {email}
-                              <span data-tag-handle onClick={() => removeEmail(index)}>
-                                ×
-                              </span>
-                            </div>
-                          );
-                        }}
-                      />                     
-                      }
-
+                      {guestToggle && (
+                        <div>
+                          <label
+                          htmlFor="guests"
+                          className="block text-sm font-medium dark:text-white text-gray-700">
+                          Guests
+                          </label>                         
+                          <ReactMultiEmail
+                          placeholder="guest@example.com"
+                          emails={guestEmails}
+                          onChange={(_emails: string[]) => {
+                            setGuestEmails(_emails);
+                          }}
+                          getLabel={(
+                            email: string,
+                            index: number,
+                            removeEmail: (index: number) => void
+                          ) => {
+                            return (
+                              <div data-tag key={index}>
+                                {email}
+                                <span data-tag-handle onClick={() => removeEmail(index)}>
+                                  ×
+                                </span>
+                              </div>
+                            );
+                          }}
+                        /> 
+                        </div>
+                        )}
+                      
                   </div>    
                   <div className="mb-4">
                     <label
diff --git a/pages/api/book/[user].ts b/pages/api/book/[user].ts
index cb9894a9..c43e7557 100644
--- a/pages/api/book/[user].ts
+++ b/pages/api/book/[user].ts
@@ -373,7 +373,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
     const invitee = [{ email: req.body.email, name: req.body.name, timeZone: req.body.timeZone }];
     const guests = req.body.guests.map(guest=>{
-      let g = {
+      const g = {
         'email': guest,
         'name': '',
         'timeZone': req.body.timeZone  
diff --git a/styles/globals.css b/styles/globals.css
index 30beee13..9cc46f30 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -81,10 +81,67 @@
     }
 }
 
+/* !important to style multi-email input */
 .react-multi-email > [type='text'] {
-    --tw-ring-shadow: 0 0 0 0 0;
+    @apply shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md;
 }
 
+.react-multi-email {
+    margin: 0;
+    max-width: 100%;
+    -webkit-box-flex: 1;
+    -ms-flex: 1 0 auto;
+    flex: 1 0 auto;
+    text-align: left;
+    line-height: 1.25rem;
+    padding: 0.75em 0.5rem;
+    padding: 0;
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    align-content: flex-start;
+  }
+
+  .react-multi-email > span[data-placeholder] {
+    display: none;
+    position: absolute;
+    left: 0.8rem;
+    top: 0.75rem;
+    line-height: 1.25rem;
+    font-size: 0.875rem;
+  }
+  
+  .react-multi-email.empty > span[data-placeholder] {
+    display: inline;
+    color: #646b7a;
+  }
+
+  .react-multi-email.focused > span[data-placeholder] {
+    display: none;
+  }
+  
+  .react-multi-email > input {
+    width: 100% !important;
+    display: inline-block !important;
+    @apply mt-1;
+  }
+  
+  .react-multi-email [data-tag] {
+    /* margin: 0.14285714em; */
+    @apply inline-flex items-center px-2 py-1 my-1 mr-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-gray-900 dark:text-white bg-neutral-200 hover:bg-neutral-100 dark:bg-neutral-900 dark:hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;  
+  }
+
+  .react-multi-email [data-tag] [data-tag-item] {
+    max-width: 100%;
+    overflow: hidden;
+  }
+
+  .react-multi-email [data-tag] [data-tag-handle] {
+    margin-left: 0.833em;
+    cursor: pointer;
+  }
+
 /* !important to override react-select */
 .react-select__value-container{
     border: 0 !important;

From 81a3f7f3fc9bd20352eb06a6e84e94a634c293ff Mon Sep 17 00:00:00 2001
From: Syed Ali Shahbaz <alishahbaz7@gmail.com>
Date: Thu, 5 Aug 2021 10:31:32 +0530
Subject: [PATCH 2/3] cleaned up code

---
 pages/[user]/book.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/pages/[user]/book.tsx b/pages/[user]/book.tsx
index bce1c3ac..34ebdbf8 100644
--- a/pages/[user]/book.tsx
+++ b/pages/[user]/book.tsx
@@ -16,7 +16,6 @@ import Button from "../../components/ui/Button";
 import { EventTypeCustomInputType } from "../../lib/eventTypeInput";
 import Theme from "@components/Theme";
 import { ReactMultiEmail, isEmail } from 'react-multi-email';
-// import 'react-multi-email/style.css';
 
 dayjs.extend(utc);
 dayjs.extend(timezone);

From dbffcf435ba404440ee555ef4987104a1e50033b Mon Sep 17 00:00:00 2001
From: Syed Ali Shahbaz <alishahbaz7@gmail.com>
Date: Thu, 5 Aug 2021 10:37:37 +0530
Subject: [PATCH 3/3] removed unnecessary comment

---
 styles/globals.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/styles/globals.css b/styles/globals.css
index 9cc46f30..c58783ab 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -128,7 +128,6 @@
   }
   
   .react-multi-email [data-tag] {
-    /* margin: 0.14285714em; */
     @apply inline-flex items-center px-2 py-1 my-1 mr-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-gray-900 dark:text-white bg-neutral-200 hover:bg-neutral-100 dark:bg-neutral-900 dark:hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;  
   }