public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed add guest input for darkmode

pull/431/head
Peer Richelsen 2021-08-08 23:44:11 +02:00
parent 3370e24c3b
commit 6e7893d1a8
2 changed files with 87 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -329,32 +329,28 @@ export default function Book(props: any): JSX.Element {
</div> </div>
))} ))}
<div className="mb-4"> <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 <label
onClick={toggleGuestEmailInput}
htmlFor="guests" htmlFor="guests"
className="block text-sm font-medium dark:text-white text-blue-500 mb-1 hover:cursor-pointer"> className="block text-sm font-medium dark:text-white text-gray-700 mb-1">
+ Additional Guests
</label>
}
{guestToggle && (
<div>
<label
htmlFor="guests"
className="block text-sm font-medium dark:text-white text-gray-700">
Guests Guests
</label> </label>
<ReactMultiEmail <ReactMultiEmail
placeholder="guest@example.com" placeholder="guest@example.com"
emails={guestEmails} emails={guestEmails}
onChange={(_emails: string[]) => { onChange={(_emails: string[]) => {
setGuestEmails(_emails); setGuestEmails(_emails);
}} }}
getLabel={( getLabel={(email: string, index: number, removeEmail: (index: number) => void) => {
email: string,
index: number,
removeEmail: (index: number) => void
) => {
return ( return (
<div data-tag key={index}> <div data-tag key={index}>
{email} {email}
@ -364,11 +360,10 @@ export default function Book(props: any): JSX.Element {
</div> </div>
); );
}} }}
/> />
</div> </div>
)} )}
</div>
</div>
<div className="mb-4"> <div className="mb-4">
<label <label
htmlFor="notes" htmlFor="notes"

119
styles/globals.css
View File

@ -100,63 +100,82 @@
} }
.react-multi-email > [type='text'] { .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 { .react-multi-email {
margin: 0; margin: 0;
max-width: 100%; max-width: 100%;
-webkit-box-flex: 1; -webkit-box-flex: 1;
-ms-flex: 1 0 auto; -ms-flex: 1 0 auto;
flex: 1 0 auto; flex: 1 0 auto;
text-align: left; text-align: left;
line-height: 1.25rem; line-height: 1.25rem;
padding: 0.75em 0.5rem; position: relative;
padding: 0; display: flex;
position: relative; flex-wrap: wrap;
display: flex; align-items: center;
flex-wrap: wrap; align-content: flex-start;
align-items: center; padding-top: 0.1rem !important;
align-content: flex-start; 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] { .react-multi-email > [type='text']{
display: none; box-shadow: none !important;
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] { .react-multi-email.focused{
display: none; margin: -1px;
} border: 2px solid #000 !important;
@apply dark:bg-black
.react-multi-email > input { }
width: 100% !important;
display: inline-block !important; .react-multi-email > [type='text']:focus{
@apply mt-1; box-shadow: none !important;
} }
.react-multi-email [data-tag] { .react-multi-email > span[data-placeholder] {
@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; 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 */ /* !important to override react-select */
.react-select__value-container{ .react-select__value-container{