Merge pull request #414 from alishaz-polymath/main

Changed styling and added dark mode as request in PR 411

pages/[user]/book.tsx

@@ -329,34 +329,46 @@ export default function Book(props: any): JSX.Element {
                         </div>
                       ))}
                   <div className="mb-4">
-                    {!guestToggle && (
+                      {!guestToggle && 
-                      <label
+                        <label
-                        onClick={toggleGuestEmailInput}
+                          onClick={toggleGuestEmailInput}
-                        htmlFor="guests"
+                          htmlFor="guests"
-                        className="block text-sm font-medium text-blue-500 mb-1 hover:cursor-pointer">
+                          className="block text-sm font-medium dark:text-white text-blue-500 mb-1 hover:cursor-pointer">
-                        + Additional Guests
+                          + Additional Guests
-                      </label>
+                        </label>       
-                    )}
+                      }
-                    {guestToggle && (
+                      {guestToggle && (
-                      <ReactMultiEmail
+                        <div>
-                        placeholder="Input your Email Address"
+                          <label
-                        emails={guestEmails}
+                          htmlFor="guests"
-                        onChange={(_emails: string[]) => {
+                          className="block text-sm font-medium dark:text-white text-gray-700">
-                          setGuestEmails(_emails);
+                          Guests
-                        }}
+                          </label>                         
-                        getLabel={(email: string, index: number, removeEmail: (index: number) => void) => {
+                          <ReactMultiEmail
-                          return (
+                          placeholder="guest@example.com"
-                            <div data-tag key={index}>
+                          emails={guestEmails}
-                              {email}
+                          onChange={(_emails: string[]) => {
-                              <span data-tag-handle onClick={() => removeEmail(index)}>
+                            setGuestEmails(_emails);
-                                ×
+                          }}
-                              </span>
+                          getLabel={(
-                            </div>
+                            email: string,
-                          );
+                            index: number,
-                        }}
+                            removeEmail: (index: number) => void
-                      />
+                          ) => {
-                    )}
+                            return (
-                  </div>
+                              <div data-tag key={index}>
+                                {email}
+                                <span data-tag-handle onClick={() => removeEmail(index)}>
+                                  ×
+                                </span>
+                              </div>
+                            );
+                          }}
+                        /> 
+                        </div>
+                        )}
+                      
+                  </div>    
                   <div className="mb-4">
                     <label
                       htmlFor="notes"

pages/api/book/[user].ts

@@ -374,7 +374,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  

styles/globals.css

@@ -81,6 +81,7 @@
     }
 }
 
+/* !important to style multi-email input */
 ::-moz-selection { 
   color: white;
   background: black;
@@ -99,9 +100,64 @@
 }
 
 .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] {
+    @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;