From 3b603365d1c03fec4f2b083e08d227618b7e1d88 Mon Sep 17 00:00:00 2001 From: Marco Escaleira Date: Tue, 2 Jan 2024 17:16:32 +0000 Subject: [PATCH] feat: login modal with validation --- package.json | 6 +- src/app/globals.scss | 22 +++++ src/app/layout.tsx | 3 +- src/components/Header/Header.tsx | 18 ++--- src/components/Login/LoginForm.tsx | 15 ---- src/components/Login/LoginModal.tsx | 108 +++++++++++++++++++++++++ src/components/Modal/DrawerLayout.scss | 39 --------- src/components/Modal/DrawerLayout.tsx | 27 ------- src/components/Modal/Modal.tsx | 14 ---- src/components/Modal/PopupLayout.scss | 41 ---------- src/components/Modal/PopupLayout.tsx | 27 ------- src/components/index.ts | 5 +- yarn.lock | 86 +++++++++++++++++--- 13 files changed, 219 insertions(+), 192 deletions(-) delete mode 100644 src/components/Login/LoginForm.tsx create mode 100644 src/components/Login/LoginModal.tsx delete mode 100644 src/components/Modal/DrawerLayout.scss delete mode 100644 src/components/Modal/DrawerLayout.tsx delete mode 100644 src/components/Modal/Modal.tsx delete mode 100644 src/components/Modal/PopupLayout.scss delete mode 100644 src/components/Modal/PopupLayout.tsx diff --git a/package.json b/package.json index 0aa56b9..939cf66 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ }, "dependencies": { "@heroicons/react": "^2.1.1", + "@hookform/resolvers": "^3.3.3", "graphql": "^16.8.1", "mapbox-gl": "^3.0.1", "next": "14.0.4", @@ -20,9 +21,10 @@ "react-dom": "^18.2.0", "react-hook-form": "^7.49.2", "react-map-gl": "^7.1.7", - "react-modal-global": "^2.3.4", + "react-modal": "^3.16.1", "react-simple-maps": "^3.0.0", "react-tooltip": "^5.25.1", + "yup": "^1.3.3", "zustand": "^4.4.7" }, "devDependencies": { @@ -30,8 +32,10 @@ "@types/node": "^20.9.2", "@types/react": "^18.2.37", "@types/react-dom": "^18.2.15", + "@types/react-modal": "^3.16.3", "@types/react-simple-maps": "^3.0.4", "@types/react-tooltip": "^4.2.4", + "@types/yup": "^0.32.0", "autoprefixer": "^10.0.1", "eslint": "^8.54.0", "eslint-config-next": "14.0.3", diff --git a/src/app/globals.scss b/src/app/globals.scss index d94e073..3c82fc1 100644 --- a/src/app/globals.scss +++ b/src/app/globals.scss @@ -15,3 +15,25 @@ body { .mapboxgl-ctrl-logo { display: none !important; } + +.ReactModal__Overlay { + opacity: 0; + transition: opacity 250ms ease-in-out; + z-index: 11; + background-color: rgba(229, 231, 235, 0.75) !important; +} + +.ReactModal__Overlay--after-open { + opacity: 1; +} + +.ReactModal__Overlay--before-close { + opacity: 0; +} + +.modal-popup { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index f47d89a..ce940a4 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,7 +1,6 @@ import type { Metadata } from "next"; import { Roboto } from "next/font/google"; import { Footer, Header } from "@/components"; -import "react-modal-global/styles/modal.scss"; import "./globals.scss"; const roboto = Roboto({ @@ -23,7 +22,7 @@ export default function RootLayout({ children }: { children: React.ReactNode }) return ( <> - +
{children}