forked from crowetic/commerce
Modal Dark Mode
This commit is contained in:
parent
98a1b7e8f0
commit
c27c55ea46
@ -1,8 +1,8 @@
|
|||||||
.root {
|
.root {
|
||||||
@apply fixed bg-black flex items-center inset-0 z-50 justify-center;
|
@apply fixed bg-primary text-primary flex items-center inset-0 z-50 justify-center;
|
||||||
background-color: rgba(0, 0, 0, 0.35);
|
background-color: rgba(0, 0, 0, 0.35);
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal {
|
.modal {
|
||||||
@apply bg-white p-12;
|
@apply bg-primary p-12 border border-accents-2;
|
||||||
}
|
}
|
||||||
|
@ -70,7 +70,7 @@ export default function Home({
|
|||||||
))}
|
))}
|
||||||
</Grid>
|
</Grid>
|
||||||
<Marquee variant="secondary">
|
<Marquee variant="secondary">
|
||||||
{bestSelling.slice(0, 3).map(({ node }) => (
|
{bestSelling.slice(3, 6).map(({ node }) => (
|
||||||
<ProductCard key={node.path} product={node} variant="slim" />
|
<ProductCard key={node.path} product={node} variant="slim" />
|
||||||
))}
|
))}
|
||||||
</Marquee>
|
</Marquee>
|
||||||
|
@ -28,20 +28,20 @@ export default function Login() {
|
|||||||
<div className="pb-20">
|
<div className="pb-20">
|
||||||
<Modal close={() => {}}>
|
<Modal close={() => {}}>
|
||||||
<div className="h-80 w-80 flex flex-col justify-between py-3 px-3">
|
<div className="h-80 w-80 flex flex-col justify-between py-3 px-3">
|
||||||
<div className="flex justify-center pb-12">
|
<div className="flex justify-center pb-12 ">
|
||||||
<Logo width="64px" height="64px" />
|
<Logo width="64px" height="64px" />
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col space-y-3">
|
<div className="flex flex-col space-y-3">
|
||||||
<div className="border border-accents-3 text-accents-6">
|
<div className="border border-accents-3 text-accents-6">
|
||||||
<input
|
<input
|
||||||
placeholder="Email"
|
placeholder="Email"
|
||||||
className="focus:outline-none focus:shadow-outline-gray border-none py-2 px-6 w-full appearance-none transition duration-150 ease-in-out placeholder-accents-5 pr-10"
|
className="focus:outline-none bg-primary focus:shadow-outline-gray border-none py-2 px-6 w-full appearance-none transition duration-150 ease-in-out placeholder-accents-5 pr-10"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="border border-accents-3 text-accents-6">
|
<div className="border border-accents-3 text-accents-6">
|
||||||
<input
|
<input
|
||||||
placeholder="Password"
|
placeholder="Password"
|
||||||
className="focus:outline-none focus:shadow-outline-gray border-none py-2 px-6 w-full appearance-none transition duration-150 ease-in-out placeholder-accents-5 pr-10"
|
className="bg-primary focus:outline-none focus:shadow-outline-gray border-none py-2 px-6 w-full appearance-none transition duration-150 ease-in-out placeholder-accents-5 pr-10"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<Button variant="slim" onClick={handleSignup}>
|
<Button variant="slim" onClick={handleSignup}>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user