Modifications

components/auth/ForgotPassword.tsx

@@ -1,6 +1,6 @@
 import { FC, useEffect, useState, useCallback } from 'react'
 import { validate } from 'email-validator'
-import { Info } from '@components/icon'
+import { Info } from'@components/icons'
 import { useUI } from '@components/ui/context'
 import { Logo, Button, Input } from '@components/ui'
 import useSignup from '@lib/bigcommerce/use-signup'

components/auth/LoginView.tsx

@@ -60,11 +60,19 @@ const LoginView: FC<Props> = () => {
       </div>
       <div className="flex flex-col space-y-3">
         {message && (
-          <div className="text-red border border-red p-3">{message}</div>
+          <div className="text-red border border-red p-3">
+            {message}. Did you {` `}
+            <a
+              className="text-accent-9 inline font-bold hover:underline cursor-pointer"
+              onClick={() => setModalView('FORGOT_VIEW')}
+            >
+              forgot your password?
+            </a>
+          </div>
         )}
-
         <Input placeholder="Email" onChange={setEmail} />
         <Input placeholder="Password" onChange={setPassword} />
+
         <Button
           variant="slim"
           onClick={() => handleLogin()}
@@ -73,7 +81,7 @@ const LoginView: FC<Props> = () => {
         >
           Log In
         </Button>
-        <span className="pt-3 text-center text-sm">
+        <div className="pt-1 text-center text-sm">
           <span className="text-accents-7">Don't have an account?</span>
           {` `}
           <a
@@ -82,7 +90,7 @@ const LoginView: FC<Props> = () => {
           >
             Sign Up
           </a>
-        </span>
+        </div>
       </div>
     </div>
   )

components/auth/SignUpView.tsx

@@ -1,6 +1,6 @@
 import { FC, useEffect, useState, useCallback } from 'react'
 import { validate } from 'email-validator'
-import { Info } from '@components/icon'
+import { Info } from '@components/icons'
 import { useUI } from '@components/ui/context'
 import { Logo, Button, Input } from '@components/ui'
 import useSignup from '@lib/bigcommerce/use-signup'
@@ -59,7 +59,7 @@ const SignUpView: FC<Props> = () => {
   }, [handleValidation])
 
   return (
-    <div className="w-80 flex flex-col justify-between p-3">
+    <div className="w-96 flex flex-col justify-between p-3">
       <div className="flex justify-center pb-12 ">
         <Logo width="64px" height="64px" />
       </div>
@@ -72,13 +72,13 @@ const SignUpView: FC<Props> = () => {
         <Input placeholder="Email" onChange={setEmail} />
         <Input placeholder="Password" onChange={setPassword} />
         <span className="text-accents-8">
-          <Info
+          <span className="inline-block align-middle ">
-            width="20"
+            <Info width="15" height="15" />
-            height="20"
+          </span>{' '}
-            className="inline-block mr-1 text-accents-8"
+          <span className="leading-6 text-sm">
-          />
+            <strong>Info</strong>: Passwords must be longer than 7 chars and
-          <strong>Info</strong>: Password must be longer than 7 chars and
+            include numbers.{' '}
-          include numbers.
+          </span>
         </span>
         <div className="pt-2 w-full flex flex-col">
           <Button
@@ -91,7 +91,7 @@ const SignUpView: FC<Props> = () => {
           </Button>
         </div>
 
-        <span className="pt-3 text-center text-sm">
+        <span className="pt-1 text-center text-sm">
           <span className="text-accents-7">Do you have an account?</span>
           {` `}
           <a

components/auth/index.ts

@@ -1,2 +1,3 @@
 export { default as LoginView } from './LoginView'
 export { default as SignUpView } from './SignUpView'
+export { default as ForgotPassword } from './ForgotPassword'

components/cart/CartItem/CartItem.tsx

@@ -2,7 +2,7 @@ import s from './CartItem.module.css'
 import Image from 'next/image'
 import Link from 'next/link'
 import { ChangeEvent, useEffect, useState } from 'react'
-import { Trash, Plus, Minus } from '@components/icon'
+import { Trash, Plus, Minus } from '@components/icons'
 import usePrice from '@lib/bigcommerce/use-price'
 import useUpdateItem from '@lib/bigcommerce/cart/use-update-item'
 import useRemoveItem from '@lib/bigcommerce/cart/use-remove-item'

components/cart/CartSidebarView/CartSidebarView.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react'
 import cn from 'classnames'
 import { UserNav } from '@components/core'
 import { Button } from '@components/ui'
-import { ArrowLeft, Bag, Cross, Check } from '@components/icon'
+import { ArrowLeft, Bag, Cross, Check } from '@components/icons'
 import { useUI } from '@components/ui/context'
 import useCart from '@lib/bigcommerce/cart/use-cart'
 import usePrice from '@lib/bigcommerce/use-price'

components/core/Footer/Footer.tsx

@@ -4,7 +4,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
 import getSlug from '@utils/get-slug'
-import { Github } from '@components/icon'
+import { Github } from '@components/icons'
 import { Logo, Container } from '@components/ui'
 import { I18nWidget } from '@components/core'
 

components/core/I18nWidget/I18nWidget.tsx

@@ -3,7 +3,7 @@ import cn from 'classnames'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
 import { Menu } from '@headlessui/react'
-import { DoubleChevron } from '@components/icon'
+import { DoubleChevron } from '@components/icons'
 import s from './I18nWidget.module.css'
 
 const LOCALES_MAP: Record<string, string> = {

components/core/Layout/Layout.tsx

@@ -6,7 +6,7 @@ import { CommerceProvider } from '@lib/bigcommerce'
 import { CartSidebarView } from '@components/cart'
 import { Container, Sidebar, Button, Modal, Toast } from '@components/ui'
 import { Navbar, Featurebar, Footer } from '@components/core'
-import { LoginView, SignUpView } from '@components/auth'
+import { LoginView, SignUpView, ForgotPassword } from '@components/auth'
 import { useUI } from '@components/ui/context'
 import { usePreventScroll } from '@react-aria/overlays'
 import s from './Layout.module.css'
@@ -74,6 +74,7 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
         <Modal open={displayModal} onClose={closeModal}>
           {modalView === 'LOGIN_VIEW' && <LoginView />}
           {modalView === 'SIGNUP_VIEW' && <SignUpView />}
+          {modalView === 'FORGOT_VIEW' && <ForgotPassword />}
         </Modal>
         <Featurebar
           title="This site uses cookies to improve your experience."

components/core/Toggle/Toggle.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react'
 import { Switch } from '@headlessui/react'
-import { Moon, Sun } from '@components/icon'
+import { Moon, Sun } from '@components/icons'
 interface Props {
   className?: string
   checked: boolean

components/core/UserNav/DropdownMenu.tsx

@@ -3,7 +3,7 @@ import Link from 'next/link'
 import { useTheme } from 'next-themes'
 import cn from 'classnames'
 import s from './DropdownMenu.module.css'
-import { Moon, Sun } from '@components/icon'
+import { Moon, Sun } from '@components/icons'
 import { Menu, Transition } from '@headlessui/react'
 import useLogout from '@lib/bigcommerce/use-logout'
 interface DropdownMenuProps {

components/core/UserNav/UserNav.tsx

@@ -2,7 +2,7 @@ import Link from 'next/link'
 import cn from 'classnames'
 import s from './UserNav.module.css'
 import { FC } from 'react'
-import { Heart, Bag } from '@components/icon'
+import { Heart, Bag } from '@components/icons'
 import { Avatar } from '@components/core'
 import { useUI } from '@components/ui/context'
 import { LoginView } from '@components/auth'

components/icon/Cross.tsx

@@ -1,14 +0,0 @@
-const Cross = ({ ...props }) => {
-  return (
-    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="2"
-        d="M6 18L18 6M6 6l12 12"
-      />
-    </svg>
-  )
-}
-
-export default Cross

components/icons/Cross.tsx

@@ -0,0 +1,21 @@
+const Cross = ({ ...props }) => {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      fill="none"
+      shape-rendering="geometricPrecision"
+      {...props}
+    >
+      <path d="M18 6L6 18" />
+      <path d="M6 6l12 12" />
+    </svg>
+  )
+}
+
+export default Cross

components/product/ProductCard/ProductCard.tsx

@@ -3,7 +3,7 @@ import cn from 'classnames'
 import Link from 'next/link'
 import type { ProductNode } from '@lib/bigcommerce/api/operations/get-all-products'
 import usePrice from '@lib/bigcommerce/use-price'
-import { Heart } from '@components/icon'
+import { Heart } from '@components/icons'
 import { EnhancedImage } from '@components/core'
 import s from './ProductCard.module.css'
 

components/product/ProductView/ProductView.tsx

@@ -4,7 +4,7 @@ import Image from 'next/image'
 import { NextSeo } from 'next-seo'
 
 import s from './ProductView.module.css'
-import { Heart } from '@components/icon'
+import { Heart } from '@components/icons'
 import { useUI } from '@components/ui/context'
 import { Swatch, ProductSlider } from '@components/product'
 import { Button, Container } from '@components/ui'

components/product/Swatch/Swatch.tsx

@@ -1,7 +1,7 @@
 import cn from 'classnames'
 import { FC } from 'react'
 import s from './Swatch.module.css'
-import { Check } from '@components/icon'
+import { Check } from '@components/icons'
 import Button, { ButtonProps } from '@components/ui/Button'
 import { isDark } from '@lib/colors'
 interface Props {

components/ui/Hero/Hero.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react'
 import { Container } from '@components/ui'
-import { RightArrow } from '@components/icon'
+import { RightArrow } from '@components/icons'
 import s from './Hero.module.css'
 import Link from 'next/link'
 interface Props {

components/ui/Modal/Modal.tsx

@@ -5,11 +5,12 @@ import { useDialog } from '@react-aria/dialog'
 import { FocusScope } from '@react-aria/focus'
 import { Transition } from '@headlessui/react'
 import { useOverlay, useModal, OverlayContainer } from '@react-aria/overlays'
+import { Cross } from '@components/icons'
 interface Props {
   className?: string
   children?: any
   open?: boolean
-  onClose?: () => void
+  onClose: () => void
 }
 
 const Modal: FC<Props> = ({
@@ -26,7 +27,7 @@ const Modal: FC<Props> = ({
   let { overlayProps } = useOverlay(
     {
       isOpen: open,
-      isDismissable: true,
+      isDismissable: false,
       onClose: onClose,
       ...props,
     },
@@ -53,6 +54,16 @@ const Modal: FC<Props> = ({
                 {...modalProps}
                 ref={ref}
               >
+                <div className="h-7 flex items-center justify-end w-full">
+                  <button
+                    onClick={() => onClose()}
+                    aria-label="Close panel"
+                    className="hover:text-gray-500 transition ease-in-out duration-150 focus:outline-none"
+                  >
+                    <Cross className="h-6 w-6" />
+                  </button>
+                </div>
+
                 {children}
               </div>
             </Transition.Child>

components/ui/context.tsx

@@ -58,7 +58,7 @@ type Action =
       view: 'SIGNUP_VIEW'
     }
 
-type MODAL_VIEWS = 'SIGNUP_VIEW' | 'LOGIN_VIEW'
+type MODAL_VIEWS = 'SIGNUP_VIEW' | 'LOGIN_VIEW' | 'FORGOT_VIEW'
 type ToastText = string
 
 export const UIContext = React.createContext<State | any>(initialState)

components/wishlist/WishlistCard/WishlistCard.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { Trash } from '@components/icon'
+import { Trash } from '@components/icons'
 import s from './WishlistCard.module.css'
 
 interface Props {

pages/cart.tsx

@@ -2,7 +2,7 @@ import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
 import getAllPages from '@lib/bigcommerce/api/operations/get-all-pages'
 import { Layout } from '@components/core'
 import { Button } from '@components/ui'
-import { Bag, Cross, Check } from '@components/icon'
+import { Bag, Cross, Check } from '@components/icons'
 import useCart from '@lib/bigcommerce/cart/use-cart'
 import usePrice from '@lib/bigcommerce/use-price'
 import { CartItem } from '@components/cart'