Merge branch 'master' of https://github.com/okbel/e-comm-example

components/core/Layout/Layout.module.css

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

components/core/Navbar/Navbar.module.css

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

components/core/Navbar/Navbar.tsx

@@ -1,15 +1,16 @@
-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>
@@ -37,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>

components/core/Toggle/Toggle.module.css

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

components/core/Toggle/Toggle.tsx

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

components/core/Toggle/index.ts

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

components/core/UserNav/UserNav.module.css

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

components/core/index.ts

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

components/product/ProductCard/ProductCard.module.css

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

components/product/Swatch/Swatch.module.css

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

components/ui/Sidebar/Sidebar.tsx

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