Modifications

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)