From 7233ea145b91dc416f4f2c465bf196c46fcd6c20 Mon Sep 17 00:00:00 2001 From: Wes Date: Wed, 13 Sep 2023 17:48:10 -0700 Subject: [PATCH] feat: Add material UI and theme --- console/client/package-lock.json | 307 ++++++++++++------ console/client/package.json | 10 +- .../src/features/modules/ModulesPage.tsx | 14 +- console/client/src/providers/AppProviders.tsx | 35 +- console/client/src/theme/colors.js | 70 ++++ console/client/src/theme/create-components.js | 295 +++++++++++++++++ console/client/src/theme/create-palette.js | 33 ++ console/client/src/theme/create-shadows.js | 29 ++ console/client/src/theme/create-typography.js | 76 +++++ console/client/src/theme/index.js | 31 ++ console/client/tsconfig.json | 10 +- 11 files changed, 784 insertions(+), 126 deletions(-) create mode 100644 console/client/src/theme/colors.js create mode 100644 console/client/src/theme/create-components.js create mode 100644 console/client/src/theme/create-palette.js create mode 100644 console/client/src/theme/create-shadows.js create mode 100644 console/client/src/theme/create-typography.js create mode 100644 console/client/src/theme/index.js diff --git a/console/client/package-lock.json b/console/client/package-lock.json index dd3e7c311c..c649727526 100644 --- a/console/client/package-lock.json +++ b/console/client/package-lock.json @@ -11,13 +11,17 @@ "@bufbuild/connect": "0.12.0", "@bufbuild/connect-web": "0.12.0", "@bufbuild/protobuf": "1.3.0", + "@emotion/cache": "^11.11.0", "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@headlessui/react": "1.7.16", "@heroicons/react": "2.0.18", "@monaco-editor/react": "4.5.2", "@mui/icons-material": "^5.14.8", - "@tailwindcss/forms": "^0.5.5", + "@mui/lab": "^5.0.0-alpha.144", + "@mui/material": "^5.14.9", + "@mui/x-date-pickers": "^6.13.0", + "@tailwindcss/forms": "^0.5.6", "@types/react-syntax-highlighter": "^15.5.7", "json-schema": "0.4.0", "json-schema-faker": "0.5.0-rcv.46", @@ -25,7 +29,8 @@ "react-dom": "18.2.0", "react-router-dom": "6.15.0", "react-syntax-highlighter": "^15.5.0", - "reactflow": "11.8.2" + "reactflow": "11.8.2", + "tailwindcss": "^3.3.3" }, "devDependencies": { "@bufbuild/buf": "1.26.1", @@ -59,7 +64,6 @@ "prettier": "3.0.2", "process": "^0.11.10", "start-server-and-test": "2.0.0", - "tailwindcss": "3.3.3", "typed-css-modules": "0.7.2", "typescript": "5.1.6" } @@ -676,9 +680,9 @@ } }, "node_modules/@babel/runtime": { - "version": "7.22.11", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.11.tgz", - "integrity": "sha512-ee7jVNlWN09+KftVOu9n7S8gQzD/Z6hN/I8VBRXW4P1+Xe7kJGXMwu8vds4aGIMHZnNbdpSWCfZZtinytpcAvA==", + "version": "7.22.15", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.15.tgz", + "integrity": "sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA==", "dependencies": { "regenerator-runtime": "^0.14.0" }, @@ -1173,16 +1177,14 @@ "version": "1.4.1", "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.4.1.tgz", "integrity": "sha512-jk3WqquEJRlcyu7997NtR5PibI+y5bi+LS3hPmguVClypenMsCY3CBa3LAQnozRCtCrYWSEtAdiskpamuJRFOQ==", - "peer": true, "dependencies": { "@floating-ui/utils": "^0.1.1" } }, "node_modules/@floating-ui/dom": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.1.tgz", - "integrity": "sha512-KwvVcPSXg6mQygvA1TjbN/gh///36kKtllIF8SUm0qpFj8+rvYrpvlYdL1JoA71SHpDqgSSdGOSoQ0Mp3uY5aw==", - "peer": true, + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.2.tgz", + "integrity": "sha512-6ArmenS6qJEWmwzczWyhvrXRdI/rI78poBcW0h/456+onlabit+2G+QxHx5xTOX60NBJQXjsCLFbW2CmsXpUog==", "dependencies": { "@floating-ui/core": "^1.4.1", "@floating-ui/utils": "^0.1.1" @@ -1192,7 +1194,6 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.2.tgz", "integrity": "sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==", - "peer": true, "dependencies": { "@floating-ui/dom": "^1.5.1" }, @@ -1202,10 +1203,9 @@ } }, "node_modules/@floating-ui/utils": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.1.tgz", - "integrity": "sha512-m0G6wlnhm/AX0H12IOWtK8gASEMffnX08RtKkCgTdHb9JpHKGloI7icFfLg9ZmQeavcvR0PKmzxClyuFPSjKWw==", - "peer": true + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.2.tgz", + "integrity": "sha512-ou3elfqG/hZsbmF4bxeJhPHIf3G2pm0ujc39hYEZrfVqt7Vk/Zji6CXc3W0pmYM8BW1g40U+akTl9DKZhFhInQ==" }, "node_modules/@hapi/hoek": { "version": "9.3.0", @@ -1992,20 +1992,17 @@ ] }, "node_modules/@mui/base": { - "version": "5.0.0-beta.14", - "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.14.tgz", - "integrity": "sha512-Je/9JzzYObsuLCIClgE8XvXNFb55IEz8n2NtStUfASfNiVrwiR8t6VVFFuhofehkyTIN34tq1qbBaOjCnOovBw==", - "peer": true, + "version": "5.0.0-beta.15", + "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.15.tgz", + "integrity": "sha512-Xtom3YSdi0iwYPtyVRFUEGoRwi6IHWixPwifDKaK+4PkEPtUWMU5YOIJfTsmC59ri+dFvA3oBNSiTPUGGrklZw==", "dependencies": { - "@babel/runtime": "^7.22.10", - "@emotion/is-prop-valid": "^1.2.1", - "@floating-ui/react-dom": "^2.0.1", + "@babel/runtime": "^7.22.15", + "@floating-ui/react-dom": "^2.0.2", "@mui/types": "^7.2.4", - "@mui/utils": "^5.14.8", + "@mui/utils": "^5.14.9", "@popperjs/core": "^2.11.8", "clsx": "^2.0.0", - "prop-types": "^15.8.1", - "react-is": "^18.2.0" + "prop-types": "^15.8.1" }, "engines": { "node": ">=12.0.0" @@ -2025,17 +2022,10 @@ } } }, - "node_modules/@mui/base/node_modules/react-is": { - "version": "18.2.0", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", - "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==", - "peer": true - }, "node_modules/@mui/core-downloads-tracker": { - "version": "5.14.8", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.8.tgz", - "integrity": "sha512-8V7ZOC/lKkM03TRHqaThQFIq6bWPnj7L/ZWPh0ymldYFFyh8XdF0ywTgafsofDNYT4StlNknbaTjVHBma3SNjQ==", - "peer": true, + "version": "5.14.9", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.9.tgz", + "integrity": "sha512-JAU/R5hM3l2zP1Q4KnioDRhq5V3vZ4mmjEZ+TwARDb2xFhg3p59McacQuzkSu0sUHJnH9aJos36+hU5sPQBcFQ==", "funding": { "type": "opencollective", "url": "https://opencollective.com/mui" @@ -2066,18 +2056,58 @@ } } }, - "node_modules/@mui/material": { - "version": "5.14.8", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.8.tgz", - "integrity": "sha512-fqvDGGF1pXwOOL/f0Gw+KHo/67hasRpf2ApTIJkbuONOk9AUb2jnYMEqCWmL2sUcbbE3ShMbHl8N7HPSsRv1/A==", - "peer": true, + "node_modules/@mui/lab": { + "version": "5.0.0-alpha.144", + "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.144.tgz", + "integrity": "sha512-CS/mBxfX9eSsrvatYBNphYCSCM4tIAIb4jZ3LiX1vSZ32DjRlNi+2U56+ObnBaVTjMMYdegMsT38uxYHSVXszA==", "dependencies": { - "@babel/runtime": "^7.22.10", - "@mui/base": "5.0.0-beta.14", - "@mui/core-downloads-tracker": "^5.14.8", - "@mui/system": "^5.14.8", + "@babel/runtime": "^7.22.15", + "@mui/base": "5.0.0-beta.15", + "@mui/system": "^5.14.9", "@mui/types": "^7.2.4", - "@mui/utils": "^5.14.8", + "@mui/utils": "^5.14.9", + "@mui/x-tree-view": "6.0.0-alpha.1", + "clsx": "^2.0.0", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@emotion/react": "^11.5.0", + "@emotion/styled": "^11.3.0", + "@mui/material": "^5.0.0", + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/material": { + "version": "5.14.9", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.9.tgz", + "integrity": "sha512-pbBy5kc5iUGXPxgbb+t+yEPvLK5nE3bPUb8WbAafJ8iZ40ZGui0xC4xiiIyzbVexzsLmyN7MaSo4LkxLmPKqUQ==", + "dependencies": { + "@babel/runtime": "^7.22.15", + "@mui/base": "5.0.0-beta.15", + "@mui/core-downloads-tracker": "^5.14.9", + "@mui/system": "^5.14.9", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.14.9", "@types/react-transition-group": "^4.4.6", "clsx": "^2.0.0", "csstype": "^3.1.2", @@ -2114,17 +2144,15 @@ "node_modules/@mui/material/node_modules/react-is": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", - "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==", - "peer": true + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" }, "node_modules/@mui/private-theming": { - "version": "5.14.8", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.14.8.tgz", - "integrity": "sha512-iBzpcl3Mh92XaYpYPdgzzRxNGkjpoDz8rf8/q5m+EBPowFEHV+CCS9hC0Q2pOKLW3VFFikA7w/GHt7n++40JGQ==", - "peer": true, + "version": "5.14.9", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.14.9.tgz", + "integrity": "sha512-0PzoUFqFXTXiNchhR7K4b7kZunasPOjx6Qf7AagCmfZDNASHedA0x6evHVhnST918x/AHY9xykYNKfB0Z4xMBg==", "dependencies": { - "@babel/runtime": "^7.22.10", - "@mui/utils": "^5.14.8", + "@babel/runtime": "^7.22.15", + "@mui/utils": "^5.14.9", "prop-types": "^15.8.1" }, "engines": { @@ -2145,15 +2173,15 @@ } }, "node_modules/@mui/styled-engine": { - "version": "5.14.8", - "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.14.8.tgz", - "integrity": "sha512-LGwOav/Y40PZWZ2yDk4beUoRlc57Vg+Vpxi9V9BBtT2ESAucCgFobkt+T8eVLMWF9huUou5pwKgLSU5pF90hBg==", - "peer": true, + "version": "5.14.9", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.14.9.tgz", + "integrity": "sha512-LEQxLrW9oWvea33pge08+oyNeTz704jb6Nhe26xEJKojXWd34Rr327Zzx3dmo70AcS4h0b99vQjEpUzm6ASqUw==", "dependencies": { - "@babel/runtime": "^7.22.10", + "@babel/runtime": "^7.22.15", "@emotion/cache": "^11.11.0", "csstype": "^3.1.2", - "prop-types": "^15.8.1" + "prop-types": "^15.8.1", + "react": "^18.2.0" }, "engines": { "node": ">=12.0.0" @@ -2177,16 +2205,15 @@ } }, "node_modules/@mui/system": { - "version": "5.14.8", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.8.tgz", - "integrity": "sha512-Dxnasv7Pj5hYe4ZZFKJZu4ufKm6cxpitWt3A+qMPps22YhqyeEqgDBq/HsAB3GOjqDP40fTAvQvS/Hguf4SJuw==", - "peer": true, + "version": "5.14.9", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.9.tgz", + "integrity": "sha512-Z00Wj590QXk5+SIxmxayBo7SWrao+y433LKGChneJxO4QcT/caSCeEWtyeoLs1Q8ys0zOzl2kkKee6n8TaKzhQ==", "dependencies": { - "@babel/runtime": "^7.22.10", - "@mui/private-theming": "^5.14.8", - "@mui/styled-engine": "^5.14.8", + "@babel/runtime": "^7.22.15", + "@mui/private-theming": "^5.14.9", + "@mui/styled-engine": "^5.14.9", "@mui/types": "^7.2.4", - "@mui/utils": "^5.14.8", + "@mui/utils": "^5.14.9", "clsx": "^2.0.0", "csstype": "^3.1.2", "prop-types": "^15.8.1" @@ -2220,7 +2247,6 @@ "version": "7.2.4", "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.4.tgz", "integrity": "sha512-LBcwa8rN84bKF+f5sDyku42w1NTxaPgPyYKODsh01U1fVstTClbUoSA96oyRBnSNyEiAVjKm6Gwx9vjR+xyqHA==", - "peer": true, "peerDependencies": { "@types/react": "*" }, @@ -2231,14 +2257,11 @@ } }, "node_modules/@mui/utils": { - "version": "5.14.8", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.8.tgz", - "integrity": "sha512-1Ls2FfyY2yVSz9NEqedh3J8JAbbZAnUWkOWLE2f4/Hc4T5UWHMfzBLLrCqExfqyfyU+uXYJPGeNIsky6f8Gh5Q==", - "peer": true, + "version": "5.14.9", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.9.tgz", + "integrity": "sha512-9ysB5e+RwS7ofn0n3nwAg1/3c81vBTmSvauD3EuK9LmqMzhmF//BFDaC44U4yITvB/0m1kWyDqg924Ll3VHCcg==", "dependencies": { - "@babel/runtime": "^7.22.10", - "@types/prop-types": "^15.7.5", - "@types/react-is": "^18.2.1", + "@babel/runtime": "^7.22.15", "prop-types": "^15.8.1", "react-is": "^18.2.0" }, @@ -2250,14 +2273,114 @@ "url": "https://opencollective.com/mui" }, "peerDependencies": { - "react": "^17.0.0 || ^18.0.0" + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } } }, "node_modules/@mui/utils/node_modules/react-is": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", - "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==", - "peer": true + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + }, + "node_modules/@mui/x-date-pickers": { + "version": "6.13.0", + "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-6.13.0.tgz", + "integrity": "sha512-mNfWXrS9PMLI+lgeEw6R08g5j1Yewat+A7MiI2QuwZteX3b83JQnm73RCGrSFTpvOP1/v6yIBPbxPZin5eu6GA==", + "dependencies": { + "@babel/runtime": "^7.22.15", + "@mui/base": "^5.0.0-alpha.87", + "@mui/utils": "^5.14.7", + "@types/react-transition-group": "^4.4.6", + "clsx": "^2.0.0", + "prop-types": "^15.8.1", + "react-transition-group": "^4.4.5" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@emotion/react": "^11.9.0", + "@emotion/styled": "^11.8.1", + "@mui/material": "^5.8.6", + "@mui/system": "^5.8.0", + "date-fns": "^2.25.0", + "date-fns-jalali": "^2.13.0-0", + "dayjs": "^1.10.7", + "luxon": "^3.0.2", + "moment": "^2.29.4", + "moment-hijri": "^2.1.2", + "moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "date-fns": { + "optional": true + }, + "date-fns-jalali": { + "optional": true + }, + "dayjs": { + "optional": true + }, + "luxon": { + "optional": true + }, + "moment": { + "optional": true + }, + "moment-hijri": { + "optional": true + }, + "moment-jalaali": { + "optional": true + } + } + }, + "node_modules/@mui/x-tree-view": { + "version": "6.0.0-alpha.1", + "resolved": "https://registry.npmjs.org/@mui/x-tree-view/-/x-tree-view-6.0.0-alpha.1.tgz", + "integrity": "sha512-JUG3HmBrmGEALbCFg1b+i7h726e1dWYZs4db3syO1j+Q++E3nbvE4Lehp5yGTFm+8esH0Tny50tuJaa4WX6VSA==", + "dependencies": { + "@babel/runtime": "^7.22.6", + "@mui/utils": "^5.14.3", + "@types/react-transition-group": "^4.4.6", + "clsx": "^2.0.0", + "prop-types": "^15.8.1", + "react-transition-group": "^4.4.5" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@emotion/react": "^11.9.0", + "@emotion/styled": "^11.8.1", + "@mui/base": "^5.0.0-alpha.87", + "@mui/material": "^5.8.6", + "@mui/system": "^5.8.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + } }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", @@ -3806,7 +3929,6 @@ "version": "2.11.8", "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", - "peer": true, "funding": { "type": "opencollective", "url": "https://opencollective.com/popperjs" @@ -4181,9 +4303,9 @@ } }, "node_modules/@tailwindcss/forms": { - "version": "0.5.5", - "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.5.tgz", - "integrity": "sha512-03sXK1DcPt44GZ0Yg6AcAfQln89IKdbE79g2OwoKqBm1ukaadLO2AH3EiB3mXHeQnxa3tzm7eE0x7INXSjbuug==", + "version": "0.5.6", + "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.6.tgz", + "integrity": "sha512-Fw+2BJ0tmAwK/w01tEFL5TiaJBX1NLT1/YbWgvm7ws3Qcn11kiXxzNTEQDMs5V3mQemhB56l3u0i9dwdzSQldA==", "dependencies": { "mini-svg-data-uri": "^1.2.3" }, @@ -4714,15 +4836,6 @@ "@types/react": "*" } }, - "node_modules/@types/react-is": { - "version": "18.2.1", - "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-18.2.1.tgz", - "integrity": "sha512-wyUkmaaSZEzFZivD8F2ftSyAfk6L+DfFliVj/mYdOXbVjRcS87fQJLTnhk6dRZPuJjI+9g6RZJO4PNCngUrmyw==", - "peer": true, - "dependencies": { - "@types/react": "*" - } - }, "node_modules/@types/react-syntax-highlighter": { "version": "15.5.7", "resolved": "https://registry.npmjs.org/@types/react-syntax-highlighter/-/react-syntax-highlighter-15.5.7.tgz", @@ -4735,7 +4848,6 @@ "version": "4.4.6", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz", "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==", - "peer": true, "dependencies": { "@types/react": "*" } @@ -6061,7 +6173,6 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz", "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==", - "peer": true, "engines": { "node": ">=6" } @@ -6798,7 +6909,6 @@ "version": "5.2.1", "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", - "peer": true, "dependencies": { "@babel/runtime": "^7.8.7", "csstype": "^3.0.2" @@ -9778,9 +9888,9 @@ } }, "node_modules/jiti": { - "version": "1.19.3", - "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.19.3.tgz", - "integrity": "sha512-5eEbBDQT/jF1xg6l36P+mWGGoH9Spuy0PCdSr2dtWRDGC6ph/w9ZCL4lmESW8f8F7MwT3XKescfP0wnZWAKL9w==", + "version": "1.20.0", + "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.20.0.tgz", + "integrity": "sha512-3TV69ZbrvV6U5DfQimop50jE9Dl6J8O1ja1dvBbMba/sZ3YBEQqJ2VZRoQPVnhlzjNtU1vaXRZVrVjU4qtm8yA==", "bin": { "jiti": "bin/jiti.js" } @@ -12515,7 +12625,6 @@ "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", - "peer": true, "dependencies": { "@babel/runtime": "^7.5.5", "dom-helpers": "^5.0.1", diff --git a/console/client/package.json b/console/client/package.json index 2dcd3d5feb..96bb4128eb 100644 --- a/console/client/package.json +++ b/console/client/package.json @@ -30,13 +30,17 @@ "@bufbuild/connect": "0.12.0", "@bufbuild/connect-web": "0.12.0", "@bufbuild/protobuf": "1.3.0", + "@emotion/cache": "^11.11.0", "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@headlessui/react": "1.7.16", "@heroicons/react": "2.0.18", "@monaco-editor/react": "4.5.2", "@mui/icons-material": "^5.14.8", - "@tailwindcss/forms": "^0.5.5", + "@mui/lab": "^5.0.0-alpha.144", + "@mui/material": "^5.14.9", + "@mui/x-date-pickers": "^6.13.0", + "@tailwindcss/forms": "^0.5.6", "@types/react-syntax-highlighter": "^15.5.7", "json-schema": "0.4.0", "json-schema-faker": "0.5.0-rcv.46", @@ -44,7 +48,8 @@ "react-dom": "18.2.0", "react-router-dom": "6.15.0", "react-syntax-highlighter": "^15.5.0", - "reactflow": "11.8.2" + "reactflow": "11.8.2", + "tailwindcss": "^3.3.3" }, "devDependencies": { "@bufbuild/buf": "1.26.1", @@ -78,7 +83,6 @@ "prettier": "3.0.2", "process": "^0.11.10", "start-server-and-test": "2.0.0", - "tailwindcss": "3.3.3", "typed-css-modules": "0.7.2", "typescript": "5.1.6" } diff --git a/console/client/src/features/modules/ModulesPage.tsx b/console/client/src/features/modules/ModulesPage.tsx index e6353c6543..4c4e07d005 100644 --- a/console/client/src/features/modules/ModulesPage.tsx +++ b/console/client/src/features/modules/ModulesPage.tsx @@ -1,14 +1,14 @@ -import { ViewModuleRounded } from '@mui/icons-material' -import { PageHeader } from '../../components/PageHeader' -import { ModulesList } from './ModulesList' +import { Button, Container, Stack } from '@mui/material' export const ModulesPage = () => { return ( <> -
- } title='Modules' /> - -
+ + + + + + ) } diff --git a/console/client/src/providers/AppProviders.tsx b/console/client/src/providers/AppProviders.tsx index e2ffcbe00c..87909a6db0 100644 --- a/console/client/src/providers/AppProviders.tsx +++ b/console/client/src/providers/AppProviders.tsx @@ -1,4 +1,6 @@ +import { ThemeProvider } from '@mui/material' import { App } from '../App' +import { createTheme } from '../theme' import { DarkModeProvider } from './dark-mode-provider' import { ModulesProvider } from './modules-provider' import { NotificationsProvider } from './notifications-provider' @@ -8,21 +10,24 @@ import { SelectedTimelineEntryProvider } from './selected-timeline-entry-provide import { SidePanelProvider } from './side-panel-provider' export const AppProviders = () => { + const theme = createTheme() return ( - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + ) } diff --git a/console/client/src/theme/colors.js b/console/client/src/theme/colors.js new file mode 100644 index 0000000000..7915b5a0d5 --- /dev/null +++ b/console/client/src/theme/colors.js @@ -0,0 +1,70 @@ +import { alpha } from '@mui/material/styles'; + +const withAlphas = (color) => { + return { + ...color, + alpha4: alpha(color.main, 0.04), + alpha8: alpha(color.main, 0.08), + alpha12: alpha(color.main, 0.12), + alpha30: alpha(color.main, 0.30), + alpha50: alpha(color.main, 0.50) + }; +}; + +export const neutral = { + 50: '#F8F9FA', + 100: '#F3F4F6', + 200: '#E5E7EB', + 300: '#D2D6DB', + 400: '#9DA4AE', + 500: '#6C737F', + 600: '#4D5761', + 700: '#2F3746', + 800: '#1C2536', + 900: '#111927' +}; + +export const indigo = withAlphas({ + lightest: '#F5F7FF', + light: '#EBEEFE', + main: '#6366F1', + dark: '#4338CA', + darkest: '#312E81', + contrastText: '#FFFFFF' +}); + +export const success = withAlphas({ + lightest: '#F0FDF9', + light: '#3FC79A', + main: '#10B981', + dark: '#0B815A', + darkest: '#134E48', + contrastText: '#FFFFFF' +}); + +export const info = withAlphas({ + lightest: '#ECFDFF', + light: '#CFF9FE', + main: '#06AED4', + dark: '#0E7090', + darkest: '#164C63', + contrastText: '#FFFFFF' +}); + +export const warning = withAlphas({ + lightest: '#FFFAEB', + light: '#FEF0C7', + main: '#F79009', + dark: '#B54708', + darkest: '#7A2E0E', + contrastText: '#FFFFFF' +}); + +export const error = withAlphas({ + lightest: '#FEF3F2', + light: '#FEE4E2', + main: '#F04438', + dark: '#B42318', + darkest: '#7A271A', + contrastText: '#FFFFFF' +}); diff --git a/console/client/src/theme/create-components.js b/console/client/src/theme/create-components.js new file mode 100644 index 0000000000..bd0a6def15 --- /dev/null +++ b/console/client/src/theme/create-components.js @@ -0,0 +1,295 @@ +import { + createTheme, + filledInputClasses, + inputLabelClasses, + outlinedInputClasses, + paperClasses, + tableCellClasses, +} from '@mui/material' + +// Used only to create transitions +const muiTheme = createTheme() + +export const createComponents = (config) => { + const { palette } = config + + return { + MuiAvatar: { + styleOverrides: { + root: { + fontSize: 14, + fontWeight: 600, + letterSpacing: 0, + }, + }, + }, + MuiButton: { + styleOverrides: { + root: { + borderRadius: '12px', + textTransform: 'none', + }, + sizeSmall: { + padding: '6px 16px', + }, + sizeMedium: { + padding: '8px 20px', + }, + sizeLarge: { + padding: '11px 24px', + }, + textSizeSmall: { + padding: '7px 12px', + }, + textSizeMedium: { + padding: '9px 16px', + }, + textSizeLarge: { + padding: '12px 16px', + }, + }, + }, + MuiCard: { + styleOverrides: { + root: { + borderRadius: 20, + [`&.${paperClasses.elevation1}`]: { + boxShadow: '0px 5px 22px rgba(0, 0, 0, 0.04), 0px 0px 0px 0.5px rgba(0, 0, 0, 0.03)', + }, + }, + }, + }, + MuiCardContent: { + styleOverrides: { + root: { + padding: '32px 24px', + '&:last-child': { + paddingBottom: '32px', + }, + }, + }, + }, + MuiCardHeader: { + defaultProps: { + titleTypographyProps: { + variant: 'h6', + }, + subheaderTypographyProps: { + variant: 'body2', + }, + }, + styleOverrides: { + root: { + padding: '32px 24px 16px', + }, + }, + }, + MuiCssBaseline: { + styleOverrides: { + '*': { + boxSizing: 'border-box', + }, + html: { + MozOsxFontSmoothing: 'grayscale', + WebkitFontSmoothing: 'antialiased', + display: 'flex', + flexDirection: 'column', + minHeight: '100%', + width: '100%', + }, + body: { + display: 'flex', + flex: '1 1 auto', + flexDirection: 'column', + minHeight: '100%', + width: '100%', + }, + '#__next': { + display: 'flex', + flex: '1 1 auto', + flexDirection: 'column', + height: '100%', + width: '100%', + }, + '#nprogress': { + pointerEvents: 'none', + }, + '#nprogress .bar': { + backgroundColor: palette.primary.main, + height: 3, + left: 0, + position: 'fixed', + top: 0, + width: '100%', + zIndex: 2000, + }, + }, + }, + MuiInputBase: { + styleOverrides: { + input: { + '&::placeholder': { + opacity: 1, + }, + }, + }, + }, + MuiInput: { + styleOverrides: { + input: { + fontSize: 14, + fontWeight: 500, + lineHeight: '24px', + '&::placeholder': { + color: palette.text.secondary, + }, + }, + }, + }, + MuiFilledInput: { + styleOverrides: { + root: { + backgroundColor: 'transparent', + borderRadius: 8, + borderStyle: 'solid', + borderWidth: 1, + overflow: 'hidden', + borderColor: palette.neutral[200], + transition: muiTheme.transitions.create(['border-color', 'box-shadow']), + '&:hover': { + backgroundColor: palette.action.hover, + }, + '&:before': { + display: 'none', + }, + '&:after': { + display: 'none', + }, + [`&.${filledInputClasses.disabled}`]: { + backgroundColor: 'transparent', + }, + [`&.${filledInputClasses.focused}`]: { + backgroundColor: 'transparent', + borderColor: palette.primary.main, + boxShadow: `${palette.primary.main} 0 0 0 2px`, + }, + [`&.${filledInputClasses.error}`]: { + borderColor: palette.error.main, + boxShadow: `${palette.error.main} 0 0 0 2px`, + }, + }, + input: { + fontSize: 14, + fontWeight: 500, + lineHeight: '24px', + }, + }, + }, + MuiOutlinedInput: { + styleOverrides: { + root: { + '&:hover': { + backgroundColor: palette.action.hover, + [`& .${outlinedInputClasses.notchedOutline}`]: { + borderColor: palette.neutral[200], + }, + }, + [`&.${outlinedInputClasses.focused}`]: { + backgroundColor: 'transparent', + [`& .${outlinedInputClasses.notchedOutline}`]: { + borderColor: palette.primary.main, + boxShadow: `${palette.primary.main} 0 0 0 2px`, + }, + }, + [`&.${filledInputClasses.error}`]: { + [`& .${outlinedInputClasses.notchedOutline}`]: { + borderColor: palette.error.main, + boxShadow: `${palette.error.main} 0 0 0 2px`, + }, + }, + }, + input: { + fontSize: 14, + fontWeight: 500, + lineHeight: '24px', + }, + notchedOutline: { + borderColor: palette.neutral[200], + transition: muiTheme.transitions.create(['border-color', 'box-shadow']), + }, + }, + }, + MuiFormLabel: { + styleOverrides: { + root: { + fontSize: 14, + fontWeight: 500, + [`&.${inputLabelClasses.filled}`]: { + transform: 'translate(12px, 18px) scale(1)', + }, + [`&.${inputLabelClasses.shrink}`]: { + [`&.${inputLabelClasses.standard}`]: { + transform: 'translate(0, -1.5px) scale(0.85)', + }, + [`&.${inputLabelClasses.filled}`]: { + transform: 'translate(12px, 6px) scale(0.85)', + }, + [`&.${inputLabelClasses.outlined}`]: { + transform: 'translate(14px, -9px) scale(0.85)', + }, + }, + }, + }, + }, + MuiTab: { + styleOverrides: { + root: { + fontSize: 14, + fontWeight: 500, + lineHeight: 1.71, + minWidth: 'auto', + paddingLeft: 0, + paddingRight: 0, + textTransform: 'none', + '& + &': { + marginLeft: 24, + }, + }, + }, + }, + MuiTableCell: { + styleOverrides: { + root: { + borderBottomColor: palette.divider, + padding: '15px 16px', + }, + }, + }, + MuiTableHead: { + styleOverrides: { + root: { + borderBottom: 'none', + [`& .${tableCellClasses.root}`]: { + borderBottom: 'none', + backgroundColor: palette.neutral[50], + color: palette.neutral[700], + fontSize: 12, + fontWeight: 600, + lineHeight: 1, + letterSpacing: 0.5, + textTransform: 'uppercase', + }, + [`& .${tableCellClasses.paddingCheckbox}`]: { + paddingTop: 4, + paddingBottom: 4, + }, + }, + }, + }, + MuiTextField: { + defaultProps: { + variant: 'filled', + }, + }, + } +} diff --git a/console/client/src/theme/create-palette.js b/console/client/src/theme/create-palette.js new file mode 100644 index 0000000000..09ad1f54a8 --- /dev/null +++ b/console/client/src/theme/create-palette.js @@ -0,0 +1,33 @@ +import { common } from '@mui/material/colors' +import { alpha } from '@mui/material/styles' +import { error, indigo, info, neutral, success, warning } from './colors' + +export const createPalette = () => { + return { + action: { + active: neutral[500], + disabled: alpha(neutral[900], 0.38), + disabledBackground: alpha(neutral[900], 0.12), + focus: alpha(neutral[900], 0.16), + hover: alpha(neutral[900], 0.04), + selected: alpha(neutral[900], 0.12), + }, + background: { + default: common.white, + paper: common.white, + }, + divider: '#F2F4F7', + error, + info, + mode: 'light', + neutral, + primary: indigo, + success, + text: { + primary: neutral[900], + secondary: neutral[500], + disabled: alpha(neutral[900], 0.38), + }, + warning, + } +} diff --git a/console/client/src/theme/create-shadows.js b/console/client/src/theme/create-shadows.js new file mode 100644 index 0000000000..22d70a5dab --- /dev/null +++ b/console/client/src/theme/create-shadows.js @@ -0,0 +1,29 @@ +export const createShadows = () => { + return [ + 'none', + '0px 1px 2px rgba(0, 0, 0, 0.08)', + '0px 1px 5px rgba(0, 0, 0, 0.08)', + '0px 1px 8px rgba(0, 0, 0, 0.08)', + '0px 1px 10px rgba(0, 0, 0, 0.08)', + '0px 1px 14px rgba(0, 0, 0, 0.08)', + '0px 1px 18px rgba(0, 0, 0, 0.08)', + '0px 2px 16px rgba(0, 0, 0, 0.08)', + '0px 3px 14px rgba(0, 0, 0, 0.08)', + '0px 3px 16px rgba(0, 0, 0, 0.08)', + '0px 4px 18px rgba(0, 0, 0, 0.08)', + '0px 4px 20px rgba(0, 0, 0, 0.08)', + '0px 5px 22px rgba(0, 0, 0, 0.08)', + '0px 5px 24px rgba(0, 0, 0, 0.08)', + '0px 5px 26px rgba(0, 0, 0, 0.08)', + '0px 6px 28px rgba(0, 0, 0, 0.08)', + '0px 6px 30px rgba(0, 0, 0, 0.08)', + '0px 6px 32px rgba(0, 0, 0, 0.08)', + '0px 7px 34px rgba(0, 0, 0, 0.08)', + '0px 7px 36px rgba(0, 0, 0, 0.08)', + '0px 8px 38px rgba(0, 0, 0, 0.08)', + '0px 8px 40px rgba(0, 0, 0, 0.08)', + '0px 8px 42px rgba(0, 0, 0, 0.08)', + '0px 9px 44px rgba(0, 0, 0, 0.08)', + '0px 9px 46px rgba(0, 0, 0, 0.08)' + ]; +}; diff --git a/console/client/src/theme/create-typography.js b/console/client/src/theme/create-typography.js new file mode 100644 index 0000000000..1bc601ae67 --- /dev/null +++ b/console/client/src/theme/create-typography.js @@ -0,0 +1,76 @@ +export const createTypography = () => { + return { + fontFamily: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"', + body1: { + fontSize: '1rem', + fontWeight: 400, + lineHeight: 1.5 + }, + body2: { + fontSize: '0.875rem', + fontWeight: 400, + lineHeight: 1.57 + }, + button: { + fontWeight: 600 + }, + caption: { + fontSize: '0.75rem', + fontWeight: 500, + lineHeight: 1.66 + }, + subtitle1: { + fontSize: '1rem', + fontWeight: 500, + lineHeight: 1.57 + }, + subtitle2: { + fontSize: '0.875rem', + fontWeight: 500, + lineHeight: 1.57 + }, + overline: { + fontSize: '0.75rem', + fontWeight: 600, + letterSpacing: '0.5px', + lineHeight: 2.5, + textTransform: 'uppercase' + }, + h1: { + fontFamily: '\'Plus Jakarta Sans\', sans-serif', + fontWeight: 700, + fontSize: '3.5rem', + lineHeight: 1.2 + }, + h2: { + fontFamily: '\'Plus Jakarta Sans\', sans-serif', + fontWeight: 700, + fontSize: '3rem', + lineHeight: 1.2 + }, + h3: { + fontFamily: '\'Plus Jakarta Sans\', sans-serif', + fontWeight: 700, + fontSize: '2.25rem', + lineHeight: 1.2 + }, + h4: { + fontFamily: '\'Plus Jakarta Sans\', sans-serif', + fontWeight: 700, + fontSize: '2rem', + lineHeight: 1.2 + }, + h5: { + fontFamily: '\'Plus Jakarta Sans\', sans-serif', + fontWeight: 700, + fontSize: '1.5rem', + lineHeight: 1.2 + }, + h6: { + fontFamily: '\'Plus Jakarta Sans\', sans-serif', + fontWeight: 700, + fontSize: '1.125rem', + lineHeight: 1.2 + } + }; +}; diff --git a/console/client/src/theme/index.js b/console/client/src/theme/index.js new file mode 100644 index 0000000000..3856460dc2 --- /dev/null +++ b/console/client/src/theme/index.js @@ -0,0 +1,31 @@ +import { createTheme as createMuiTheme } from '@mui/material' +import { createComponents } from './create-components' +import { createPalette } from './create-palette' +import { createShadows } from './create-shadows' +import { createTypography } from './create-typography' + +export const createTheme = () => { + const palette = createPalette() + const components = createComponents({ palette }) + const shadows = createShadows() + const typography = createTypography() + + return createMuiTheme({ + breakpoints: { + values: { + xs: 0, + sm: 600, + md: 900, + lg: 1200, + xl: 1440, + }, + }, + components, + palette, + shadows, + shape: { + borderRadius: 8, + }, + typography, + }) +} diff --git a/console/client/tsconfig.json b/console/client/tsconfig.json index 1d90f677e8..194460db0f 100644 --- a/console/client/tsconfig.json +++ b/console/client/tsconfig.json @@ -1,7 +1,11 @@ { "compilerOptions": { "target": "es6", - "lib": ["dom", "dom.iterable", "esnext"], + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, @@ -17,5 +21,7 @@ "noEmit": true, "jsx": "react-jsx" }, - "include": ["src/**/*"] + "include": [ + "src/**/*" + ] }