Feat: create login modal fixes #42

login modal with google and facebook

src/components/Modals/Login/Login.css

@@ -3,9 +3,35 @@
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
+    background-color: #f2726f;
+    border: #f2726f 1px solid;
+}
+.bg-facebook {
+    background-color: #4267b2;
 }
 
+.btn {
+    border: none;
+    outline: none;
+    box-shadow: none;
+}
+.btn.active.focus,
+.btn.active:focus,
+.btn.focus,
+.btn:active.focus,
+.btn:active:focus,
+.btn:focus,
+.btn:hover {
+    outline: none;
+    box-shadow: none;
+    border: none;
+    background-color: #4267b2;
+}
 @media (max-width: 522px) {
+    .text-size-modal {
+        font-size: 12px;
+        margin-top: 4px;
+    }
     .bg-modal-login {
         background-image: url('../../../images/login/bg-modal.svg');
         background-repeat: no-repeat;
@@ -19,3 +45,15 @@
         background-size: cover;
     }
 }
+@media (max-width: 350px) {
+    .text-size-modal {
+        font-size: 10px;
+        margin-top: 4px;
+    }
+}
+@media (max-width: 369px) {
+    .text-size-facebook {
+        font-size: 9px;
+        margin-top: 4px;
+    }
+}

src/components/Modals/Login/Login.jsx

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types'
 import { Modal, Button } from 'react-bootstrap'
 import './Login.css'
 import Close from '../../../images/login/close.svg'
+import Google from '../../../images/login/search.svg'
+import Facebook from '../../../images/login/facebook.svg'
 
 function Login({ onHide }) {
     return (
@@ -26,29 +28,32 @@ function Login({ onHide }) {
                         <h3>Log In</h3>
                     </div>
                     <div className="d-flex justify-content-center mt-5 mb-5">
-                        <Button className="bg-white w-50">
-                            <div className="col s12 m6 offset-m3 center-align">
-                                <div
-                                    className="oauth-container btn darken-4 white black-text d-flex"
-                                    style={{ textTransform: 'none' }}
-                                >
-                                    <div className="left">
-                                        <img
-                                            width="20px"
-                                            style={{
-                                                marginRight: '8px',
-                                            }}
-                                            alt="Google sign-in"
-                                            src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/512px-Google_%22G%22_Logo.svg.png"
-                                        />
-                                    </div>
-                                    Login with Google
-                                </div>
-                            </div>
+                        <Button className="bg-white text-black w-50 rounded d-flex justify-content-center align-items-center py-2">
+                            <img
+                                src={Google}
+                                alt="google icon"
+                                width="19"
+                                height="19"
+                                className="d-block mt-1 mx-2 "
+                            />
+                            <p className="text-dark my-auto text-size-modal">
+                                Sign in with google
+                            </p>
                         </Button>
                     </div>
                     <div className="d-flex justify-content-center mb-5 pb-5">
-                        <Button className="bg-white w-50">Light</Button>
+                        <Button className="bg-facebook text-black w-50 rounded d-flex justify-content-center align-items-center py-2">
+                            <img
+                                src={Facebook}
+                                alt="Facebook icon"
+                                width="21"
+                                height="21"
+                                className="d-block mt-0 mx-2 "
+                            />
+                            <p className="text-white my-auto text-size-modal text-size-facebook">
+                                Sign in with facebook
+                            </p>
+                        </Button>
                     </div>
                 </div>
             </Modal>

src/test/Login/Login.test.js

@@ -0,0 +1,9 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import Login from '../../components/Modals/Login/Login'
+
+describe('navbar', () => {
+    test('renders App component', () => {
+        render(<Login onHide />)
+    })
+})

yarn.lock

@@ -9783,6 +9783,11 @@ react-i18next@^11.8.10:
     "@babel/runtime" "^7.13.6"
     html-parse-stringify2 "^2.0.1"
 
+"react-is@^16.12.0 || ^17.0.0", react-is@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
+  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
+
 react-is@^16.13.1, react-is@^16.3.2, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
@@ -9923,6 +9928,24 @@ [email protected]:
   optionalDependencies:
     fsevents "^2.1.3"
 
+react-shallow-renderer@^16.13.1:
+  version "16.14.1"
+  resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.14.1.tgz#bf0d02df8a519a558fd9b8215442efa5c840e124"
+  integrity sha512-rkIMcQi01/+kxiTE9D3fdS959U1g7gs+/rborw++42m1O9FAQiNI/UNRZExVUoAOprn4umcXf+pFRou8i4zuBg==
+  dependencies:
+    object-assign "^4.1.1"
+    react-is "^16.12.0 || ^17.0.0"
+
+react-test-renderer@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-17.0.2.tgz#4cd4ae5ef1ad5670fc0ef776e8cc7e1231d9866c"
+  integrity sha512-yaQ9cB89c17PUb0x6UfWRs7kQCorVdHlutU1boVPEsB8IDZH6n9tHxMacc3y0JoXOJUsZb/t/Mb8FUWMKaM7iQ==
+  dependencies:
+    object-assign "^4.1.1"
+    react-is "^17.0.2"
+    react-shallow-renderer "^16.13.1"
+    scheduler "^0.20.2"
+
 react-transition-group@^4.4.1:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9"
@@ -10475,6 +10498,14 @@ scheduler@^0.20.1:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+scheduler@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
+  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-utils@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz"