diff --git a/site/assets/base.css b/site/assets/base.css index 05a234a73..37e14196c 100644 --- a/site/assets/base.css +++ b/site/assets/base.css @@ -4,11 +4,9 @@ --secondary: #000000; --secondary-2: #111; --selection: var(--cyan); - --text-base: #000000; --text-primary: #000000; --text-secondary: white; - --hover: rgba(0, 0, 0, 0.075); --hover-1: rgba(0, 0, 0, 0.15); --hover-2: rgba(0, 0, 0, 0.25); @@ -17,15 +15,11 @@ --red: #da3c3c; --purple: #f81ce5; --blue: #0070f3; - --pink: #ff0080; --pink-light: #ff379c; - --magenta: #eb367f; - --violet: #7928ca; --violet-dark: #4c2889; - --accent-0: #fff; --accent-1: #fafafa; --accent-2: #eaeaea; @@ -36,7 +30,6 @@ --accent-7: #333333; --accent-8: #111111; --accent-9: #000; - --font-sans: -apple-system, system-ui, BlinkMacSystemFont, 'Helvetica Neue', 'Helvetica', sans-serif; } @@ -50,11 +43,9 @@ --hover-1: rgba(255, 255, 255, 0.15); --hover-2: rgba(255, 255, 255, 0.25); --selection: var(--purple); - --text-base: white; --text-primary: white; --text-secondary: black; - --accent-9: #fff; --accent-8: #fafafa; --accent-7: #eaeaea; @@ -73,17 +64,11 @@ box-sizing: inherit; } -html { +html, +body { height: 100%; box-sizing: border-box; touch-action: manipulation; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -html, -body { font-family: var(--font-sans); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; @@ -104,15 +89,15 @@ a { } .animated { - -webkit-animation-duration: 1s; animation-duration: 1s; - -webkit-animation-fill-mode: both; animation-fill-mode: both; + -webkit-animation-duration: 1s; + -webkit-animation-fill-mode: both; } .fadeIn { - -webkit-animation-name: fadeIn; animation-name: fadeIn; + -webkit-animation-name: fadeIn; } @-webkit-keyframes fadeIn { diff --git a/site/components/common/Layout/Layout.tsx b/site/components/common/Layout/Layout.tsx index 5c936a09f..343b7f881 100644 --- a/site/components/common/Layout/Layout.tsx +++ b/site/components/common/Layout/Layout.tsx @@ -1,5 +1,5 @@ import cn from 'clsx' -import React, { FC } from 'react' +import React from 'react' import dynamic from 'next/dynamic' import { useRouter } from 'next/router' import { CommerceProvider } from '@framework' @@ -14,7 +14,9 @@ import { Sidebar, Button, LoadingDots } from '@components/ui' import PaymentMethodView from '@components/checkout/PaymentMethodView' import CheckoutSidebarView from '@components/checkout/CheckoutSidebarView' import { CheckoutProvider } from '@components/checkout/context' -import MenuSidebarView, { Link } from '../UserNav/MenuSidebarView' +import MenuSidebarView from '../UserNav/MenuSidebarView' + +import type { Link as LinkProps } from '../UserNav/MenuSidebarView' import LoginView from '@components/auth/LoginView' import s from './Layout.module.css' @@ -29,35 +31,26 @@ const dynamicProps = { loading: Loading, } -const SignUpView = dynamic( - () => import('@components/auth/SignUpView'), - { - ...dynamicProps - } -) +const SignUpView = dynamic(() => import('@components/auth/SignUpView'), { + ...dynamicProps, +}) const ForgotPassword = dynamic( () => import('@components/auth/ForgotPassword'), - { - ...dynamicProps - } -) - -const FeatureBar = dynamic( - () => import('@components/common/FeatureBar'), - { - ...dynamicProps - } -) - -const Modal = dynamic( - () => import('@components/ui/Modal'), { ...dynamicProps, - ssr: false } ) +const FeatureBar = dynamic(() => import('@components/common/FeatureBar'), { + ...dynamicProps, +}) + +const Modal = dynamic(() => import('@components/ui/Modal'), { + ...dynamicProps, + ssr: false, +}) + interface Props { pageProps: { pages?: Page[] @@ -65,7 +58,7 @@ interface Props { } } -const ModalView: FC<{ modalView: string; closeModal(): any }> = ({ +const ModalView: React.FC<{ modalView: string; closeModal(): any }> = ({ modalView, closeModal, }) => { @@ -78,30 +71,31 @@ const ModalView: FC<{ modalView: string; closeModal(): any }> = ({ ) } -const ModalUI: FC = () => { +const ModalUI: React.FC = () => { const { displayModal, closeModal, modalView } = useUI() return displayModal ? ( ) : null } -const SidebarView: FC<{ +const SidebarView: React.FC<{ sidebarView: string closeSidebar(): any - links: Link[] + links: LinkProps[] }> = ({ sidebarView, closeSidebar, links }) => { return ( - {sidebarView === 'MOBILEMENU_VIEW' && } {sidebarView === 'CART_VIEW' && } {sidebarView === 'CHECKOUT_VIEW' && } {sidebarView === 'PAYMENT_VIEW' && } {sidebarView === 'SHIPPING_VIEW' && } + {sidebarView === 'MOBILE_CUSTOMERMENU_VIEW' && } + {sidebarView === 'MOBILE_MENU_VIEW' && } ) } -const SidebarUI: FC<{ links: any }> = ({ links }) => { +const SidebarUI: React.FC<{ links: LinkProps[] }> = ({ links }) => { const { displaySidebar, closeSidebar, sidebarView } = useUI() return displaySidebar ? ( = ({ links }) => { ) : null } -const Layout: FC = ({ +const Layout: React.FC = ({ children, pageProps: { categories = [], ...pageProps }, }) => { diff --git a/site/components/common/UserNav/DropdownCustomerAuth.module.css b/site/components/common/UserNav/DropdownCustomerAuth.module.css index 9a15dd271..4a6b9afc6 100644 --- a/site/components/common/UserNav/DropdownCustomerAuth.module.css +++ b/site/components/common/UserNav/DropdownCustomerAuth.module.css @@ -12,3 +12,13 @@ .link.active { @apply font-bold bg-accent-2; } + +.root { + display: hidden; +} + +@media (min-width: 767px) { + .root { + display: block; + } +} diff --git a/site/components/common/UserNav/DropdownCustomerAuth.tsx b/site/components/common/UserNav/DropdownCustomerAuth.tsx index 367278d78..b07ecede6 100644 --- a/site/components/common/UserNav/DropdownCustomerAuth.tsx +++ b/site/components/common/UserNav/DropdownCustomerAuth.tsx @@ -3,19 +3,10 @@ import cn from 'clsx' import Link from 'next/link' import { useTheme } from 'next-themes' import { Moon, Sun } from '@components/icons' -import { useUI } from '@components/ui/context' import useLogout from '@framework/auth/use-logout' -import { Avatar } from '@components/common' import { useRouter } from 'next/router' -import { - Dropdown, - DropdownContent, - DropdownTrigger, - DropdownMenuItem, - DropdownMenuGroup, -} from '@components/ui/Dropdown/Dropdown' -import { useEffect } from 'react' +import { DropdownMenuItem } from '@components/ui/Dropdown/Dropdown' const LINKS = [ { @@ -32,11 +23,10 @@ const LINKS = [ }, ] -const DropdownMenu: React.FC = () => { +export default function CustomerMenuContent() { const logout = useLogout() const { pathname } = useRouter() const { theme, setTheme } = useTheme() - // const { closeSidebarIfPresent } = useUI() const router = useRouter() const handleClick = ( @@ -47,57 +37,46 @@ const DropdownMenu: React.FC = () => { } return ( - - - - - - <> - {LINKS.map(({ name, href }) => ( - - handleClick(e, href)} - className={cn(s.link, { - [s.active]: pathname === href, - })} - > - {name} - - - ))} - - { - theme === 'dark' ? setTheme('light') : setTheme('dark') - }} - > -
- Theme: {theme}{' '} -
-
- {theme == 'dark' ? ( - - ) : ( - - )} -
- - - - logout()} - > - Logout - - - - - +
+ {LINKS.map(({ name, href }) => ( + + handleClick(e, href)} + className={cn(s.link, { + [s.active]: pathname === href, + })} + > + {name} + + + ))} + + { + theme === 'dark' ? setTheme('light') : setTheme('dark') + }} + > +
+ Theme: {theme}{' '} +
+
+ {theme == 'dark' ? ( + + ) : ( + + )} +
+ + + + logout()} + > + Logout + + +
) } - -export default DropdownMenu diff --git a/site/components/common/UserNav/MenuSidebarView/MenuSidebarView.module.css b/site/components/common/UserNav/MenuSidebarView/MenuSidebarView.module.css index 26469d6b6..6c05b013e 100644 --- a/site/components/common/UserNav/MenuSidebarView/MenuSidebarView.module.css +++ b/site/components/common/UserNav/MenuSidebarView/MenuSidebarView.module.css @@ -3,5 +3,5 @@ } .item { - @apply text-2xl font-bold; -} \ No newline at end of file + @apply text-xl font-bold py-2; +} diff --git a/site/components/common/UserNav/MenuSidebarView/MenuSidebarView.tsx b/site/components/common/UserNav/MenuSidebarView/MenuSidebarView.tsx index 334b8de9e..a4ed5b51b 100644 --- a/site/components/common/UserNav/MenuSidebarView/MenuSidebarView.tsx +++ b/site/components/common/UserNav/MenuSidebarView/MenuSidebarView.tsx @@ -1,31 +1,32 @@ import Link from 'next/link' import s from './MenuSidebarView.module.css' -import { FC } from 'react' import { useUI } from '@components/ui/context' import SidebarLayout from '@components/common/SidebarLayout' -import { Link as LinkProps} from '.' +import type { Link as LinkProps } from './index' - -interface MenuProps { +export default function MenuSidebarView({ + links = [], +}: { links?: LinkProps[] -} - -const MenuSidebarView: FC = (props) => { +}) { const { closeSidebar } = useUI() - const handleClose = () => closeSidebar() return ( - + closeSidebar()}>
) diff --git a/site/components/icons/index.ts b/site/components/icons/index.ts index 97eef6d58..12e0cc202 100644 --- a/site/components/icons/index.ts +++ b/site/components/icons/index.ts @@ -1,17 +1,18 @@ export { default as Bag } from './Bag' +export { default as Sun } from './Sun' +export { default as Moon } from './Moon' +export { default as Menu } from './Menu' +export { default as Info } from './Info' +export { default as Star } from './Star' +export { default as Plus } from './Plus' export { default as Heart } from './Heart' export { default as Trash } from './Trash' export { default as Cross } from './Cross' -export { default as Plus } from './Plus' export { default as Minus } from './Minus' export { default as Check } from './Check' -export { default as Sun } from './Sun' -export { default as Moon } from './Moon' export { default as Github } from './Github' -export { default as Info } from './Info' export { default as Vercel } from './Vercel' export { default as MapPin } from './MapPin' -export { default as Star } from './Star' export { default as ArrowLeft } from './ArrowLeft' export { default as ArrowRight } from './ArrowRight' export { default as CreditCard } from './CreditCard' diff --git a/site/components/ui/Dropdown/Dropdown.module.css b/site/components/ui/Dropdown/Dropdown.module.css index e05fbdb1f..8e55cbbff 100644 --- a/site/components/ui/Dropdown/Dropdown.module.css +++ b/site/components/ui/Dropdown/Dropdown.module.css @@ -1,7 +1,23 @@ .root { - @apply w-56 bg-accent-0; + @apply bg-accent-0; animation: none; transition: none; + min-width: 100%; +} + +@media screen(md) { + .root { + @apply shadow-lg bg-accent-0; + box-shadow: hsl(206 22% 7% / 45%) 0px 10px 38px -10px, + hsl(206 22% 7% / 20%) 0px 10px 20px -15px; + min-width: 14rem; + will-change: transform, opacity; + animation-duration: 600ms; + animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); + animation-fill-mode: forwards; + transform-origin: var(--radix-dropdown-menu-content-transform-origin); + animation-name: slideIn; + } } @keyframes slideIn { @@ -14,17 +30,3 @@ transform: translateY(0px); } } - -@media screen(md) { - .root { - @apply shadow-lg; - box-shadow: hsl(206 22% 7% / 45%) 0px 10px 38px -10px, - hsl(206 22% 7% / 20%) 0px 10px 20px -15px; - will-change: transform, opacity; - animation-duration: 600ms; - animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); - animation-fill-mode: forwards; - transform-origin: var(--radix-dropdown-menu-content-transform-origin); - animation-name: slideIn; - } -} diff --git a/site/components/ui/Dropdown/Dropdown.tsx b/site/components/ui/Dropdown/Dropdown.tsx index 1b6204213..566b962d6 100644 --- a/site/components/ui/Dropdown/Dropdown.tsx +++ b/site/components/ui/Dropdown/Dropdown.tsx @@ -4,19 +4,19 @@ import s from './Dropdown.module.css' import * as DropdownMenu from '@radix-ui/react-dropdown-menu' export const Dropdown = DropdownMenu.Root +export const DropdownMenuItem = DropdownMenu.Item export const DropdownTrigger = DropdownMenu.Trigger export const DropdownMenuLabel = DropdownMenu.Label -export const DropdownMenuItem = DropdownMenu.Item export const DropdownMenuGroup = DropdownMenu.Group export const DropdownContent = React.forwardRef< HTMLDivElement, { children: React.ReactNode } & DropdownMenu.DropdownMenuContentProps & React.RefAttributes ->(function DropdownContent({ children, ...props }, forwardedRef) { +>(function DropdownContent({ children, className, ...props }, forwardedRef) { return ( - -
{children}
+ +
{children}
 ) }) diff --git a/site/components/ui/Sidebar/Sidebar.tsx b/site/components/ui/Sidebar/Sidebar.tsx index fd0ce9057..3c01cbd53 100644 --- a/site/components/ui/Sidebar/Sidebar.tsx +++ b/site/components/ui/Sidebar/Sidebar.tsx @@ -1,14 +1,13 @@ -import { FC, useEffect, useRef } from 'react' -import s from './Sidebar.module.css' import cn from 'clsx' +import s from './Sidebar.module.css' +import { useEffect, useRef } from 'react' import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock' - interface SidebarProps { children: any onClose: () => void } -const Sidebar: FC = ({ children, onClose }) => { +const Sidebar: React.FC = ({ children, onClose }) => { const sidebarRef = useRef() as React.MutableRefObject const contentRef = useRef() as React.MutableRefObject diff --git a/site/tsconfig.json b/site/tsconfig.json index 7c91afd6f..868794504 100644 --- a/site/tsconfig.json +++ b/site/tsconfig.json @@ -23,8 +23,8 @@ "@components/*": ["components/*"], "@commerce": ["../packages/commerce/src"], "@commerce/*": ["../packages/commerce/src/*"], - "@framework": ["../packages/local/src"], - "@framework/*": ["../packages/local/src/*"] + "@framework": ["../packages/bigcommerce/src"], + "@framework/*": ["../packages/bigcommerce/src/*"] } }, "include": ["next-env.d.ts", "**/*.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],