From 44e5b208902fb37e37b3d09419718e9cb91e266d Mon Sep 17 00:00:00 2001 From: Rohit Kini Date: Tue, 2 Jul 2024 18:28:52 +0530 Subject: [PATCH 1/2] added profile card --- ui/package-lock.json | 303 ++++++++++++++------- ui/src/common/assets/icons.tsx | 8 + ui/src/components/MainHeader/index.scss | 32 ++- ui/src/components/MainHeader/index.tsx | 12 +- ui/src/components/ProfileHeader/index.scss | 78 ++++++ ui/src/components/ProfileHeader/index.tsx | 40 +++ 6 files changed, 373 insertions(+), 100 deletions(-) create mode 100644 ui/src/components/ProfileHeader/index.scss create mode 100644 ui/src/components/ProfileHeader/index.tsx diff --git a/ui/package-lock.json b/ui/package-lock.json index d5e16591..d2cab51b 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -9,7 +9,7 @@ "version": "0.1.0", "dependencies": { "@contentstack/json-rte-serializer": "^2.0.5", - "@contentstack/venus-components": "1.5.1", + "@contentstack/venus-components": "^2.2.4", "@reduxjs/toolkit": "^2.2.5", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", @@ -2035,15 +2035,18 @@ } }, "node_modules/@contentstack/venus-components": { - "version": "1.5.1", - "resolved": "https://npm.pkg.github.com/download/@contentstack/venus-components/1.5.1/463c96c30d838f3fe4c5c9b47cd152527f0bd367", - "integrity": "sha512-wLZPaokr/Q3DHuRGOU1AC9tPrTDitvjDGpcOWuzeexFmWFXE8RRwy8IPLXhDUm7ofYCoi8FD7sDGdJ2bU/eGyA==", + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/@contentstack/venus-components/-/venus-components-2.2.4.tgz", + "integrity": "sha512-/Dijz5LDSR/UMxJtT0e7AWZnLXFuRBe6JamksOGXHOQQaEKYvye0oaQfSQq8Mjmb+D9WAN5BXOfMRBhzZA+aQQ==", "dependencies": { "@emotion/css": "^11.1.3", + "@testing-library/react-hooks": "^8.0.1", "@tippyjs/react": "^4.1.0", "array-move": "^3.0.1", "axios": "0.25.0", "browser-detect": "^0.2.28", + "cache": "^3.0.0", + "clean": "^4.0.2", "collapse-whitespace": "^1.1.7", "detect-browser": "^5.3.0", "dompurify": "^2.4.1", @@ -2060,11 +2063,12 @@ "react-ace": "^9.1.4", "react-beautiful-dnd": "^13.0.0", "react-color": "^2.19.3", - "react-datepicker": "^3.3.0", - "react-dnd": "^11.1.3", + "react-datepicker": "^4.25.0", + "react-dnd-11": "npm:react-dnd@^11.1.3", "react-dnd-html5-backend": "^11.1.3", "react-dropzone": "^11.2.4", "react-infinite-scroll-component": "^6.1.0", + "react-input-mask": "^3.0.0-alpha.2", "react-mentions": "^4.4.7", "react-modal": "^3.11.2", "react-redux": "^7.2.1", @@ -2078,6 +2082,7 @@ "react-tiktok": "^1.0.0", "react-toastify": "6.1.0", "react-treebeard": "^3.2.4", + "react-virtualized": "^9.22.5", "react-virtualized-auto-sizer": "1.0.5", "react-window": "^1.8.5", "react-window-infinite-loader": "^1.0.5", @@ -2092,6 +2097,7 @@ "slate-react": "^0.77.4", "storybook-addon-whats-new": "^1.0.3", "systemjs": "^6.10.2", + "user-event": "^4.0.0", "uuid": "^8.3.2" }, "peerDependencies": { @@ -2152,6 +2158,54 @@ "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz", "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==" }, + "node_modules/@contentstack/venus-components/node_modules/@testing-library/react-hooks": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/@testing-library/react-hooks/-/react-hooks-8.0.1.tgz", + "integrity": "sha512-Aqhl2IVmLt8IovEVarNDFuJDVWVvhnr9/GCU6UUnrYXwgDFF9h2L2o2P9KBni1AST5sT6riAyoukFLyjQUgD/g==", + "dependencies": { + "@babel/runtime": "^7.12.5", + "react-error-boundary": "^3.1.0" + }, + "engines": { + "node": ">=12" + }, + "peerDependencies": { + "@types/react": "^16.9.0 || ^17.0.0", + "react": "^16.9.0 || ^17.0.0", + "react-dom": "^16.9.0 || ^17.0.0", + "react-test-renderer": "^16.9.0 || ^17.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "react-dom": { + "optional": true + }, + "react-test-renderer": { + "optional": true + } + } + }, + "node_modules/@contentstack/venus-components/node_modules/@types/react": { + "version": "17.0.80", + "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.80.tgz", + "integrity": "sha512-LrgHIu2lEtIo8M7d1FcI3BdwXWoRQwMoXOZ7+dPTW0lYREjmlHl3P0U1VD0i/9tppOuv8/sam7sOjx34TxSFbA==", + "optional": true, + "peer": true, + "dependencies": { + "@types/prop-types": "*", + "@types/scheduler": "^0.16", + "csstype": "^3.0.2" + } + }, + "node_modules/@contentstack/venus-components/node_modules/@types/react/node_modules/csstype": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", + "optional": true, + "peer": true + }, "node_modules/@contentstack/venus-components/node_modules/axios": { "version": "0.25.0", "resolved": "https://registry.npmjs.org/axios/-/axios-0.25.0.tgz", @@ -2165,25 +2219,6 @@ "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz", "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==" }, - "node_modules/@contentstack/venus-components/node_modules/deep-equal": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.2.tgz", - "integrity": "sha512-5tdhKF6DbU7iIzrIOa1AOUt39ZRm13cmL1cGEh//aqR8x9+tNfbywRf0n5FD/18OKMdo7DNEtrX2t22ZAkI+eg==", - "dependencies": { - "is-arguments": "^1.1.1", - "is-date-object": "^1.0.5", - "is-regex": "^1.1.4", - "object-is": "^1.1.5", - "object-keys": "^1.1.1", - "regexp.prototype.flags": "^1.5.1" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/@contentstack/venus-components/node_modules/react-ace": { "version": "9.5.0", "resolved": "https://registry.npmjs.org/react-ace/-/react-ace-9.5.0.tgz", @@ -2200,39 +2235,6 @@ "react-dom": "^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0" } }, - "node_modules/@contentstack/venus-components/node_modules/react-datepicker": { - "version": "3.8.0", - "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-3.8.0.tgz", - "integrity": "sha512-iFVNEp8DJoX5yEvEiciM7sJKmLGrvE70U38KhpG13XrulNSijeHw1RZkhd/0UmuXR71dcZB/kdfjiidifstZjw==", - "dependencies": { - "classnames": "^2.2.6", - "date-fns": "^2.0.1", - "prop-types": "^15.7.2", - "react-onclickoutside": "^6.10.0", - "react-popper": "^1.3.8" - }, - "peerDependencies": { - "react": "^16.9.0 || ^17", - "react-dom": "^16.9.0 || ^17" - } - }, - "node_modules/@contentstack/venus-components/node_modules/react-datepicker/node_modules/react-popper": { - "version": "1.3.11", - "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.11.tgz", - "integrity": "sha512-VSA/bS+pSndSF2fiasHK/PTEEAyOpX60+H5EPAjoArr8JGm+oihu4UbrqcEBpQibJxBVCpYyjAX7abJ+7DoYVg==", - "dependencies": { - "@babel/runtime": "^7.1.2", - "@hypnosphi/create-react-context": "^0.3.1", - "deep-equal": "^1.1.1", - "popper.js": "^1.14.4", - "prop-types": "^15.6.1", - "typed-styles": "^0.0.7", - "warning": "^4.0.2" - }, - "peerDependencies": { - "react": "0.14.x || ^15.0.0 || ^16.0.0 || ^17.0.0" - } - }, "node_modules/@contentstack/venus-components/node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -3133,19 +3135,6 @@ "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.2.tgz", "integrity": "sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==" }, - "node_modules/@hypnosphi/create-react-context": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/@hypnosphi/create-react-context/-/create-react-context-0.3.1.tgz", - "integrity": "sha512-V1klUed202XahrWJLLOT3EXNeCpFHCcJntdFGI15ntCwau+jfT386w7OFTMaCqOgXUH1fa0w/I1oZs+i/Rfr0A==", - "dependencies": { - "gud": "^1.0.0", - "warning": "^4.0.3" - }, - "peerDependencies": { - "prop-types": "^15.0.0", - "react": ">=0.14.0" - } - }, "node_modules/@icons/material": { "version": "0.2.4", "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz", @@ -8040,6 +8029,14 @@ "node": ">= 0.8" } }, + "node_modules/cache": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/cache/-/cache-3.0.0.tgz", + "integrity": "sha512-sNoM5jithfalxIceo/uFFm5bOlGjux2y8jEvjNb0F/cACWQaMmWuEPTLl6GzLHdFcNsbWBBdqkBd9NyefZ5UQQ==", + "dependencies": { + "ds": "^1.4.2" + } + }, "node_modules/call-bind": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz", @@ -8213,6 +8210,17 @@ "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==" }, + "node_modules/clean": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/clean/-/clean-4.0.2.tgz", + "integrity": "sha512-2LGVh4dNtI16L4UzqDHO6Hbl74YjG1vWvEUU78dgLO4kuyqJZFMNMPBx+EGtYKTFb14e24p+gWXgkabqxc1EUw==", + "dependencies": { + "async": "^0.9.0", + "minimist": "^1.1.0", + "mix2": "^1.0.0", + "skema": "^1.0.0" + } + }, "node_modules/clean-css": { "version": "5.3.3", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz", @@ -8232,6 +8240,11 @@ "node": ">=0.10.0" } }, + "node_modules/clean/node_modules/async": { + "version": "0.9.2", + "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz", + "integrity": "sha512-l6ToIJIotphWahxxHyzK9bnLR6kM4jJIIgLShZeqLY7iboHoGkdgFl7W2/Ivi4SkMJYGKqW8vSuk0uKUj6qsSw==" + }, "node_modules/cliui": { "version": "7.0.4", "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz", @@ -9643,6 +9656,11 @@ "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz", "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==" }, + "node_modules/ds": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/ds/-/ds-1.4.2.tgz", + "integrity": "sha512-d5nMCjfod+srvE/1Bnt/u+L++6N8KJx3ZAi95AGp0g6RtfuGDNlGciWL/iiwKHsFVBVnA3/HEFUq5SW1NgTQ3Q==" + }, "node_modules/duplexer": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz", @@ -11709,11 +11727,6 @@ "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz", "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==" }, - "node_modules/gud": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz", - "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==" - }, "node_modules/gzip-size": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz", @@ -17126,6 +17139,14 @@ "sourcemap-codec": "^1.4.8" } }, + "node_modules/make-array": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/make-array/-/make-array-0.1.2.tgz", + "integrity": "sha512-bcFmxgZ+OTaMYJp/w6eifElKTcfum7Gi5H7vQ8KzAf9X6swdxkVuilCaG3ZjXr/qJsQT4JJ2Rq9SDYScWEdu9Q==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/make-dir": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", @@ -17389,6 +17410,14 @@ "node": ">=16 || 14 >=14.17" } }, + "node_modules/mix2": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/mix2/-/mix2-1.0.5.tgz", + "integrity": "sha512-ybWz7nY+WHBBIyliND5eYaJKzkoa+qXRYNTmVqAxSLlFtL/umT2iv+pmyTu1oU7WNkrirwheqR8d9EaKVz0e5g==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/mkdirp": { "version": "0.5.6", "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz", @@ -18098,16 +18127,6 @@ "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", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/popperjs" - } - }, "node_modules/postcss": { "version": "8.4.33", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz", @@ -19758,6 +19777,23 @@ "react": "*" } }, + "node_modules/react-datepicker": { + "version": "4.25.0", + "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.25.0.tgz", + "integrity": "sha512-zB7CSi44SJ0sqo8hUQ3BF1saE/knn7u25qEMTO1CQGofY1VAKahO8k9drZtp0cfW1DMfoYLR3uSY1/uMvbEzbg==", + "dependencies": { + "@popperjs/core": "^2.11.8", + "classnames": "^2.2.6", + "date-fns": "^2.30.0", + "prop-types": "^15.7.2", + "react-onclickoutside": "^6.13.0", + "react-popper": "^2.3.0" + }, + "peerDependencies": { + "react": "^16.9.0 || ^17 || ^18", + "react-dom": "^16.9.0 || ^17 || ^18" + } + }, "node_modules/react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -19875,7 +19911,8 @@ "node": ">=8" } }, - "node_modules/react-dnd": { + "node_modules/react-dnd-11": { + "name": "react-dnd", "version": "11.1.3", "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-11.1.3.tgz", "integrity": "sha512-8rtzzT8iwHgdSC89VktwhqdKKtfXaAyC4wiqp0SywpHG12TTLvfOoL6xNEIUWXwIEWu+CFfDn4GZJyynCEuHIQ==", @@ -19926,6 +19963,21 @@ "react": ">= 16.8" } }, + "node_modules/react-error-boundary": { + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.4.tgz", + "integrity": "sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==", + "dependencies": { + "@babel/runtime": "^7.12.5" + }, + "engines": { + "node": ">=10", + "npm": ">=6" + }, + "peerDependencies": { + "react": ">=16.13.1" + } + }, "node_modules/react-error-overlay": { "version": "6.0.11", "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", @@ -19977,6 +20029,20 @@ "react": ">=16.0.0" } }, + "node_modules/react-input-mask": { + "version": "3.0.0-alpha.2", + "resolved": "https://registry.npmjs.org/react-input-mask/-/react-input-mask-3.0.0-alpha.2.tgz", + "integrity": "sha512-9U7qL+mvDMOJcbOFPdt6Vj+zzmCMNnBjhhjGDrL8BGQmymgvMVKhu/oOVfAkl+5VWOsLr+G3EhZOmae5fBcAkA==", + "dependencies": { + "invariant": "^2.2.4", + "prop-types": "^15.7.2", + "warning": "^4.0.3" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -20034,9 +20100,9 @@ } }, "node_modules/react-onclickoutside": { - "version": "6.13.0", - "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz", - "integrity": "sha512-ty8So6tcUpIb+ZE+1HAhbLROvAIJYyJe/1vRrrcmW+jLsaM+/powDRqxzo6hSh9CuRZGSL1Q8mvcF5WRD93a0A==", + "version": "6.13.1", + "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.1.tgz", + "integrity": "sha512-LdrrxK/Yh9zbBQdFbMTXPp3dTSN9B+9YJQucdDu3JNKRrbdU+H+/TVONJoWtOwy4II8Sqf1y/DTI6w/vGPYW0w==", "funding": { "type": "individual", "url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md" @@ -20046,6 +20112,20 @@ "react-dom": "^15.5.x || ^16.x || ^17.x || ^18.x" } }, + "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-property": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/react-property/-/react-property-2.0.2.tgz", @@ -20412,6 +20492,23 @@ "react-dom": "^15.3.0 || ^16.0.0" } }, + "node_modules/react-virtualized": { + "version": "9.22.5", + "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.22.5.tgz", + "integrity": "sha512-YqQMRzlVANBv1L/7r63OHa2b0ZsAaDp1UhVNEdUaXI8A5u6hTpA5NYtUueLH2rFuY/27mTGIBl7ZhqFKzw18YQ==", + "dependencies": { + "@babel/runtime": "^7.7.2", + "clsx": "^1.0.4", + "dom-helpers": "^5.1.3", + "loose-envify": "^1.4.0", + "prop-types": "^15.7.2", + "react-lifecycles-compat": "^3.0.4" + }, + "peerDependencies": { + "react": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0", + "react-dom": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-window": { "version": "1.8.10", "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.10.tgz", @@ -21443,6 +21540,21 @@ "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz", "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==" }, + "node_modules/skema": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/skema/-/skema-1.0.2.tgz", + "integrity": "sha512-5LWfF2RSW2B3xfOaY6j49X8aNwsnj9cRVrM5QMF7it+cZvpv5ufiOUT13ps2U52sIbAzs11bdRP6mi5qyg75VQ==", + "dependencies": { + "async": "^0.9.0", + "make-array": "^0.1.2", + "mix2": "^1.0.0" + } + }, + "node_modules/skema/node_modules/async": { + "version": "0.9.2", + "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz", + "integrity": "sha512-l6ToIJIotphWahxxHyzK9bnLR6kM4jJIIgLShZeqLY7iboHoGkdgFl7W2/Ivi4SkMJYGKqW8vSuk0uKUj6qsSw==" + }, "node_modules/slash": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", @@ -22784,11 +22896,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/typed-styles": { - "version": "0.0.7", - "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz", - "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==" - }, "node_modules/typedarray-to-buffer": { "version": "3.1.5", "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz", @@ -22972,6 +23079,12 @@ "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/user-event": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/user-event/-/user-event-4.0.0.tgz", + "integrity": "sha512-M2at0vzLqzrwZNBmtPDRyd+1BaRwU9UTG7sc+MrUZmGviR/Ws8tmXxVvfRvuv7TWWIDsLqbrMvoF1sF7DW4y5w==", + "deprecated": "user-event has moved to @testing-library/user-event. Please uninstall user-event and install @testing-library/user-event instead, or use an older version of user-event. Learn more about this change here: https://github.com/testing-library/dom-testing-library/issues/260 Thanks! :)" + }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", diff --git a/ui/src/common/assets/icons.tsx b/ui/src/common/assets/icons.tsx index ac841d3e..179668e2 100644 --- a/ui/src/common/assets/icons.tsx +++ b/ui/src/common/assets/icons.tsx @@ -763,3 +763,11 @@ export const SEARCH_ICON = ( /> ); + +export const LOG_OUT = ( + + + + + +); \ No newline at end of file diff --git a/ui/src/components/MainHeader/index.scss b/ui/src/components/MainHeader/index.scss index fa715564..a08bd328 100644 --- a/ui/src/components/MainHeader/index.scss +++ b/ui/src/components/MainHeader/index.scss @@ -1,6 +1,21 @@ @import '../../scss/variables'; .mainheader { + [class*="Profile_card"] { + [class*="Dropdown__menu__list"] { + padding: 0; + } + + [class*="Dropdown__menu__list__item"] { + pointer-events: none; + padding: 0; + + [class*="profile-card__logout"] { + pointer-events: all; + } + } + } + background-color: $color-brand-white-base; height: 3.5rem; justify-content: space-between; @@ -10,13 +25,16 @@ display: flex; align-items: center; z-index: 100; + button { border: 0 none; } + .logo { position: relative; text-align: center; width: 3.5rem; + a { align-items: center; display: flex; @@ -25,32 +43,40 @@ padding: 0.5rem; text-decoration: none; } + a:focus { border-radius: 5px; box-shadow: 0 0 1px $color-brand-primary-base, 0 0 0 4px #bbb4f4; } } + .organisationWrapper { margin-left: 1.063rem; + &:focus { box-shadow: none; } - } + } + .Dropdown { &:focus { box-shadow: none; } } + .Dropdown-wrapper { padding: 0 18px; } + .Dropdown.Dropdown--hover .Dropdown__menu--primary { top: 2.5rem; } + .organisationWrapper { &:focus { box-shadow: none; } + .Dropdown__header__value { color: #475161; max-width: 11.1875rem; @@ -58,14 +84,16 @@ color: $color-black-222 !important; line-height: $line-height-reset; } + .Dropdown__menu--primary .Dropdown__menu__list__item, .Dropdown__menu--secondary .Dropdown__menu__list__item, .Dropdown__menu--tertiary .Dropdown__menu__list__item { max-width: 14.5rem; } + .Dropdown__header__label { line-height: $line-height-reset; margin-bottom: 8px; } } -} +} \ No newline at end of file diff --git a/ui/src/components/MainHeader/index.tsx b/ui/src/components/MainHeader/index.tsx index 1061a071..160db5d0 100644 --- a/ui/src/components/MainHeader/index.tsx +++ b/ui/src/components/MainHeader/index.tsx @@ -1,7 +1,7 @@ // Libraries import { useEffect, useState } from 'react'; import { useNavigate, useLocation, Link } from 'react-router-dom'; -import { Dropdown, Tooltip } from '@contentstack/venus-components'; +import { Dropdown, Tooltip , Accordion} from '@contentstack/venus-components'; import { useDispatch, useSelector } from 'react-redux'; // Service @@ -23,6 +23,7 @@ import { import { MainHeaderType } from './mainheader.interface'; import { IDropDown } from '../../context/app/app.interface'; +import ProfileCard from '../ProfileHeader'; // Styles import './index.scss'; @@ -129,15 +130,20 @@ const MainHeader = () => { , } ]} type="click" + className="Profile_card" >
{name}
 + {/* +
{name}
+

HIIIIIIIIII

+ */} } diff --git a/ui/src/components/ProfileHeader/index.scss b/ui/src/components/ProfileHeader/index.scss new file mode 100644 index 00000000..193fd188 --- /dev/null +++ b/ui/src/components/ProfileHeader/index.scss @@ -0,0 +1,78 @@ +@import '../../scss/variables'; + +.profile-card { + width: 300px; + padding: 16px; + // background-color: #f8f9fa; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + text-align: center; +} + +.profile-card__avatar { + margin-bottom: 16px; +} + +.profile-card__initials { + width: 64px; + height: 64px; + border-radius: 50%; + background-color: #2c3e50; + color: white; + display: flex; + align-items: center; + justify-content: center; + font-size: 24px; + margin: 12px auto; + +} + +.profile-card__details { + margin-bottom: 16px; +} + +.profile-card__name { + font-size: 16px; + font-weight: 500; + color: #2c3e50; + margin-bottom: 5px; +} + +.profile-card__email { + font-size: 14px; + color: #7f8c8d; + margin-bottom: 5px; +} + +.profile-card__logout { + display: flex; + align-items: center; + cursor: pointer; + color: #2c3e50; + font-size: 14px; + height:56px; +} + +.profile-card__logout-icon { + margin-right: 8px; + font-size: 16px; +} + +.profile-card__logout-text { + text-decoration: underline; +} + +.profile-gray-background { + min-height: 20px; + position: absolute; + width: 350px; + height: 64px; + top: 0; + left: 0; + background-color: #F9F8FF; + z-index: 1; +} +.profile-card__avatar { + z-index: 2; + position: relative; +} \ No newline at end of file diff --git a/ui/src/components/ProfileHeader/index.tsx b/ui/src/components/ProfileHeader/index.tsx new file mode 100644 index 00000000..36c067b1 --- /dev/null +++ b/ui/src/components/ProfileHeader/index.tsx @@ -0,0 +1,40 @@ +// Redux +import { RootState } from '../../store'; + +import { useSelector } from 'react-redux'; +import { useNavigate } from 'react-router-dom'; +import { + clearLocalStorage, +} from '../../utilities/functions'; +// Styles +import './index.scss'; +import { LOG_OUT } from '../../common/assets'; +const ProfileCard = () => { + const user = useSelector((state:RootState)=>state?.authentication?.user); + const name = `${user?.first_name?.charAt(0)}${user?.last_name?.charAt(0)}`.toUpperCase() ?? ''; + const navigate = useNavigate(); + // Function for Logout + const handleLogout = () => { + if (clearLocalStorage()) { + navigate('/', { replace: true }); + } + }; + return ( +
+
+
+
{name}
+
+
+
{user?.first_name} {user?.last_name}
+
{user?.email}
+
+
+ {LOG_OUT} + Log out +
+
+ ); +}; + +export default ProfileCard; From 4d7423dc676dbd5fd71b9c0dabf84dadf5075a99 Mon Sep 17 00:00:00 2001 From: Rohit Kini Date: Tue, 2 Jul 2024 18:34:19 +0530 Subject: [PATCH 2/2] added profile card --- ui/src/components/MainHeader/index.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/ui/src/components/MainHeader/index.tsx b/ui/src/components/MainHeader/index.tsx index 160db5d0..568bdd8a 100644 --- a/ui/src/components/MainHeader/index.tsx +++ b/ui/src/components/MainHeader/index.tsx @@ -1,7 +1,7 @@ // Libraries import { useEffect, useState } from 'react'; import { useNavigate, useLocation, Link } from 'react-router-dom'; -import { Dropdown, Tooltip , Accordion} from '@contentstack/venus-components'; +import { Dropdown, Tooltip} from '@contentstack/venus-components'; import { useDispatch, useSelector } from 'react-redux'; // Service @@ -130,7 +130,6 @@ const MainHeader = () => { , } @@ -140,10 +139,6 @@ const MainHeader = () => { >
{name}
 - {/* -
{name}
-

HIIIIIIIIII

- */}
}