diff --git a/package-lock.json b/package-lock.json index cb2cffea185eb53754d882d69a675e26fef1799b..0a691e3974459c4c2840d4ec8332184c3db55ed6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,9 @@ "@testing-library/jest-dom": "^5.16.1", "@testing-library/react": "^12.1.2", "@testing-library/user-event": "^13.5.0", + "bootstrap": "^4.6.0", "classnames": "^2.3.1", + "jquery": "^3.6.0", "node-sass": "^7.0.1", "react": "^17.0.2", "react-dom": "^17.0.2", @@ -4862,6 +4864,19 @@ "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=" }, + "node_modules/bootstrap": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz", + "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + }, + "peerDependencies": { + "jquery": "1.9.1 - 3", + "popper.js": "^1.16.1" + } + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -10859,6 +10874,11 @@ "url": "https://github.com/chalk/supports-color?sponsor=1" } }, + "node_modules/jquery": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz", + "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==" + }, "node_modules/js-base64": { "version": "2.6.4", "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz", @@ -12492,6 +12512,17 @@ "node": ">=4" } }, + "node_modules/popper.js": { + "version": "1.16.1", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz", + "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==", + "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1", + "peer": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/portfinder": { "version": "1.0.28", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz", @@ -20802,6 +20833,12 @@ "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=" }, + "bootstrap": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz", + "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==", + "requires": {} + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -25164,6 +25201,11 @@ } } }, + "jquery": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz", + "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==" + }, "js-base64": { "version": "2.6.4", "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz", @@ -26365,6 +26407,12 @@ } } }, + "popper.js": { + "version": "1.16.1", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz", + "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==", + "peer": true + }, "portfinder": { "version": "1.0.28", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz", diff --git a/package.json b/package.json index f3b5c45f9956015e36ec55c11f3d55e9cbfc42a3..5887a5b86a9f9679a709552293f03c8d08c88a95 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,9 @@ "@testing-library/jest-dom": "^5.16.1", "@testing-library/react": "^12.1.2", "@testing-library/user-event": "^13.5.0", + "bootstrap": "^4.6.0", "classnames": "^2.3.1", + "jquery": "^3.6.0", "node-sass": "^7.0.1", "react": "^17.0.2", "react-dom": "^17.0.2", diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss index acc1b1f6c799ea2f480a83ab5ab36f4ca2e17aea..9834b93025332a53d8323c4b49751fff212457a5 100644 --- a/src/components/Button/Button.module.scss +++ b/src/components/Button/Button.module.scss @@ -1,3 +1,11 @@ .customButton { - background-color: red; + /* background-color: red; */ + background-color: blue; + color: brown; } + +/* // .btn{ +// .btn-abc{ +// background-color: aqua; +// } +// } */ diff --git a/src/components/Button/index.jsx b/src/components/Button/index.jsx index 81d9f273cf0dc01672cda8f26e51b6cc500a58a5..9118e88da4eaae60b4d07e372362f1e8b174a9bf 100644 --- a/src/components/Button/index.jsx +++ b/src/components/Button/index.jsx @@ -1,12 +1,12 @@ -import React from "react"; -import PropTypes from "prop-types"; -import cs from "classnames"; -import styles from "./Button.module.scss"; -function Button(props) { - return <div className={cs(styles.customButton)}>here</div>; -} +function Button(props){ +return ( + <div className="btn btn-primary"> + + {props.buttonName} -Button.propTypes = {}; + </div> +) +} export default Button; diff --git a/src/components/Image/Image.scss b/src/components/Image/Image.scss new file mode 100644 index 0000000000000000000000000000000000000000..2e6768d96587f10d3178fc1a4a2839d35d57a732 --- /dev/null +++ b/src/components/Image/Image.scss @@ -0,0 +1,11 @@ + +.card-profile-image { + position: absolute; + left: 50%; + max-width: 140px; + transition: all .15s ease; + transform: translate(-50%,-50%) scale(1); + border: 3px solid #fff; + border-radius: 0.375rem; + vertical-align: middle; +} diff --git a/src/components/Image/index.jsx b/src/components/Image/index.jsx new file mode 100644 index 0000000000000000000000000000000000000000..f6e840ed42e527c5f6a3c0cf2bdd920c34344812 --- /dev/null +++ b/src/components/Image/index.jsx @@ -0,0 +1,21 @@ +import React from "react"; +import PropTypes from "prop-types"; +import "./Image.scss"; + +// Profile Image common components +function Image({src, width}) { + return ( + <> + <div className="mt-7 card-profile-image"> + <img src={src} width={width} className="rounded-circle card-profile-image"/> + </div> + </> + ); +} + +Image.propTypes = { + src: PropTypes.string, + width: PropTypes.string +}; + +export default Image; diff --git a/src/components/index.js b/src/components/index.js index 1fdf4382e5bd73f112a978acdddd4aa444265db1..e4f3c34bc38bfd1e20de5b11d630b343c8349734 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1 +1,3 @@ export { default as Button } from "./Button"; +export { default as Image } from "./image"; + diff --git a/src/containers/Login/index.jsx b/src/containers/Login/index.jsx index 2f53370911e3e79719d28ed0e9c12a0d0fb83cb2..eef0abf04c6b797c6a7d201447959caea3848e74 100644 --- a/src/containers/Login/index.jsx +++ b/src/containers/Login/index.jsx @@ -1,8 +1,13 @@ import React from "react"; import PropTypes from "prop-types"; +import Button from "components/Button"; function Login(props) { - return <div>login</div>; + // return <div>login</div>; + return <> + <Button buttonName="pwe"/> + {/* <Button type="password" name="password" /> */} + </> } Login.propTypes = {}; diff --git a/src/index.js b/src/index.js index 3b0bb3361e032a28facd5fb46dc83cc746bc4111..532e1b57444ef19873800abb716ccb959e65e2ee 100644 --- a/src/index.js +++ b/src/index.js @@ -3,6 +3,9 @@ import ReactDOM from "react-dom"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; import "./assets/scss/argon.scss"; +import "jquery/dist/jquery.slim.min"; +import "bootstrap/dist/js/bootstrap.bundle.min"; +import "bootstrap/dist/css/bootstrap.min.css"; ReactDOM.render( <React.StrictMode>