diff --git a/package.json b/package.json index 858f58a..76d279a 100644 --- a/package.json +++ b/package.json @@ -27,8 +27,10 @@ }, "dependencies": { "@eduardoac-skimlinks/webext-redux": "3.0.1-release-candidate", - "@material-ui/core": "4.12.4", - "@material-ui/icons": "4.11.3", + "@emotion/react": "11.11.3", + "@emotion/styled": "11.11.0", + "@mui/icons-material": "5.15.5", + "@mui/material": "5.15.5", "@reduxjs/toolkit": "1.8.4", "@types/redux-thunk": "2.1.0", "clsx": "2.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 80a40bc..e8819b4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,12 +8,18 @@ dependencies: '@eduardoac-skimlinks/webext-redux': specifier: 3.0.1-release-candidate version: 3.0.1-release-candidate(redux@4.2.1) - '@material-ui/core': - specifier: 4.12.4 - version: 4.12.4(@types/react@18.0.17)(react-dom@18.2.0)(react@18.2.0) - '@material-ui/icons': - specifier: 4.11.3 - version: 4.11.3(@material-ui/core@4.12.4)(@types/react@18.0.17)(react-dom@18.2.0)(react@18.2.0) + '@emotion/react': + specifier: 11.11.3 + version: 11.11.3(@types/react@18.0.17)(react@18.2.0) + '@emotion/styled': + specifier: 11.11.0 + version: 11.11.0(@emotion/react@11.11.3)(@types/react@18.0.17)(react@18.2.0) + '@mui/icons-material': + specifier: 5.15.5 + version: 5.15.5(@mui/material@5.15.5)(@types/react@18.0.17)(react@18.2.0) + '@mui/material': + specifier: 5.15.5 + version: 5.15.5(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@types/react@18.0.17)(react-dom@18.2.0)(react@18.2.0) '@reduxjs/toolkit': specifier: 1.8.4 version: 1.8.4(react-redux@7.2.8)(react@18.2.0) @@ -229,7 +235,6 @@ packages: engines: { node: '>=6.9.0' } dependencies: '@babel/highlight': 7.22.5 - dev: true /@babel/compat-data@7.22.9: resolution: @@ -433,7 +438,6 @@ packages: engines: { node: '>=6.9.0' } dependencies: '@babel/types': 7.22.5 - dev: true /@babel/helper-module-transforms@7.22.9(@babel/core@7.22.9): resolution: @@ -536,7 +540,6 @@ packages: integrity: sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==, } engines: { node: '>=6.9.0' } - dev: true /@babel/helper-validator-identifier@7.22.5: resolution: @@ -544,7 +547,6 @@ packages: integrity: sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==, } engines: { node: '>=6.9.0' } - dev: true /@babel/helper-validator-option@7.22.5: resolution: @@ -590,7 +592,6 @@ packages: '@babel/helper-validator-identifier': 7.22.5 chalk: 2.4.2 js-tokens: 4.0.0 - dev: true /@babel/parser@7.22.7: resolution: @@ -2018,6 +2019,16 @@ packages: dependencies: regenerator-runtime: 0.13.11 + /@babel/runtime@7.23.8: + resolution: + { + integrity: sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw==, + } + engines: { node: '>=6.9.0' } + dependencies: + regenerator-runtime: 0.14.1 + dev: false + /@babel/template@7.22.5: resolution: { @@ -2061,7 +2072,6 @@ packages: '@babel/helper-string-parser': 7.22.5 '@babel/helper-validator-identifier': 7.22.5 to-fast-properties: 2.0.0 - dev: true /@bcoe/v8-coverage@0.2.3: resolution: @@ -2354,10 +2364,158 @@ packages: redux: 4.2.1 dev: false - /@emotion/hash@0.8.0: + /@emotion/babel-plugin@11.11.0: + resolution: + { + integrity: sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==, + } + dependencies: + '@babel/helper-module-imports': 7.22.5 + '@babel/runtime': 7.22.6 + '@emotion/hash': 0.9.1 + '@emotion/memoize': 0.8.1 + '@emotion/serialize': 1.1.3 + babel-plugin-macros: 3.1.0 + convert-source-map: 1.9.0 + escape-string-regexp: 4.0.0 + find-root: 1.1.0 + source-map: 0.5.7 + stylis: 4.2.0 + dev: false + + /@emotion/cache@11.11.0: + resolution: + { + integrity: sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==, + } + dependencies: + '@emotion/memoize': 0.8.1 + '@emotion/sheet': 1.2.2 + '@emotion/utils': 1.2.1 + '@emotion/weak-memoize': 0.3.1 + stylis: 4.2.0 + dev: false + + /@emotion/hash@0.9.1: + resolution: + { + integrity: sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==, + } + dev: false + + /@emotion/is-prop-valid@1.2.1: + resolution: + { + integrity: sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==, + } + dependencies: + '@emotion/memoize': 0.8.1 + dev: false + + /@emotion/memoize@0.8.1: + resolution: + { + integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==, + } + dev: false + + /@emotion/react@11.11.3(@types/react@18.0.17)(react@18.2.0): + resolution: + { + integrity: sha512-Cnn0kuq4DoONOMcnoVsTOR8E+AdnKFf//6kUWc4LCdnxj31pZWn7rIULd6Y7/Js1PiPHzn7SKCM9vB/jBni8eA==, + } + peerDependencies: + '@types/react': '*' + react: '>=16.8.0' + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.22.6 + '@emotion/babel-plugin': 11.11.0 + '@emotion/cache': 11.11.0 + '@emotion/serialize': 1.1.3 + '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.2.0) + '@emotion/utils': 1.2.1 + '@emotion/weak-memoize': 0.3.1 + '@types/react': 18.0.17 + hoist-non-react-statics: 3.3.2 + react: 18.2.0 + dev: false + + /@emotion/serialize@1.1.3: + resolution: + { + integrity: sha512-iD4D6QVZFDhcbH0RAG1uVu1CwVLMWUkCvAqqlewO/rxf8+87yIBAlt4+AxMiiKPLs5hFc0owNk/sLLAOROw3cA==, + } + dependencies: + '@emotion/hash': 0.9.1 + '@emotion/memoize': 0.8.1 + '@emotion/unitless': 0.8.1 + '@emotion/utils': 1.2.1 + csstype: 3.1.2 + dev: false + + /@emotion/sheet@1.2.2: + resolution: + { + integrity: sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==, + } + dev: false + + /@emotion/styled@11.11.0(@emotion/react@11.11.3)(@types/react@18.0.17)(react@18.2.0): + resolution: + { + integrity: sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==, + } + peerDependencies: + '@emotion/react': ^11.0.0-rc.0 + '@types/react': '*' + react: '>=16.8.0' + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.22.6 + '@emotion/babel-plugin': 11.11.0 + '@emotion/is-prop-valid': 1.2.1 + '@emotion/react': 11.11.3(@types/react@18.0.17)(react@18.2.0) + '@emotion/serialize': 1.1.3 + '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.2.0) + '@emotion/utils': 1.2.1 + '@types/react': 18.0.17 + react: 18.2.0 + dev: false + + /@emotion/unitless@0.8.1: + resolution: + { + integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==, + } + dev: false + + /@emotion/use-insertion-effect-with-fallbacks@1.0.1(react@18.2.0): + resolution: + { + integrity: sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==, + } + peerDependencies: + react: '>=16.8.0' + dependencies: + react: 18.2.0 + dev: false + + /@emotion/utils@1.2.1: resolution: { - integrity: sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==, + integrity: sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==, + } + dev: false + + /@emotion/weak-memoize@0.3.1: + resolution: + { + integrity: sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==, } dev: false @@ -2406,6 +2564,46 @@ packages: - supports-color dev: true + /@floating-ui/core@1.5.3: + resolution: + { + integrity: sha512-O0WKDOo0yhJuugCx6trZQj5jVJ9yR0ystG2JaNAemYUWce+pmM6WUEFIibnWyEJKdrDxhm75NoSRME35FNaM/Q==, + } + dependencies: + '@floating-ui/utils': 0.2.1 + dev: false + + /@floating-ui/dom@1.5.4: + resolution: + { + integrity: sha512-jByEsHIY+eEdCjnTVu+E3ephzTOzkQ8hgUfGwos+bg7NlH33Zc5uO+QHz1mrQUOgIKKDD1RtS201P9NvAfq3XQ==, + } + dependencies: + '@floating-ui/core': 1.5.3 + '@floating-ui/utils': 0.2.1 + dev: false + + /@floating-ui/react-dom@2.0.6(react-dom@18.2.0)(react@18.2.0): + resolution: + { + integrity: sha512-IB8aCRFxr8nFkdYZgH+Otd9EVQPJoynxeFRGTB8voPoZMRWo8XjYuCRgpI1btvuKY69XMiLnW+ym7zoBHM90Rw==, + } + peerDependencies: + react: '>=16.8.0' + react-dom: '>=16.8.0' + dependencies: + '@floating-ui/dom': 1.5.4 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + + /@floating-ui/utils@0.2.1: + resolution: + { + integrity: sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==, + } + dev: false + /@humanwhocodes/config-array@0.9.5: resolution: { @@ -2775,148 +2973,209 @@ packages: '@jridgewell/sourcemap-codec': 1.4.15 dev: true - /@material-ui/core@4.12.4(@types/react@18.0.17)(react-dom@18.2.0)(react@18.2.0): + /@mui/base@5.0.0-beta.32(@types/react@18.0.17)(react-dom@18.2.0)(react@18.2.0): resolution: { - integrity: sha512-tr7xekNlM9LjA6pagJmL8QCgZXaubWUwkJnoYcMKd4gw/t4XiyvnTkjdGrUVicyB2BsdaAv1tvow45bPM4sSwQ==, + integrity: sha512-4VptvYeLUYMJhZapWBkD50GmKfOc0XT381KJcTK3ncZYIl8MdBhpR6l8jOyeP5cixUPBJhstjrnmQEAHjCLriw==, } - engines: { node: '>=8.0.0' } - deprecated: Material UI v4 doesn't receive active development since September 2021. See the guide https://mui.com/material-ui/migration/migration-v4/ to upgrade to v5. + engines: { node: '>=12.0.0' } peerDependencies: - '@types/react': ^16.8.6 || ^17.0.0 - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.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 dependencies: - '@babel/runtime': 7.22.6 - '@material-ui/styles': 4.11.5(@types/react@18.0.17)(react-dom@18.2.0)(react@18.2.0) - '@material-ui/system': 4.12.2(@types/react@18.0.17)(react-dom@18.2.0)(react@18.2.0) - '@material-ui/types': 5.1.0(@types/react@18.0.17) - '@material-ui/utils': 4.11.3(react-dom@18.2.0)(react@18.2.0) + '@babel/runtime': 7.23.8 + '@floating-ui/react-dom': 2.0.6(react-dom@18.2.0)(react@18.2.0) + '@mui/types': 7.2.13(@types/react@18.0.17) + '@mui/utils': 5.15.5(@types/react@18.0.17)(react@18.2.0) + '@popperjs/core': 2.11.8 '@types/react': 18.0.17 - '@types/react-transition-group': 4.4.10 - clsx: 1.2.1 - hoist-non-react-statics: 3.3.2 - popper.js: 1.16.1-lts + clsx: 2.1.0 prop-types: 15.8.1 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) - react-is: 17.0.2 - react-transition-group: 4.4.5(react-dom@18.2.0)(react@18.2.0) dev: false - /@material-ui/icons@4.11.3(@material-ui/core@4.12.4)(@types/react@18.0.17)(react-dom@18.2.0)(react@18.2.0): + /@mui/core-downloads-tracker@5.15.5: resolution: { - integrity: sha512-IKHlyx6LDh8n19vzwH5RtHIOHl9Tu90aAAxcbWME6kp4dmvODM3UvOHJeMIDzUbd4muuJKHmlNoBN+mDY4XkBA==, + integrity: sha512-VhT8klyXy8GrWrARqLMoM6Nzz809Jc3Wn5wd7WOZfre2vFO1rBV1dBANAPBhBqpaQI0HCMRTWEYoSyOFgRnz4A==, } - engines: { node: '>=8.0.0' } + dev: false + + /@mui/icons-material@5.15.5(@mui/material@5.15.5)(@types/react@18.0.17)(react@18.2.0): + resolution: + { + integrity: sha512-qiql0fd1JY7TZ1wm1RldvU7sL8QUatE9OC12i/qm5rnm/caTFyAfOyTIR7qqxorsJvoZGyrzwoMkal6Ij9kM0A==, + } + engines: { node: '>=12.0.0' } peerDependencies: - '@material-ui/core': ^4.0.0 - '@types/react': ^16.8.6 || ^17.0.0 - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 + '@mui/material': ^5.0.0 + '@types/react': ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 peerDependenciesMeta: '@types/react': optional: true dependencies: - '@babel/runtime': 7.22.6 - '@material-ui/core': 4.12.4(@types/react@18.0.17)(react-dom@18.2.0)(react@18.2.0) + '@babel/runtime': 7.23.8 + '@mui/material': 5.15.5(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@types/react@18.0.17)(react-dom@18.2.0)(react@18.2.0) '@types/react': 18.0.17 react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) dev: false - /@material-ui/styles@4.11.5(@types/react@18.0.17)(react-dom@18.2.0)(react@18.2.0): + /@mui/material@5.15.5(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@types/react@18.0.17)(react-dom@18.2.0)(react@18.2.0): resolution: { - integrity: sha512-o/41ot5JJiUsIETME9wVLAJrmIWL3j0R0Bj2kCOLbSfqEkKf0fmaPt+5vtblUh5eXr2S+J/8J3DaCb10+CzPGA==, + integrity: sha512-2KfA39f/UWeQl0O22UJs3x1nG3chYlyu9wnux5vTnxUTLzkgYIzQIHaH+ZOGpv5JiZBMKktAPNfhqyhSaQ49qQ==, } - engines: { node: '>=8.0.0' } - deprecated: Material UI v4 doesn't receive active development since September 2021. See the guide https://mui.com/material-ui/migration/migration-v4/ to upgrade to v5. + engines: { node: '>=12.0.0' } peerDependencies: - '@types/react': ^16.8.6 || ^17.0.0 - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 + '@emotion/react': ^11.5.0 + '@emotion/styled': ^11.3.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 dependencies: - '@babel/runtime': 7.22.6 - '@emotion/hash': 0.8.0 - '@material-ui/types': 5.1.0(@types/react@18.0.17) - '@material-ui/utils': 4.11.3(react-dom@18.2.0)(react@18.2.0) + '@babel/runtime': 7.23.8 + '@emotion/react': 11.11.3(@types/react@18.0.17)(react@18.2.0) + '@emotion/styled': 11.11.0(@emotion/react@11.11.3)(@types/react@18.0.17)(react@18.2.0) + '@mui/base': 5.0.0-beta.32(@types/react@18.0.17)(react-dom@18.2.0)(react@18.2.0) + '@mui/core-downloads-tracker': 5.15.5 + '@mui/system': 5.15.5(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@types/react@18.0.17)(react@18.2.0) + '@mui/types': 7.2.13(@types/react@18.0.17) + '@mui/utils': 5.15.5(@types/react@18.0.17)(react@18.2.0) '@types/react': 18.0.17 - clsx: 1.2.1 - csstype: 2.6.21 - hoist-non-react-statics: 3.3.2 - jss: 10.10.0 - jss-plugin-camel-case: 10.10.0 - jss-plugin-default-unit: 10.10.0 - jss-plugin-global: 10.10.0 - jss-plugin-nested: 10.10.0 - jss-plugin-props-sort: 10.10.0 - jss-plugin-rule-value-function: 10.10.0 - jss-plugin-vendor-prefixer: 10.10.0 + '@types/react-transition-group': 4.4.10 + clsx: 2.1.0 + csstype: 3.1.2 prop-types: 15.8.1 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) + react-is: 18.2.0 + react-transition-group: 4.4.5(react-dom@18.2.0)(react@18.2.0) dev: false - /@material-ui/system@4.12.2(@types/react@18.0.17)(react-dom@18.2.0)(react@18.2.0): + /@mui/private-theming@5.15.5(@types/react@18.0.17)(react@18.2.0): resolution: { - integrity: sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw==, + integrity: sha512-HU1KCyGNcJFsUamTbOM539ZDZJNI/XU7sZFdsN29glktUf+T6hNvDuO2ISinBiLTZy7Ab3R6DSSoYXRrLc4uwQ==, } - engines: { node: '>=8.0.0' } + engines: { node: '>=12.0.0' } peerDependencies: - '@types/react': ^16.8.6 || ^17.0.0 - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 + '@types/react': ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 peerDependenciesMeta: '@types/react': optional: true dependencies: - '@babel/runtime': 7.22.6 - '@material-ui/utils': 4.11.3(react-dom@18.2.0)(react@18.2.0) + '@babel/runtime': 7.23.8 + '@mui/utils': 5.15.5(@types/react@18.0.17)(react@18.2.0) '@types/react': 18.0.17 - csstype: 2.6.21 prop-types: 15.8.1 react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) dev: false - /@material-ui/types@5.1.0(@types/react@18.0.17): + /@mui/styled-engine@5.15.5(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react@18.2.0): resolution: { - integrity: sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==, + integrity: sha512-xoMUd8h270thNL7ZsOzmlluIAMsQg/HT7SCdRjPBVle+XHgTKaiWiRy1ekDOsrrF0rhjME3T7xeeUq2G269UUw==, } + engines: { node: '>=12.0.0' } peerDependencies: - '@types/react': '*' + '@emotion/react': ^11.4.1 + '@emotion/styled': ^11.3.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@emotion/react': + optional: true + '@emotion/styled': + optional: true + dependencies: + '@babel/runtime': 7.23.8 + '@emotion/cache': 11.11.0 + '@emotion/react': 11.11.3(@types/react@18.0.17)(react@18.2.0) + '@emotion/styled': 11.11.0(@emotion/react@11.11.3)(@types/react@18.0.17)(react@18.2.0) + csstype: 3.1.2 + prop-types: 15.8.1 + react: 18.2.0 + dev: false + + /@mui/system@5.15.5(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@types/react@18.0.17)(react@18.2.0): + resolution: + { + integrity: sha512-DMv2vGjUKaDt/m0RlzvLjpKiS5V0LoBhiMUHf5pWdj6uoNlN4FuKUe4pFeYmQMIO5DnVZKybmpPepfkdfEH+Og==, + } + engines: { node: '>=12.0.0' } + peerDependencies: + '@emotion/react': ^11.5.0 + '@emotion/styled': ^11.3.0 + '@types/react': ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 peerDependenciesMeta: + '@emotion/react': + optional: true + '@emotion/styled': + optional: true '@types/react': optional: true dependencies: + '@babel/runtime': 7.23.8 + '@emotion/react': 11.11.3(@types/react@18.0.17)(react@18.2.0) + '@emotion/styled': 11.11.0(@emotion/react@11.11.3)(@types/react@18.0.17)(react@18.2.0) + '@mui/private-theming': 5.15.5(@types/react@18.0.17)(react@18.2.0) + '@mui/styled-engine': 5.15.5(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react@18.2.0) + '@mui/types': 7.2.13(@types/react@18.0.17) + '@mui/utils': 5.15.5(@types/react@18.0.17)(react@18.2.0) '@types/react': 18.0.17 + clsx: 2.1.0 + csstype: 3.1.2 + prop-types: 15.8.1 + react: 18.2.0 dev: false - /@material-ui/utils@4.11.3(react-dom@18.2.0)(react@18.2.0): + /@mui/types@7.2.13(@types/react@18.0.17): resolution: { - integrity: sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==, + integrity: sha512-qP9OgacN62s+l8rdDhSFRe05HWtLLJ5TGclC9I1+tQngbssu0m2dmFZs+Px53AcOs9fD7TbYd4gc9AXzVqO/+g==, } - engines: { node: '>=8.0.0' } peerDependencies: - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 + '@types/react': ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true dependencies: - '@babel/runtime': 7.22.6 + '@types/react': 18.0.17 + dev: false + + /@mui/utils@5.15.5(@types/react@18.0.17)(react@18.2.0): + resolution: + { + integrity: sha512-jEywgaMGZWPSlVFO7ZZAyXxNeLmq5XBp5At9Ne/sGohRJdesUcdxvyi8TP3odJxwQuL5L6PJV+JQ4DyIDM849A==, + } + engines: { node: '>=12.0.0' } + peerDependencies: + '@types/react': ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.23.8 + '@types/prop-types': 15.7.11 + '@types/react': 18.0.17 prop-types: 15.8.1 react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - react-is: 17.0.2 + react-is: 18.2.0 dev: false /@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1: @@ -2958,6 +3217,13 @@ packages: fastq: 1.15.0 dev: true + /@popperjs/core@2.11.8: + resolution: + { + integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==, + } + dev: false + /@reduxjs/toolkit@1.8.4(react-redux@7.2.8)(react@18.2.0): resolution: { @@ -3388,7 +3654,6 @@ packages: { integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==, } - dev: true /@types/parse5@6.0.3: resolution: @@ -3404,6 +3669,13 @@ packages: } dev: true + /@types/prop-types@15.7.11: + resolution: + { + integrity: sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==, + } + dev: false + /@types/prop-types@15.7.5: resolution: { @@ -3942,7 +4214,6 @@ packages: engines: { node: '>=4' } dependencies: color-convert: 1.9.3 - dev: true /ansi-styles@4.3.0: resolution: @@ -4257,7 +4528,6 @@ packages: '@babel/runtime': 7.22.6 cosmiconfig: 7.1.0 resolve: 1.22.2 - dev: true /babel-plugin-polyfill-corejs2@0.4.5(@babel/core@7.22.9): resolution: @@ -4532,7 +4802,6 @@ packages: integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==, } engines: { node: '>=6' } - dev: true /camelcase-css@2.0.1: resolution: @@ -4587,7 +4856,6 @@ packages: ansi-styles: 3.2.1 escape-string-regexp: 1.0.5 supports-color: 5.5.0 - dev: true /chalk@3.0.0: resolution: @@ -4735,14 +5003,6 @@ packages: engines: { node: '>=0.8' } dev: true - /clsx@1.2.1: - resolution: - { - integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==, - } - engines: { node: '>=6' } - dev: false - /clsx@2.1.0: resolution: { @@ -4773,7 +5033,6 @@ packages: } dependencies: color-name: 1.1.3 - dev: true /color-convert@2.0.1: resolution: @@ -4790,7 +5049,6 @@ packages: { integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==, } - dev: true /color-name@1.1.4: resolution: @@ -4906,7 +5164,6 @@ packages: { integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==, } - dev: true /core-js-compat@3.32.0: resolution: @@ -4947,7 +5204,6 @@ packages: parse-json: 5.2.0 path-type: 4.0.0 yaml: 1.10.2 - dev: true /cosmiconfig@8.2.0: resolution: @@ -5016,16 +5272,6 @@ packages: nth-check: 2.1.1 dev: true - /css-vendor@2.0.8: - resolution: - { - integrity: sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==, - } - dependencies: - '@babel/runtime': 7.22.6 - is-in-browser: 1.1.3 - dev: false - /css-what@6.1.0: resolution: { @@ -5074,13 +5320,6 @@ packages: cssom: 0.3.8 dev: true - /csstype@2.6.21: - resolution: - { - integrity: sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==, - } - dev: false - /csstype@3.1.2: resolution: { @@ -5384,7 +5623,7 @@ packages: integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==, } dependencies: - '@babel/runtime': 7.22.6 + '@babel/runtime': 7.23.8 csstype: 3.1.2 dev: false @@ -5491,7 +5730,6 @@ packages: } dependencies: is-arrayish: 0.2.1 - dev: true /es-abstract@1.22.1: resolution: @@ -5884,7 +6122,6 @@ packages: integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==, } engines: { node: '>=0.8.0' } - dev: true /escape-string-regexp@2.0.0: resolution: @@ -5900,7 +6137,6 @@ packages: integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==, } engines: { node: '>=10' } - dev: true /escodegen@2.1.0: resolution: @@ -6552,7 +6788,6 @@ packages: { integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==, } - dev: true /find-up@4.1.0: resolution: @@ -6695,7 +6930,6 @@ packages: { integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==, } - dev: true /function.prototype.name@1.1.5: resolution: @@ -6994,7 +7228,6 @@ packages: integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==, } engines: { node: '>=4' } - dev: true /has-flag@4.0.0: resolution: @@ -7047,7 +7280,6 @@ packages: engines: { node: '>= 0.4.0' } dependencies: function-bind: 1.1.1 - dev: true /hoist-non-react-statics@3.3.2: resolution: @@ -7156,13 +7388,6 @@ packages: engines: { node: '>=10.17.0' } dev: true - /hyphenate-style-name@1.0.4: - resolution: - { - integrity: sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==, - } - dev: false - /iconv-lite@0.4.24: resolution: { @@ -7224,7 +7449,6 @@ packages: dependencies: parent-module: 1.0.1 resolve-from: 4.0.0 - dev: true /import-lazy@4.0.0: resolution: @@ -7357,7 +7581,6 @@ packages: { integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==, } - dev: true /is-bigint@1.0.4: resolution: @@ -7404,7 +7627,6 @@ packages: } dependencies: has: 1.0.3 - dev: true /is-date-object@1.0.5: resolution: @@ -7450,13 +7672,6 @@ packages: is-extglob: 2.1.1 dev: true - /is-in-browser@1.1.3: - resolution: - { - integrity: sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g==, - } - dev: false - /is-interactive@1.0.0: resolution: { @@ -8357,7 +8572,6 @@ packages: { integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==, } - dev: true /json-schema-traverse@0.4.1: resolution: @@ -8418,92 +8632,6 @@ packages: engines: { '0': node >= 0.2.0 } dev: true - /jss-plugin-camel-case@10.10.0: - resolution: - { - integrity: sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==, - } - dependencies: - '@babel/runtime': 7.22.6 - hyphenate-style-name: 1.0.4 - jss: 10.10.0 - dev: false - - /jss-plugin-default-unit@10.10.0: - resolution: - { - integrity: sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ==, - } - dependencies: - '@babel/runtime': 7.22.6 - jss: 10.10.0 - dev: false - - /jss-plugin-global@10.10.0: - resolution: - { - integrity: sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==, - } - dependencies: - '@babel/runtime': 7.22.6 - jss: 10.10.0 - dev: false - - /jss-plugin-nested@10.10.0: - resolution: - { - integrity: sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA==, - } - dependencies: - '@babel/runtime': 7.22.6 - jss: 10.10.0 - tiny-warning: 1.0.3 - dev: false - - /jss-plugin-props-sort@10.10.0: - resolution: - { - integrity: sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg==, - } - dependencies: - '@babel/runtime': 7.22.6 - 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.6 - jss: 10.10.0 - tiny-warning: 1.0.3 - dev: false - - /jss-plugin-vendor-prefixer@10.10.0: - resolution: - { - integrity: sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg==, - } - dependencies: - '@babel/runtime': 7.22.6 - css-vendor: 2.0.8 - jss: 10.10.0 - dev: false - - /jss@10.10.0: - resolution: - { - integrity: sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==, - } - dependencies: - '@babel/runtime': 7.22.6 - csstype: 3.1.2 - is-in-browser: 1.1.3 - tiny-warning: 1.0.3 - dev: false - /jsx-ast-utils@3.3.5: resolution: { @@ -8588,7 +8716,6 @@ packages: { integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==, } - dev: true /load-json-file@4.0.0: resolution: @@ -9393,7 +9520,6 @@ packages: engines: { node: '>=6' } dependencies: callsites: 3.1.0 - dev: true /parse-json@4.0.0: resolution: @@ -9417,7 +9543,6 @@ packages: error-ex: 1.3.2 json-parse-even-better-errors: 2.3.1 lines-and-columns: 1.2.4 - dev: true /parse-passwd@1.0.0: resolution: @@ -9490,7 +9615,6 @@ packages: { integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==, } - dev: true /path-type@3.0.0: resolution: @@ -9508,7 +9632,6 @@ packages: integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==, } engines: { node: '>=8' } - dev: true /picocolors@1.0.0: resolution: @@ -9568,13 +9691,6 @@ packages: find-up: 4.1.0 dev: true - /popper.js@1.16.1-lts: - resolution: - { - integrity: sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==, - } - dev: false - /postcss-import@14.1.0(postcss@8.4.16): resolution: { @@ -9848,7 +9964,6 @@ packages: { integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==, } - dev: true /react-redux@7.2.8(react-dom@18.2.0)(react@18.2.0): resolution: @@ -9892,7 +10007,7 @@ packages: react: '>=16.6.0' react-dom: '>=16.6.0' dependencies: - '@babel/runtime': 7.22.6 + '@babel/runtime': 7.23.8 dom-helpers: 5.2.1 loose-envify: 1.4.0 prop-types: 15.8.1 @@ -10048,6 +10163,13 @@ packages: integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==, } + /regenerator-runtime@0.14.1: + resolution: + { + integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==, + } + dev: false + /regenerator-transform@0.15.1: resolution: { @@ -10159,7 +10281,6 @@ packages: integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==, } engines: { node: '>=4' } - dev: true /resolve-from@5.0.0: resolution: @@ -10197,7 +10318,6 @@ packages: is-core-module: 2.12.1 path-parse: 1.0.7 supports-preserve-symlinks-flag: 1.0.0 - dev: true /resolve@1.22.3: resolution: @@ -10498,6 +10618,14 @@ packages: source-map: 0.6.1 dev: true + /source-map@0.5.7: + resolution: + { + integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==, + } + engines: { node: '>=0.10.0' } + dev: false + /source-map@0.6.1: resolution: { @@ -10838,6 +10966,13 @@ packages: - supports-color dev: true + /stylis@4.2.0: + resolution: + { + integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==, + } + dev: false + /supports-color@5.5.0: resolution: { @@ -10846,7 +10981,6 @@ packages: engines: { node: '>=4' } dependencies: has-flag: 3.0.0 - dev: true /supports-color@7.2.0: resolution: @@ -10885,7 +11019,6 @@ packages: integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==, } engines: { node: '>= 0.4' } - dev: true /svg-tags@1.0.0: resolution: @@ -11005,13 +11138,6 @@ packages: } dev: true - /tiny-warning@1.0.3: - resolution: - { - integrity: sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==, - } - dev: false - /tmp@0.0.33: resolution: { @@ -11035,7 +11161,6 @@ packages: integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==, } engines: { node: '>=4' } - dev: true /to-regex-range@5.0.1: resolution: @@ -11736,7 +11861,6 @@ packages: integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==, } engines: { node: '>= 6' } - dev: true /yargs-parser@20.2.9: resolution: diff --git a/src/components/buttons/loginButton.tsx b/src/components/buttons/loginButton.tsx new file mode 100644 index 0000000..f32460d --- /dev/null +++ b/src/components/buttons/loginButton.tsx @@ -0,0 +1,61 @@ +import * as React from 'react'; +import Button, { ButtonProps } from '@mui/material/Button'; +import { purple } from '@mui/material/colors'; +import Stack from '@mui/material/Stack'; +import { styled } from '@mui/material/styles'; + +export const NextButton = styled(Button)({ + boxShadow: 'none', + textTransform: 'none', + fontSize: 16, + fontWeight: 'bold', + padding: '10px 94px', + borderRadius: '50px', + lineHeight: 1.5, + backgroundColor: '#9A6CF9', + borderColor: '#9A6CF9', + fontFamily: [ + '-apple-system', + 'BlinkMacSystemFont', + '"Segoe UI"', + 'Roboto', + '"Helvetica Neue"', + 'Arial', + 'sans-serif', + '"Apple Color Emoji"', + '"Segoe UI Emoji"', + '"Segoe UI Symbol"', + ].join(','), + '&:hover': { + backgroundColor: '#B08DF6', + borderColor: '#B08DF6', + boxShadow: 'none', + }, + '&:active': { + boxShadow: 'none', + backgroundColor: '#9C70F4', + borderColor: '#9C70F4', + }, + '&:focus': { + boxShadow: '0 0 0 0.2rem rgba(0,123,255,.5)', + }, +}); + +export const ColorButton = styled(Button)(({ theme }) => ({ + color: theme.palette.getContrastText(purple[500]), + backgroundColor: purple[500], + '&:hover': { + backgroundColor: purple[700], + }, +})); + +export default function CustomizedButtons() { + return ( + + Custom CSS + + Bootstrap + + + ); +} diff --git a/src/content/Content.tsx b/src/content/Content.tsx index 7a5bab4..b284d63 100644 --- a/src/content/Content.tsx +++ b/src/content/Content.tsx @@ -8,7 +8,7 @@ const Content = (): ReactElement => { style={{ position: 'fixed', zIndex: 999, - bottom: 0, + top: 0, right: 0, }} > diff --git a/src/content/drawer/index.tsx b/src/content/drawer/index.tsx index 6475521..6bdb9b8 100644 --- a/src/content/drawer/index.tsx +++ b/src/content/drawer/index.tsx @@ -1,85 +1,55 @@ -import React from 'react'; -import Divider from '@material-ui/core/Divider'; -import Drawer from '@material-ui/core/Drawer'; -import IconButton from '@material-ui/core/IconButton'; -import List from '@material-ui/core/List'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemIcon from '@material-ui/core/ListItemIcon'; -import ListItemText from '@material-ui/core/ListItemText'; -import { createStyles, makeStyles, Theme, useTheme } from '@material-ui/core/styles'; -import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'; -import ChevronRightIcon from '@material-ui/icons/ChevronRight'; -import MailIcon from '@material-ui/icons/Mail'; -import MenuIcon from '@material-ui/icons/Menu'; -import InboxIcon from '@material-ui/icons/MoveToInbox'; -import clsx from 'clsx'; +import * as React from 'react'; +import ChevronRightIcon from '@mui/icons-material/ChevronRight'; +import MenuIcon from '@mui/icons-material/Menu'; +import Box from '@mui/material/Box'; +import Divider from '@mui/material/Divider'; +import Drawer from '@mui/material/Drawer'; +import IconButton from '@mui/material/IconButton'; +import { styled } from '@mui/material/styles'; -import { Counter } from '../features/counter/Counter'; +import InvitePage from '../loginPage/invitePage'; +import SignInWithXPage from '../loginPage/signInWithXPage'; -const drawerWidth = 340; +import '../../tailwind.css'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - display: 'flex', - }, - appBar: { - transition: theme.transitions.create(['margin', 'width'], { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.leavingScreen, - }), - }, - appBarShift: { - width: `calc(100% - ${drawerWidth}px)`, - transition: theme.transitions.create(['margin', 'width'], { - easing: theme.transitions.easing.easeOut, - duration: theme.transitions.duration.enteringScreen, - }), - marginRight: drawerWidth, - }, - title: { - flexGrow: 1, - }, - hide: { - display: 'none', - }, - drawer: { - width: drawerWidth, - flexShrink: 0, - }, - drawerPaper: { - width: drawerWidth, - }, - drawerHeader: { - display: 'flex', - alignItems: 'center', - padding: theme.spacing(0, 1), - // necessary for content to be below app bar - ...theme.mixins.toolbar, - justifyContent: 'flex-start', - }, - content: { - flexGrow: 1, - padding: theme.spacing(3), - transition: theme.transitions.create('margin', { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.leavingScreen, - }), - marginRight: -drawerWidth, - }, - contentShift: { - transition: theme.transitions.create('margin', { - easing: theme.transitions.easing.easeOut, - duration: theme.transitions.duration.enteringScreen, - }), - marginRight: 0, - }, - }) -); +const drawerWidth = 463; + +const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })<{ + open?: boolean; +}>(({ theme, open }) => ({ + // flexGrow: 1, + // padding: theme.spacing(3), + transition: theme.transitions.create('margin', { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + marginRight: -drawerWidth, + ...(open && { + transition: theme.transitions.create('margin', { + easing: theme.transitions.easing.easeOut, + duration: theme.transitions.duration.enteringScreen, + }), + marginRight: 0, + }), + /** + * This is necessary to enable the selection of content. In the DOM, the stacking order is determined + * by the order of appearance. Following this rule, elements appearing later in the markup will overlay + * those that appear earlier. Since the Drawer comes after the Main content, this adjustment ensures + * proper interaction with the underlying content. + */ + position: 'relative', +})); + +const DrawerHeader = styled('div')(({ theme }) => ({ + display: 'flex', + alignItems: 'center', + padding: theme.spacing(0, 1), + // necessary for content to be below app bar + ...theme.mixins.toolbar, + justifyContent: 'flex-start', +})); export default function PersistentDrawerRight() { - const classes = useStyles(); - const theme = useTheme(); const [open, setOpen] = React.useState(false); const handleDrawerOpen = () => { @@ -90,59 +60,49 @@ export default function PersistentDrawerRight() { setOpen(false); }; + const [pageState, setPageState] = React.useState('login'); + return ( -
+ - + -
-
-
+
+ +
-
- - {theme.direction === 'rtl' ? : } - +
+
+ +
+ + {pageState === 'login' && ( + setPageState('invite')} /> + )} + {pageState === 'invite' && ( + setPageState('invite')} /> + )}
- - - - - {['Inbox', 'Starred', 'Send email'].map((text, index) => ( - - {index % 2 === 0 ? : } - - - ))} - - - {['All mail', 'Trash', 'Spam'].map((text, index) => ( - - {index % 2 === 0 ? : } - - - ))} - -
+ ); } diff --git a/src/content/index.tsx b/src/content/index.tsx index 62c464e..5b93932 100644 --- a/src/content/index.tsx +++ b/src/content/index.tsx @@ -43,7 +43,7 @@ withProxyStore(, store).then((component) => { }); // 开始观察 thirdElement 的子元素 - observer.observe(thirdElement, { childList: true }); + // observer.observe(thirdElement, { childList: true }); // 现有元素的处理逻辑 const targetElements = thirdElement.querySelectorAll('section > div > div > div'); diff --git a/src/content/loginPage/invitePage.tsx b/src/content/loginPage/invitePage.tsx new file mode 100644 index 0000000..0672df5 --- /dev/null +++ b/src/content/loginPage/invitePage.tsx @@ -0,0 +1,72 @@ +import React, { FC, useState } from 'react'; +import { styled } from '@mui/material/styles'; +import TextField from '@mui/material/TextField'; + +import { NextButton } from '../../components/buttons/loginButton'; + +import '../../tailwind.css'; + +const InviteCodeInput = styled(TextField)({ + width: '302px', + '& label.Mui-focused': { + color: '#A0AAB4', + }, + '& .MuiInput-underline:after': { + borderBottomColor: '#B2BAC2', + }, + '& .MuiOutlinedInput-root': { + '& fieldset': { + borderColor: '#E0E3E7', + borderRadius: '12px', + }, + '&:hover fieldset': { + borderColor: '#B2BAC2', + borderRadius: '12px', + }, + '&.Mui-focused fieldset': { + borderColor: '#6F7E8C', + borderRadius: '12px', + }, + }, +}); + +interface InvitePageProps { + handleButtonClick: (inviteCode: string) => void; // 修改函数类型以接收邀请码作为参数 +} + +const InvitePage: FC = ({ handleButtonClick }) => { + const [inviteCode, setInviteCode] = useState(''); // 添加状态来存储邀请码 + + const handleNextButtonClick = () => { + // 在点击事件中获取输入值并调用传入的函数 + if (inviteCode.trim() !== '') { + handleButtonClick(inviteCode); // 传递邀请码给父组件的函数 + } else { + // 如果邀请码为空，可以在这里添加提示或者错误处理 + alert('Invite code is required.'); + } + }; + return ( +
+

