From 8b7b364477bb7b295eeaf50f04cc78bd921caea2 Mon Sep 17 00:00:00 2001 From: AstudilloUMA Date: Mon, 1 May 2023 14:22:52 +0200 Subject: [PATCH 01/18] frontend --- sporthubReact/package-lock.json | 265 +++++++++++++++++- sporthubReact/package.json | 3 + .../src/assets/styles/categories.css | 5 + sporthubReact/src/assets/styles/forms.css | 14 +- sporthubReact/src/assets/styles/navBar.css | 14 +- sporthubReact/src/assets/styles/style.css | 6 + sporthubReact/src/components/AboutUs.jsx | 4 +- sporthubReact/src/components/Cart.jsx | 18 +- sporthubReact/src/components/Categories.jsx | 4 +- .../src/components/ChangePersonalInfo.jsx | 10 +- sporthubReact/src/components/Home.jsx | 8 +- sporthubReact/src/components/Login.jsx | 4 +- sporthubReact/src/components/Nav.jsx | 11 +- sporthubReact/src/components/Product.jsx | 7 +- sporthubReact/src/components/Search.jsx | 3 +- sporthubReact/src/components/SearchBar.jsx | 4 +- sporthubReact/src/components/SignUp.jsx | 14 +- .../purchaseProcess/AddressSelection.jsx | 14 +- .../purchaseProcess/PaymentSelection.jsx | 12 +- .../purchaseProcess/ProductList.jsx | 10 +- .../purchaseProcess/PurchaseSummary.jsx | 14 +- .../purchaseProcess/ShipmentSelection.jsx | 14 +- 22 files changed, 379 insertions(+), 79 deletions(-) diff --git a/sporthubReact/package-lock.json b/sporthubReact/package-lock.json index 05564a5..58ad7f0 100644 --- a/sporthubReact/package-lock.json +++ b/sporthubReact/package-lock.json @@ -9,9 +9,12 @@ "version": "0.0.0", "dependencies": { "axios": "^1.3.4", + "bootstrap": "^5.2.3", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.8.1", + "react-tabindex": "^1.0.3", + "reactstrap": "^9.1.9", "sweetalert2": "^11.7.3", "sweetalert2-react-content": "^5.0.7" }, @@ -328,6 +331,17 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/runtime": { + "version": "7.21.5", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.5.tgz", + "integrity": "sha512-8jI69toZqqcsnqGGqwGS4Qb1VwLOEp4hz+CXPywcvjs60u3B4Pom/U/7rm4W8tMOYEB+E9wgD0mW1l3r8qlI9Q==", + "dependencies": { + "regenerator-runtime": "^0.13.11" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@babel/template": { "version": "7.20.7", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz", @@ -776,6 +790,15 @@ "@jridgewell/sourcemap-codec": "1.4.14" } }, + "node_modules/@popperjs/core": { + "version": "2.11.7", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz", + "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@remix-run/router": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.3.2.tgz", @@ -862,6 +885,24 @@ "proxy-from-env": "^1.1.0" } }, + "node_modules/bootstrap": { + "version": "5.2.3", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz", + "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], + "peerDependencies": { + "@popperjs/core": "^2.11.6" + } + }, "node_modules/browserslist": { "version": "4.21.5", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.5.tgz", @@ -920,6 +961,11 @@ "node": ">=4" } }, + "node_modules/classnames": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", + "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" + }, "node_modules/color-convert": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", @@ -955,8 +1001,7 @@ "node_modules/csstype": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz", - "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==", - "dev": true + "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==" }, "node_modules/debug": { "version": "4.3.4", @@ -983,6 +1028,15 @@ "node": ">=0.4.0" } }, + "node_modules/dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "dependencies": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "node_modules/electron-to-chromium": { "version": "1.4.295", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.295.tgz", @@ -1251,6 +1305,14 @@ "integrity": "sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==", "dev": true }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/path-parse": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", @@ -1287,6 +1349,16 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/prop-types": { + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "dependencies": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + } + }, "node_modules/proxy-from-env": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", @@ -1315,6 +1387,30 @@ "react": "^18.2.0" } }, + "node_modules/react-fast-compare": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.1.tgz", + "integrity": "sha512-xTYf9zFim2pEif/Fw16dBiXpe0hoy5PxcD8+OwBnTtNLfIm3g6WxhKNurY+6OmdH1u6Ta/W/Vl6vjbYP1MFnDg==" + }, + "node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, + "node_modules/react-popper": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz", + "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==", + "dependencies": { + "react-fast-compare": "^3.0.1", + "warning": "^4.0.2" + }, + "peerDependencies": { + "@popperjs/core": "^2.0.0", + "react": "^16.8.0 || ^17 || ^18", + "react-dom": "^16.8.0 || ^17 || ^18" + } + }, "node_modules/react-refresh": { "version": "0.14.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz", @@ -1354,6 +1450,51 @@ "react-dom": ">=16.8" } }, + "node_modules/react-tabindex": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/react-tabindex/-/react-tabindex-1.0.3.tgz", + "integrity": "sha512-fIQROQRVx6NWnyxgzpGAbm417eIkks34kHsDS6uyyfQwh0ebRz4RZotU52FzhhOFCe/NSvWhnihe7qMhv7WBRA==", + "engines": { + "node": ">=10.0.0" + } + }, + "node_modules/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "dependencies": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": ">=16.6.0", + "react-dom": ">=16.6.0" + } + }, + "node_modules/reactstrap": { + "version": "9.1.9", + "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-9.1.9.tgz", + "integrity": "sha512-kcXHdYLmPK7rXzLotum7RI9uwvDZJ01VtjchAwzfKL8SHFZEvi7+JVsnBojf1ZIswRaTX/s8poAgZFgE8oF0zQ==", + "dependencies": { + "@babel/runtime": "^7.12.5", + "@popperjs/core": "^2.6.0", + "classnames": "^2.2.3", + "prop-types": "^15.5.8", + "react-popper": "^2.2.4", + "react-transition-group": "^4.4.2" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/regenerator-runtime": { + "version": "0.13.11", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", + "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" + }, "node_modules/resolve": { "version": "1.22.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", @@ -1540,6 +1681,14 @@ } } }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/yallist": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", @@ -1771,6 +1920,14 @@ "@babel/helper-plugin-utils": "^7.19.0" } }, + "@babel/runtime": { + "version": "7.21.5", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.5.tgz", + "integrity": "sha512-8jI69toZqqcsnqGGqwGS4Qb1VwLOEp4hz+CXPywcvjs60u3B4Pom/U/7rm4W8tMOYEB+E9wgD0mW1l3r8qlI9Q==", + "requires": { + "regenerator-runtime": "^0.13.11" + } + }, "@babel/template": { "version": "7.20.7", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz", @@ -2003,6 +2160,11 @@ "@jridgewell/sourcemap-codec": "1.4.14" } }, + "@popperjs/core": { + "version": "2.11.7", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz", + "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==" + }, "@remix-run/router": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.3.2.tgz", @@ -2077,6 +2239,12 @@ "proxy-from-env": "^1.1.0" } }, + "bootstrap": { + "version": "5.2.3", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz", + "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==", + "requires": {} + }, "browserslist": { "version": "4.21.5", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.5.tgz", @@ -2106,6 +2274,11 @@ "supports-color": "^5.3.0" } }, + "classnames": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", + "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" + }, "color-convert": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", @@ -2138,8 +2311,7 @@ "csstype": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz", - "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==", - "dev": true + "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==" }, "debug": { "version": "4.3.4", @@ -2155,6 +2327,15 @@ "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==" }, + "dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "requires": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "electron-to-chromium": { "version": "1.4.295", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.295.tgz", @@ -2341,6 +2522,11 @@ "integrity": "sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==", "dev": true }, + "object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==" + }, "path-parse": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", @@ -2364,6 +2550,16 @@ "source-map-js": "^1.0.2" } }, + "prop-types": { + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "requires": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + } + }, "proxy-from-env": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", @@ -2386,6 +2582,25 @@ "scheduler": "^0.23.0" } }, + "react-fast-compare": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.1.tgz", + "integrity": "sha512-xTYf9zFim2pEif/Fw16dBiXpe0hoy5PxcD8+OwBnTtNLfIm3g6WxhKNurY+6OmdH1u6Ta/W/Vl6vjbYP1MFnDg==" + }, + "react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, + "react-popper": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz", + "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==", + "requires": { + "react-fast-compare": "^3.0.1", + "warning": "^4.0.2" + } + }, "react-refresh": { "version": "0.14.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz", @@ -2409,6 +2624,40 @@ "react-router": "6.8.1" } }, + "react-tabindex": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/react-tabindex/-/react-tabindex-1.0.3.tgz", + "integrity": "sha512-fIQROQRVx6NWnyxgzpGAbm417eIkks34kHsDS6uyyfQwh0ebRz4RZotU52FzhhOFCe/NSvWhnihe7qMhv7WBRA==" + }, + "react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "requires": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + } + }, + "reactstrap": { + "version": "9.1.9", + "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-9.1.9.tgz", + "integrity": "sha512-kcXHdYLmPK7rXzLotum7RI9uwvDZJ01VtjchAwzfKL8SHFZEvi7+JVsnBojf1ZIswRaTX/s8poAgZFgE8oF0zQ==", + "requires": { + "@babel/runtime": "^7.12.5", + "@popperjs/core": "^2.6.0", + "classnames": "^2.2.3", + "prop-types": "^15.5.8", + "react-popper": "^2.2.4", + "react-transition-group": "^4.4.2" + } + }, + "regenerator-runtime": { + "version": "0.13.11", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", + "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" + }, "resolve": { "version": "1.22.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", @@ -2504,6 +2753,14 @@ "rollup": "^3.10.0" } }, + "warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "yallist": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", diff --git a/sporthubReact/package.json b/sporthubReact/package.json index 2bb9e87..390ecdb 100644 --- a/sporthubReact/package.json +++ b/sporthubReact/package.json @@ -10,9 +10,12 @@ }, "dependencies": { "axios": "^1.3.4", + "bootstrap": "^5.2.3", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.8.1", + "react-tabindex": "^1.0.3", + "reactstrap": "^9.1.9", "sweetalert2": "^11.7.3", "sweetalert2-react-content": "^5.0.7" }, diff --git a/sporthubReact/src/assets/styles/categories.css b/sporthubReact/src/assets/styles/categories.css index fd21467..fdeb1d8 100644 --- a/sporthubReact/src/assets/styles/categories.css +++ b/sporthubReact/src/assets/styles/categories.css @@ -1,3 +1,8 @@ +:focus{ + border-color: blue; + border-radius: 5px; +} + .categoriesCard{ height: 300px; border-radius: 20px; diff --git a/sporthubReact/src/assets/styles/forms.css b/sporthubReact/src/assets/styles/forms.css index dd8422e..d84140e 100644 --- a/sporthubReact/src/assets/styles/forms.css +++ b/sporthubReact/src/assets/styles/forms.css @@ -53,7 +53,7 @@ h2{ pointer-events: none; transition: 1s; text-align: left; - color: #ffa500; + color: #000; } input#username.activo ~ label{ @@ -62,7 +62,7 @@ input#username.activo ~ label{ input#username:focus ~ label{ left: 200px; - color: #ffa500; + color: #000; } input#password.activo ~ label{ @@ -71,7 +71,7 @@ input#password.activo ~ label{ input#password:focus ~ label{ left: 205px; - color: #ffa500; + color: #000; } input#email.activo ~ label{ @@ -80,7 +80,7 @@ input#email.activo ~ label{ input#email:focus ~ label{ left: 235px; - color: #ffa500; + color: #000; } input#name.activo ~ label{ @@ -89,7 +89,7 @@ input#name.activo ~ label{ input#name:focus ~ label{ left: 230px; - color: #ffa500; + color: #000; } input#lname.activo ~ label{ @@ -98,7 +98,7 @@ input#lname.activo ~ label{ input#lname:focus ~ label{ left: 200px; - color: #ffa500; + color: #000; } input#fecha.activo ~ label{ @@ -107,7 +107,7 @@ input#fecha.activo ~ label{ input#fecha:focus ~ label{ left: 190px; - color: #ffa500; + color: #000; } .formInputbox input{ diff --git a/sporthubReact/src/assets/styles/navBar.css b/sporthubReact/src/assets/styles/navBar.css index 1b0edb9..cc12d50 100644 --- a/sporthubReact/src/assets/styles/navBar.css +++ b/sporthubReact/src/assets/styles/navBar.css @@ -6,8 +6,20 @@ font-size: 1em; } +:focus{ + border-color: blue; + border-radius: 5px; +} - +#navbarText.show{ + padding: 2rem 3rem; + text-align: center; + color: #fff; + border-radius: 20px; + border: 3px solid #fff; + box-shadow: 0px 0px 5px #222; + backdrop-filter: blur(10px); +} .menuUser a:hover { background: #ffa500; diff --git a/sporthubReact/src/assets/styles/style.css b/sporthubReact/src/assets/styles/style.css index 7fb5553..35512f6 100644 --- a/sporthubReact/src/assets/styles/style.css +++ b/sporthubReact/src/assets/styles/style.css @@ -1,4 +1,10 @@ @import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400&display=swap'); + +:focus{ + border-color: blue; + border-radius: 5px; +} + *{ font-family: 'Figtree', sans-serif; } diff --git a/sporthubReact/src/components/AboutUs.jsx b/sporthubReact/src/components/AboutUs.jsx index 161713e..94f4954 100644 --- a/sporthubReact/src/components/AboutUs.jsx +++ b/sporthubReact/src/components/AboutUs.jsx @@ -8,7 +8,9 @@ export default function AboutUs() { Image not found

@@ -82,7 +84,7 @@ export default function AboutUs() { journey. If you are interested in examining our code or contributing to our project, we encourage you to visit our GitHub repository.

- + diff --git a/sporthubReact/src/components/Cart.jsx b/sporthubReact/src/components/Cart.jsx index 12874eb..cfdd05e 100644 --- a/sporthubReact/src/components/Cart.jsx +++ b/sporthubReact/src/components/Cart.jsx @@ -101,10 +101,10 @@ export default function Cart({ userLogged, cart, setCart }) { />
-
{product.prod.name}
+
{product.prod.name}
-
- Quantity: {product.quantity} + Quantity: {product.quantity}
-
-

Price: {product.prod.price}€

-
+

Price: {product.prod.price}€

+
Subtotal: {product.prod.price * product.quantity}€
-
diff --git a/sporthubReact/src/components/Categories.jsx b/sporthubReact/src/components/Categories.jsx index a84347a..aae65cb 100644 --- a/sporthubReact/src/components/Categories.jsx +++ b/sporthubReact/src/components/Categories.jsx @@ -24,7 +24,9 @@ export default function Categories() {
Football
- + + +
diff --git a/sporthubReact/src/components/ChangePersonalInfo.jsx b/sporthubReact/src/components/ChangePersonalInfo.jsx index 1d3ff9a..c05356d 100644 --- a/sporthubReact/src/components/ChangePersonalInfo.jsx +++ b/sporthubReact/src/components/ChangePersonalInfo.jsx @@ -86,12 +86,12 @@ export default function ChangePersonalInfo({ userLogged, setUserLogged }) { <>
-

Change your personal info

-

Hello , here you can change your personal info

+

Change your personal info

+

Hello , here you can change your personal info

-

Personal Information

+

Personal Information

Name is mandatory
@@ -134,7 +134,7 @@ export default function ChangePersonalInfo({ userLogged, setUserLogged }) {
-

Location Information

+

Location Information

@@ -165,7 +165,7 @@ export default function ChangePersonalInfo({ userLogged, setUserLogged }) {
-

Confirm your changes

+

Confirm your changes

We need you to introduce your password to confirm your changes

diff --git a/sporthubReact/src/components/Home.jsx b/sporthubReact/src/components/Home.jsx index 9df4181..061ee89 100644 --- a/sporthubReact/src/components/Home.jsx +++ b/sporthubReact/src/components/Home.jsx @@ -6,20 +6,20 @@ export default function Home() {
-

Your reliable sports shop

+

Your reliable sports shop

- + Image not found
- + Image not found
- + Image not found
diff --git a/sporthubReact/src/components/Login.jsx b/sporthubReact/src/components/Login.jsx index bb670e2..7d0b57c 100644 --- a/sporthubReact/src/components/Login.jsx +++ b/sporthubReact/src/components/Login.jsx @@ -46,7 +46,7 @@ export default function Login({ userLogged, setUserLogged }) {

Log in

Introduce your credentials to log in

-
+
Username
-
+
{ return ( <> @@ -30,6 +32,7 @@ export default function Nav({ userLogged, setUserLogged, cart }) { }; const helloUserAndLogout = () => { + return ( <>
  • @@ -45,6 +48,7 @@ export default function Nav({ userLogged, setUserLogged, cart }) { className="button-profile" id="menuBtn" data-bs-toggle="dropdown" + aria-label={userLogged.username} > {" " + userLogged.username + " "} @@ -97,6 +101,7 @@ export default function Nav({ userLogged, setUserLogged, cart }) { Logo @@ -119,19 +124,19 @@ export default function Nav({ userLogged, setUserLogged, cart }) { {/* I don`t know how, but we might consider the navbar component being able to know the page which is located and add 'className="nav-link active" aria-current="page"'*/}
  • - + Home
  • - + Categories
  • - + About Us
    • diff --git a/sporthubReact/src/components/Product.jsx b/sporthubReact/src/components/Product.jsx index 5142509..99c65c9 100644 --- a/sporthubReact/src/components/Product.jsx +++ b/sporthubReact/src/components/Product.jsx @@ -76,10 +76,11 @@ export default function Product(props) { />
    -

    {product.name}

    -

    {product.description}

    +

    {product.name}

    +

    {product.description}

    -

    Price: {product.price}€

    +

    Price: {product.price}€

    + diff --git a/sporthubReact/src/components/SignUp.jsx b/sporthubReact/src/components/SignUp.jsx index c53dc6b..d02c4b2 100644 --- a/sporthubReact/src/components/SignUp.jsx +++ b/sporthubReact/src/components/SignUp.jsx @@ -92,7 +92,7 @@ export default function SignUp({ userLogged, setUserLogged }) {

    Sign Up

    Register here to be part of SportHub !

    -
    +
    Username
    -
    +
    Name
    -
    +
    Last Name
    -
    +
    - +
    -
    +
    Email
    -
    +
    -
    Address Selection
    +
    Address Selection
    changedSelection(e)} value={0} checked={selectedAddress.value == 0} /> -

    Saved Address

    +

    Saved Address

    - Address Line-1 {userLogged?.address1} + Address Line-1 {userLogged?.address1}
    - Address Line-2 {userLogged?.address2} + Address Line-2 {userLogged?.address2}
    - Country {userLogged?.country} + Country {userLogged?.country}
    - Postal-Code {userLogged?.postalcode} + Postal-Code {userLogged?.postalcode}
    changedSelection(e)} value={1} checked={selectedAddress.value == 1} /> -

    Alternative Address

    +

    Alternative Address

    diff --git a/sporthubReact/src/components/purchaseProcess/PaymentSelection.jsx b/sporthubReact/src/components/purchaseProcess/PaymentSelection.jsx index fb06cb7..6fb2c08 100644 --- a/sporthubReact/src/components/purchaseProcess/PaymentSelection.jsx +++ b/sporthubReact/src/components/purchaseProcess/PaymentSelection.jsx @@ -65,15 +65,16 @@ export default function PaymentSelection({ return (
    -

    Payment Selection

    +

    Payment Selection

    -
    Credit Card
    +
    Credit Card
    -
    -
  • - +
    • diff --git a/sporthubReact/src/components/SignUp.jsx b/sporthubReact/src/components/SignUp.jsx index d02c4b2..91194ac 100644 --- a/sporthubReact/src/components/SignUp.jsx +++ b/sporthubReact/src/components/SignUp.jsx @@ -89,12 +89,14 @@ export default function SignUp({ userLogged, setUserLogged }) {
    -

    Sign Up

    -

    Register here to be part of SportHub !

    +

    Sign Up

    +

    Register here to be part of SportHub !

    - setUsernameInput(event.target.value)} @@ -104,7 +106,9 @@ export default function SignUp({ userLogged, setUserLogged }) {
    - setNameInput(event.target.value)} @@ -114,7 +118,9 @@ export default function SignUp({ userLogged, setUserLogged }) {
    - setLastNameInput(event.target.value)} @@ -124,14 +130,16 @@ export default function SignUp({ userLogged, setUserLogged }) {
    -
    - setEmailInput(event.target.value)} @@ -141,7 +149,9 @@ export default function SignUp({ userLogged, setUserLogged }) {
    - setPasswordInput(event.target.value)} diff --git a/sporthubReact/src/components/Wishlist.jsx b/sporthubReact/src/components/Wishlist.jsx index a49b5a7..4e37289 100644 --- a/sporthubReact/src/components/Wishlist.jsx +++ b/sporthubReact/src/components/Wishlist.jsx @@ -63,13 +63,13 @@ export default function Wishlist({ userLogged, wishlist, setWishlist }) { />
    -
    {product.name}
    +
    {product.name}
    -
    Price: {product.price}€
    +
    Price: {product.price}€
    - -
    -
    -
    + return ( + <> + +
    +

    Change your personal info

    +

    + {" "} + Hello , here you can change your personal info +

    +
    +
    +
    +

    + {" "} + Personal Information +

    +
    + +
    + Name is mandatory +
    + handleDataChange(e)} + /> +
    +
    + +
    + LastName is mandatory +
    + + setUserData({ ...userData, lastname: e.target.value }) + } + /> +
    +
    + +
    + Email is mandatory +
    + + setUserData({ ...userData, email: e.target.value }) + } + /> +
    + +
    + + + setUserData({ ...userData, phone: e.target.value }) + } + /> +
    + +
    + + + setUserData({ ...userData, date: e.target.value }) + } + /> +
    + +
    + + +
    +
    +
    +

    + {" "} + Location Information +

    +
    + + + setUserData({ ...userData, address1: e.target.value }) + } + /> +
    + +
    + + + setUserData({ ...userData, address2: e.target.value }) + } + /> +
    + +
    + + + setUserData({ ...userData, country: e.target.value }) + } + /> +
    + +
    + + + setUserData({ ...userData, postalcode: e.target.value }) + } + /> +
    +
    + +
    +
    +
    +

    + {" "} + Confirm your changes +

    +

    + {" "} + We need you to introduce your password to confirm your changes{" "} +

    + +
    + +
    - - - ); + +
    + +
    +
    +
    +
    + + + ); } diff --git a/sporthubReact/src/components/Login.jsx b/sporthubReact/src/components/Login.jsx index b20157e..d03a7fe 100644 --- a/sporthubReact/src/components/Login.jsx +++ b/sporthubReact/src/components/Login.jsx @@ -2,7 +2,10 @@ import { useState, useEffect } from "react"; import axios from "axios"; import { useNavigate } from "react-router-dom"; import "../assets/styles/forms.css" -// import axios from "axios"; +import Swal from "sweetalert2"; +import withReactContent from "sweetalert2-react-content"; + +const MySwal = withReactContent(Swal); export default function Login({ userLogged, setUserLogged }) { const [usernameInput, setUsernameInput] = useState(""); @@ -28,7 +31,12 @@ export default function Login({ userLogged, setUserLogged }) { navigate("/"); }) .catch((error) => { - alert("The username or password were incorrect."); + MySwal.fire({ + title: "Error", + text: "The username or password were incorrect", + icon: "error", + confirmButtonColor: "#ffa500", + }); }); }; diff --git a/sporthubReact/src/components/Nav.jsx b/sporthubReact/src/components/Nav.jsx index c476a1c..c7286b9 100644 --- a/sporthubReact/src/components/Nav.jsx +++ b/sporthubReact/src/components/Nav.jsx @@ -94,7 +94,7 @@ export default function Nav({ userLogged, setUserLogged, cart }) { return (
    -