From 376b32edabf39aad2f3f60b47908560e56b607de Mon Sep 17 00:00:00 2001 From: Rahul Prasad Yadav Date: Tue, 29 Oct 2024 00:38:33 +0530 Subject: [PATCH] added button like google and facbook --- paras/package-lock.json | 58 ++++++++++++++ paras/src/Login.css | 2 +- paras/src/Login.js | 3 + paras/src/Signup.css | 169 ++++++++++++++++++++++++++++++++++++++-- paras/src/Signup.js | 5 ++ 5 files changed, 228 insertions(+), 9 deletions(-) diff --git a/paras/package-lock.json b/paras/package-lock.json index 7906c1b..0c24e8c 100644 --- a/paras/package-lock.json +++ b/paras/package-lock.json @@ -3541,6 +3541,26 @@ "url": "https://github.com/sponsors/gregberge" } }, + "node_modules/@testing-library/dom": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz", + "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==", + "license": "MIT", + "peer": true, + "dependencies": { + "@babel/code-frame": "^7.10.4", + "@babel/runtime": "^7.12.5", + "@types/aria-query": "^5.0.1", + "aria-query": "5.3.0", + "chalk": "^4.1.0", + "dom-accessibility-api": "^0.5.9", + "lz-string": "^1.5.0", + "pretty-format": "^27.0.2" + }, + "engines": { + "node": ">=18" + } + }, "node_modules/@testing-library/jest-dom": { "version": "6.5.0", "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.5.0.tgz", @@ -3638,6 +3658,13 @@ "node": ">=10.13.0" } }, + "node_modules/@types/aria-query": { + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz", + "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==", + "license": "MIT", + "peer": true + }, "node_modules/@types/babel__core": { "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", @@ -6721,6 +6748,13 @@ "node": ">=6.0.0" } }, + "node_modules/dom-accessibility-api": { + "version": "0.5.16", + "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz", + "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==", + "license": "MIT", + "peer": true + }, "node_modules/dom-converter": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz", @@ -11221,6 +11255,16 @@ "yallist": "^3.0.2" } }, + "node_modules/lz-string": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz", + "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==", + "license": "MIT", + "peer": true, + "bin": { + "lz-string": "bin/bin.js" + } + }, "node_modules/magic-string": { "version": "0.25.9", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz", @@ -16254,6 +16298,20 @@ "is-typedarray": "^1.0.0" } }, + "node_modules/typescript": { + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", + "license": "Apache-2.0", + "peer": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=4.2.0" + } + }, "node_modules/unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", diff --git a/paras/src/Login.css b/paras/src/Login.css index ee24270..e9cf369 100644 --- a/paras/src/Login.css +++ b/paras/src/Login.css @@ -75,7 +75,7 @@ body { } .login-btn { - padding: 14px; + padding: 14px 100px; background-color: #3182ce; color: #ffffff; border: none; diff --git a/paras/src/Login.js b/paras/src/Login.js index f940faa..e1dc6e6 100644 --- a/paras/src/Login.js +++ b/paras/src/Login.js @@ -94,6 +94,9 @@ const Login = () => { + + +

Don't have an account?{" "} diff --git a/paras/src/Signup.css b/paras/src/Signup.css index 87413a4..454f57d 100644 --- a/paras/src/Signup.css +++ b/paras/src/Signup.css @@ -11,20 +11,22 @@ body { justify-content: center; align-items: center; height: 100vh; + margin: 0; color: #333; } .signup-container { background-color: #ffffff; - padding: 40px; + padding: 20px; border-radius: 15px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); - width: 100%; + width: 300%; max-width: 400px; text-align: center; transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; position: relative; /* Changed from absolute */ + } .signup-container:hover { @@ -33,10 +35,10 @@ body { } .signup-container h2 { - margin-bottom: 25px; + margin-bottom: 10px; color: #1a202c; font-weight: 600; - font-size: 28px; + font-size: 20px; } .signup-form { @@ -45,8 +47,9 @@ body { } .form-group { - margin-bottom: 20px; + margin-bottom: 200px; text-align: left; + } .form-group label { @@ -56,8 +59,8 @@ body { } .form-group input { - padding: 12px; - width: 100%; + padding: 20px; + width: 200%; font-size: 16px; border: 1px solid #cbd5e0; border-radius: 8px; @@ -74,7 +77,7 @@ body { } .signup-btn { - padding: 14px; + /* padding: 14px 100px; */ background-color: #3182ce; color: #ffffff; border: none; @@ -83,6 +86,7 @@ body { font-size: 16px; font-weight: 600; transition: background-color 0.3s ease, box-shadow 0.3s ease; + width: 100%; } .signup-btn:hover { @@ -90,6 +94,155 @@ body { box-shadow: 0 6px 12px rgba(49, 130, 206, 0.3); } + + #google-login { + width: 100%; + height: 45px; + border-radius: 15px; + border: 1px solid #cacaca; + margin: 1px; /*Margin added so that they do not overlap*/ + background-color: #aa6a6a; + + font-size: 16px; + cursor: pointer; + transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transitions for hover and active states */ + + + color: black; + font-family:var(--ff-poppins); + background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=); background-repeat: no-repeat; + background-position: 5% 50%; + background-size: 30px; + } + + #google-login a{ + text-decoration: none; + color: #232836 + } + + #google-login:hover { + background-color: #ac7070; /* Darker shade on hover */ + transform: translateY(-3px); /* Lift effect on hover */ + } + + + #google-login:active { + transform: translateY(1px); /* Slight press effect */ + } + + #google-login { + background-color: #fff; /* Google red color */ + } + + #google-login:hover { + background-color: #FFF; /* Darker Google color on hover */ + } + + + + + #facbook-login { + width: 100%; + height: 45px; + border-radius: 15px; + border: none; + margin: 1px; /*Margin added so that they do not overlap*/ + background-color:#aa6a6a;; + color: rgb(190, 135, 135); + font-size: 16px; + cursor: pointer; + transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transitions for hover and active states */ + + color: black; + font-family:var(--ff-poppins); + background-image: url(https://upload.wikimedia.org/wikipedia/commons/1/1b/Facebook_icon.svg); + background-repeat: no-repeat; + background-position: 3% 50%; + background-size: 30px; + } + + + + + #facbook-login:hover { + background-color: #ac7070; /* Darker shade on hover */ + transform: translateY(-3px); /* Lift effect on hover */ + } + + + #facbook-login:active { + transform: translateY(1px); /* Slight press effect */ + } + + #facbook-login { + background-color: #3b5998;/* Google red color */ + + } + + #facbook-login:hover { + background-color: #3b5998; /* Darker Google color on hover */ + } + + #facbook-login a{ + text-decoration: none; + color: #fff; + + } + + + + + + #x-login { + width: 100%; + height: 45px; + border-radius: 15px; + border: none; + margin: 1px; /*Margin added so that they do not overlap*/ + background-color:#aa6a6a;; + color: rgb(190, 135, 135); + font-size: 16px; + cursor: pointer; + transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transitions for hover and active states */ + color: black; + font-family:var(--ff-poppins); + background-image: url(https://img.freepik.com/free-vector/twitter-new-2023-x-logo-white-background-vector_1017-45422.jpg?t=st=1729705399~exp=1729708999~hmac=86164ca5278d72d1e806212a9399b9f1d09e5db1559733d42425370dbca91851&w=826); background-repeat: no-repeat; + background-position: 5% 50%; + background-size: 30px; + } + + + + + #x-login:hover { + background-color: #ac7070; /* Darker shade on hover */ + transform: translateY(-3px); /* Lift effect on hover */ + } + + #x-login:active { + transform: translateY(1px); /* Slight press effect */ + } + + #x-login { + background-color:#000000;/* Google red color */ + } + + #x-login:hover { + background-color: #141313; /* Darker Google color on hover */ + } + + #x-login a{ + text-decoration: none; + color: #fff; + + } + + + + + + + .error-msg { color: #e53e3e; font-size: 12px; diff --git a/paras/src/Signup.js b/paras/src/Signup.js index fcbfd6b..ea05d99 100644 --- a/paras/src/Signup.js +++ b/paras/src/Signup.js @@ -119,6 +119,11 @@ const Signup = () => { + + + + +

Already have an account?{" "}