cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

Modal Dark Mode

Browse Source
This commit is contained in:
Belen Curcio 2020-10-22 18:24:04 -03:00
parent 98a1b7e8f0
commit c27c55ea46
3 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/ui/Modal/Modal.module.css
View File

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

2
pages/index.tsx
View File

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

6
pages/login.tsx
View File

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