diff --git a/README.md b/README.md index 2a6bfa3a..78149e12 100644 --- a/README.md +++ b/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 `/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: - 1. account:write:admin - 2. meeting:write:admin - 3. user:write:admin +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`. 12. Click "Done". 13. You're good to go. Now you can easily add your Zoom integration in the Calendso settings. diff --git a/pages/[user]/book.tsx b/pages/[user]/book.tsx index 3e4da54d..e98e9753 100644 --- a/pages/[user]/book.tsx +++ b/pages/[user]/book.tsx @@ -329,34 +329,46 @@ export default function Book(props: any): JSX.Element { ))}
- {!guestToggle && ( - - )} - {guestToggle && ( - { - setGuestEmails(_emails); - }} - getLabel={(email: string, index: number, removeEmail: (index: number) => void) => { - return ( -
- {email} - removeEmail(index)}> - × - -
- ); - }} - /> - )} -
+ {!guestToggle && + + } + {guestToggle && ( +
+ + { + setGuestEmails(_emails); + }} + getLabel={( + email: string, + index: number, + removeEmail: (index: number) => void + ) => { + return ( +
+ {email} + removeEmail(index)}> + × + +
+ ); + }} + /> +
+ )} + +
- + Contact us
diff --git a/pages/settings/teams.tsx b/pages/settings/teams.tsx index 260d06b3..d78299d2 100644 --- a/pages/settings/teams.tsx +++ b/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

Loading...

; + return ; } const createTeam = (e) => { diff --git a/styles/globals.css b/styles/globals.css index 316a2d8e..9ce0a444 100644 --- a/styles/globals.css +++ b/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;