Modal Stable / Login View

components/ui/Input/Input.module.css

@@ -0,0 +1,4 @@
+.root {
+  @apply focus:outline-none bg-primary focus:shadow-outline-gray border-none py-2 
+  px-6 w-full appearance-none transition duration-150 ease-in-out placeholder-accents-5 pr-10;
+}

components/ui/Input/Input.tsx

@@ -0,0 +1,25 @@
+import cn from 'classnames'
+import s from './Input.module.css'
+import React, { InputHTMLAttributes } from 'react'
+
+export interface Props extends InputHTMLAttributes<HTMLInputElement> {
+  className?: string
+  onChange?: (...args: any[]) => any
+}
+
+const Input: React.FC<Props> = (props) => {
+  const { className, children, onChange, ...rest } = props
+
+  const rootClassName = cn(s.root, {}, className)
+
+  const handleOnChange = (e: any) => {
+    if (onChange) {
+      onChange(e.target.value)
+    }
+    return null
+  }
+
+  return <input className={rootClassName} onChange={handleOnChange} {...rest} />
+}
+
+export default Input

components/ui/Input/index.ts

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

components/ui/Modal/Modal.tsx

@@ -8,7 +8,7 @@ import { useOverlay, useModal, OverlayContainer } from '@react-aria/overlays'
 interface Props {
   className?: string
   children?: any
-  open?: boolean
+  open: boolean
   onClose?: () => void
 }
 
@@ -22,14 +22,22 @@ const Modal: FC<Props> = ({
   const rootClassName = cn(s.root, className)
   let ref = useRef() as React.MutableRefObject<HTMLInputElement>
   let { modalProps } = useModal()
-  let { overlayProps } = useOverlay(props, ref)
-  let { dialogProps } = useDialog(props, ref)
+  let { dialogProps } = useDialog({}, ref)
+  let { overlayProps } = useOverlay(
+    {
+      isOpen: open,
+      isDismissable: true,
+      onClose: onClose,
+      ...props,
+    },
+    ref
+  )
 
   return (
     <Transition show={open}>
       <OverlayContainer>
-        <div className={rootClassName} onClick={onClose}>
-          <FocusScope contain restoreFocus autoFocus>
+        <FocusScope contain restoreFocus autoFocus>
+          <div className={rootClassName}>
             <Transition.Child
               enter="transition-opacity ease-linear duration-300"
               enterFrom="opacity-0"
@@ -39,17 +47,17 @@ const Modal: FC<Props> = ({
               leaveTo="opacity-0"
             >
               <div
+                className={s.modal}
                 {...overlayProps}
                 {...dialogProps}
                 {...modalProps}
                 ref={ref}
-                className={s.modal}
               >
                 {children}
               </div>
             </Transition.Child>
-          </FocusScope>
-        </div>
+          </div>
+        </FocusScope>
       </OverlayContainer>
     </Transition>
   )

components/ui/context.tsx

@@ -101,8 +101,6 @@ export const UIProvider: FC = (props) => {
     closeModal,
   }
 
-  console.log('state', state)
-
   return <UIContext.Provider value={value} {...props} />
 }
 

components/ui/index.ts

@@ -9,3 +9,4 @@ export { default as LoadingDots } from './LoadingDots'
 export { default as Skeleton } from './Skeleton'
 export { default as Modal } from './Modal'
 export { default as Text } from './Text'
+export { default as Input } from './Input'