From 949c0101ad603a044f5d750c284d51f892040aeb Mon Sep 17 00:00:00 2001 From: Kayla Washburn Date: Fri, 29 Sep 2023 13:08:17 -0600 Subject: [PATCH 01/18] parent 4da1223a807e50dd9f307c61bcddd4315dd2ad73 author Kayla Washburn 1696014497 -0600 committer McKayla Washburn 1696014979 +0000 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit parent 4da1223a807e50dd9f307c61bcddd4315dd2ad73 author Kayla Washburn 1696014497 -0600 committer McKayla Washburn 1696014955 +0000 parent 4da1223a807e50dd9f307c61bcddd4315dd2ad73 author Kayla Washburn 1696014497 -0600 committer McKayla Washburn 1696014933 +0000 parent 4da1223a807e50dd9f307c61bcddd4315dd2ad73 author Kayla Washburn 1696014497 -0600 committer McKayla Washburn 1696014828 +0000 refactor: start using emotion for styling (#9909) get emotional apologize to the json gods `make gen` fix types this is killing me fancy `Theme` shenanigans >:( caught some mistakes do a couple more (to fix storybook) 🤬 fix linting --- .gitignore | 7 +- .prettierignore | 7 +- .vscode/settings.json | 9 +- Makefile | 6 +- site/.eslintignore | 5 +- site/.eslintrc.yaml | 1 + site/.prettierignore | 5 +- site/.storybook/preview.jsx | 20 +- site/jest.setup.ts | 2 +- site/package.json | 11 +- site/pnpm-lock.yaml | 254 +++++++++--------- site/src/@types/emotion.d.ts | 5 + site/src/App.tsx | 30 ++- site/src/components/Avatar/Avatar.tsx | 89 +++--- .../CopyableValue/CopyableValue.tsx | 21 +- .../components/Dashboard/DashboardLayout.tsx | 33 ++- .../Navbar/UserDropdown/UserDropdown.tsx | 42 ++- .../ServiceBanner/ServiceBannerView.tsx | 66 ++--- .../DeploySettingsLayout/Option.tsx | 175 ++++++------ .../DeploySettingsLayout/Sidebar.tsx | 111 ++++---- site/src/components/EmptyState/EmptyState.tsx | 77 +++--- site/src/components/PageHeader/PageHeader.tsx | 136 +++++----- .../TokensPage/TokensPage.tsx | 37 ++- .../WorkspaceParametersPage.tsx | 15 +- .../WorkspaceSchedulePage.tsx | 17 +- .../WorkspaceSettingsPageView.tsx | 15 +- .../pages/WorkspacesPage/WorkspacesTable.tsx | 40 ++- site/src/utils/colors.ts | 12 + site/tsconfig.json | 12 +- 29 files changed, 614 insertions(+), 646 deletions(-) create mode 100644 site/src/@types/emotion.d.ts diff --git a/.gitignore b/.gitignore index e63274bcad112..2ccd459b811b9 100644 --- a/.gitignore +++ b/.gitignore @@ -30,15 +30,14 @@ site/e2e/states/*.json site/e2e/.auth.json site/playwright-report/* site/.swc -site/dist/ # Make target for updating golden files (any dir). .gen-golden # Build -/build/ -/dist/ -site/out/ +build/ +dist/ +out/ # Bundle analysis site/stats/ diff --git a/.prettierignore b/.prettierignore index 46fbc9f142848..c7882767e85af 100644 --- a/.prettierignore +++ b/.prettierignore @@ -33,15 +33,14 @@ site/e2e/states/*.json site/e2e/.auth.json site/playwright-report/* site/.swc -site/dist/ # Make target for updating golden files (any dir). .gen-golden # Build -/build/ -/dist/ -site/out/ +build/ +dist/ +out/ # Bundle analysis site/stats/ diff --git a/.vscode/settings.json b/.vscode/settings.json index 679123c827d05..b187ed265fd71 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -186,9 +186,6 @@ ] }, "eslint.workingDirectories": ["./site"], - "files.exclude": { - "**/node_modules": true - }, "search.exclude": { "**.pb.go": true, "**/*.gen.json": true, @@ -198,7 +195,11 @@ "docs/api/*.md": true, "docs/templates/*.md": true, "LICENSE": true, - "scripts/metricsdocgen/metrics": true + "scripts/metricsdocgen/metrics": true, + "site/out/**": true, + "site/storybook-static/**": true, + "**.map": true, + "pnpm-lock.yaml": true }, // Ensure files always have a newline. "files.insertFinalNewline": true, diff --git a/Makefile b/Makefile index 67e506851d583..e6be965506ed4 100644 --- a/Makefile +++ b/Makefile @@ -107,9 +107,9 @@ endif clean: - rm -rf build site/out - mkdir -p build site/out/bin - git restore site/out + rm -rf build/ site/build/ site/out/ + mkdir -p build/ site/out/bin/ + git restore site/out/ .PHONY: clean build-slim: $(CODER_SLIM_BINARIES) diff --git a/site/.eslintignore b/site/.eslintignore index a50ff1e3e93e3..4909d9bf919d2 100644 --- a/site/.eslintignore +++ b/site/.eslintignore @@ -33,14 +33,13 @@ e2e/states/*.json e2e/.auth.json playwright-report/* .swc -dist/ # Make target for updating golden files (any dir). .gen-golden # Build -../build/ -../dist/ +build/ +dist/ out/ # Bundle analysis diff --git a/site/.eslintrc.yaml b/site/.eslintrc.yaml index f7eb30901c5a0..ac7c6936ff5a6 100644 --- a/site/.eslintrc.yaml +++ b/site/.eslintrc.yaml @@ -156,6 +156,7 @@ rules: # https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#eslint react/jsx-key: error react/jsx-uses-react: "off" + react/no-unknown-property: ["error", { ignore: ["css"] }] react/react-in-jsx-scope: "off" "unicorn/explicit-length-check": "error" # https://github.com/jsx-eslint/eslint-plugin-react/issues/2628#issuecomment-984160944 diff --git a/site/.prettierignore b/site/.prettierignore index a50ff1e3e93e3..4909d9bf919d2 100644 --- a/site/.prettierignore +++ b/site/.prettierignore @@ -33,14 +33,13 @@ e2e/states/*.json e2e/.auth.json playwright-report/* .swc -dist/ # Make target for updating golden files (any dir). .gen-golden # Build -../build/ -../dist/ +build/ +dist/ out/ # Bundle analysis diff --git a/site/.storybook/preview.jsx b/site/.storybook/preview.jsx index 97fd7e3d81ff9..6c8f9dd864130 100644 --- a/site/.storybook/preview.jsx +++ b/site/.storybook/preview.jsx @@ -1,18 +1,24 @@ import CssBaseline from "@mui/material/CssBaseline"; -import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles"; +import { + StyledEngineProvider, + ThemeProvider as MuiThemeProvider, +} from "@mui/material/styles"; +import { ThemeProvider as EmotionThemeProvider } from "@emotion/react"; import { withRouter } from "storybook-addon-react-router-v6"; import { HelmetProvider } from "react-helmet-async"; -import { dark } from "../src/theme"; -import "../src/theme/globalFonts"; +import { dark } from "theme"; +import "theme/globalFonts"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; export const decorators = [ (Story) => ( - - - - + + + + + + ), withRouter, diff --git a/site/jest.setup.ts b/site/jest.setup.ts index 2ba454272096e..76e4a51b5d9e3 100644 --- a/site/jest.setup.ts +++ b/site/jest.setup.ts @@ -1,7 +1,7 @@ import "@testing-library/jest-dom"; import { cleanup } from "@testing-library/react"; import crypto from "crypto"; -import { server } from "./src/testHelpers/server"; +import { server } from "testHelpers/server"; import "jest-location-mock"; import { TextEncoder, TextDecoder } from "util"; import { Blob } from "buffer"; diff --git a/site/package.json b/site/package.json index b86b4efea31bd..f3797abd8775b 100644 --- a/site/package.json +++ b/site/package.json @@ -33,6 +33,7 @@ "dependencies": { "@emoji-mart/data": "1.1.2", "@emoji-mart/react": "1.0.1", + "@emotion/css": "11.11.2", "@emotion/react": "11.11.1", "@emotion/styled": "11.11.0", "@fastly/performance-observer-polyfill": "2.0.0", @@ -45,11 +46,6 @@ "@mui/styles": "5.14.0", "@mui/system": "5.14.0", "@tanstack/react-query": "4.35.3", - "@types/color-convert": "2.0.0", - "@types/lodash": "4.14.196", - "@types/react-color": "3.0.6", - "@types/react-date-range": "1.4.4", - "@types/semver": "7.5.0", "@vitejs/plugin-react": "4.0.1", "@xstate/inspect": "0.8.0", "@xstate/react": "3.2.1", @@ -121,15 +117,20 @@ "@testing-library/react-hooks": "8.0.1", "@testing-library/user-event": "14.5.1", "@types/chroma-js": "2.4.0", + "@types/color-convert": "2.0.0", "@types/express": "4.17.17", "@types/jest": "29.5.2", + "@types/lodash": "4.14.196", "@types/node": "18.17.0", "@types/react": "18.2.6", + "@types/react-color": "3.0.6", + "@types/react-date-range": "1.4.4", "@types/react-dom": "18.2.4", "@types/react-helmet": "6.1.5", "@types/react-syntax-highlighter": "15.5.5", "@types/react-virtualized-auto-sizer": "1.0.1", "@types/react-window": "1.8.5", + "@types/semver": "7.5.0", "@types/ssh2": "1.11.13", "@types/ua-parser-js": "0.7.36", "@types/uuid": "9.0.2", diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml index 23ee68bb46a89..a105c0225a86e 100644 --- a/site/pnpm-lock.yaml +++ b/site/pnpm-lock.yaml @@ -15,6 +15,9 @@ dependencies: '@emoji-mart/react': specifier: 1.0.1 version: 1.0.1(emoji-mart@5.4.0)(react@18.2.0) + '@emotion/css': + specifier: 11.11.2 + version: 11.11.2 '@emotion/react': specifier: 11.11.1 version: 11.11.1(@types/react@18.2.6)(react@18.2.0) @@ -51,21 +54,6 @@ dependencies: '@tanstack/react-query': specifier: 4.35.3 version: 4.35.3(react-dom@18.2.0)(react@18.2.0) - '@types/color-convert': - specifier: 2.0.0 - version: 2.0.0 - '@types/lodash': - specifier: 4.14.196 - version: 4.14.196 - '@types/react-color': - specifier: 3.0.6 - version: 3.0.6 - '@types/react-date-range': - specifier: 1.4.4 - version: 1.4.4 - '@types/semver': - specifier: 7.5.0 - version: 7.5.0 '@vitejs/plugin-react': specifier: 4.0.1 version: 4.0.1(vite@4.4.2) @@ -275,18 +263,30 @@ devDependencies: '@types/chroma-js': specifier: 2.4.0 version: 2.4.0 + '@types/color-convert': + specifier: 2.0.0 + version: 2.0.0 '@types/express': specifier: 4.17.17 version: 4.17.17 '@types/jest': specifier: 29.5.2 version: 29.5.2 + '@types/lodash': + specifier: 4.14.196 + version: 4.14.196 '@types/node': specifier: 18.17.0 version: 18.17.0 '@types/react': specifier: 18.2.6 version: 18.2.6 + '@types/react-color': + specifier: 3.0.6 + version: 3.0.6 + '@types/react-date-range': + specifier: 1.4.4 + version: 1.4.4 '@types/react-dom': specifier: 18.2.4 version: 18.2.4 @@ -302,6 +302,9 @@ devDependencies: '@types/react-window': specifier: 1.8.5 version: 1.8.5 + '@types/semver': + specifier: 7.5.0 + version: 7.5.0 '@types/ssh2': specifier: 1.11.13 version: 1.11.13 @@ -475,7 +478,7 @@ packages: '@babel/parser': 7.22.14 '@babel/template': 7.22.5 '@babel/traverse': 7.22.11 - '@babel/types': 7.22.11 + '@babel/types': 7.22.19 convert-source-map: 1.9.0 debug: 4.3.4 gensync: 1.0.0-beta.2 @@ -498,7 +501,7 @@ packages: '@babel/parser': 7.22.14 '@babel/template': 7.22.5 '@babel/traverse': 7.22.11 - '@babel/types': 7.22.11 + '@babel/types': 7.22.19 convert-source-map: 1.9.0 debug: 4.3.4 gensync: 1.0.0-beta.2 @@ -511,7 +514,7 @@ packages: resolution: {integrity: sha512-79KIf7YiWjjdZ81JnLujDRApWtl7BxTqWD88+FFdQEIOG8LJ0etDOM7CXuIgGJa55sGOwZVwuEsaLEm0PJ5/+A==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.22.11 + '@babel/types': 7.22.19 '@jridgewell/gen-mapping': 0.3.3 '@jridgewell/trace-mapping': 0.3.19 jsesc: 2.5.2 @@ -520,14 +523,14 @@ packages: resolution: {integrity: sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.22.11 + '@babel/types': 7.22.19 dev: true /@babel/helper-builder-binary-assignment-operator-visitor@7.22.10: resolution: {integrity: sha512-Av0qubwDQxC56DoUReVDeLfMEjYYSN1nZrTUrWkXd7hpU73ymRANkbuDm3yni9npkn+RXy9nNbEJZEzXr7xrfQ==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.22.11 + '@babel/types': 7.22.19 dev: true /@babel/helper-compilation-targets@7.22.10: @@ -612,26 +615,26 @@ packages: engines: {node: '>=6.9.0'} dependencies: '@babel/template': 7.22.5 - '@babel/types': 7.22.11 + '@babel/types': 7.22.19 /@babel/helper-hoist-variables@7.22.5: resolution: {integrity: sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.22.11 + '@babel/types': 7.22.19 /@babel/helper-member-expression-to-functions@7.22.5: resolution: {integrity: sha512-aBiH1NKMG0H2cGZqspNvsaBe6wNGjbJjuLy29aU+eDZjSbbN53BaxlpB02xm9v34pLTZ1nIQPFYn2qMZoa5BQQ==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.22.11 + '@babel/types': 7.22.19 dev: true /@babel/helper-module-imports@7.22.5: resolution: {integrity: sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.22.11 + '@babel/types': 7.22.19 /@babel/helper-module-transforms@7.22.9(@babel/core@7.22.11): resolution: {integrity: sha512-t+WA2Xn5K+rTeGtC8jCsdAH52bjggG5TKRuRrAGNM/mjIbO4GxvlLMFOEz9wXY5I2XQ60PMFsAG2WIcG82dQMQ==} @@ -644,7 +647,7 @@ packages: '@babel/helper-module-imports': 7.22.5 '@babel/helper-simple-access': 7.22.5 '@babel/helper-split-export-declaration': 7.22.6 - '@babel/helper-validator-identifier': 7.22.5 + '@babel/helper-validator-identifier': 7.22.20 dev: true /@babel/helper-module-transforms@7.22.9(@babel/core@7.22.9): @@ -658,13 +661,13 @@ packages: '@babel/helper-module-imports': 7.22.5 '@babel/helper-simple-access': 7.22.5 '@babel/helper-split-export-declaration': 7.22.6 - '@babel/helper-validator-identifier': 7.22.5 + '@babel/helper-validator-identifier': 7.22.20 /@babel/helper-optimise-call-expression@7.22.5: resolution: {integrity: sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.22.11 + '@babel/types': 7.22.19 dev: true /@babel/helper-plugin-utils@7.22.5: @@ -699,20 +702,20 @@ packages: resolution: {integrity: sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.22.11 + '@babel/types': 7.22.19 /@babel/helper-skip-transparent-expression-wrappers@7.22.5: resolution: {integrity: sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.22.11 + '@babel/types': 7.22.19 dev: true /@babel/helper-split-export-declaration@7.22.6: resolution: {integrity: sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.22.11 + '@babel/types': 7.22.19 /@babel/helper-string-parser@7.22.5: resolution: {integrity: sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==} @@ -721,11 +724,11 @@ packages: /@babel/helper-validator-identifier@7.22.20: resolution: {integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==} engines: {node: '>=6.9.0'} - dev: true /@babel/helper-validator-identifier@7.22.5: resolution: {integrity: sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==} engines: {node: '>=6.9.0'} + dev: true /@babel/helper-validator-option@7.22.5: resolution: {integrity: sha512-R3oB6xlIVKUnxNUxbmgq7pKjxpru24zlimpE8WK47fACIlM0II/Hm1RS8IaOI7NgCr6LNS+jl5l75m20npAziw==} @@ -737,7 +740,7 @@ packages: dependencies: '@babel/helper-function-name': 7.22.5 '@babel/template': 7.22.5 - '@babel/types': 7.22.11 + '@babel/types': 7.22.19 dev: true /@babel/helpers@7.22.11: @@ -746,7 +749,7 @@ packages: dependencies: '@babel/template': 7.22.5 '@babel/traverse': 7.22.11 - '@babel/types': 7.22.11 + '@babel/types': 7.22.19 transitivePeerDependencies: - supports-color @@ -754,7 +757,7 @@ packages: resolution: {integrity: sha512-C/BaXcnnvBCmHTpz/VGZ8jgtE2aYlW4hxDhseJAWZb7gqGM/qtCK6iZUb0TyKFf7BOUsBH7Q7fkRsDRhg1XklQ==} engines: {node: '>=6.9.0'} dependencies: - '@babel/helper-validator-identifier': 7.22.5 + '@babel/helper-validator-identifier': 7.22.20 chalk: 2.4.2 js-tokens: 4.0.0 @@ -763,7 +766,7 @@ packages: engines: {node: '>=6.0.0'} hasBin: true dependencies: - '@babel/types': 7.22.11 + '@babel/types': 7.22.19 /@babel/parser@7.22.16: resolution: {integrity: sha512-+gPfKv8UWeKKeJTUxe59+OobVcrYHETCsORl61EmSkmgymguYk/X5bp7GuUIXaFsc6y++v8ZxPsLSSuujqDphA==} @@ -1437,7 +1440,7 @@ packages: '@babel/helper-hoist-variables': 7.22.5 '@babel/helper-module-transforms': 7.22.9(@babel/core@7.22.9) '@babel/helper-plugin-utils': 7.22.5 - '@babel/helper-validator-identifier': 7.22.5 + '@babel/helper-validator-identifier': 7.22.20 dev: true /@babel/plugin-transform-modules-umd@7.22.5(@babel/core@7.22.9): @@ -1835,7 +1838,7 @@ packages: '@babel/plugin-transform-unicode-regex': 7.22.5(@babel/core@7.22.9) '@babel/plugin-transform-unicode-sets-regex': 7.22.5(@babel/core@7.22.9) '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.22.9) - '@babel/types': 7.22.11 + '@babel/types': 7.22.19 babel-plugin-polyfill-corejs2: 0.4.5(@babel/core@7.22.9) babel-plugin-polyfill-corejs3: 0.8.3(@babel/core@7.22.9) babel-plugin-polyfill-regenerator: 0.5.2(@babel/core@7.22.9) @@ -1926,7 +1929,7 @@ packages: '@babel/plugin-transform-unicode-regex': 7.22.5(@babel/core@7.22.9) '@babel/plugin-transform-unicode-sets-regex': 7.22.5(@babel/core@7.22.9) '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.22.9) - '@babel/types': 7.22.11 + '@babel/types': 7.22.19 babel-plugin-polyfill-corejs2: 0.4.5(@babel/core@7.22.9) babel-plugin-polyfill-corejs3: 0.8.3(@babel/core@7.22.9) babel-plugin-polyfill-regenerator: 0.5.2(@babel/core@7.22.9) @@ -1955,7 +1958,7 @@ packages: dependencies: '@babel/core': 7.22.9 '@babel/helper-plugin-utils': 7.22.5 - '@babel/types': 7.22.11 + '@babel/types': 7.22.19 esutils: 2.0.3 dev: true @@ -1996,13 +1999,13 @@ packages: engines: {node: '>=6.9.0'} dependencies: regenerator-runtime: 0.14.0 + dev: true /@babel/runtime@7.22.15: resolution: {integrity: sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA==} engines: {node: '>=6.9.0'} dependencies: regenerator-runtime: 0.14.0 - dev: true /@babel/runtime@7.22.6: resolution: {integrity: sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==} @@ -2016,7 +2019,7 @@ packages: dependencies: '@babel/code-frame': 7.22.13 '@babel/parser': 7.22.14 - '@babel/types': 7.22.11 + '@babel/types': 7.22.19 /@babel/traverse@7.22.11: resolution: {integrity: sha512-mzAenteTfomcB7mfPtyi+4oe5BZ6MXxWcn4CX+h4IRJ+OOGXBrWU6jDQavkQI9Vuc5P+donFabBfFCcmWka9lQ==} @@ -2029,20 +2032,12 @@ packages: '@babel/helper-hoist-variables': 7.22.5 '@babel/helper-split-export-declaration': 7.22.6 '@babel/parser': 7.22.14 - '@babel/types': 7.22.11 + '@babel/types': 7.22.19 debug: 4.3.4 globals: 11.12.0 transitivePeerDependencies: - supports-color - /@babel/types@7.22.11: - resolution: {integrity: sha512-siazHiGuZRz9aB9NpHy9GOs9xiQPKnMzgdr493iI1M67vRXpnEq8ZOOKzezC5q7zwuQ6sDhdSp4SD9ixKSqKZg==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/helper-string-parser': 7.22.5 - '@babel/helper-validator-identifier': 7.22.5 - to-fast-properties: 2.0.0 - /@babel/types@7.22.19: resolution: {integrity: sha512-P7LAw/LbojPzkgp5oznjE6tQEIWbp4PkkfrZDINTro9zgBRtI324/EYsiSI7lhPbpIQ+DCeR2NNmMWANGGfZsg==} engines: {node: '>=6.9.0'} @@ -2050,7 +2045,6 @@ packages: '@babel/helper-string-parser': 7.22.5 '@babel/helper-validator-identifier': 7.22.20 to-fast-properties: 2.0.0 - dev: true /@base2/pretty-print-object@1.0.1: resolution: {integrity: sha512-4iri8i1AqYHJE2DstZYkyEprg6Pq6sKx3xn5FpySk9sNhH7qN2LLlHJCfDTZRILNwQNPD7mATWM0TBui7uC1pA==} @@ -2097,7 +2091,7 @@ packages: resolution: {integrity: sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==} dependencies: '@babel/helper-module-imports': 7.22.5 - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 '@emotion/hash': 0.9.1 '@emotion/memoize': 0.8.1 '@emotion/serialize': 1.1.2 @@ -2119,6 +2113,16 @@ packages: stylis: 4.2.0 dev: false + /@emotion/css@11.11.2: + resolution: {integrity: sha512-VJxe1ucoMYMS7DkiMdC2T7PWNbrEI0a39YRiyDvK2qq4lXwjRbVP/z4lpG+odCsRzadlR+1ywwrTzhdm5HNdew==} + dependencies: + '@emotion/babel-plugin': 11.11.0 + '@emotion/cache': 11.11.0 + '@emotion/serialize': 1.1.2 + '@emotion/sheet': 1.2.2 + '@emotion/utils': 1.2.1 + dev: false + /@emotion/hash@0.9.1: resolution: {integrity: sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==} dev: false @@ -3103,7 +3107,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 '@emotion/is-prop-valid': 1.2.1 '@mui/types': 7.2.4(@types/react@18.2.6) '@mui/utils': 5.14.3(react@18.2.0) @@ -3127,7 +3131,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 '@emotion/is-prop-valid': 1.2.1 '@mui/types': 7.2.4(@types/react@18.2.6) '@mui/utils': 5.14.3(react@18.2.0) @@ -3241,7 +3245,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 '@mui/utils': 5.14.3(react@18.2.0) '@types/react': 18.2.6 prop-types: 15.8.1 @@ -3261,7 +3265,7 @@ packages: '@emotion/styled': optional: true dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 '@emotion/cache': 11.11.0 '@emotion/react': 11.11.1(@types/react@18.2.6)(react@18.2.0) '@emotion/styled': 11.11.0(@emotion/react@11.11.1)(@types/react@18.2.6)(react@18.2.0) @@ -3348,7 +3352,7 @@ packages: peerDependencies: react: ^17.0.0 || ^18.0.0 dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 '@types/prop-types': 15.7.5 '@types/react-is': 18.2.1 prop-types: 15.8.1 @@ -3362,7 +3366,7 @@ packages: peerDependencies: react: ^17.0.0 || ^18.0.0 dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 '@types/prop-types': 15.7.5 '@types/react-is': 18.2.1 prop-types: 15.8.1 @@ -3465,13 +3469,13 @@ packages: /@radix-ui/number@1.0.1: resolution: {integrity: sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==} dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 dev: true /@radix-ui/primitive@1.0.1: resolution: {integrity: sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==} dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 dev: true /@radix-ui/react-arrow@1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0): @@ -3487,7 +3491,7 @@ packages: '@types/react-dom': optional: true dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0) '@types/react': 18.2.6 '@types/react-dom': 18.2.4 @@ -3508,7 +3512,7 @@ packages: '@types/react-dom': optional: true dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.6)(react@18.2.0) '@radix-ui/react-context': 1.0.1(@types/react@18.2.6)(react@18.2.0) '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0) @@ -3528,7 +3532,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 '@types/react': 18.2.6 react: 18.2.0 dev: true @@ -3542,7 +3546,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 '@types/react': 18.2.6 react: 18.2.0 dev: true @@ -3556,7 +3560,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 '@types/react': 18.2.6 react: 18.2.0 dev: true @@ -3574,7 +3578,7 @@ packages: '@types/react-dom': optional: true dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 '@radix-ui/primitive': 1.0.1 '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.6)(react@18.2.0) '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0) @@ -3595,7 +3599,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 '@types/react': 18.2.6 react: 18.2.0 dev: true @@ -3613,7 +3617,7 @@ packages: '@types/react-dom': optional: true dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.6)(react@18.2.0) '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0) '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.6)(react@18.2.0) @@ -3632,7 +3636,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.6)(react@18.2.0) '@types/react': 18.2.6 react: 18.2.0 @@ -3651,7 +3655,7 @@ packages: '@types/react-dom': optional: true dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 '@floating-ui/react-dom': 2.0.2(react-dom@18.2.0)(react@18.2.0) '@radix-ui/react-arrow': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0) '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.6)(react@18.2.0) @@ -3681,7 +3685,7 @@ packages: '@types/react-dom': optional: true dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0) '@types/react': 18.2.6 '@types/react-dom': 18.2.4 @@ -3702,7 +3706,7 @@ packages: '@types/react-dom': optional: true dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 '@radix-ui/react-slot': 1.0.2(@types/react@18.2.6)(react@18.2.0) '@types/react': 18.2.6 '@types/react-dom': 18.2.4 @@ -3723,7 +3727,7 @@ packages: '@types/react-dom': optional: true dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 '@radix-ui/primitive': 1.0.1 '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0) '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.6)(react@18.2.0) @@ -3752,7 +3756,7 @@ packages: '@types/react-dom': optional: true dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 '@radix-ui/number': 1.0.1 '@radix-ui/primitive': 1.0.1 '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0) @@ -3793,7 +3797,7 @@ packages: '@types/react-dom': optional: true dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0) '@types/react': 18.2.6 '@types/react-dom': 18.2.4 @@ -3810,7 +3814,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.6)(react@18.2.0) '@types/react': 18.2.6 react: 18.2.0 @@ -3829,7 +3833,7 @@ packages: '@types/react-dom': optional: true dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 '@radix-ui/primitive': 1.0.1 '@radix-ui/react-context': 1.0.1(@types/react@18.2.6)(react@18.2.0) '@radix-ui/react-direction': 1.0.1(@types/react@18.2.6)(react@18.2.0) @@ -3856,7 +3860,7 @@ packages: '@types/react-dom': optional: true dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 '@radix-ui/primitive': 1.0.1 '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0) '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.6)(react@18.2.0) @@ -3879,7 +3883,7 @@ packages: '@types/react-dom': optional: true dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 '@radix-ui/primitive': 1.0.1 '@radix-ui/react-context': 1.0.1(@types/react@18.2.6)(react@18.2.0) '@radix-ui/react-direction': 1.0.1(@types/react@18.2.6)(react@18.2.0) @@ -3902,7 +3906,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 '@types/react': 18.2.6 react: 18.2.0 dev: true @@ -3916,7 +3920,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.6)(react@18.2.0) '@types/react': 18.2.6 react: 18.2.0 @@ -3931,7 +3935,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.6)(react@18.2.0) '@types/react': 18.2.6 react: 18.2.0 @@ -3946,7 +3950,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 '@types/react': 18.2.6 react: 18.2.0 dev: true @@ -3960,7 +3964,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 '@types/react': 18.2.6 react: 18.2.0 dev: true @@ -3974,7 +3978,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 '@radix-ui/rect': 1.0.1 '@types/react': 18.2.6 react: 18.2.0 @@ -3989,7 +3993,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.6)(react@18.2.0) '@types/react': 18.2.6 react: 18.2.0 @@ -4008,7 +4012,7 @@ packages: '@types/react-dom': optional: true dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0) '@types/react': 18.2.6 '@types/react-dom': 18.2.4 @@ -4019,7 +4023,7 @@ packages: /@radix-ui/rect@1.0.1: resolution: {integrity: sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==} dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 dev: true /@remix-run/router@1.9.0: @@ -4580,7 +4584,7 @@ packages: dependencies: '@babel/core': 7.22.11 '@babel/preset-env': 7.22.14(@babel/core@7.22.9) - '@babel/types': 7.22.11 + '@babel/types': 7.22.19 '@ndelangen/get-tarball': 3.0.9 '@storybook/codemod': 7.4.0 '@storybook/core-common': 7.4.0 @@ -4649,7 +4653,7 @@ packages: dependencies: '@babel/core': 7.22.11 '@babel/preset-env': 7.22.14(@babel/core@7.22.11) - '@babel/types': 7.22.11 + '@babel/types': 7.22.19 '@storybook/csf': 0.1.1 '@storybook/csf-tools': 7.4.0 '@storybook/node-logger': 7.4.0 @@ -4864,7 +4868,7 @@ packages: '@babel/generator': 7.22.10 '@babel/parser': 7.22.14 '@babel/traverse': 7.22.11 - '@babel/types': 7.22.11 + '@babel/types': 7.22.19 '@storybook/csf': 0.1.1 '@storybook/types': 7.4.0 fs-extra: 11.1.1 @@ -5390,7 +5394,7 @@ packages: engines: {node: '>=14'} dependencies: '@babel/code-frame': 7.22.13 - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 '@types/aria-query': 5.0.1 aria-query: 5.1.3 chalk: 4.1.2 @@ -5527,7 +5531,7 @@ packages: resolution: {integrity: sha512-aACu/U/omhdk15O4Nfb+fHgH/z3QsfQzpnvRZhYhThms83ZnAOZz7zZAWO7mn2yyNQaA4xTO8GLK3uqFU4bYYw==} dependencies: '@babel/parser': 7.22.14 - '@babel/types': 7.22.11 + '@babel/types': 7.22.19 '@types/babel__generator': 7.6.4 '@types/babel__template': 7.4.1 '@types/babel__traverse': 7.20.1 @@ -5546,7 +5550,7 @@ packages: /@types/babel__generator@7.6.4: resolution: {integrity: sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==} dependencies: - '@babel/types': 7.22.11 + '@babel/types': 7.22.19 dev: true /@types/babel__generator@7.6.5: @@ -5559,7 +5563,7 @@ packages: resolution: {integrity: sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==} dependencies: '@babel/parser': 7.22.14 - '@babel/types': 7.22.11 + '@babel/types': 7.22.19 dev: true /@types/babel__template@7.4.2: @@ -5572,7 +5576,7 @@ packages: /@types/babel__traverse@7.20.1: resolution: {integrity: sha512-MitHFXnhtgwsGZWtT68URpOvLN4EREih1u3QtQiN4VdAxWKRVvGCSvw/Qth0M0Qq3pJpnGOu5JaM/ydK7OGbqg==} dependencies: - '@babel/types': 7.22.11 + '@babel/types': 7.22.19 dev: true /@types/babel__traverse@7.20.2: @@ -5596,11 +5600,11 @@ packages: resolution: {integrity: sha512-m7GG7IKKGuJUXvkZ1qqG3ChccdIM/qBBo913z+Xft0nKCX4hAU/IxKwZBU4cpRZ7GS5kV4vOblUkILtSShCPXQ==} dependencies: '@types/color-name': 1.1.1 - dev: false + dev: true /@types/color-name@1.1.1: resolution: {integrity: sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==} - dev: false + dev: true /@types/connect@3.4.35: resolution: {integrity: sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==} @@ -5749,6 +5753,7 @@ packages: /@types/lodash@4.14.196: resolution: {integrity: sha512-22y3o88f4a94mKljsZcanlNWPzO0uBsBdzLAngf2tp533LzZcQzb6+eZPJ+vCTt+bqF2XnvT9gejTLsAcJAJyQ==} + dev: true /@types/mdast@3.0.12: resolution: {integrity: sha512-DT+iNIRNX884cx0/Q1ja7NyUPpZuv0KPyL5rGNxm1WC1OtHstl7n4Jb7nk+xacNShQMbczJjt8uFzznpp6kYBg==} @@ -5842,14 +5847,14 @@ packages: dependencies: '@types/react': 18.2.6 '@types/reactcss': 1.2.6 - dev: false + dev: true /@types/react-date-range@1.4.4: resolution: {integrity: sha512-9Y9NyNgaCsEVN/+O4HKuxzPbVjRVBGdOKRxMDcsTRWVG62lpYgnxefNckTXDWup8FvczoqPW0+ESZR6R1yymDg==} dependencies: '@types/react': 18.2.6 date-fns: 2.30.0 - dev: false + dev: true /@types/react-dom@18.2.4: resolution: {integrity: sha512-G2mHoTMTL4yoydITgOGwWdWMVd8sNgyEP85xVmMKAPUBwQWm9wBPQUmvbeF4V3WBY1P7mmL4BkjQ0SqUpf1snw==} @@ -5912,7 +5917,7 @@ packages: resolution: {integrity: sha512-qaIzpCuXNWomGR1Xq8SCFTtF4v8V27Y6f+b9+bzHiv087MylI/nTCqqdChNeWS7tslgROmYB7yeiruWX7WnqNg==} dependencies: '@types/react': 18.2.6 - dev: false + dev: true /@types/scheduler@0.16.3: resolution: {integrity: sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==} @@ -6248,7 +6253,7 @@ packages: dependencies: '@babel/parser': 7.22.14 '@babel/traverse': 7.22.11 - '@babel/types': 7.22.11 + '@babel/types': 7.22.19 recast: 0.23.4 xstate: 4.38.2 transitivePeerDependencies: @@ -6716,7 +6721,7 @@ packages: engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: '@babel/template': 7.22.5 - '@babel/types': 7.22.11 + '@babel/types': 7.22.19 '@types/babel__core': 7.20.1 '@types/babel__traverse': 7.20.1 dev: true @@ -6725,7 +6730,7 @@ packages: resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==} engines: {node: '>=10', npm: '>=6'} dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 cosmiconfig: 7.1.0 resolve: 1.22.4 dev: false @@ -7445,7 +7450,7 @@ packages: /css-vendor@2.0.8: resolution: {integrity: sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==} dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 is-in-browser: 1.1.3 dev: false @@ -7493,7 +7498,6 @@ packages: engines: {node: '>=0.11'} dependencies: '@babel/runtime': 7.22.6 - dev: false /dayjs@1.11.4: resolution: {integrity: sha512-Zj/lPM5hOvQ1Bf7uAvewDaUcsJoI6JmNqmHhHl3nyumwe0XHwt8sWdOVAPACJzCebL8gQCi+K49w7iKWnGwX9g==} @@ -7746,7 +7750,7 @@ packages: /dom-helpers@5.2.1: resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==} dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 csstype: 3.1.2 dev: false @@ -8097,8 +8101,8 @@ packages: resolution: {integrity: sha512-gozW2blMLJCeFpBwugLTGyvVjNoeo1knonXAcatC6bjPBZitotxdWf7Gimr25N4c0AAOo4eOUfaG82IJPDpqCA==} dependencies: debug: 3.2.7 - is-core-module: 2.12.1 - resolve: 1.22.3 + is-core-module: 2.13.0 + resolve: 1.22.4 transitivePeerDependencies: - supports-color dev: true @@ -8453,7 +8457,7 @@ packages: engines: {node: '>=8.3.0'} dependencies: '@babel/traverse': 7.22.11 - '@babel/types': 7.22.11 + '@babel/types': 7.22.19 c8: 7.14.0 transitivePeerDependencies: - supports-color @@ -10134,7 +10138,7 @@ packages: '@babel/generator': 7.22.10 '@babel/plugin-syntax-jsx': 7.22.5(@babel/core@7.22.11) '@babel/plugin-syntax-typescript': 7.22.5(@babel/core@7.22.11) - '@babel/types': 7.22.11 + '@babel/types': 7.22.19 '@jest/expect-utils': 29.6.2 '@jest/transform': 29.6.4 '@jest/types': 29.6.1 @@ -10412,7 +10416,7 @@ packages: /jss-plugin-camel-case@10.10.0: resolution: {integrity: sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==} dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 hyphenate-style-name: 1.0.4 jss: 10.10.0 dev: false @@ -10420,21 +10424,21 @@ packages: /jss-plugin-default-unit@10.10.0: resolution: {integrity: sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ==} dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 jss: 10.10.0 dev: false /jss-plugin-global@10.10.0: resolution: {integrity: sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==} dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 jss: 10.10.0 dev: false /jss-plugin-nested@10.10.0: resolution: {integrity: sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA==} dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 jss: 10.10.0 tiny-warning: 1.0.3 dev: false @@ -10442,14 +10446,14 @@ packages: /jss-plugin-props-sort@10.10.0: resolution: {integrity: sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg==} dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 jss: 10.10.0 dev: false /jss-plugin-rule-value-function@10.10.0: resolution: {integrity: sha512-uEFJFgaCtkXeIPgki8ICw3Y7VMkL9GEan6SqmT9tqpwM+/t+hxfMUdU4wQ0MtOiMNWhwnckBV0IebrKcZM9C0g==} dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 jss: 10.10.0 tiny-warning: 1.0.3 dev: false @@ -10457,7 +10461,7 @@ packages: /jss-plugin-vendor-prefixer@10.10.0: resolution: {integrity: sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg==} dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 css-vendor: 2.0.8 jss: 10.10.0 dev: false @@ -10465,7 +10469,7 @@ packages: /jss@10.10.0: resolution: {integrity: sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==} dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 csstype: 3.1.2 is-in-browser: 1.1.3 tiny-warning: 1.0.3 @@ -11731,7 +11735,7 @@ packages: resolution: {integrity: sha512-Sz2Lkdxz6F2Pgnpi9U5Ng/WdWAUZxmHrNPoVlm3aAemxoy2Qy7LGjQg4uf8qKelDAUW94F4np3iH2YPf2qefcQ==} engines: {node: '>=10'} dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 dev: true /postcss@8.4.27: @@ -12088,7 +12092,7 @@ packages: peerDependencies: react: '>=16.13.1' dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 react: 18.2.0 dev: true @@ -12269,7 +12273,7 @@ packages: react: '>=16.6.0' react-dom: '>=16.6.0' dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 dom-helpers: 5.2.1 loose-envify: 1.4.0 prop-types: 15.8.1 @@ -12460,7 +12464,7 @@ packages: /regenerator-transform@0.15.2: resolution: {integrity: sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==} dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 dev: true /regexp-tree@0.1.27: @@ -12596,7 +12600,7 @@ packages: resolution: {integrity: sha512-P8ur/gp/AmbEzjr729bZnLjXK5Z+4P0zhIJgBgzqRih7hL7BOukHGtSTA3ACMY467GRFz3duQsi0bDZdR7DKdw==} hasBin: true dependencies: - is-core-module: 2.12.1 + is-core-module: 2.13.0 path-parse: 1.0.7 supports-preserve-symlinks-flag: 1.0.0 dev: true @@ -12684,7 +12688,7 @@ packages: /rtl-css-js@1.16.1: resolution: {integrity: sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==} dependencies: - '@babel/runtime': 7.22.11 + '@babel/runtime': 7.22.15 dev: false /run-async@2.4.1: diff --git a/site/src/@types/emotion.d.ts b/site/src/@types/emotion.d.ts new file mode 100644 index 0000000000000..4185fe7908a8a --- /dev/null +++ b/site/src/@types/emotion.d.ts @@ -0,0 +1,5 @@ +import type { Theme as MuiTheme } from "@mui/system"; + +declare module "@emotion/react" { + interface Theme extends MuiTheme {} +} diff --git a/site/src/App.tsx b/site/src/App.tsx index ce4f4e1c61845..f0a8316df6093 100644 --- a/site/src/App.tsx +++ b/site/src/App.tsx @@ -8,7 +8,11 @@ import { ErrorBoundary } from "./components/ErrorBoundary/ErrorBoundary"; import { GlobalSnackbar } from "./components/GlobalSnackbar/GlobalSnackbar"; import { dark } from "./theme"; import "./theme/globalFonts"; -import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles"; +import { + StyledEngineProvider, + ThemeProvider as MuiThemeProvider, +} from "@mui/material/styles"; +import { ThemeProvider as EmotionThemeProvider } from "@emotion/react"; const queryClient = new QueryClient({ defaultOptions: { @@ -25,17 +29,19 @@ export const AppProviders: FC = ({ children }) => { return ( - - - - - - {children} - - - - - + + + + + + + {children} + + + + + + ); diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx index fd7fab8b72ecd..6d394528b629d 100644 --- a/site/src/components/Avatar/Avatar.tsx +++ b/site/src/components/Avatar/Avatar.tsx @@ -1,9 +1,8 @@ // This is the only place MuiAvatar can be used // eslint-disable-next-line no-restricted-imports -- Read above import MuiAvatar, { AvatarProps as MuiAvatarProps } from "@mui/material/Avatar"; -import { makeStyles } from "@mui/styles"; import { FC } from "react"; -import { combineClasses } from "utils/combineClasses"; +import { css, type Theme } from "@emotion/react"; export type AvatarProps = MuiAvatarProps & { size?: "sm" | "md" | "xl"; @@ -11,25 +10,49 @@ export type AvatarProps = MuiAvatarProps & { fitImage?: boolean; }; +const sizeStyles = { + sm: (theme: Theme) => ({ + width: theme.spacing(3), + height: theme.spacing(3), + fontSize: theme.spacing(1.5), + }), + md: {}, + xl: (theme: Theme) => ({ + width: theme.spacing(6), + height: theme.spacing(6), + fontSize: theme.spacing(3), + }), +}; + +const colorStyles = { + light: {}, + darken: (theme: Theme) => ({ + background: theme.palette.divider, + color: theme.palette.text.primary, + }), +}; + +const fitImageStyles = css` + & .MuiAvatar-img { + object-fit: contain; + } +`; + export const Avatar: FC = ({ size = "md", colorScheme = "light", fitImage, - className, children, ...muiProps }) => { - const styles = useStyles(); - return ( {typeof children === "string" ? firstLetter(children) : children} @@ -40,8 +63,15 @@ export const Avatar: FC = ({ * Use it to make an img element behaves like a MaterialUI Icon component */ export const AvatarIcon: FC<{ src: string }> = ({ src }) => { - const styles = useStyles(); - return ; + return ( + + ); }; const firstLetter = (str: string): string => { @@ -51,36 +81,3 @@ const firstLetter = (str: string): string => { return ""; }; - -const useStyles = makeStyles((theme) => ({ - // Size styles - sm: { - width: theme.spacing(3), - height: theme.spacing(3), - fontSize: theme.spacing(1.5), - }, - // Just use the default value from theme - md: {}, - xl: { - width: theme.spacing(6), - height: theme.spacing(6), - fontSize: theme.spacing(3), - }, - // Colors - // Just use the default value from theme - light: {}, - darken: { - background: theme.palette.divider, - color: theme.palette.text.primary, - }, - // Avatar icon - avatarIcon: { - maxWidth: "50%", - }, - // Fit image - fitImage: { - "& .MuiAvatar-img": { - objectFit: "contain", - }, - }, -})); diff --git a/site/src/components/CopyableValue/CopyableValue.tsx b/site/src/components/CopyableValue/CopyableValue.tsx index f375bf64e4aaa..96e49e18171ba 100644 --- a/site/src/components/CopyableValue/CopyableValue.tsx +++ b/site/src/components/CopyableValue/CopyableValue.tsx @@ -1,39 +1,22 @@ -import { makeStyles } from "@mui/styles"; import Tooltip from "@mui/material/Tooltip"; import { useClickable } from "hooks/useClickable"; import { useClipboard } from "hooks/useClipboard"; import { FC, HTMLProps } from "react"; -import { combineClasses } from "utils/combineClasses"; interface CopyableValueProps extends HTMLProps { value: string; } -export const CopyableValue: FC = ({ - value, - className, - ...props -}) => { +export const CopyableValue: FC = ({ value, ...props }) => { const { isCopied, copy } = useClipboard(value); const clickableProps = useClickable(copy); - const styles = useStyles(); return ( - + ); }; - -const useStyles = makeStyles(() => ({ - value: { - cursor: "pointer", - }, -})); diff --git a/site/src/components/Dashboard/DashboardLayout.tsx b/site/src/components/Dashboard/DashboardLayout.tsx index c7412f0f9a5b7..4b5fe52d619c0 100644 --- a/site/src/components/Dashboard/DashboardLayout.tsx +++ b/site/src/components/Dashboard/DashboardLayout.tsx @@ -1,4 +1,3 @@ -import { makeStyles } from "@mui/styles"; import { useMachine } from "@xstate/react"; import { DeploymentBanner } from "./DeploymentBanner/DeploymentBanner"; import { LicenseBanner } from "components/Dashboard/LicenseBanner/LicenseBanner"; @@ -19,7 +18,6 @@ import { docs } from "utils/docs"; import { HealthBanner } from "./HealthBanner"; export const DashboardLayout: FC = () => { - const styles = useStyles(); const permissions = usePermissions(); const [updateCheckState, updateCheckSend] = useMachine(updateCheckMachine, { context: { @@ -35,10 +33,23 @@ export const DashboardLayout: FC = () => { {canViewDeployment && } -
+
-
+
}> @@ -118,17 +129,3 @@ export const DashboardFullPage = (props: BoxProps) => { /> ); }; - -const useStyles = makeStyles({ - site: { - display: "flex", - minHeight: "100%", - flexDirection: "column", - }, - siteContent: { - flex: 1, - paddingBottom: dashboardContentBottomPadding, // Add bottom space since we don't use a footer - display: "flex", - flexDirection: "column", - }, -}); diff --git a/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx b/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx index 4b7e6e109d73a..c285cbc61fa00 100644 --- a/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx +++ b/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx @@ -1,6 +1,5 @@ import Badge from "@mui/material/Badge"; import MenuItem from "@mui/material/MenuItem"; -import { makeStyles } from "@mui/styles"; import { useState, FC, PropsWithChildren, MouseEvent } from "react"; import { colors } from "theme/colors"; import * as TypesGen from "api/typesGenerated"; @@ -13,6 +12,7 @@ import { import { UserAvatar } from "components/UserAvatar/UserAvatar"; import { UserDropdownContent } from "./UserDropdownContent"; import { BUTTON_SM_HEIGHT } from "theme/theme"; +import { css } from "@emotion/react"; export interface UserDropdownProps { user: TypesGen.User; @@ -27,7 +27,6 @@ export const UserDropdown: FC> = ({ supportLinks, onSignOut, }: UserDropdownProps) => { - const styles = useStyles(); const [anchorEl, setAnchorEl] = useState(); const handleDropdownClick = (ev: MouseEvent): void => { @@ -40,11 +39,25 @@ export const UserDropdown: FC> = ({ return ( <> css` + height: ${navHeight}px; + padding: ${theme.spacing(1.5, 0)}; + + &:hover { + background-color: transparent; + } + `} onClick={handleDropdownClick} data-testid="user-dropdown-trigger" > -
+
> = ({ ); }; - -export const useStyles = makeStyles((theme) => ({ - divider: { - marginTop: theme.spacing(1), - marginBottom: theme.spacing(1), - }, - inner: { - display: "flex", - alignItems: "center", - minWidth: 0, - maxWidth: 300, - }, - menuItem: { - height: navHeight, - padding: theme.spacing(1.5, 0), - - "&:hover": { - backgroundColor: "transparent", - }, - }, -})); diff --git a/site/src/components/Dashboard/ServiceBanner/ServiceBannerView.tsx b/site/src/components/Dashboard/ServiceBanner/ServiceBannerView.tsx index 7432df73d72be..526613cd1f55f 100644 --- a/site/src/components/Dashboard/ServiceBanner/ServiceBannerView.tsx +++ b/site/src/components/Dashboard/ServiceBanner/ServiceBannerView.tsx @@ -1,8 +1,9 @@ -import { makeStyles } from "@mui/styles"; import { Pill } from "components/Pill/Pill"; import ReactMarkdown from "react-markdown"; import { colors } from "theme/colors"; -import { hex } from "color-convert"; +import { useTheme } from "@mui/system"; +import { css } from "@emotion/react"; +import { readableForegroundColor } from "utils/colors"; export interface ServiceBannerViewProps { message: string; @@ -15,7 +16,7 @@ export const ServiceBannerView: React.FC = ({ backgroundColor, isPreview, }) => { - const styles = useStyles(); + const theme = useTheme(); // We don't want anything funky like an image or a heading in the service // banner. const markdownElementsAllowed = [ @@ -31,15 +32,29 @@ export const ServiceBannerView: React.FC = ({ ]; return (
{isPreview && }
= ({
); }; - -const useStyles = makeStyles((theme) => ({ - container: { - padding: theme.spacing(1.5), - backgroundColor: theme.palette.warning.main, - display: "flex", - alignItems: "center", - "&.error": { - backgroundColor: colors.red[12], - }, - }, - flex: { - display: "column", - }, - centerContent: { - marginRight: "auto", - marginLeft: "auto", - fontWeight: 400, - "& a": { - color: "inherit", - }, - }, -})); - -const readableForegroundColor = (backgroundColor: string): string => { - const rgb = hex.rgb(backgroundColor); - - // Logic taken from here: - // https://github.com/casesandberg/react-color/blob/bc9a0e1dc5d11b06c511a8e02a95bd85c7129f4b/src/helpers/color.js#L56 - // to be consistent with the color-picker label. - const yiq = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000; - return yiq >= 128 ? "#000" : "#fff"; -}; diff --git a/site/src/components/DeploySettingsLayout/Option.tsx b/site/src/components/DeploySettingsLayout/Option.tsx index 4d9461b7fb415..0b813157999f8 100644 --- a/site/src/components/DeploySettingsLayout/Option.tsx +++ b/site/src/components/DeploySettingsLayout/Option.tsx @@ -1,50 +1,91 @@ -import { makeStyles } from "@mui/styles"; -import { PropsWithChildren, FC } from "react"; +import type { PropsWithChildren, FC } from "react"; import { MONOSPACE_FONT_FAMILY } from "theme/constants"; -import { DisabledBadge, EnabledBadge } from "./Badges"; import Box, { BoxProps } from "@mui/material/Box"; -import { combineClasses } from "utils/combineClasses"; +import { useTheme } from "@mui/system"; +import { DisabledBadge, EnabledBadge } from "./Badges"; +import { css } from "@emotion/react"; -export const OptionName: FC = ({ children }) => { - const styles = useStyles(); - return {children}; -}; +export const OptionName: FC = (props) => { + const { children } = props; -export const OptionDescription: FC = ({ children }) => { - const styles = useStyles(); - return {children}; + return ( + + {children} + + ); }; -const NotSet: FC = () => { - const styles = useStyles(); +export const OptionDescription: FC = (props) => { + const { children } = props; + const theme = useTheme(); - return Not set; + return ( + + {children} + + ); }; -export const OptionValue: FC<{ children?: unknown }> = ({ children }) => { - const styles = useStyles(); +interface OptionValueProps { + children?: boolean | number | string | string[]; +} + +export const OptionValue: FC = (props) => { + const { children } = props; + const theme = useTheme(); + + const optionStyles = css` + font-size: 14px; + font-family: ${MONOSPACE_FONT_FAMILY}; + overflow-wrap: anywhere; + user-select: all; + + & ul { + padding: ${theme.spacing(2)}; + } + `; if (typeof children === "boolean") { return children ? : ; } if (typeof children === "number") { - return {children}; + return {children}; + } + + if (!children || children.length === 0) { + return Not set; } if (typeof children === "string") { - return {children}; + return {children}; } if (Array.isArray(children)) { - if (children.length === 0) { - return ; - } - return ( -
    +
      {children.map((item) => ( -
    • +
    • {item}
      • ))} @@ -52,21 +93,24 @@ export const OptionValue: FC<{ children?: unknown }> = ({ children }) => { ); } - if (children === "") { - return ; - } - - return {JSON.stringify(children)}; + return {JSON.stringify(children)}; }; +interface OptionConfigProps extends BoxProps { + source?: boolean; +} + // OptionalConfig takes a source bool to indicate if the Option is the source of the configured value. -export const OptionConfig = ({ - source, - ...boxProps -}: { source?: boolean } & BoxProps) => { +export const OptionConfig = (props: OptionConfigProps) => { + const { source, sx, ...attrs } = props; + const theme = useTheme(); + const borderColor = source + ? theme.palette.primary.main + : theme.palette.divider; + return ( theme.spacing(0, 1), - border: (theme) => - `1px solid ${ - source ? theme.palette.primary.main : theme.palette.divider - }`, - "& .option-config-flag": { - backgroundColor: source ? "rgba(0, 0, 0, 0.7)" : undefined, - }, - ...boxProps.sx, + border: `1px solid ${borderColor}`, + ...sx, }} /> ); }; -export const OptionConfigFlag = (props: BoxProps) => { +interface OptionConfigFlagProps extends BoxProps { + source?: boolean; +} + +export const OptionConfigFlag = (props: OptionConfigFlagProps) => { + const { children, source, sx, ...attrs } = props; + return ( theme.spacing(0, 0.75, 0, -0.5), display: "block", - backgroundColor: (theme) => theme.palette.divider, + backgroundColor: (theme) => + source ? "rgba(0, 0, 0, 0.7)" : theme.palette.divider, lineHeight: 1, padding: (theme) => theme.spacing(0.25, 0.5), borderRadius: 0.25, - ...props.sx, + ...sx, }} - /> + > + {children} + ); }; - -const useStyles = makeStyles((theme) => ({ - optionName: { - display: "block", - }, - - optionDescription: { - display: "block", - color: theme.palette.text.secondary, - fontSize: 14, - marginTop: theme.spacing(0.5), - }, - - optionValue: { - fontSize: 14, - fontFamily: MONOSPACE_FONT_FAMILY, - overflowWrap: "anywhere", - userSelect: "all", - - "& ul": { - padding: theme.spacing(2), - }, - }, - - optionValueList: { - margin: 0, - padding: 0, - listStylePosition: "inside", - display: "flex", - flexDirection: "column", - gap: theme.spacing(0.5), - }, -})); diff --git a/site/src/components/DeploySettingsLayout/Sidebar.tsx b/site/src/components/DeploySettingsLayout/Sidebar.tsx index 8cdb8856ad7af..b2af2612373a6 100644 --- a/site/src/components/DeploySettingsLayout/Sidebar.tsx +++ b/site/src/components/DeploySettingsLayout/Sidebar.tsx @@ -1,4 +1,3 @@ -import { makeStyles } from "@mui/styles"; import Brush from "@mui/icons-material/Brush"; import LaunchOutlined from "@mui/icons-material/LaunchOutlined"; import ApprovalIcon from "@mui/icons-material/VerifiedUserOutlined"; @@ -9,24 +8,54 @@ import VpnKeyOutlined from "@mui/icons-material/VpnKeyOutlined"; import MonitorHeartOutlined from "@mui/icons-material/MonitorHeartOutlined"; import { GitIcon } from "components/Icons/GitIcon"; import { Stack } from "components/Stack/Stack"; -import { ElementType, PropsWithChildren, ReactNode, FC } from "react"; +import type { ElementType, FC, PropsWithChildren, ReactNode } from "react"; import { NavLink } from "react-router-dom"; -import { combineClasses } from "utils/combineClasses"; import { useDashboard } from "components/Dashboard/DashboardProvider"; +import { useTheme } from "@mui/system"; +import { css } from "@emotion/css"; const SidebarNavItem: FC< PropsWithChildren<{ href: string; icon: ReactNode }> > = ({ children, href, icon }) => { - const styles = useStyles(); + const theme = useTheme(); + + const activeStyles = css` + background-color: ${theme.palette.action.hover}; + + &::before { + content: ""; + display: block; + width: 3px; + height: 100%; + position: absolute; + left: 0; + top: 0; + background-color: ${theme.palette.secondary.dark}; + border-top-left-radius: ${theme.shape.borderRadius}; + border-bottom-left-radius: ${theme.shape.borderRadius}; + } + `; + return ( - combineClasses([ - styles.sidebarNavItem, - isActive ? styles.sidebarNavItemActive : undefined, - ]) - } + className={({ isActive }) => css` + ${isActive && activeStyles} + + color: inherit; + display: block; + font-size: 14px; + text-decoration: none; + padding: ${theme.spacing(1.5, 1.5, 1.5, 2)}; + border-radius: ${theme.shape.borderRadius / 2}; + transition: background-color 0.15s ease-in-out; + margin-bottom: 1; + position: relative; + + &:hover { + background-color: ${theme.palette.action.hover}; + } + `} > {icon} @@ -37,16 +66,26 @@ const SidebarNavItem: FC< }; const SidebarNavItemIcon: FC<{ icon: ElementType }> = ({ icon: Icon }) => { - const styles = useStyles(); - return ; + const theme = useTheme(); + return ( + + ); }; export const Sidebar: React.FC = () => { - const styles = useStyles(); const dashboard = useDashboard(); return ( -