+ Invite Code +

+

+ To complete the registration you need to enter an invitation code, we released a small + number of invitation codes during the beta period, see our tweets +

+ setInviteCode(e.target.value)} + label="Please enter the invitation code" + id="custom-css-outlined-input" + /> +
+ + Next + +
+ ); +}; + +export default InvitePage; diff --git a/src/content/loginPage/signInWithXPage.tsx b/src/content/loginPage/signInWithXPage.tsx new file mode 100644 index 0000000..d8bf2a9 --- /dev/null +++ b/src/content/loginPage/signInWithXPage.tsx @@ -0,0 +1,57 @@ +import React, { FC } from 'react'; + +import { NextButton } from '../../components/buttons/loginButton'; + +import '../../tailwind.css'; + +interface SignInWithXPageProps { + handleButtonClick: () => void; // 定义一个函数类型的属性 +} + +const SignInWithXPage: FC = ({ handleButtonClick }) => { + return ( +
+ + + + + + + + +

+ Log in to your account +

+

+ Grow with Creators, Win Wealth Together. +

+ + Sign in with X + +
+ ); +}; + +export default SignInWithXPage; diff --git a/src/manifest.ts b/src/manifest.ts index bf62d40..a8bee23 100644 --- a/src/manifest.ts +++ b/src/manifest.ts @@ -25,7 +25,7 @@ const manifest: ManifestV3Export = { // this file is web accessible; it supports HMR b/c it's declared in `rollupOptions.input` 'src/welcome/welcome.html', ], - matches: [''], + matches: ['https://twitter.com/*', 'https://x.com/*'], }, ], action: {