crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 20:26:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adding partial night mode

Browse Source
This commit is contained in:
Belen Curcio
2020-10-12 21:40:39 -03:00
parent 1629f718b0
commit 6bf209eccd
18 changed files with 135 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/core/Layout/Layout.module.css
View File

@@ -1,5 +1,5 @@
.root {
@apply h-full;
@apply h-full bg-primary;
}
.main {

2
components/core/Navbar/Navbar.module.css
View File

@@ -1,3 +1,3 @@
.link {
@apply group text-gray-500 inline-flex items-center text-base leading-6 font-medium hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-100 cursor-pointer;
@apply group text-primary inline-flex items-center text-base leading-6 font-medium hover:text-secondary focus:outline-none focus:text-secondary transition ease-in-out duration-100 cursor-pointer;
}

18
components/core/Navbar/Navbar.tsx
View File

@@ -1,16 +1,16 @@
import cn from 'classnames'
import { FC } from 'react'
import s from './Navbar.module.css'
import { Logo, Container } from '@components/ui'
import { Searchbar } from '@components/core'
import { UserNav } from '@components/core'
import { FC } from 'react'
import Link from 'next/link'
import { useTheme } from 'next-themes'
import { Logo, Container } from '@components/ui'
import { Searchbar, Toggle, UserNav } from '@components/core'
interface Props {
className?: string
}
const Navbar: FC<Props> = ({ className }) => {
const rootClassName = className
const { theme, setTheme } = useTheme()
return (
<div className={rootClassName}>
<Container>
@@ -38,7 +38,13 @@ const Navbar: FC<Props> = ({ className }) => {
<Searchbar />
</div>
<div className="flex flex-initial md:flex-1 justify-end">
<div className="flex flex-initial md:flex-1 justify-end space-x-8">
<Toggle
checked={theme === 'dark'}
onChange={() =>
theme === 'dark' ? setTheme('light') : setTheme('dark')
}
/>
<UserNav />
</div>
</div>

2
components/core/Toggle/Toggle.module.css Normal file
View File

@@ -0,0 +1,2 @@
.root {
}

51
components/core/Toggle/Toggle.tsx Normal file
View File

@@ -0,0 +1,51 @@
import React, { FC } from 'react'
import { Switch } from '@headlessui/react'
import { HiSun, HiMoon } from 'react-icons/hi'
interface Props {
className?: string
checked: boolean
onChange: any
}
const Toggle: FC<Props> = ({ className, checked, onChange }) => {
return (
<Switch checked={checked} onChange={onChange}>
<span
role="checkbox"
aria-checked="false"
tabIndex={0}
className={`${
checked ? 'bg-gray-800' : 'bg-gray-200'
} relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:shadow-outline`}
>
<span
aria-hidden="true"
className={`${
checked ? 'translate-x-5' : 'translate-x-0'
} translate-x-0 relative inline-block h-5 w-5 rounded-full bg-white shadow transform transition ease-in-out duration-200`}
>
<span
className={`${
checked
? 'opacity-0 ease-out duration-100'
: 'opacity-100 ease-in duration-200'
} absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`}
>
<HiSun className="h-3 w-3 text-gray-400" />
</span>
<span
className={`${
checked
? 'opacity-100 ease-in duration-200'
: 'opacity-0 ease-out duration-100'
} opacity-0 ease-out duration-100 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`}
>
<HiMoon className="h-3 w-3 text-yellow-400" />
</span>
</span>
</span>
</Switch>
)
}
export default Toggle

1
components/core/Toggle/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default } from './Toggle'

4
components/core/UserNav/UserNav.module.css
View File

@@ -6,10 +6,10 @@
}
.item {
@apply mr-6 cursor-pointer relative transition ease-in-out duration-100;
@apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-primary;
&:hover {
@apply text-gray-500;
@apply text-secondary;
}
&:last-child {

1
components/core/index.ts
View File

@@ -5,3 +5,4 @@ export { default as Layout } from './Layout'
export { default as Navbar } from './Navbar'
export { default as Searchbar } from './Searchbar'
export { default as UserNav } from './UserNav'
export { default as Toggle } from './Toggle'

8
components/product/ProductCard/ProductCard.module.css
View File

@@ -62,11 +62,11 @@
}
.squareBg {
@apply transform absolute inset-0 z-0 bg-black;
@apply transform absolute inset-0 z-0 bg-secondary;
}
.productTitle {
@apply p-3 h-14 bg-white text-black font-bold text-xl truncate leading-8 inline-flex;
@apply p-3 h-14 bg-primary text-primary font-bold text-xl truncate leading-8 inline-flex;
max-width: calc(100% - 50px);
@screen lg {
@@ -75,9 +75,9 @@
}
.productPrice {
@apply px-3 py-1 pb-2 bg-white text-black font-semibold inline-block text-sm leading-6;
@apply px-3 py-1 pb-2 bg-primary text-primary font-semibold inline-block text-sm leading-6;
}
.wishlistButton {
@apply w-10 h-10 flex items-center justify-center bg-white text-black font-semibold inline-block text-xs leading-6 cursor-pointer;
@apply w-10 h-10 flex items-center justify-center bg-primary text-primary font-semibold inline-block text-xs leading-6 cursor-pointer;
}

2
components/product/Swatch/Swatch.module.css
View File

@@ -1,5 +1,5 @@
.root {
@apply h-12 w-12 bg-white text-black rounded-full mr-3 inline-flex items-center justify-center cursor-pointer transition duration-75 ease-in-out p-0 shadow-none;
@apply h-12 w-12 bg-white text-primary rounded-full mr-3 inline-flex items-center justify-center cursor-pointer transition duration-75 ease-in-out p-0 shadow-none;
}
.active.size {

2
components/ui/Sidebar/Sidebar.tsx
View File

@@ -73,7 +73,7 @@ const Sidebar: FC<Props> = ({ className, children, show = true, close }) => {
leaveTo="translate-x-full"
>
<div className="h-full w-screen max-w-md">
<div className="h-full flex flex-col bg-white shadow-xl overflow-y-auto">
<div className="h-full flex flex-col text-primary bg-primary shadow-xl overflow-y-auto">
{children}
</div>
</div>