maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improved styling and dark mode for add-guest button

This commit is contained in:
Syed Ali Shahbaz 2021-08-05 10:03:08 +05:30
parent 183386848a
commit 6102feec1f
3 changed files with 91 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
pages/[user]/book.tsx
View File

@ -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

2
pages/api/book/[user].ts
View File

@ -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

59
styles/globals.css
View File

@ -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;