diff --git a/package.json b/package.json index be8555c6a..60e6fc99d 100644 --- a/package.json +++ b/package.json @@ -23,12 +23,11 @@ "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@hookform/resolvers": "^2.8.1", - "@material-ui/core": "^4.11.3", - "@material-ui/icons": "^4.9.1", - "@material-ui/lab": "^4.0.0-alpha.57", "@microsoft/signalr": "^5.0.9", - "@mui/icons-material": "^5.14.14", - "@mui/material": "^5.14.14", + "@mui/icons-material": "^6.5.0", + "@mui/lab": "6.0.1-beta.36", + "@mui/material": "^6.5.0", + "@mui/styles": "^6.5.0", "@tanstack/react-query": "^5.100.10", "@taquito/beacon-wallet": "^24.3.0", "@taquito/signer": "^24.3.0", @@ -54,14 +53,14 @@ "export-to-csv": "^1.2.4", "firebase": "11.10.0", "formik": "^2.2.6", - "formik-material-ui": "^3.0.1", + "formik-mui": "^5.0.0-alpha.1", "graphql": "^15.10.2", "graphql-request": "^3.4.0", "hex-to-rgba": "^2.0.1", "html-react-parser": "^5.2.17", "https-browserify": "^1.0.0", "jsonschema": "^1.4.0", - "notistack": "^1.0.3", + "notistack": "^3.0.2", "numbro": "^2.4.0", "os-browserify": "^0.3.0", "posthog-js": "^1.373.4", diff --git a/src/App.tsx b/src/App.tsx index 5be886b9e..c927755a0 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,8 +3,8 @@ import "App.css" import { BrowserRouter as Router, Redirect, Route, Switch } from "react-router-dom" import { QueryClient, QueryClientProvider } from "@tanstack/react-query" -import { Box, ThemeProvider, styled } from "@material-ui/core" -import { SnackbarProvider } from "notistack" +import { Box, ThemeProvider, Theme, StyledEngineProvider, styled } from "@mui/material" +import { SnackbarProvider, MaterialDesignContent } from "notistack" import { DAOExplorerRouter } from "modules/explorer/router" import { CreatorProvider } from "modules/creator/state" @@ -23,6 +23,11 @@ import { DAOCreatorRouter } from "modules/creator/router" import { CommunityCreator } from "modules/lite/creator" import { EtherlinkDAOCreatorRouter } from "modules/etherlink/router" +declare module "@mui/styles/defaultTheme" { + // eslint-disable-next-line @typescript-eslint/no-empty-interface + interface DefaultTheme extends Theme {} +} + const queryClient = new QueryClient({ defaultOptions: { queries: { @@ -37,31 +42,41 @@ const queryClient = new QueryClient({ } }) -const SuccessSnackbar = styled("div")({ - backgroundColor: "#4BCF93 !important", +// notistack v3 moved per-variant styling from `classes.variantX` to the +// `Components` prop with styled MaterialDesignContent. +const snackbarVariantStyle = { padding: "6px 28px", height: 54, fontSize: 13, lineHeight: "0px", opacity: 1 +} + +const SuccessSnackbar = styled(MaterialDesignContent)({ + "&.notistack-MuiContent-success": { + backgroundColor: "#4BCF93 !important", + ...snackbarVariantStyle + } }) -const ErrorSnackbar = styled("div")({ - backgroundColor: "#ED254E !important", - padding: "6px 28px", - height: 54, - fontSize: 13, - lineHeight: "0px", - opacity: 1 +const ErrorSnackbar = styled(MaterialDesignContent)({ + "&.notistack-MuiContent-error": { + backgroundColor: "#ED254E !important", + ...snackbarVariantStyle + } }) -const InfoSnackbar = styled("div")({ - backgroundColor: "#3866F9 !important", - padding: "6px 28px", - height: 54, - fontSize: 13, - lineHeight: "0px", - opacity: 1 +const InfoSnackbar = styled(MaterialDesignContent)({ + "&.notistack-MuiContent-info": { + backgroundColor: "#3866F9 !important", + ...snackbarVariantStyle + } +}) + +// notistack v3 dropped the top-level `style` prop; the container z-index +// is now applied through the `containerRoot` class. +const SnackbarContainer = styled("div")({ + zIndex: 1000003 }) // PostHog tracking is now handled globally via PostHogProvider in index.tsx @@ -69,75 +84,87 @@ const InfoSnackbar = styled("div")({ const App: React.FC = () => { return ( - - - - - - - - - - - - - - - - - - - - {/* */} - - - - - - - - - - + + + + {/* */} + + + + + + + + + + + + + + + + + + + + + + {/* */} + + + + + + + + + + + + - {window.location.href.indexOf(HUMANITEZ_DAO) !== -1 ? ( - <> - {/* Special case for this DAO which was created before FA1.2 fix was created for the smart contract */} - - - ) : null} - - - - - - - - - - - - - + {window.location.href.indexOf(HUMANITEZ_DAO) !== -1 ? ( + <> + {/* Special case for this DAO which was created before FA1.2 fix was created for the smart contract */} + + + ) : null} + + + + + + + + + + + + {/* */} + + + ) } diff --git a/src/components/ui/Badge.tsx b/src/components/ui/Badge.tsx index dc535e2c3..e6f162c85 100644 --- a/src/components/ui/Badge.tsx +++ b/src/components/ui/Badge.tsx @@ -1,6 +1,6 @@ import React from "react" -import { Grid, GridProps, Typography } from "@material-ui/core" -import { styled, Theme } from "@material-ui/core/styles" +import { Grid, GridProps, Typography } from "@mui/material" +import { styled, Theme } from "@mui/material/styles" import hexToRgba from "hex-to-rgba" import { theme } from "theme" diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx index 92d1e735c..614c52b39 100644 --- a/src/components/ui/Button.tsx +++ b/src/components/ui/Button.tsx @@ -1,4 +1,4 @@ -import { styled, Button as MaterialButton } from "@material-ui/core" +import { styled, Button as MaterialButton } from "@mui/material" export const Button = styled(MaterialButton)(({ theme }) => ({ "fontSize": "14px", diff --git a/src/components/ui/ConfigProposalForm.tsx b/src/components/ui/ConfigProposalForm.tsx index 70792371a..128a44fa8 100644 --- a/src/components/ui/ConfigProposalForm.tsx +++ b/src/components/ui/ConfigProposalForm.tsx @@ -1,5 +1,5 @@ -import { Grid, Typography, styled, CircularProgress } from "@material-ui/core" -import { CheckOutlined } from "@material-ui/icons" +import { Grid, Typography, styled, CircularProgress } from "@mui/material" +import { CheckOutlined } from "@mui/icons-material" const StyledRow = styled(Grid)({ marginTop: 30 diff --git a/src/components/ui/Containers.tsx b/src/components/ui/Containers.tsx index 3b7f1d832..48570fa2a 100644 --- a/src/components/ui/Containers.tsx +++ b/src/components/ui/Containers.tsx @@ -1,4 +1,4 @@ -import { Grid, Typography, styled } from "@material-ui/core" +import { Grid, Typography, styled } from "@mui/material" const LoaderContainer = styled(Grid)({ paddingTop: 40, diff --git a/src/components/ui/ContentContainer.tsx b/src/components/ui/ContentContainer.tsx index 1cb088d12..a53734157 100644 --- a/src/components/ui/ContentContainer.tsx +++ b/src/components/ui/ContentContainer.tsx @@ -1,4 +1,4 @@ -import { styled, Grid } from "@material-ui/core" +import { styled, Grid } from "@mui/material" export const ContentContainer = styled(Grid)(({ theme }) => ({ borderRadius: 8, diff --git a/src/components/ui/CopyButton.tsx b/src/components/ui/CopyButton.tsx index c1d5ec525..be1b48241 100644 --- a/src/components/ui/CopyButton.tsx +++ b/src/components/ui/CopyButton.tsx @@ -1,5 +1,5 @@ import React, { useState } from "react" -import { Box, Tooltip, styled } from "@material-ui/core" +import { Box, Tooltip, styled } from "@mui/material" import { ReactComponent as CopyIcon } from "assets/img/copy_icon.svg" const TooltipButton = styled(Tooltip)({ diff --git a/src/components/ui/DaoCreator.tsx b/src/components/ui/DaoCreator.tsx index b961cbeef..436f4a3c5 100644 --- a/src/components/ui/DaoCreator.tsx +++ b/src/components/ui/DaoCreator.tsx @@ -1,6 +1,8 @@ -import { Grid, Paper, Stepper, TextareaAutosize, Typography, styled, withStyles, withTheme } from "@material-ui/core" -import InfoRounded from "@material-ui/icons/InfoRounded" -import { TextField as FormikTextField } from "formik-material-ui" +import { Grid, Paper, Stepper, TextareaAutosize, Typography, styled } from "@mui/material" +import withStyles from "@mui/styles/withStyles" +import withTheme from "@mui/styles/withTheme" +import InfoRounded from "@mui/icons-material/InfoRounded" +import { TextField as FormikTextField } from "formik-mui" export const PageContainer = styled(Grid)(({ theme }) => ({ background: theme.palette.primary.main diff --git a/src/components/ui/DaoExplorer.tsx b/src/components/ui/DaoExplorer.tsx index 40423ef03..4a519aaa7 100644 --- a/src/components/ui/DaoExplorer.tsx +++ b/src/components/ui/DaoExplorer.tsx @@ -1,4 +1,4 @@ -import { styled } from "@material-ui/core" +import { styled } from "@mui/material" const PageLayout = styled("div")(({ theme }) => ({ background: theme.palette.primary.dark, diff --git a/src/components/ui/FormSelect.tsx b/src/components/ui/FormSelect.tsx index 7483c17e9..db9a1f5cc 100644 --- a/src/components/ui/FormSelect.tsx +++ b/src/components/ui/FormSelect.tsx @@ -1,5 +1,5 @@ import React from "react" -import { TextField, TextFieldProps } from "@material-ui/core" +import { TextField, TextFieldProps } from "@mui/material" type Props = Omit & { native?: boolean diff --git a/src/components/ui/FormTextField.tsx b/src/components/ui/FormTextField.tsx index c417c5e5e..1e5712f91 100644 --- a/src/components/ui/FormTextField.tsx +++ b/src/components/ui/FormTextField.tsx @@ -1,5 +1,5 @@ import React from "react" -import { TextField, TextFieldProps } from "@material-ui/core" +import { TextField, TextFieldProps } from "@mui/material" type Props = TextFieldProps & { // Reserved for future variants if needed diff --git a/src/components/ui/HeroContainer.tsx b/src/components/ui/HeroContainer.tsx index acc927a2a..8d06e9d8b 100644 --- a/src/components/ui/HeroContainer.tsx +++ b/src/components/ui/HeroContainer.tsx @@ -1,9 +1,9 @@ -import { styled } from "@material-ui/core" +import { styled } from "@mui/material" import { ContentContainer } from "./ContentContainer" export const HeroContainer = styled(ContentContainer)(({ theme }) => ({ padding: 38, - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down("lg")]: { width: "inherit" } })) diff --git a/src/components/ui/InputText.tsx b/src/components/ui/InputText.tsx index ac8852600..9258ac815 100644 --- a/src/components/ui/InputText.tsx +++ b/src/components/ui/InputText.tsx @@ -1,5 +1,5 @@ -import { withStyles } from "@material-ui/core" -import { TextField } from "@material-ui/core" +import withStyles from "@mui/styles/withStyles" +import { TextField } from "@mui/material" const InputText = withStyles(theme => ({ root: { diff --git a/src/components/ui/LinearProgress.tsx b/src/components/ui/LinearProgress.tsx index 331b85f15..ee94907d5 100644 --- a/src/components/ui/LinearProgress.tsx +++ b/src/components/ui/LinearProgress.tsx @@ -1,5 +1,5 @@ -import { Theme, LinearProgress as MuiLinearProgress } from "@material-ui/core" -import { withStyles } from "@material-ui/core/styles" +import { Theme, LinearProgress as MuiLinearProgress } from "@mui/material" +import withStyles from "@mui/styles/withStyles" const StyledLinearProgress = withStyles((theme: Theme) => ({ root: (props: { variant: "success" | "error" }) => ({ diff --git a/src/components/ui/LoadingLine.tsx b/src/components/ui/LoadingLine.tsx index f367817ee..8daee7337 100644 --- a/src/components/ui/LoadingLine.tsx +++ b/src/components/ui/LoadingLine.tsx @@ -1,5 +1,7 @@ import React from "react" -import { makeStyles, Theme } from "@material-ui/core/styles" +import { Theme } from "@mui/material/styles" + +import makeStyles from "@mui/styles/makeStyles" interface LoadingLineProps { color?: string diff --git a/src/components/ui/NextButton.tsx b/src/components/ui/NextButton.tsx index b4950ac31..84df502d0 100644 --- a/src/components/ui/NextButton.tsx +++ b/src/components/ui/NextButton.tsx @@ -1,5 +1,5 @@ import { MainButton } from "modules/common/MainButton" -import { styled } from "@material-ui/core" +import { styled } from "@mui/material" export const NextButton = styled(MainButton)(({ theme }) => ({ textAlign: "center", diff --git a/src/components/ui/NumberInput.tsx b/src/components/ui/NumberInput.tsx index 03d31b9b4..da2b2e78c 100644 --- a/src/components/ui/NumberInput.tsx +++ b/src/components/ui/NumberInput.tsx @@ -1,6 +1,6 @@ import React, { useState, useEffect } from "react" import { StyledTextField } from "./StyledTextField" -import { TextFieldProps } from "@material-ui/core" +import { TextFieldProps } from "@mui/material" interface NumberInputProps extends Omit { value: number diff --git a/src/components/ui/OffchainVotes/OffchainVotesLayout.tsx b/src/components/ui/OffchainVotes/OffchainVotesLayout.tsx index 35c5c8202..c9663baea 100644 --- a/src/components/ui/OffchainVotes/OffchainVotesLayout.tsx +++ b/src/components/ui/OffchainVotes/OffchainVotesLayout.tsx @@ -24,7 +24,7 @@ const TitleContainer = styled(Grid)(({ theme }) => ({ borderRadius: 8, marginTop: 20, gap: 32, - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down("lg")]: { padding: "18px 25px" } })) @@ -55,7 +55,7 @@ export const OffchainVotesLayout: React.FC<{ onOpenVotes?: () => void }> = ({ header = "Votes", items, totalLabelLeft = "Total Votes:", totalValue = "", rightExtras, onOpenVotes }) => { const theme = useTheme() - const isMobileSmall = useMediaQuery(theme.breakpoints.down("xs")) + const isMobileSmall = useMediaQuery(theme.breakpoints.down("md")) const total = typeof totalValue === "number" ? totalValue : Number(totalValue || 0) diff --git a/src/components/ui/ProposalsShell/index.tsx b/src/components/ui/ProposalsShell/index.tsx index dcfd51dc3..63f867df4 100644 --- a/src/components/ui/ProposalsShell/index.tsx +++ b/src/components/ui/ProposalsShell/index.tsx @@ -1,5 +1,5 @@ import React from "react" -import { Button, Grid, Theme, Typography, styled, useMediaQuery, useTheme } from "@material-ui/core" +import { Button, Grid, Theme, Typography, styled, useMediaQuery, useTheme } from "@mui/material" import { ContentContainer } from "components/ui/Table" import { TitleText } from "components/ui/TitleText" import FilterAltIcon from "@mui/icons-material/FilterAlt" @@ -19,7 +19,7 @@ const TabsBox = styled(Grid)(({ theme }) => ({ padding: "40px 56px", minHeight: 300, width: "100%", - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down("lg")]: { padding: "30px 36px" } })) @@ -83,7 +83,7 @@ export const ProposalsShell: React.FC = ({ showOffchainTab = true }) => { const theme = useTheme() - const isMobileSmall = useMediaQuery(theme.breakpoints.down("xs")) + const isMobileSmall = useMediaQuery(theme.breakpoints.down("md")) const resolvedSubtitle = React.useMemo(() => { if (showOffchainTab) return subtitle diff --git a/src/components/ui/StatusButton.tsx b/src/components/ui/StatusButton.tsx index 6ba56a65a..2e50791dc 100644 --- a/src/components/ui/StatusButton.tsx +++ b/src/components/ui/StatusButton.tsx @@ -1,4 +1,4 @@ -import { Grid, styled } from "@material-ui/core" +import { Grid, styled } from "@mui/material" const StatusButton = styled(Grid)(({ theme }) => ({ "background": theme.palette.primary.main, diff --git a/src/components/ui/StyledAvatar.tsx b/src/components/ui/StyledAvatar.tsx index 10b5199c0..f0389c8a7 100644 --- a/src/components/ui/StyledAvatar.tsx +++ b/src/components/ui/StyledAvatar.tsx @@ -1,4 +1,4 @@ -import { Avatar, styled } from "@material-ui/core" +import { Avatar, styled } from "@mui/material" export const StyledAvatar = styled(Avatar)({ height: 50, diff --git a/src/components/ui/StyledRadio.tsx b/src/components/ui/StyledRadio.tsx index 12014f317..060fc58c4 100644 --- a/src/components/ui/StyledRadio.tsx +++ b/src/components/ui/StyledRadio.tsx @@ -1,4 +1,6 @@ -import { Radio, withStyles } from "@material-ui/core" +import { Radio } from "@mui/material" + +import withStyles from "@mui/styles/withStyles" export const StyledRadio = withStyles({ root: { diff --git a/src/components/ui/StyledSlider.tsx b/src/components/ui/StyledSlider.tsx index 04bcf09a6..868e72479 100644 --- a/src/components/ui/StyledSlider.tsx +++ b/src/components/ui/StyledSlider.tsx @@ -1,4 +1,6 @@ -import { Grid, Paper, Slider, styled, Typography, withStyles, withTheme } from "@material-ui/core" +import { Grid, Paper, Slider, styled, Typography } from "@mui/material" +import withStyles from "@mui/styles/withStyles" +import withTheme from "@mui/styles/withTheme" import { useRef } from "react" const StyledSlider = withStyles({ diff --git a/src/components/ui/StyledTextField.tsx b/src/components/ui/StyledTextField.tsx index 91c459e4b..11aa83b3f 100644 --- a/src/components/ui/StyledTextField.tsx +++ b/src/components/ui/StyledTextField.tsx @@ -1,5 +1,5 @@ -import { TextField } from "@material-ui/core" -import { styled } from "@material-ui/core/styles" +import { TextField } from "@mui/material" +import { styled } from "@mui/material/styles" export const StyledTextField = styled(TextField)({ "& .MuiInput-root": { diff --git a/src/components/ui/SubtitleText.tsx b/src/components/ui/SubtitleText.tsx index a6ad2b46e..62ac637c9 100644 --- a/src/components/ui/SubtitleText.tsx +++ b/src/components/ui/SubtitleText.tsx @@ -1,4 +1,4 @@ -import { styled, Typography } from "@material-ui/core" +import { styled, Typography } from "@mui/material" export const SubtitleText = styled(Typography)(({ theme }) => ({ fontSize: 18, diff --git a/src/components/ui/Switch.tsx b/src/components/ui/Switch.tsx index 5aaf9b420..d49a33536 100644 --- a/src/components/ui/Switch.tsx +++ b/src/components/ui/Switch.tsx @@ -1,4 +1,4 @@ -import { styled, Switch as MuiSwitch } from "@material-ui/core" +import { styled, Switch as MuiSwitch } from "@mui/material" export const Switch = styled(MuiSwitch)({ "& .MuiSwitch-thumb": { diff --git a/src/components/ui/Table.tsx b/src/components/ui/Table.tsx index 81233b3bd..d479dd3d0 100644 --- a/src/components/ui/Table.tsx +++ b/src/components/ui/Table.tsx @@ -1,4 +1,4 @@ -import { styled, Grid, Theme } from "@material-ui/core" +import { styled, Grid, Theme } from "@mui/material" export const ContentContainer = styled(Grid)(({ theme }) => ({ borderRadius: 8, @@ -8,7 +8,7 @@ export const ContentContainer = styled(Grid)(({ theme }) => ({ export const TableHeader = styled(Grid)(({ theme }: { theme: Theme }) => ({ padding: "16px 46px", minHeight: 34, - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down("lg")]: { gap: 10 } })) diff --git a/src/components/ui/ThemedTabButton.tsx b/src/components/ui/ThemedTabButton.tsx index 0f69c1231..421dcd33d 100644 --- a/src/components/ui/ThemedTabButton.tsx +++ b/src/components/ui/ThemedTabButton.tsx @@ -1,4 +1,4 @@ -import { Grid, styled, Button, Box, Tooltip, useTheme } from "@material-ui/core" +import { Grid, styled, Button, Box, Tooltip, useTheme } from "@mui/material" export const ThemedTabButton = styled(Button)(({ active }: { active?: boolean }) => ({ "marginRight": "8px", diff --git a/src/components/ui/TitleText.tsx b/src/components/ui/TitleText.tsx index 0858c22a5..df4ae03db 100644 --- a/src/components/ui/TitleText.tsx +++ b/src/components/ui/TitleText.tsx @@ -1,4 +1,4 @@ -import { styled, Typography } from "@material-ui/core" +import { styled, Typography } from "@mui/material" export const TitleText = styled(Typography)(({ theme }) => ({ fontSize: 36, diff --git a/src/components/ui/Toolbar.tsx b/src/components/ui/Toolbar.tsx index f40727bab..55ab37c95 100644 --- a/src/components/ui/Toolbar.tsx +++ b/src/components/ui/Toolbar.tsx @@ -1,16 +1,5 @@ import React from "react" -import { - AppBar, - Toolbar, - Button, - styled, - Typography, - Box, - Grid, - useTheme, - useMediaQuery, - Theme -} from "@material-ui/core" +import { AppBar, Toolbar, Button, styled, Typography, Box, Grid, useTheme, useMediaQuery, Theme } from "@mui/material" const Header = styled(Grid)(({ theme }) => ({ width: "1000px", diff --git a/src/components/ui/ViewSettings.tsx b/src/components/ui/ViewSettings.tsx index 1f94c18f3..f8d952107 100644 --- a/src/components/ui/ViewSettings.tsx +++ b/src/components/ui/ViewSettings.tsx @@ -1,4 +1,4 @@ -import { Grid, styled } from "@material-ui/core" +import { Grid, styled } from "@mui/material" export const ViewSettings = styled(Grid)({ "fontWeight": 300, diff --git a/src/components/ui/etherlink/ProposalDialog.tsx b/src/components/ui/etherlink/ProposalDialog.tsx index 71c4d1bed..68495a4ff 100644 --- a/src/components/ui/etherlink/ProposalDialog.tsx +++ b/src/components/ui/etherlink/ProposalDialog.tsx @@ -1,4 +1,4 @@ -import { Grid, Typography, styled } from "@material-ui/core" +import { Grid, Typography, styled } from "@mui/material" export const OptionContainer = styled(Grid)(({ theme }) => ({ "minHeight": 80, diff --git a/src/components/ui/etherlink/ProposalForms.tsx b/src/components/ui/etherlink/ProposalForms.tsx index d714e88b7..774789af1 100644 --- a/src/components/ui/etherlink/ProposalForms.tsx +++ b/src/components/ui/etherlink/ProposalForms.tsx @@ -1,4 +1,4 @@ -import { Grid, styled } from "@material-ui/core" +import { Grid, styled } from "@mui/material" export const InputContainer = styled(Grid)({ background: "#1c2024", diff --git a/src/components/ui/etherlink/Stats.tsx b/src/components/ui/etherlink/Stats.tsx index aad7fd865..d18b265fa 100644 --- a/src/components/ui/etherlink/Stats.tsx +++ b/src/components/ui/etherlink/Stats.tsx @@ -1,4 +1,4 @@ -import { Grid, Typography, Paper, styled } from "@material-ui/core" +import { Grid, Typography, Paper, styled } from "@mui/material" export const Item = styled(Paper)(({ theme }) => ({ backgroundColor: "#24282d", @@ -31,7 +31,7 @@ export const ItemContent = styled(Grid)({ export const ItemTitle = styled(Typography)(({ theme }) => ({ fontSize: 18, fontWeight: 500, - [theme.breakpoints.down("md")]: { + [theme.breakpoints.down("xl")]: { fontSize: 15 } })) @@ -41,7 +41,7 @@ export const ItemValue = styled(Typography)(({ theme }) => ({ fontWeight: 300, overflowX: "scroll", cursor: "default", - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down("lg")]: { fontSize: 28 } })) diff --git a/src/components/ui/etherlink/SummaryTable.tsx b/src/components/ui/etherlink/SummaryTable.tsx index 5b17efe94..1ca9ca16b 100644 --- a/src/components/ui/etherlink/SummaryTable.tsx +++ b/src/components/ui/etherlink/SummaryTable.tsx @@ -1,14 +1,14 @@ -import { TableContainer, TableCell, Typography, styled } from "@material-ui/core" +import { TableContainer, TableCell, Typography, styled } from "@mui/material" export const CustomTableContainer = styled(TableContainer)(({ theme }) => ({ width: "inherit", - [theme.breakpoints.down("sm")]: {} + [theme.breakpoints.down("lg")]: {} })) export const CustomTableCell = styled(TableCell)(({ theme }) => ({ color: "white", borderBottom: "1px solid rgba(255, 255, 255, 0.08)", - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down("lg")]: { paddingBottom: 0, paddingLeft: "16px !important", textAlign: "end" @@ -18,7 +18,7 @@ export const CustomTableCell = styled(TableCell)(({ theme }) => ({ export const CustomTableCellValue = styled(TableCell)(({ theme }) => ({ color: "white", borderBottom: "1px solid rgba(255, 255, 255, 0.08)", - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down("lg")]: { paddingTop: 0, paddingRight: "16px !important", textAlign: "end", @@ -29,7 +29,7 @@ export const CustomTableCellValue = styled(TableCell)(({ theme }) => ({ export const RowValue = styled(Typography)(({ theme }) => ({ fontWeight: 300, fontSize: 18, - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down("lg")]: { fontSize: 16 } })) @@ -38,7 +38,7 @@ export const SummaryHeaderCell = styled(TableCell)(({ theme }) => ({ color: "white", fontWeight: 500, borderBottom: "1px solid rgba(255, 255, 255, 0.16)", - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down("lg")]: { paddingLeft: "16px !important", paddingRight: "16px !important" } diff --git a/src/components/ui/etherlink/VotingPower.tsx b/src/components/ui/etherlink/VotingPower.tsx index 90d1dbd50..148604cd8 100644 --- a/src/components/ui/etherlink/VotingPower.tsx +++ b/src/components/ui/etherlink/VotingPower.tsx @@ -1,4 +1,6 @@ -import { Paper, Select, withStyles } from "@material-ui/core" +import { Paper, Select } from "@mui/material" + +import withStyles from "@mui/styles/withStyles" export const StyledPaper = withStyles(theme => ({ root: { diff --git a/src/components/ui/etherlink/styled.tsx b/src/components/ui/etherlink/styled.tsx index d7b57036b..3212223bd 100644 --- a/src/components/ui/etherlink/styled.tsx +++ b/src/components/ui/etherlink/styled.tsx @@ -1,18 +1,8 @@ -import { - Box, - DialogContent, - Grid, - Link, - Popover, - styled, - TableCell, - TableRow, - Theme, - Typography, - withStyles -} from "@material-ui/core" - -import { FileCopyOutlined } from "@material-ui/icons" +import { Box, DialogContent, Grid, Link, Popover, styled, TableCell, TableRow, Theme, Typography } from "@mui/material" + +import withStyles from "@mui/styles/withStyles" + +import { FileCopyOutlined } from "@mui/icons-material" import { GridContainer } from "modules/common/GridContainer" import { ContentContainer } from "components/ui/ContentContainer" @@ -55,7 +45,7 @@ export const CustomContent = styled(DialogContent)(({ theme }) => ({ padding: 0, display: "grid", marginTop: 24, - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down("lg")]: { marginTop: 0, display: "inline", paddingTop: "0px !important" @@ -70,7 +60,7 @@ export const VotesRow = styled(Typography)(({ theme }) => ({ textOverflow: "ellipsis", padding: ".5rem 1rem", width: 400, - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down("lg")]: { width: 200, textAlign: "center" } @@ -114,7 +104,7 @@ export const TitleContainer = styled(Grid)(({ theme }) => ({ paddingRight: 46, paddingBottom: 18, borderBottom: `0.3px solid ${theme.palette.primary.light}`, - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down("lg")]: { padding: "18px 25px" } })) @@ -143,7 +133,7 @@ export const HistoryItem = styled(Grid)(({ theme }: { theme: Theme }) => ({ paddingBottom: 4, display: "flex", height: "auto", - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down("lg")]: { width: "unset" } })) @@ -168,7 +158,7 @@ export const AssetLabel = styled(Typography)(({ theme }) => ({ export const LogoItem = styled("img")(({ theme }) => ({ cursor: "pointer", - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down("lg")]: { height: 10 } })) @@ -178,7 +168,7 @@ export const TextContainer = styled(Typography)(({ theme }) => ({ alignItems: "center", gap: 10, marginRight: 8, - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down("lg")]: { marginTop: 20 } })) @@ -188,13 +178,13 @@ export const EndTextContainer = styled(Typography)(({ theme }) => ({ alignItems: "center", gap: 10, marginRight: 8, - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down("lg")]: { marginTop: 20 } })) export const EndText = styled(Typography)(({ theme }) => ({ - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down("lg")]: { marginTop: 20 } })) @@ -202,7 +192,7 @@ export const EndText = styled(Typography)(({ theme }) => ({ export const Divider = styled(Typography)(({ theme }) => ({ marginLeft: 8, marginRight: 8, - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down("lg")]: { marginTop: 20 } })) @@ -212,7 +202,7 @@ export const StyledLink = styled(Link)(({ theme }) => ({ fontWeight: 300, fontSize: 16, marginLeft: 8, - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down("lg")]: { fontWeight: 100, fontSize: 10 } diff --git a/src/components/ui/icons/CopyIcon.tsx b/src/components/ui/icons/CopyIcon.tsx index 78daadae4..b407935c9 100644 --- a/src/components/ui/icons/CopyIcon.tsx +++ b/src/components/ui/icons/CopyIcon.tsx @@ -1,5 +1,5 @@ -import { FileCopyOutlined } from "@material-ui/icons" -import { styled } from "@material-ui/core" +import { FileCopyOutlined } from "@mui/icons-material" +import { styled } from "@mui/material" export const CopyIcon = styled(FileCopyOutlined)({ marginRight: 8, diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts index 945fec65c..531c60d4f 100644 --- a/src/components/ui/index.ts +++ b/src/components/ui/index.ts @@ -43,29 +43,31 @@ export { CardContent, CardMedia, styled, - withStyles, useMediaQuery, useTheme -} from "@material-ui/core" +} from "@mui/material" + +// withStyles moved to @mui/styles (legacy JSS) in v5 +export { default as withStyles } from "@mui/styles/withStyles" // v4 icons re-exports -export { default as Timer } from "@material-ui/icons/Timer" -export { default as Add } from "@material-ui/icons/Add" -export { default as RemoveCircleOutline } from "@material-ui/icons/RemoveCircleOutline" -export { default as ThumbUpAlt } from "@material-ui/icons/ThumbUpAlt" -export { default as ThumbDownAlt } from "@material-ui/icons/ThumbDownAlt" -export { default as KeyboardArrowDownIcon } from "@material-ui/icons/KeyboardArrowDown" -export { default as Settings } from "@material-ui/icons/Settings" -export { default as InfoOutlined } from "@material-ui/icons/InfoOutlined" -export { default as InfoRounded } from "@material-ui/icons/InfoRounded" -export { default as FileCopyOutlined } from "@material-ui/icons/FileCopyOutlined" -export { default as AddCircleIcon } from "@material-ui/icons/AddCircle" -export { default as RemoveCircleIcon } from "@material-ui/icons/RemoveCircle" -export { default as CloseIcon } from "@material-ui/icons/Close" -export { default as EditIcon } from "@material-ui/icons/Edit" -export { default as DeleteIcon } from "@material-ui/icons/Delete" -export { default as ExpandMoreIcon } from "@material-ui/icons/ExpandMore" -export { default as ExpandLessIcon } from "@material-ui/icons/ExpandLess" +export { default as Timer } from "@mui/icons-material/Timer" +export { default as Add } from "@mui/icons-material/Add" +export { default as RemoveCircleOutline } from "@mui/icons-material/RemoveCircleOutline" +export { default as ThumbUpAlt } from "@mui/icons-material/ThumbUpAlt" +export { default as ThumbDownAlt } from "@mui/icons-material/ThumbDownAlt" +export { default as KeyboardArrowDownIcon } from "@mui/icons-material/KeyboardArrowDown" +export { default as Settings } from "@mui/icons-material/Settings" +export { default as InfoOutlined } from "@mui/icons-material/InfoOutlined" +export { default as InfoRounded } from "@mui/icons-material/InfoRounded" +export { default as FileCopyOutlined } from "@mui/icons-material/FileCopyOutlined" +export { default as AddCircleIcon } from "@mui/icons-material/AddCircle" +export { default as RemoveCircleIcon } from "@mui/icons-material/RemoveCircle" +export { default as CloseIcon } from "@mui/icons-material/Close" +export { default as EditIcon } from "@mui/icons-material/Edit" +export { default as DeleteIcon } from "@mui/icons-material/Delete" +export { default as ExpandMoreIcon } from "@mui/icons-material/ExpandMore" +export { default as ExpandLessIcon } from "@mui/icons-material/ExpandLess" // Local UI wrappers export * from "./Button" diff --git a/src/modules/common/BackButton.tsx b/src/modules/common/BackButton.tsx index 324cf2b4d..59f91f30f 100644 --- a/src/modules/common/BackButton.tsx +++ b/src/modules/common/BackButton.tsx @@ -1,6 +1,6 @@ import React from "react" -import { Box, styled } from "@material-ui/core" -import { ArrowBack } from "@material-ui/icons" +import { Box, styled } from "@mui/material" +import { ArrowBack } from "@mui/icons-material" const BackIcon = styled(ArrowBack)({ cursor: "pointer", diff --git a/src/modules/common/Blockie.tsx b/src/modules/common/Blockie.tsx index 0df265924..a2fa1d7d1 100644 --- a/src/modules/common/Blockie.tsx +++ b/src/modules/common/Blockie.tsx @@ -1,4 +1,4 @@ -import { Box, BoxProps, styled } from "@material-ui/core" +import { Box, BoxProps, styled } from "@mui/material" import React from "react" import { getBlockie } from "services/contracts/utils" diff --git a/src/modules/common/ChangeNetworkButton.tsx b/src/modules/common/ChangeNetworkButton.tsx index 43f0b53b3..089632a8c 100644 --- a/src/modules/common/ChangeNetworkButton.tsx +++ b/src/modules/common/ChangeNetworkButton.tsx @@ -1,5 +1,5 @@ import React, { useMemo } from "react" -import { Box, Grid, styled, Typography, Theme, useTheme, useMediaQuery } from "@material-ui/core" +import { Box, Grid, styled, Typography, Theme, useTheme, useMediaQuery } from "@mui/material" import { ActionSheet, useActionSheet } from "modules/explorer/context/ActionSheets" import { useLocation } from "react-router-dom" import { getNetworkDisplayName, networkDotColorMap } from "services/beacon" @@ -33,18 +33,20 @@ const StyledConnectedButton = styled(Box)(({ theme }: { theme: Theme }) => ({ } })) -export const ColorDot = styled(Box)({ - height: 6, - width: 6, - backgroundColor: ({ color }: { color: string }) => color, - borderRadius: "50%" -}) +export const ColorDot = styled(Box, { shouldForwardProp: prop => prop !== "color" })( + ({ color }: { color: string }) => ({ + height: 6, + width: 6, + backgroundColor: color, + borderRadius: "50%" + }) +) export const ChangeNetworkButton = () => { const { network } = useTezos() const { open } = useActionSheet(ActionSheet.Network) const theme = useTheme() - const isMobileSmall = useMediaQuery(theme.breakpoints.down("xs")) + const isMobileSmall = useMediaQuery(theme.breakpoints.down("md")) const location = useLocation() diff --git a/src/modules/common/CloseButton.tsx b/src/modules/common/CloseButton.tsx index 3cf867ab2..6b1c1c3e0 100644 --- a/src/modules/common/CloseButton.tsx +++ b/src/modules/common/CloseButton.tsx @@ -1,6 +1,6 @@ import React from "react" -import { Box, styled } from "@material-ui/core" -import { Close } from "@material-ui/icons" +import { Box, styled } from "@mui/material" +import { Close } from "@mui/icons-material" const CloseIcon = styled(Close)({ cursor: "pointer", diff --git a/src/modules/common/CopyAddress.tsx b/src/modules/common/CopyAddress.tsx index 71c0fc322..c37ce3297 100644 --- a/src/modules/common/CopyAddress.tsx +++ b/src/modules/common/CopyAddress.tsx @@ -1,4 +1,4 @@ -import { Grid, GridProps, Typography, TypographyProps, useMediaQuery, useTheme } from "@material-ui/core" +import { Grid, GridProps, Typography, TypographyProps, useMediaQuery, useTheme } from "@mui/material" import React from "react" import { toShortAddress } from "services/contracts/utils" import { CopyButton } from "./CopyButton" @@ -10,7 +10,7 @@ interface Props extends GridProps { export const CopyAddress: React.FC = ({ address, typographyProps }) => { const theme = useTheme() - const isMobileSmall = useMediaQuery(theme.breakpoints.down("sm")) + const isMobileSmall = useMediaQuery(theme.breakpoints.down("lg")) return ( <> diff --git a/src/modules/common/CopyButton.tsx b/src/modules/common/CopyButton.tsx index 976f65a45..668b0abfb 100644 --- a/src/modules/common/CopyButton.tsx +++ b/src/modules/common/CopyButton.tsx @@ -1,5 +1,5 @@ import React, { useState } from "react" -import { Box, Grid, styled, Tooltip, Typography } from "@material-ui/core" +import { Box, Grid, styled, Tooltip, Typography } from "@mui/material" import DownloadIcon from "assets/img/download.svg" const CopyIcon = styled("img")({ diff --git a/src/modules/common/ExternalLink.tsx b/src/modules/common/ExternalLink.tsx index 1069a2657..de780eb2d 100644 --- a/src/modules/common/ExternalLink.tsx +++ b/src/modules/common/ExternalLink.tsx @@ -1,5 +1,5 @@ import React from "react" -import { styled } from "@material-ui/core" +import { styled } from "@mui/material" const Link = styled("a")({ "display": "flex", diff --git a/src/modules/common/Footer.tsx b/src/modules/common/Footer.tsx index 86ec6f4f4..1feeaed60 100644 --- a/src/modules/common/Footer.tsx +++ b/src/modules/common/Footer.tsx @@ -1,5 +1,5 @@ import React from "react" -import { Grid, Typography, styled, useMediaQuery, useTheme } from "@material-ui/core" +import { Grid, Typography, styled, useMediaQuery, useTheme } from "@mui/material" import HomeButton from "assets/logos/footer_logo.svg" import Documentation from "assets/logos/footer_documentation.svg" import Help from "assets/logos/footer_help.svg" @@ -18,7 +18,7 @@ const Footer = styled(Grid)(({ theme }) => ({ paddingTop: 40, paddingBottom: 40, marginTop: 32, - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down("lg")]: { height: "auto", paddingTop: 30, paddingBottom: 30 @@ -49,7 +49,7 @@ const DesignedByText = styled(Typography)({ }) const BottomContainer = styled(Grid)(({ theme }) => ({ - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down("lg")]: { gap: 12 } })) @@ -72,7 +72,7 @@ const Container = styled(Grid)(({ theme }) => ({ export const ExplorerFooter: React.FC = () => { const theme = useTheme() - const isMobileSmall = useMediaQuery(theme.breakpoints.down("sm")) + const isMobileSmall = useMediaQuery(theme.breakpoints.down("lg")) const { network } = useTezos() const goToFAQ = () => { diff --git a/src/modules/common/GridContainer.tsx b/src/modules/common/GridContainer.tsx index 2c7b31a74..a324fab5f 100644 --- a/src/modules/common/GridContainer.tsx +++ b/src/modules/common/GridContainer.tsx @@ -1,4 +1,4 @@ -import { Grid, styled } from "@material-ui/core" +import { Grid, styled } from "@mui/material" export const GridContainer = styled(Grid)(({ theme }) => ({ minHeight: 145, @@ -6,7 +6,7 @@ export const GridContainer = styled(Grid)(({ theme }) => ({ cursor: "pointer", padding: "32px 46px", background: theme.palette.primary.contrastText, - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down("lg")]: { padding: "35px 25px" } })) diff --git a/src/modules/common/MainButton.tsx b/src/modules/common/MainButton.tsx index 7c195a971..146ed2149 100644 --- a/src/modules/common/MainButton.tsx +++ b/src/modules/common/MainButton.tsx @@ -1,4 +1,4 @@ -import { styled, Button } from "@material-ui/core" +import { styled, Button } from "@mui/material" export const MainButton = styled(Button)(({ theme }) => ({ "fontSize": "18px", diff --git a/src/modules/common/Markdown.tsx b/src/modules/common/Markdown.tsx index 04fcd33c7..04294cc90 100644 --- a/src/modules/common/Markdown.tsx +++ b/src/modules/common/Markdown.tsx @@ -1,11 +1,11 @@ import React, { ReactNode } from "react" -import Typography from "@material-ui/core/Typography" +import Typography from "@mui/material/Typography" import ReactMarkdown from "react-markdown" import remarkGfm from "remark-gfm" import remarkBreaks from "remark-breaks" import { ReactMarkdownOptions } from "react-markdown/lib/react-markdown" import { SpecialComponents } from "react-markdown/lib/ast-to-react" -import { Link, styled } from "@material-ui/core" +import { Link, styled } from "@mui/material" const getSrcPathForLocalImage = (src?: string): string => { return require(`../../assets/markdown/${src}`).default diff --git a/src/modules/common/SmallButton.tsx b/src/modules/common/SmallButton.tsx index 228476b5d..82a4c53ee 100644 --- a/src/modules/common/SmallButton.tsx +++ b/src/modules/common/SmallButton.tsx @@ -1,4 +1,4 @@ -import { styled, Button } from "@material-ui/core" +import { styled, Button } from "@mui/material" export const SmallButton = styled(Button)({ "justifyItems": "center", diff --git a/src/modules/common/StyledSendButton.tsx b/src/modules/common/StyledSendButton.tsx index e0d2847e3..1bbd0111b 100644 --- a/src/modules/common/StyledSendButton.tsx +++ b/src/modules/common/StyledSendButton.tsx @@ -1,4 +1,4 @@ -import { styled } from "@material-ui/core" +import { styled } from "@mui/material" import { MainButton } from "./MainButton" const StyledSendButton = styled(MainButton)(({ theme }) => ({ diff --git a/src/modules/common/TitleBlock.tsx b/src/modules/common/TitleBlock.tsx index 8fa495686..e96814564 100644 --- a/src/modules/common/TitleBlock.tsx +++ b/src/modules/common/TitleBlock.tsx @@ -1,7 +1,7 @@ -import { Grid, Link, Paper, styled, Tooltip, Typography } from "@material-ui/core" +import { Grid, Link, Paper, styled, Tooltip, Typography } from "@mui/material" import React from "react" import { ReactElement } from "react-markdown/lib/react-markdown" -import { InfoRounded } from "@material-ui/icons" +import { InfoRounded } from "@mui/icons-material" const DescriptionText = styled(Typography)(({ theme }) => ({ color: theme.palette.secondary.dark @@ -42,7 +42,7 @@ const CustomTextContainer = styled(Paper)(({ theme }) => ({ display: "flex", alignItems: "center", marginRight: 24, - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down("lg")]: { alignItems: "baseline" } })) diff --git a/src/modules/common/Toolbar.tsx b/src/modules/common/Toolbar.tsx index b14cc4051..15eff59ab 100644 --- a/src/modules/common/Toolbar.tsx +++ b/src/modules/common/Toolbar.tsx @@ -1,28 +1,17 @@ import React, { useState } from "react" -import { - AppBar, - Toolbar, - styled, - Typography, - Box, - Grid, - useTheme, - Popover, - useMediaQuery, - Theme -} from "@material-ui/core" +import { AppBar, Toolbar, styled, Typography, Box, Grid, useTheme, Popover, useMediaQuery, Theme } from "@mui/material" import HomeButton from "assets/logos/homebase-logo.svg" import { useTezos } from "services/beacon/hooks/useTezos" import { toShortAddress } from "services/contracts/utils" -import { ExitToAppOutlined, FileCopyOutlined } from "@material-ui/icons" +import { ExitToAppOutlined, FileCopyOutlined } from "@mui/icons-material" import { UserProfileName } from "modules/explorer/components/UserProfileName" import { ProfileAvatar } from "modules/explorer/components/styled/ProfileAvatar" import { ChangeNetworkButton } from "./ChangeNetworkButton" -import { ArrowBackIos } from "@material-ui/icons" +import { ArrowBackIos } from "@mui/icons-material" import { ConnectWalletButton } from "./ConnectWalletButton" import { ToolbarAccount } from "./ToolbarAccount" @@ -167,8 +156,8 @@ export const Navbar: React.FC<{ disableMobileMenu?: boolean }> = ({ mode, children, disableMobileMenu }) => { const theme = useTheme() - const isMobileExtraSmall = useMediaQuery(theme.breakpoints.down("xs")) - const isMobileSmall = useMediaQuery(theme.breakpoints.down("sm")) + const isMobileExtraSmall = useMediaQuery(theme.breakpoints.down("md")) + const isMobileSmall = useMediaQuery(theme.breakpoints.down("lg")) return ( diff --git a/src/modules/common/ToolbarAccount.tsx b/src/modules/common/ToolbarAccount.tsx index 2e2689590..c6415f0b1 100644 --- a/src/modules/common/ToolbarAccount.tsx +++ b/src/modules/common/ToolbarAccount.tsx @@ -1,6 +1,6 @@ import React, { useState } from "react" -import { styled, Typography, Box, Grid, Popover, useTheme, useMediaQuery } from "@material-ui/core" -import { ExitToAppOutlined, FileCopyOutlined } from "@material-ui/icons" +import { styled, Typography, Box, Grid, Popover, useTheme, useMediaQuery } from "@mui/material" +import { ExitToAppOutlined, FileCopyOutlined } from "@mui/icons-material" import { useTezos } from "services/beacon/hooks/useTezos" import { ProfileAvatar } from "modules/explorer/components/styled/ProfileAvatar" diff --git a/src/modules/common/ToolbarCommon.tsx b/src/modules/common/ToolbarCommon.tsx index e10278d14..a2646bb2f 100644 --- a/src/modules/common/ToolbarCommon.tsx +++ b/src/modules/common/ToolbarCommon.tsx @@ -1,29 +1,18 @@ // TODO: @ashutoshpw // Merge into one import React, { useState } from "react" -import { - AppBar, - Toolbar, - styled, - Typography, - Box, - Grid, - useTheme, - Popover, - useMediaQuery, - Theme -} from "@material-ui/core" +import { AppBar, Toolbar, styled, Typography, Box, Grid, useTheme, Popover, useMediaQuery, Theme } from "@mui/material" import HomeButton from "assets/logos/homebase-logo.svg" import { useTezos } from "services/beacon/hooks/useTezos" import { toShortAddress } from "services/contracts/utils" -import { ExitToAppOutlined, FileCopyOutlined } from "@material-ui/icons" +import { ExitToAppOutlined, FileCopyOutlined } from "@mui/icons-material" import { UserProfileName } from "modules/explorer/components/UserProfileName" import { ProfileAvatar } from "modules/explorer/components/styled/ProfileAvatar" import { ChangeNetworkButton } from "./ChangeNetworkButton" -import { ArrowBackIos } from "@material-ui/icons" +import { ArrowBackIos } from "@mui/icons-material" import { ConnectWalletButton } from "./ConnectWalletButton" import { NavigationMenu } from "modules/explorer/components/NavigationMenu" import { ActionSheet, useActionSheet } from "modules/explorer/context/ActionSheets" @@ -131,7 +120,7 @@ export const Navbar: React.FC = ({ variant = "default", mode, child const [anchorEl, setAnchorEl] = useState(null) const [popperOpen, setPopperOpen] = useState(false) const theme = useTheme() - const isMobileExtraSmall = useMediaQuery(theme.breakpoints.down("xs")) + const isMobileExtraSmall = useMediaQuery(theme.breakpoints.down("md")) const { open: openUserMenuSheet } = useActionSheet(ActionSheet.UserMenu) diff --git a/src/modules/common/WarningFooter.tsx b/src/modules/common/WarningFooter.tsx index 33b62414d..f753b61c3 100644 --- a/src/modules/common/WarningFooter.tsx +++ b/src/modules/common/WarningFooter.tsx @@ -1,7 +1,7 @@ -import { Box, Grid, IconButton, Typography, styled } from "@material-ui/core" +import { Box, Grid, IconButton, Typography, styled } from "@mui/material" import React, { useEffect, useState } from "react" import { ReactComponent as WarningIcon } from "assets/logos/warning.svg" -import CloseIcon from "@material-ui/icons/Close" +import CloseIcon from "@mui/icons-material/Close" import hexToRgba from "hex-to-rgba" const Container = styled(Box)({ @@ -52,7 +52,7 @@ export const WarningFooter: React.FC<{ text: string }> = ({ text }) => { {text} - + diff --git a/src/modules/common/hooks/useNotification.tsx b/src/modules/common/hooks/useNotification.tsx index 68732cef8..e27768cf8 100644 --- a/src/modules/common/hooks/useNotification.tsx +++ b/src/modules/common/hooks/useNotification.tsx @@ -1,7 +1,7 @@ import React, { Fragment } from "react" -import { Button, styled } from "@material-ui/core" +import { Button, styled } from "@mui/material" import { OptionsObject, useSnackbar } from "notistack" -import { Close, OpenInNew } from "@material-ui/icons" +import { Close, OpenInNew } from "@mui/icons-material" import { ExternalLink } from "modules/common/ExternalLink" const CloseIcon = styled(Close)({ diff --git a/src/modules/creator/components/ClaimName.tsx b/src/modules/creator/components/ClaimName.tsx index 3c4b92fc2..5ef884fee 100644 --- a/src/modules/creator/components/ClaimName.tsx +++ b/src/modules/creator/components/ClaimName.tsx @@ -1,4 +1,4 @@ -import { Grid, Paper, styled, Typography } from "@material-ui/core" +import { Grid, Paper, styled, Typography } from "@mui/material" import React from "react" const CustomUrlButton = styled(Paper)({ diff --git a/src/modules/creator/components/ConnectWallet.tsx b/src/modules/creator/components/ConnectWallet.tsx index 19cd3dbc2..6ddb01ae1 100644 --- a/src/modules/creator/components/ConnectWallet.tsx +++ b/src/modules/creator/components/ConnectWallet.tsx @@ -1,5 +1,15 @@ -import { Grid, Typography, Box, List, ListItem, ListItemAvatar, Avatar, ListItemText, styled } from "@material-ui/core" -import ImageIcon from "@material-ui/icons/Image" +import { + Grid, + Typography, + Box, + List, + ListItemButton, + ListItemAvatar, + Avatar, + ListItemText, + styled +} from "@mui/material" +import ImageIcon from "@mui/icons-material/Image" import React from "react" import { useTezos } from "services/beacon/hooks/useTezos" @@ -25,7 +35,7 @@ export const ConnectWallet: React.FC = () => { - connect()}> + connect()}> @@ -37,7 +47,7 @@ export const ConnectWallet: React.FC = () => { Connect {" "} - + diff --git a/src/modules/creator/components/DeploymentLoader.tsx b/src/modules/creator/components/DeploymentLoader.tsx index e3beb60e0..8a695ee9b 100644 --- a/src/modules/creator/components/DeploymentLoader.tsx +++ b/src/modules/creator/components/DeploymentLoader.tsx @@ -9,9 +9,9 @@ import { styled, Theme, Typography, - useTheme, - withStyles -} from "@material-ui/core" + useTheme +} from "@mui/material" +import withStyles from "@mui/styles/withStyles" import React, { useEffect, useState } from "react" import { SuspenseDots } from "./SuspenseDots" import ProgressBar from "react-customizable-progressbar" diff --git a/src/modules/creator/components/NavigationBar.tsx b/src/modules/creator/components/NavigationBar.tsx index 1aa59a609..cfe3adc45 100644 --- a/src/modules/creator/components/NavigationBar.tsx +++ b/src/modules/creator/components/NavigationBar.tsx @@ -1,6 +1,6 @@ -import { styled, Grid, Typography, Paper, useMediaQuery, useTheme } from "@material-ui/core" +import { styled, Grid, Typography, Paper, useMediaQuery, useTheme } from "@mui/material" import React from "react" -import { ArrowBackIos } from "@material-ui/icons" +import { ArrowBackIos } from "@mui/icons-material" import { NavigationBarProps } from "modules/creator/state" import { MainButton } from "modules/common/MainButton" @@ -41,7 +41,7 @@ const FooterContainer = styled(Grid)(({ isMobile }: { isMobile: boolean }) => ({ export const NavigationBar: React.FC = ({ back, next }) => { const theme = useTheme() - const isMobile = useMediaQuery(theme.breakpoints.down("md")) + const isMobile = useMediaQuery(theme.breakpoints.down("xl")) return (