I am trying to change the card color of a modal made with Flowbite-Svelte but I cannot find a way to get to it. Right now it is a blueish gray and I would like to change it.
Changing the bg tailwind property only changes the backdrop but not the actual modal.
Does anyone have experience with Flowbite-Svelte?
https://flowbite-svelte.com/
Code:
<Button btnClass="tracking-[.35em] font-semibold drop-shadow-md text-xs bg-black py-4 px-8 text-white uppercase font-display rounded dark:text-black dark:bg-white" on:click={() => defaultModal = true}>
Default modal
</Button>
<Modal backdropClasses="bg-none backdrop-blur-md" class="font-display" title="Terms of Service" bind:open={defaultModal}>
<p class="text-base font-sans font-extralight leading-relaxed text-gray-500 dark:text-gray-400">
With less than a month to go before the European Union enacts new consumer privacy laws for its citizens,
companies around the world are updating their terms of service agreements to comply.
</p>
<p class="text-base font-sans font-extralight leading-relaxed text-gray-500 dark:text-gray-400">
The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
</p>
<svelte:fragment slot='footer'>
<Button btnClass="tracking-[.35em] font-semibold drop-shadow-md text-xs bg-black py-4 px-8 text-white uppercase font-display rounded dark:text-black dark:bg-white" on:click={() => alert('Handle "success"')}>Accept</Button>
<Button btnClass="tracking-[.35em] drop-shadow-md font-semibold text-black text-xs bg-white py-4 px-8 uppercase font-display rounded dark:bg-black dark:text-white dark:border" color="alternative">Decline</Button>
</svelte:fragment>
</Modal>
`
Related
I am trying to create tooltip here by using Tailwind css and displaying it on Pebble SVG
<div className="relative items-center group">
<span tw="flex items-center gap-1">
Payment method
<Pebble />
</span>
<div tw="bottom-0 flex flex-col items-center hidden group-hover:flex">
<span tw="relative p-2 text-sm text-inkWhite-100 bg-inkBlack-100">
If you'd like to change your payment method, go to section.
</span>
<div tw="w-3 h-3 -mt-2 rotate-45 bg-black"></div>
</div
Any other way around for it?
I've run into this problem, while I was writing the Code for my Portfolio.
I want to position my two buttons (as seen in the image below) to the bottom of the parenting div. I also want the alignment of the two buttons to be the same (in the middle of the parenting div). Just at the bottom.
https://i.stack.imgur.com/T6Mmg.png
Here is the code of just one div.
<div className='md:flex justify-center'>
<div className='m-2 p-4 bg-gray-100 border-2 border-gray-300 rounded-lg max-w-md shadow-xl mx-auto md:mx-4 hover:scale-105 duration-150 group'>
<div className='flex justify-between'>
<h1 className='font-bold text-xl'>The[Creators] - NFT Homepage</h1>
<img src={tcLogo} alt="thecreatorslogo" className='w-14 hover:rotate-12 duration-150' />
</div>
<p className='py-2'>My first Project was a Homepage, which contains infos about Jan Lampert's and my NFT Collections. You can find the Link down here 👇.</p>
<div className='flex bottom-4 items-end md:scale-0 group-hover:scale-100 duration-150'>
<button className='mx-auto rounded-xl bg-cyan-400 hover:shadow-lg hover:shadow-cyan-600 duration-300 py-4 px-6 font-bold text-xl'>Github</button>
<button className='mx-auto rounded-xl bg-pink-400 hover:shadow-lg hover:shadow-pink-600 duration-300 py-4 px-6 font-bold text-xl'><a href="https://thecreatorsnft.com" target='blank'>Website</a></button>
</div>
</div>
Here's a possible solution that can work here, keep in mind that they're many ways to solve this problem; in general, you have a lot of duplicate code, and I would try to find some ways to create components dynamically—for example, the projects' boxes and the links you have in your footer.
Solution:
Apply flex and flex-col on your projects' containers. Then apply justify-between to create this kind of spacing between your elements:
flex flex-col justify-between
Tailwind Play with the example
If you don't want to have the spacing between your header and your paragraph, you may create another container with the two of them.
To keep it simple, I'll give each container the flex utilities as well:
<div class="flex flex-col">
<-- Your header and paragraph elements --!>
</div>
You can style it however you want with the specific gaps you desire:
Tailwind Play with the example
Please note that I added the class md:w-1/3 on each container (on the second to give each project the same width. It might not be necessary for you; you can style it in many other ways.
I am practicing my react skills and cant figure out how to get this button pictured below to be under the text.
This is my code:
<div className="font-secondary text-xs md:text-base max-w-{100px} flex flex-row items-center gap-2 bg-white rounded-xl px-5 py-4 text-content-button font-bold hover:opacity-70 duration-300">
{
<Button href={LINKS.application} target="_self" external>
Get Platinum access now!
</Button>
}
</div>
Thanks for helping in advance!
Try setting the styles to flex column. You're currently at flex row, which makes it parallel
Also you can remove the "{ }" since it is a children element of the div
I have a Form with several components:
return (
<>
<FormProvider {...methods} >
<div className="mt-12">
<form onSubmit={handleSubmit(onSubmit)} action="#" method="POST" >
<Email/>
<Personal/>
<h2 className='font-semibold text-xl'>Geburtsdaten</h2>
<p className='mb-5 text-gray-400 text-sm'>Du musst mindestens 18 Jahre alt sein, um online einen Vertrag abzuschließen.</p>
<div className="sm:col-span-2 grid grid-cols-3 gap-4 mb-5">
<div className="mt-1">
< SelectBirthYear
years={years}
value={selectedYear}
onChange={setSelectedYear}/>
</div>
<div className="mt-1">
< SelectBirthMonth
startYear={startYear}
selectedYear={selectedYear}
months={months}
value={selectedMonth}
reducedMonths={reducedMonths}
onChange={monthSelect}/>
</div>
<div className="mt-1">
<SelectBirthDay
startYear={startYear}
selectedYear={selectedYear}
selectedMonth={selectedMonth}
monthNow={monthNow}
days={days}
value={selectedDay}
reducedDays={reducedDays}
onChange={daySelect}
/>
</div>
</div>
<Contact/>
<BankDetails/>
<Checkboxes />
<div className="sm:col-span-2">
</div>
<div className="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-center">
<div className="rounded-md shadow">
<a role="button" tabIndex={0}
onClick={prevFormStep}
className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-yellow-500 hover:bg-yallow-600 md:py-4 md:text-lg md:px-10"
>
Zurück
</a>
</div>
<div className="mt-3 sm:mt-0 sm:ml-3">
<input
type='submit'
value='Vertrag abschließen'
className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-yellow-500 hover:bg-yallow-600 md:py-4 md:text-lg md:px-10"
/>
</div>
</div>
</form>
</div>
</FormProvider>
</>
)
For my From validations I already use react-hook-form:
const methods = useForm({ mode: 'onTouched' });
const { handleSubmit } = methods;
So now, looking into documentation, I can't see the possibility of persisting values on input change. In the console I can access the _formValues in the control, but in my App I can't even manage to console.log those. Also, about control it is said: This object contains methods for registering components into React Hook Form. Important: do not access any of the properties inside this object directly. It's for internal usage only.
My thinking was, if I can access the formValues, then I could save those into Local Storage. But I am not getting that far. Also, having form with a lot of components, naming each where I wish to save the Value on every change woudn't be dry. So is there any strategy to get all values out of my Form and to add those to local storage, so if for whatever reason User reloads or goes back in the browser history, the filles out form persists?
I have the following two buttons which I hope to merge into one.
<div className="mt-8 mb-16">
<button
onClick={handlePurchase}
type="button"
// disabled='{this[id] <= 10}'
className="inline-flex items-center px-16 py-3 border border-transparent text-base font-large elevation-15 rounded-md text-white bg-green-600
hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
>
Mint me a Marköbot!
</button>
</div>
<div className="mt-8 mb-16">
<button
type="button"
disabled='{this[id] <= 10}'
className="inline-flex items-center px-16 py-3 border border-transparent text-base font-large elevation-15 rounded-md text-gray-500 bg-gray-300"
>
All Marköbot have been minted!
</button>
</div>
The condition is this.id <=10. Using ReactJS and TailWind.
It's a alternative approach I am taking to solve the issue posted at Conditional disabling of button
Thanks lots for advice/help!
Markelous
Instead of merging the two buttons, the same could be performed using JSX callback. See solution on the other posting at Conditional disabling of button
The undefined return came from the callback. It needs to be bound before (in this case) passing to the button.
See some of the other approaches suggested: How to use ternary operator in the render method in reactjs?