From 6e7893d1a8f0cc330c644fc6faa22ca2e3f220f9 Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@richelsen.net>
Date: Sun, 8 Aug 2021 23:44:11 +0200
Subject: [PATCH] fixed add guest input for darkmode

---
 pages/[user]/book.tsx |  41 +++++++--------
 styles/globals.css    | 119 ++++++++++++++++++++++++------------------
 2 files changed, 87 insertions(+), 73 deletions(-)

diff --git a/pages/[user]/book.tsx b/pages/[user]/book.tsx
index e98e975370..74e2c78536 100644
--- a/pages/[user]/book.tsx
+++ b/pages/[user]/book.tsx
@@ -329,32 +329,28 @@ export default function Book(props: any): JSX.Element {
                         </div>
                       ))}
                   <div className="mb-4">
-                      {!guestToggle && 
+                    {!guestToggle && (
+                      <label
+                        onClick={toggleGuestEmailInput}
+                        htmlFor="guests"
+                        className="block text-sm font-medium dark:text-white text-blue-500 mb-1 hover:cursor-pointer">
+                        + Additional Guests
+                      </label>
+                    )}
+                    {guestToggle && (
+                      <div>
                         <label
-                          onClick={toggleGuestEmailInput}
                           htmlFor="guests"
-                          className="block text-sm font-medium dark:text-white text-blue-500 mb-1 hover:cursor-pointer">
-                          + Additional Guests
-                        </label>       
-                      }
-                      {guestToggle && (
-                        <div>
-                          <label
-                          htmlFor="guests"
-                          className="block text-sm font-medium dark:text-white text-gray-700">
+                          className="block text-sm font-medium dark:text-white text-gray-700 mb-1">
                           Guests
-                          </label>                         
-                          <ReactMultiEmail
+                        </label>
+                        <ReactMultiEmail
                           placeholder="guest@example.com"
                           emails={guestEmails}
                           onChange={(_emails: string[]) => {
                             setGuestEmails(_emails);
                           }}
-                          getLabel={(
-                            email: string,
-                            index: number,
-                            removeEmail: (index: number) => void
-                          ) => {
+                          getLabel={(email: string, index: number, removeEmail: (index: number) => void) => {
                             return (
                               <div data-tag key={index}>
                                 {email}
@@ -364,11 +360,10 @@ export default function Book(props: any): JSX.Element {
                               </div>
                             );
                           }}
-                        /> 
-                        </div>
-                        )}
-                      
-                  </div>    
+                        />
+                      </div>
+                    )}
+                  </div>
                   <div className="mb-4">
                     <label
                       htmlFor="notes"
diff --git a/styles/globals.css b/styles/globals.css
index 9ce0a444c7..2ebd20a2d6 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -100,63 +100,82 @@
 }
 
 .react-multi-email > [type='text'] {
-    @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;
+  @apply shadow-sm dark:bg-black 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;
-  }
+  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;
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  align-content: flex-start;
+  padding-top: 0.1rem !important;
+  padding-bottom: 0.1rem !important;
+  padding-left: 0.75rem !important;
+  @apply dark:border-black border-white dark:bg-black bg-white;
+}
 
-  .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 > [type='text']{
+  box-shadow: none !important;
+}
 
-  .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.focused{
+  margin: -1px;
+  border: 2px solid #000 !important;
+  @apply dark:bg-black
+}
+
+.react-multi-email > [type='text']:focus{
+  box-shadow: none !important;
+}
+
+.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: #000;
+}
+
+.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] {
+  box-shadow: none !important;
+  @apply inline-flex items-center px-2 py-1 my-1 mr-2 border border-transparent text-sm font-medium rounded-md text-gray-900 dark:text-white bg-neutral-200 hover:bg-neutral-100 dark:bg-black 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;
+}
 
-  .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{