Merge branch 'main' into bugfix/unify-email-sending

README.md

@@ -229,16 +229,13 @@ Contributions are what make the open source community such an amazing place to b
 2. On the upper right, click "Develop" => "Build App".
 3. On "OAuth", select "Create".
 4. Name your App.
-5. Choose "Account-level app" as the app type.
+5. Choose "User-managed app" as the app type.
 6. De-select the option to publish the app on the Zoom App Marketplace.
 7. Click "Create".
 8. Now copy the Client ID and Client Secret to your .env file into the `ZOOM_CLIENT_ID` and `ZOOM_CLIENT_SECRET` fields.
 9. Set the Redirect URL for OAuth `<CALENDSO URL>/api/integrations/zoomvideo/callback` replacing CALENDSO URL with the URI at which your application runs.
 10. Also add the redirect URL given above as a whitelist URL and enable "Subdomain check". Make sure, it says "saved" below the form.
-11. You don't need to provide basic information about your app. Instead click at "Scopes" and then at "+ Add Scopes". Search for and check the following scopes:
+11. You don't need to provide basic information about your app. Instead click at "Scopes" and then at "+ Add Scopes". On the left, click the category "Meeting" and check the scope `meeting:write`.
-    1. account:write:admin
-    2. meeting:write:admin
-    3. user:write:admin
 12. Click "Done".
 13. You're good to go. Now you can easily add your Zoom integration in the Calendso settings.
 

pages/[user]/book.tsx

@@ -329,22 +329,32 @@ 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 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
                         </label>       
-                    )}
+                      }
                       {guestToggle && (
+                        <div>
+                          <label
+                          htmlFor="guests"
+                          className="block text-sm font-medium dark:text-white text-gray-700">
+                          Guests
+                          </label>                         
                           <ReactMultiEmail
-                        placeholder="Input your Email Address"
+                          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}
@@ -355,7 +365,9 @@ export default function Book(props: any): JSX.Element {
                             );
                           }}
                         /> 
+                        </div>
                         )}
+                      
                   </div>    
                   <div className="mb-4">
                     <label

pages/bookings/index.tsx

@@ -9,6 +9,7 @@ import { Menu, Transition } from "@headlessui/react";
 import { DotsHorizontalIcon } from "@heroicons/react/solid";
 import classNames from "@lib/classNames";
 import { ClockIcon, XIcon } from "@heroicons/react/outline";
+import Loader from "@components/Loader";
 
 export default function Bookings({ bookings }) {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -17,7 +18,7 @@ export default function Bookings({ bookings }) {
   const router = useRouter();
 
   if (loading) {
-    return <p className="text-gray-400">Loading...</p>;
+    return <Loader />;
   }
 
   async function confirmBookingHandler(booking, confirm: boolean) {

pages/integrations/index.tsx

@@ -267,7 +267,7 @@ export default function IntegrationHome({ integrations }) {
               <p>If you want to add your own App here, get in touch with us.</p>
             </div>
             <div className="mt-5">
-              <a href="apps@calendso.com" className="btn btn-white">
+              <a href="mailto:apps@calendso.com" className="btn btn-white">
                 Contact us
               </a>
             </div>

pages/settings/teams.tsx

@@ -8,6 +8,7 @@ import { getSession, useSession } from "next-auth/client";
 import { UsersIcon } from "@heroicons/react/outline";
 import TeamList from "../../components/team/TeamList";
 import TeamListItem from "../../components/team/TeamListItem";
+import Loader from "@components/Loader";
 
 export default function Teams() {
   const [, loading] = useSession();
@@ -38,7 +39,7 @@ export default function Teams() {
   }, []);
 
   if (loading) {
-    return <p className="text-gray-400">Loading...</p>;
+    return <Loader />;
   }
 
   const createTeam = (e) => {

styles/globals.css

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