Adding Modal Component and Login View

components/ui/Button/Button.module.css

@@ -20,3 +20,7 @@
 .loading {
   @apply bg-accents-1 text-accents-3 border-accents-2 cursor-not-allowed;
 }
+
+.slim {
+  @apply py-2 transform-none normal-case;
+}

components/ui/Button/Button.tsx

@@ -13,7 +13,7 @@ import { LoadingDots } from '@components/ui'
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   href?: string
   className?: string
-  variant?: 'filled' | 'outlined' | 'flat' | 'none'
+  variant?: 'flat' | 'slim'
   active?: boolean
   type?: 'submit' | 'reset' | 'button'
   Component?: string | JSXElementConstructor<any>
@@ -24,7 +24,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
   const {
     className,
-    variant = 'filled',
+    variant = 'flat',
     children,
     active,
     onClick,
@@ -50,6 +50,7 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
   const rootClassName = cn(
     s.root,
     {
+      [s.slim]: variant === 'slim',
       [s.loading]: loading,
     },
     className
@@ -57,16 +58,16 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
 
   return (
     <Component
-      className={rootClassName}
       aria-pressed={active}
       data-variant={variant}
       ref={mergeRefs([ref, buttonRef])}
       {...buttonProps}
+      data-active={isPressed ? '' : undefined}
+      className={rootClassName}
       style={{
         width,
         ...style,
       }}
-      data-active={isPressed ? '' : undefined}
     >
       {children}
       {loading && (

components/ui/Logo/Logo.tsx

@@ -1,12 +1,14 @@
-const Logo = () => (
+const Logo = ({ className = '', ...props }) => (
   <svg
     width="32"
     height="32"
     viewBox="0 0 32 32"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    {...props}
   >
-    <rect width="32" height="32" rx="16" fill="var(--secondary)" />
+    <rect width="100%" height="100%" rx="16" fill="var(--secondary)" />
     <path
       fillRule="evenodd"
       clipRule="evenodd"

components/ui/Modal/Modal.module.css

@@ -0,0 +1,8 @@
+.root {
+  @apply fixed bg-black flex items-center inset-0 z-50 justify-center;
+  background-color: rgba(0, 0, 0, 0.35);
+}
+
+.modal {
+  @apply bg-white p-12;
+}

components/ui/Modal/Modal.tsx

@@ -0,0 +1,52 @@
+import cn from 'classnames'
+import { FC, useRef } from 'react'
+import s from './Modal.module.css'
+import { useDialog } from '@react-aria/dialog'
+import {
+  useOverlay,
+  usePreventScroll,
+  useModal,
+  OverlayProvider,
+  OverlayContainer,
+} from '@react-aria/overlays'
+import { FocusScope } from '@react-aria/focus'
+
+interface Props {
+  className?: string
+  children?: any
+  show?: boolean
+  close: () => void
+}
+
+const Modal: FC<Props> = ({
+  className,
+  children,
+  show = true,
+  close,
+  ...props
+}) => {
+  const rootClassName = cn(s.root, className)
+  let ref = useRef() as React.MutableRefObject<HTMLInputElement>
+  usePreventScroll()
+  let { modalProps } = useModal()
+  let { overlayProps } = useOverlay(props, ref)
+  let { dialogProps } = useDialog(props, ref)
+
+  return (
+    <div className={rootClassName}>
+      <FocusScope contain restoreFocus autoFocus>
+        <div
+          {...overlayProps}
+          {...dialogProps}
+          {...modalProps}
+          ref={ref}
+          className={s.modal}
+        >
+          {children}
+        </div>
+      </FocusScope>
+    </div>
+  )
+}
+
+export default Modal

components/ui/Modal/index.ts

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

components/ui/index.ts

@@ -7,3 +7,4 @@ export { default as Marquee } from './Marquee'
 export { default as Container } from './Container'
 export { default as LoadingDots } from './LoadingDots'
 export { default as Skeleton } from './Skeleton'
+export { default as Modal } from './Modal'