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

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

@ -329,19 +329,19 @@ 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
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
@ -350,11 +350,7 @@ export default function Book(props: any): JSX.Element {
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}
@ -367,7 +363,6 @@ export default function Book(props: any): JSX.Element {
/>
</div>
)}
</div>
<div className="mb-4">
<label

59
styles/globals.css
View File

@ -100,7 +100,7 @@
}
.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 {
@ -111,52 +111,71 @@
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;
}
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] {
.react-multi-email > [type='text']{
box-shadow: none !important;
}
.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] {
.react-multi-email.empty > span[data-placeholder] {
display: inline;
color: #646b7a;
}
color: #000;
}
.react-multi-email.focused > span[data-placeholder] {
.react-multi-email.focused > span[data-placeholder] {
display: none;
}
}
.react-multi-email > input {
.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] {
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] {
.react-multi-email [data-tag] [data-tag-item] {
max-width: 100%;
overflow: hidden;
}
}
.react-multi-email [data-tag] [data-tag-handle] {
.react-multi-email [data-tag] [data-tag-handle] {
margin-left: 0.833em;
cursor: pointer;
}
}
/* !important to override react-select */
.react-select__value-container{