From 6bf209eccde6aa779e435947421747594dabea3e Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Mon, 12 Oct 2020 21:40:39 -0300 Subject: [PATCH] Adding partial night mode --- assets/global.css | 163 ++---------------- components/core/Layout/Layout.module.css | 2 +- components/core/Navbar/Navbar.module.css | 2 +- components/core/Navbar/Navbar.tsx | 18 +- components/core/Toggle/Toggle.module.css | 2 + components/core/Toggle/Toggle.tsx | 51 ++++++ components/core/Toggle/index.ts | 1 + components/core/UserNav/UserNav.module.css | 4 +- components/core/index.ts | 1 + .../ProductCard/ProductCard.module.css | 8 +- components/product/Swatch/Swatch.module.css | 2 +- components/ui/Sidebar/Sidebar.tsx | 2 +- package.json | 2 + pages/_app.tsx | 17 +- pages/index.tsx | 8 +- pages/search.tsx | 20 ++- tailwind.config.js | 11 +- yarn.lock | 12 ++ 18 files changed, 135 insertions(+), 191 deletions(-) create mode 100644 components/core/Toggle/Toggle.module.css create mode 100644 components/core/Toggle/Toggle.tsx create mode 100644 components/core/Toggle/index.ts diff --git a/assets/global.css b/assets/global.css index 507d3fd82..775a08b1e 100644 --- a/assets/global.css +++ b/assets/global.css @@ -1,155 +1,17 @@ @import './font.css'; :root { - /* Spacing variables */ - --geist-space: 4px; - --geist-space-2x: 8px; - --geist-space-4x: 16px; - --geist-space-8x: 32px; - --geist-space-16x: 64px; - --geist-space-24x: 96px; - --geist-space-32x: 128px; - --geist-space-48x: 192px; - --geist-space-64x: 256px; + --bg-primary: white; + --bg-secondary: black; + --text-primary: black; + --text-secondary: #252f3f; +} - --geist-space-small: 32px; - --geist-space-medium: 40px; - --geist-space-large: 48px; - - --geist-space-gap: 24px; - --geist-space-gap-half: 12px; - --geist-space-gap-quarter: var(--geist-space-2x); - - --geist-gap: var(--geist-space-gap); - --geist-gap-half: var(--geist-space-gap-half); - --geist-gap-quarter: var(--geist-space-gap-quarter); - --geist-gap-double: var(--geist-space-large); - - /* Negative values */ - --geist-space-negative: -4px; - --geist-space-2x-negative: -8px; - --geist-space-4x-negative: -16px; - --geist-space-8x-negative: -32px; - --geist-space-16x-negative: -64px; - --geist-space-24x-negative: -96px; - --geist-space-32x-negative: -128px; - --geist-space-48x-negative: -192px; - --geist-space-64x-negative: -256px; - - --geist-space-small-negative: -32px; - --geist-space-medium-negative: -40px; - --geist-space-large-negative: -48px; - - --geist-space-gap-negative: -24px; - --geist-space-gap-half-negative: -12px; - --geist-space-gap-quarter-negative: var(--geist-space-2x-negative); - - --geist-gap-negative: var(--geist-space-gap-negative); - --geist-gap-half-negative: var(--geist-space-gap-half-negative); - --geist-gap-quarter-negative: var(--geist-space-gap-quarter-negative); - --geist-gap-double-negative: var(--geist-space-large-negative); - - /* Page values */ - --geist-page-margin: var(--geist-space-gap); - --geist-page-width: 1000px; - --geist-page-width-with-margin: 1048px; /* 1000px + (2 * page margin) */ - - /* Appearance */ - --geist-radius: 5px; - --geist-marketing-radius: 8px; - - /* Fonts */ - --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', - 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - --font-mono: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, - Bitstream Vera Sans Mono, Courier New, monospace; - - /* Header */ - --header-height: 64px; - --header-border-bottom: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1); - --header-background: rgba(255, 255, 255, 0.8); - - /* Form sizing */ - --geist-form-large-font: 1rem; - --geist-form-large-line-height: 1.5rem; - --geist-form-large-height: var(--geist-space-large); - - --geist-form-small-font: 0.875rem; - --geist-form-small-line-height: 0.875rem; - --geist-form-small-height: var(--geist-space-small); - - --geist-form-font: 0.875rem; - --geist-form-line-height: 1.25rem; - --geist-form-height: var(--geist-space-medium); - - --geist-success-lighter: #d3e5ff; - --geist-success-light: #3291ff; - --geist-success: #0070f3; - --geist-success-dark: #0761d1; - - --geist-error-lighter: #f7d4d6; - --geist-error-light: #ff1a1a; - --geist-error: #ee0000; - --geist-error-dark: #c50000; - - --geist-warning-lighter: #ffefcf; - --geist-warning-light: #f7b955; - --geist-warning: #f5a623; - --geist-warning-dark: #ab570a; - - --geist-violet-lighter: #e3d7fc; - --geist-violet-light: #8a63d2; - --geist-violet: #7928ca; - --geist-violet-dark: #4c2889; - - --geist-cyan-lighter: #aaffec; - --geist-cyan-light: #79ffe1; - --geist-cyan: #50e3c2; - --geist-cyan-dark: #29bc9b; - - --geist-highlight-purple: #f81ce5; - --geist-highlight-magenta: #eb367f; - --geist-highlight-pink: #ff0080; - - --geist-foreground: #000; - --geist-background: #fff; - --geist-selection: var(--geist-cyan-light); - --accents-1: #fafafa; - --accents-2: #eaeaea; - --accents-3: #999999; - --accents-4: #888888; - --accents-5: #666666; - --accents-6: #444444; - --accents-7: #333333; - --accents-8: #111111; - - --geist-link-color: var(--geist-success); - --geist-marketing-gray: #fafbfc; - --geist-code: var(--geist-highlight-purple); - - /* Secondary (Gray) */ - --geist-secondary-lighter: var(--accents-2); - --geist-secondary-light: var(--accents-3); - --geist-secondary: var(--accents-5); - --geist-secondary-dark: var(--accents-7); - - /* Shadows and other values */ - - --dropdown-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.02); - --dropdown-triangle-stroke: #fff; - - --scroller-start: rgba(255, 255, 255, 1); - --scroller-end: rgba(255, 255, 255, 0); - - --shadow-smallest: 0px 4px 8px rgba(0, 0, 0, 0.12); - --shadow-small: 0 5px 10px rgba(0, 0, 0, 0.12); - --shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.12); - --shadow-large: 0 30px 60px rgba(0, 0, 0, 0.12); - --shadow-hover: 0 30px 60px rgba(0, 0, 0, 0.12); - - --shadow-sticky: 0 12px 10px -10px rgba(0, 0, 0, 0.12); - --portal-opacity: 0.25; +[data-theme='dark'] { + --bg-primary: black; + --bg-secondary: white; + --text-primary: white; + --text-secondary: white; } *, @@ -174,9 +36,8 @@ body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - background-color: var(--geist-background); - color: var(--geist-foreground); - scroll-padding-top: var(--header-height); + background-color: var(--bg-primary); + color: var(--text-primary); } body { diff --git a/components/core/Layout/Layout.module.css b/components/core/Layout/Layout.module.css index abba10607..d9ee4fa63 100644 --- a/components/core/Layout/Layout.module.css +++ b/components/core/Layout/Layout.module.css @@ -1,5 +1,5 @@ .root { - @apply h-full; + @apply h-full bg-primary; } .main { diff --git a/components/core/Navbar/Navbar.module.css b/components/core/Navbar/Navbar.module.css index cc242559f..d808a2a5b 100644 --- a/components/core/Navbar/Navbar.module.css +++ b/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; } diff --git a/components/core/Navbar/Navbar.tsx b/components/core/Navbar/Navbar.tsx index 740054cf0..8ef896190 100644 --- a/components/core/Navbar/Navbar.tsx +++ b/components/core/Navbar/Navbar.tsx @@ -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 = ({ className }) => { const rootClassName = className + const { theme, setTheme } = useTheme() return (
@@ -38,7 +38,13 @@ const Navbar: FC = ({ className }) => {
-
+
+ + theme === 'dark' ? setTheme('light') : setTheme('dark') + } + />
diff --git a/components/core/Toggle/Toggle.module.css b/components/core/Toggle/Toggle.module.css new file mode 100644 index 000000000..c3a2af639 --- /dev/null +++ b/components/core/Toggle/Toggle.module.css @@ -0,0 +1,2 @@ +.root { +} diff --git a/components/core/Toggle/Toggle.tsx b/components/core/Toggle/Toggle.tsx new file mode 100644 index 000000000..d33d3c371 --- /dev/null +++ b/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 = ({ className, checked, onChange }) => { + return ( + + + + + + ) +} + +export default Toggle diff --git a/components/core/Toggle/index.ts b/components/core/Toggle/index.ts new file mode 100644 index 000000000..024be170a --- /dev/null +++ b/components/core/Toggle/index.ts @@ -0,0 +1 @@ +export { default } from './Toggle' diff --git a/components/core/UserNav/UserNav.module.css b/components/core/UserNav/UserNav.module.css index 6a3cd956f..9382fe940 100644 --- a/components/core/UserNav/UserNav.module.css +++ b/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 { diff --git a/components/core/index.ts b/components/core/index.ts index e6672f4e5..587c9cece 100644 --- a/components/core/index.ts +++ b/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' diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css index 509aaabb0..a32d3e1b4 100644 --- a/components/product/ProductCard/ProductCard.module.css +++ b/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; } diff --git a/components/product/Swatch/Swatch.module.css b/components/product/Swatch/Swatch.module.css index 3a795139e..046f256e6 100644 --- a/components/product/Swatch/Swatch.module.css +++ b/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 { diff --git a/components/ui/Sidebar/Sidebar.tsx b/components/ui/Sidebar/Sidebar.tsx index c292eebc6..d0884dc0a 100644 --- a/components/ui/Sidebar/Sidebar.tsx +++ b/components/ui/Sidebar/Sidebar.tsx @@ -73,7 +73,7 @@ const Sidebar: FC = ({ className, children, show = true, close }) => { leaveTo="translate-x-full" >
-
+
{children}
diff --git a/package.json b/package.json index 4828494ab..53c5da386 100644 --- a/package.json +++ b/package.json @@ -27,10 +27,12 @@ "lodash": "^4.17.20", "lodash.debounce": "^4.0.8", "next": "^9.5.4", + "next-themes": "^0.0.4", "postcss-nesting": "^7.0.1", "react": "^16.13.1", "react-aria": "^3.0.0", "react-dom": "^16.13.1", + "react-icons": "^3.11.0", "react-merge-refs": "^1.1.0", "react-ticker": "^1.2.2", "swr": "^0.3.3" diff --git a/pages/_app.tsx b/pages/_app.tsx index 0e944355a..2b362df40 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,6 +1,7 @@ import { FC } from 'react' import type { AppProps } from 'next/app' import { SSRProvider, OverlayProvider } from 'react-aria' +import { ThemeProvider } from 'next-themes' import '@assets/global.css' import '@assets/tailwind.css' import '@assets/utils.css' @@ -11,12 +12,14 @@ export default function MyApp({ Component, pageProps }: AppProps) { const Layout = (Component as any).Layout || Noop return ( - - - - - - - + + + + + + + + + ) } diff --git a/pages/index.tsx b/pages/index.tsx index 70e6b6257..e8486dc30 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -53,21 +53,21 @@ export default function Home({
    -
  • +
  • All Categories
    • {categories.map((cat) => ( -
  • +
  • {cat.name}
    • ))}
    -
  • +
  • All Designers
    • {brands.flatMap(({ node }) => ( -
  • +
  • {node.name}
    • ))} diff --git a/pages/search.tsx b/pages/search.tsx index bc560d6f8..e8149c33e 100644 --- a/pages/search.tsx +++ b/pages/search.tsx @@ -25,21 +25,21 @@ export default function Home({
      -
    • +
    • All Categories
      • {categories.map((cat) => ( -
    • +
    • {cat.name}
      • ))}
      -
    • +
    • All Designers
      • {brands.flatMap(({ node }) => ( -
    • +
    • {node.name}
      • ))} @@ -61,11 +61,13 @@ export default function Home({
      -
    • Relevance
      • -
    • Latest arrivals
      • -
    • Trending
      • -
    • Price: Low to high
      • -
    • Price: High to low
      • +
    • + Relevance +
      • +
    • Latest arrivals
      • +
    • Trending
      • +
    • Price: Low to high
      • +
    • Price: High to low
    diff --git a/tailwind.config.js b/tailwind.config.js index 7005f7158..0c0b45d05 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -19,10 +19,13 @@ module.exports = { blue: '#0070F3', green: '#37B679', red: '#DA3C3C', - primary: '#000', - textColor: { - primary: '#FFF', - }, + primary: 'var(--bg-primary)', + secondary: 'var(--bg-secondary)', + }, + textColor: { + base: 'var(--text-primary)', + primary: 'var(--text-primary)', + secondary: 'var(--text-secondary)', }, }, }, diff --git a/yarn.lock b/yarn.lock index 0a7033203..c5ed20203 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5676,6 +5676,11 @@ neo-async@^2.6.2: resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f" integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw== +next-themes@^0.0.4: + version "0.0.4" + resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.0.4.tgz#fb06a9d03887201dd8fdd75fc1c84f406988f61e" + integrity sha512-j0bJJ6INanFsniCL31j1ZhjNaoqIFOaTeiUakbGpGxDz4+318Zp2ZfaorSjpUhzDWbXBKA3ZDE0DSUVWJ/8EsA== + next-tick@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c" @@ -6710,6 +6715,13 @@ react-dom@^16.13.1: prop-types "^15.6.2" scheduler "^0.19.1" +react-icons@^3.11.0: + version "3.11.0" + resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-3.11.0.tgz#2ca2903dfab8268ca18ebd8cc2e879921ec3b254" + integrity sha512-JRgiI/vdF6uyBgyZhVyYJUZAop95Sy4XDe/jmT3R/bKliFWpO/uZBwvSjWEdxwzec7SYbEPNPck0Kff2tUGM2Q== + dependencies: + camelcase "^5.0.0" + react-is@16.13.1, react-is@^16.8.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"