From 669bb47400e53ee92b5fc72071d6b0822bde6751 Mon Sep 17 00:00:00 2001 From: klay964 Date: Sun, 28 Mar 2021 23:26:20 +0300 Subject: [PATCH] Feat:add login modal fixes #42 sign in with facebook and google modal --- package.json | 1 + src/App.css | 42 +++---------- src/App.js | 1 + src/components/Modals/Login/Login.css | 21 +++++++ src/components/Modals/Login/Login.jsx | 74 ++++++++++++++++++++++ src/components/NavBar/NavBar.jsx | 22 ++++--- src/images/login/bg-modal.svg | 88 +++++++++++++++++++++++++++ src/images/login/close.svg | 3 + src/images/login/facebook.svg | 1 + src/images/login/google.svg | 47 ++++++++++++++ src/translations/ar/translation.json | 5 ++ src/translations/en/translation.json | 5 ++ 12 files changed, 270 insertions(+), 40 deletions(-) create mode 100644 src/components/Modals/Login/Login.css create mode 100644 src/components/Modals/Login/Login.jsx create mode 100644 src/images/login/bg-modal.svg create mode 100644 src/images/login/close.svg create mode 100644 src/images/login/facebook.svg create mode 100644 src/images/login/google.svg diff --git a/package.json b/package.json index 62a7fec..d46aa7b 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "i18next-browser-languagedetector": "^6.0.1", "i18next-http-backend": "^1.1.1", "prettier": "^2.2.1", + "prop-types": "^15.7.2", "react": "^17.0.1", "react-bootstrap": "^1.5.2", "react-dom": "^17.0.1", diff --git a/src/App.css b/src/App.css index 74b5e05..fb93a69 100644 --- a/src/App.css +++ b/src/App.css @@ -1,38 +1,14 @@ .App { - text-align: center; + text-align: center; } -.App-logo { - height: 40vmin; - pointer-events: none; +.btn:focus, +.btn:active, +.btn:hover, +.btn { + outline: none !important; + box-shadow: none; } - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +.background-facebook { + background-color: #4267b2; } diff --git a/src/App.js b/src/App.js index 6315f9f..be53615 100644 --- a/src/App.js +++ b/src/App.js @@ -11,6 +11,7 @@ import { SIGNUP_ROUTE, CONTACT_US_ROUTE, } from './routes' +import './App.css' function App() { return ( diff --git a/src/components/Modals/Login/Login.css b/src/components/Modals/Login/Login.css new file mode 100644 index 0000000..9425999 --- /dev/null +++ b/src/components/Modals/Login/Login.css @@ -0,0 +1,21 @@ +.bg-modal-login { + background-image: url('../../../images/login/bg-modal.svg'); + background-repeat: no-repeat; + background-position: center; + background-size: cover; +} + +@media (max-width: 522px) { + .bg-modal-login { + background-image: url('../../../images/login/bg-modal.svg'); + background-repeat: no-repeat; + background-position: right; + background-size: cover; + } + .bg-modal-login-2 { + background-image: url('../../../images/login/bg-modal.svg'); + background-repeat: no-repeat; + background-position: 15% 15%; + background-size: cover; + } +} diff --git a/src/components/Modals/Login/Login.jsx b/src/components/Modals/Login/Login.jsx new file mode 100644 index 0000000..6b12540 --- /dev/null +++ b/src/components/Modals/Login/Login.jsx @@ -0,0 +1,74 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { Modal, Button } from 'react-bootstrap' +import { useTranslation } from 'react-i18next' +import './Login.css' +import Close from '../../../images/login/close.svg' +import Google from '../../../images/login/google.svg' +import Facebook from '../../../images/login/facebook.svg' + +function Login({ onHide }) { + const { t } = useTranslation() + return ( +
+ +
+
+ +
+
+

{t('login.log-in')}

+
+
+ +
+
+ +
+
+ +
+ ) +} + +Login.propTypes = { + onHide: PropTypes.func.isRequired, +} + +export default Login diff --git a/src/components/NavBar/NavBar.jsx b/src/components/NavBar/NavBar.jsx index f584170..f0c6e80 100644 --- a/src/components/NavBar/NavBar.jsx +++ b/src/components/NavBar/NavBar.jsx @@ -3,6 +3,7 @@ import { Navbar, Nav, NavDropdown, Form } from 'react-bootstrap' import { useTranslation } from 'react-i18next' import i18next from 'i18next' import { BrowserRouter as Router, NavLink } from 'react-router-dom' +import Login from '../Modals/Login/Login' import './NavBar.css' import { HOME_ROUTE, @@ -10,7 +11,6 @@ import { ABOUT_ROUTE, RESOURCE_CAT_ROUTE, RESOURCE_DOG_ROUTE, - LOGIN_ROUTE, CONTACT_US_ROUTE, } from '../../routes' import 'bootstrap/dist/css/bootstrap.min.css' @@ -22,6 +22,7 @@ export default function NavBar() { dir: 'ltr', className: 'ml-auto', }) + const [showLoginModal, setShowLoginModal] = useState(false) const selectedLanguage = (lang) => { i18next.changeLanguage(lang) @@ -117,10 +118,10 @@ export default function NavBar() { {t('navbar.contact')} { + setShowLoginModal(!showLoginModal) + }} > {t('navbar.logIn')} @@ -136,15 +137,22 @@ export default function NavBar() { - - - + + + + {showLoginModal ? ( + { + setShowLoginModal(!showLoginModal) + }} + /> + ) : null} ) } diff --git a/src/images/login/bg-modal.svg b/src/images/login/bg-modal.svg new file mode 100644 index 0000000..5661cb3 --- /dev/null +++ b/src/images/login/bg-modal.svg @@ -0,0 +1,88 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/images/login/close.svg b/src/images/login/close.svg new file mode 100644 index 0000000..6785c58 --- /dev/null +++ b/src/images/login/close.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/images/login/facebook.svg b/src/images/login/facebook.svg new file mode 100644 index 0000000..e969009 --- /dev/null +++ b/src/images/login/facebook.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/login/google.svg b/src/images/login/google.svg new file mode 100644 index 0000000..542fea6 --- /dev/null +++ b/src/images/login/google.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/translations/ar/translation.json b/src/translations/ar/translation.json index 410d737..95cd7e1 100644 --- a/src/translations/ar/translation.json +++ b/src/translations/ar/translation.json @@ -13,5 +13,10 @@ ], "logIn": "تسجيل الدخول", "signUp": "انشاء حساب" + }, + "login":{ + "log-in":"تسجيل الدخول", + "google":"تسجيل الدخول ", + "facebook":"تسجيل الدخول " } } \ No newline at end of file diff --git a/src/translations/en/translation.json b/src/translations/en/translation.json index 61019f4..e2e9c9a 100644 --- a/src/translations/en/translation.json +++ b/src/translations/en/translation.json @@ -13,5 +13,10 @@ "about": "About", "logIn": "Log In", "signUp": "Sign Up" + }, + "login":{ + "log-in":" Log in", + "google":"Sign in", + "facebook":"Sign in" } } \ No newline at end of file