From 4e868da0da176922880f1880cc207436796221e6 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Fri, 9 Dec 2022 19:01:16 +0800 Subject: [PATCH] feat: modify page list --- packages/app/src/components/header/header.tsx | 78 +++++++- .../app/src/components/header/page-header.tsx | 34 ++-- .../app/src/components/page-list/empty.tsx | 12 ++ .../app/src/components/page-list/index.tsx | 97 ++++++++++ .../components/page-list/operation-cell.tsx | 96 ++++++++++ .../app/src/components/page-list/styles.ts | 55 ++++++ .../components/workspace-slider-bar/index.tsx | 79 ++++++-- .../components/workspace-slider-bar/style.ts | 61 ++++--- packages/app/src/pages/affine.tsx | 19 ++ packages/app/src/pages/page-list/all.tsx | 169 +----------------- packages/app/src/pages/page-list/favorite.tsx | 15 ++ packages/app/src/pages/page-list/trash.tsx | 15 ++ .../app/src/providers/confirm-provider.tsx | 44 +++-- .../editor-provider/editor-provider.tsx | 14 +- packages/app/src/providers/themeProvider.tsx | 32 ++-- 15 files changed, 568 insertions(+), 252 deletions(-) create mode 100644 packages/app/src/components/page-list/empty.tsx create mode 100644 packages/app/src/components/page-list/index.tsx create mode 100644 packages/app/src/components/page-list/operation-cell.tsx create mode 100644 packages/app/src/components/page-list/styles.ts create mode 100644 packages/app/src/pages/page-list/favorite.tsx create mode 100644 packages/app/src/pages/page-list/trash.tsx diff --git a/packages/app/src/components/header/header.tsx b/packages/app/src/components/header/header.tsx index 12eb65b40b..f4ecf3671d 100644 --- a/packages/app/src/components/header/header.tsx +++ b/packages/app/src/components/header/header.tsx @@ -16,13 +16,16 @@ import { } from '@blocksuite/icons'; import { useEditor } from '@/providers/editor-provider'; import ThemeModeSwitch from '@/components/theme-mode-switch'; -import { IconButton } from '@/ui/button'; +import { IconButton, Button } from '@/ui/button'; import CloseIcon from '@mui/icons-material/Close'; import { getWarningMessage, shouldShowWarning } from './utils'; import { Menu, MenuItem } from '@/ui/menu'; +import { useRouter } from 'next/router'; +import { useConfirm } from '@/providers/confirm-provider'; const PopoverContent = () => { const { editor, mode, setMode } = useEditor(); + return ( <> ) => { - const [showWarning, setShowWarning] = useState(shouldShowWarning()); +const HeaderRight = () => { + const { pageList, toggleDeletePage, permanentlyDeletePage } = useEditor(); + const { confirm } = useConfirm(); + const router = useRouter(); + const currentPageMeta = pageList.find(p => p.id === router.query.pageId); + const isTrash = !!currentPageMeta?.trash; + if (isTrash) { + const { id } = currentPageMeta; + return ( + <> + + + + ); + } + return ( + <> + + } placement="bottom-end"> + + + + + + ); +}; + +export const Header = ({ children }: PropsWithChildren<{}>) => { + const { pageList } = useEditor(); + + const [showWarning, setShowWarning] = useState(shouldShowWarning()); + const router = useRouter(); + const currentPageMeta = pageList.find(p => p.id === router.query.pageId); + const isTrash = !!currentPageMeta?.trash; + console.log('isTrash', isTrash); return ( ) => { {children} - - } placement="bottom-end"> - - - - + diff --git a/packages/app/src/components/header/page-header.tsx b/packages/app/src/components/header/page-header.tsx index 65dfa8e04a..ab53dc4b45 100644 --- a/packages/app/src/components/header/page-header.tsx +++ b/packages/app/src/components/header/page-header.tsx @@ -6,7 +6,7 @@ import EditorModeSwitch from '@/components/editor-mode-switch'; import Header from './header'; export const PageHeader = () => { - const [title, setTitle] = useState(''); + const [title, setTitle] = useState('Untitled'); const [isHover, setIsHover] = useState(false); const { editor } = useEditor(); @@ -22,24 +22,22 @@ export const PageHeader = () => { return (
- {title ? ( - { - setIsHover(true); + { + setIsHover(true); + }} + onMouseLeave={() => { + setIsHover(false); + }} + > + { - setIsHover(false); - }} - > - - {title} - - ) : null} + /> + {title} +
); }; diff --git a/packages/app/src/components/page-list/empty.tsx b/packages/app/src/components/page-list/empty.tsx new file mode 100644 index 0000000000..f995f71fb7 --- /dev/null +++ b/packages/app/src/components/page-list/empty.tsx @@ -0,0 +1,12 @@ +import React from 'react'; + +export const Empty = () => { + return ( +
+

Tips: Click Add to Favourites/Trash and the page will appear here.

+

(Designer is grappling with designing)

+
+ ); +}; + +export default Empty; diff --git a/packages/app/src/components/page-list/index.tsx b/packages/app/src/components/page-list/index.tsx new file mode 100644 index 0000000000..f07aaba8fa --- /dev/null +++ b/packages/app/src/components/page-list/index.tsx @@ -0,0 +1,97 @@ +import { PageMeta, useEditor } from '@/providers/editor-provider'; +import { + MiddleFavouritedStatus2Icon, + MiddleFavouritesIcon, +} from '@blocksuite/icons'; +import { + StyledFavoriteButton, + StyledTableContainer, + StyledTableRow, + StyledTitleContent, + StyledTitleWrapper, +} from './styles'; +import { Table, TableBody, TableCell, TableHead, TableRow } from '@/ui/table'; +import { OperationCell, TrashOperationCell } from './operation-cell'; +import Empty from './empty'; +import Link from 'next/link'; +import React from 'react'; +const FavoriteTag = ({ pageMeta }: { pageMeta: PageMeta }) => { + const { toggleFavoritePage } = useEditor(); + + return ( + { + toggleFavoritePage(pageMeta.id); + }} + > + {pageMeta.favorite ? ( + + ) : ( + + )} + + ); +}; + +export const PageList = ({ + pageList, + showFavoriteTag = false, + isTrash = false, +}: { + pageList: PageMeta[]; + showFavoriteTag?: boolean; + isTrash?: boolean; +}) => { + if (pageList.length === 0) { + return ; + } + return ( + + + + + Documents + Created + + {isTrash ? 'Uploaded' : 'Moved to Trash'} + + + + + + {pageList.map((pageMeta, index) => { + return ( + + + + + + {pageMeta.title || pageMeta.id} + + + {showFavoriteTag && } + + + {pageMeta.createDate} + {pageMeta.createDate} + + {isTrash ? ( + + ) : ( + + )} + + + ); + })} + +
+ + ); +}; + +export default PageList; diff --git a/packages/app/src/components/page-list/operation-cell.tsx b/packages/app/src/components/page-list/operation-cell.tsx new file mode 100644 index 0000000000..da06c1121c --- /dev/null +++ b/packages/app/src/components/page-list/operation-cell.tsx @@ -0,0 +1,96 @@ +import { PageMeta, useEditor } from '@/providers/editor-provider'; +import { useConfirm } from '@/providers/confirm-provider'; +import { Menu, MenuItem } from '@/ui/menu'; +import { Wrapper } from '@/ui/layout'; +import { IconButton } from '@/ui/button'; +import { + MoreVertical_24pxIcon, + RestoreIcon, + TrashDeleteforeverIcon, +} from '@blocksuite/icons'; +import React from 'react'; + +export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => { + const { id, favorite } = pageMeta; + const { openPage, toggleFavoritePage, toggleDeletePage } = useEditor(); + const { confirm } = useConfirm(); + + const OperationMenu = ( + <> + { + toggleFavoritePage(id); + }} + > + {favorite ? 'Remove' : 'Add'} to favourites + + { + openPage(id); + }} + > + Open in new tab + + { + confirm({ + title: 'Delete', + content: + 'Deleted items will be moved to Trash Bin. Do you confirm?', + confirmText: 'Delete', + confirmType: 'danger', + }).then(confirm => { + confirm && toggleDeletePage(id); + }); + }} + > + Delete + + + ); + return ( + + + + + + + + ); +}; + +export const TrashOperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => { + const { id } = pageMeta; + const { permanentlyDeletePage, toggleDeletePage } = useEditor(); + const { confirm } = useConfirm(); + + return ( + + { + toggleDeletePage(id); + }} + > + + + { + confirm({ + title: 'Permanently delete', + content: + "Once deleted, you can't undo this action. Do you confirm?", + confirmText: 'Delete', + confirmType: 'danger', + }).then(confirm => { + confirm && permanentlyDeletePage(id); + }); + }} + > + + + + ); +}; diff --git a/packages/app/src/components/page-list/styles.ts b/packages/app/src/components/page-list/styles.ts new file mode 100644 index 0000000000..46909847d5 --- /dev/null +++ b/packages/app/src/components/page-list/styles.ts @@ -0,0 +1,55 @@ +import { displayFlex, styled, textEllipsis } from '@/styles'; +import { TableRow } from '@/ui/table'; + +export const StyledTableContainer = styled.div(() => { + return { + height: 'calc(100vh - 60px)', + padding: '78px 72px', + overflowY: 'auto', + }; +}); +export const StyledTitleWrapper = styled.div(({ theme }) => { + return { + ...displayFlex('flex-start', 'center'), + a: { + color: 'inherit', + }, + 'a:visited': { + color: 'unset', + }, + 'a:hover': { + color: theme.colors.primaryColor, + }, + }; +}); +export const StyledTitleContent = styled.div(({ theme }) => { + return { + maxWidth: '90%', + marginRight: '18px', + ...textEllipsis(1), + }; +}); +export const StyledFavoriteButton = styled.button<{ favorite: boolean }>( + ({ theme, favorite }) => { + return { + width: '32px', + height: '32px', + justifyContent: 'center', + alignItems: 'center', + display: 'none', + color: favorite ? theme.colors.primaryColor : theme.colors.iconColor, + '&:hover': { + color: theme.colors.primaryColor, + }, + }; + } +); +export const StyledTableRow = styled(TableRow)(({ theme }) => { + return { + '&:hover': { + '.favorite-button': { + display: 'flex', + }, + }, + }; +}); diff --git a/packages/app/src/components/workspace-slider-bar/index.tsx b/packages/app/src/components/workspace-slider-bar/index.tsx index f4236be9f6..bb2dcfd72c 100644 --- a/packages/app/src/components/workspace-slider-bar/index.tsx +++ b/packages/app/src/components/workspace-slider-bar/index.tsx @@ -8,17 +8,52 @@ import { StyledSubListItem, } from './style'; import { Arrow } from './icons'; +import Collapse from '@mui/material/Collapse'; +import { MiddleIconArrowDownSmallIcon } from '@blocksuite/icons'; import Link from 'next/link'; import { useEditor } from '@/providers/editor-provider'; +import { IconButton } from '@/ui/button'; + +const FavoriteList = ({ showList }: { showList: boolean }) => { + const { pageList, openPage } = useEditor(); + const router = useRouter(); + + const favoriteList = pageList.filter(p => p.favorite); + return ( + + {favoriteList.map((pageMeta, index) => { + const active = router.query.pageId === pageMeta.id; + return ( + { + if (active) { + return; + } + openPage(pageMeta.id); + }} + > + {pageMeta.title || pageMeta.id} + + ); + })} + {favoriteList.length === 0 && ( + No item + )} + + ); +}; export const WorkSpaceSliderBar = () => { const [show, setShow] = useState(false); + const [showSubFavorite, setShowSubFavorite] = useState(false); const { createPage } = useEditor(); const router = useRouter(); + return ( <> Quick search - { router.push({ @@ -31,18 +66,40 @@ export const WorkSpaceSliderBar = () => { > Back to Doc - - All pages + + + All pages + - Favourites - - document 1, this is a paper icondocument 1 - - document 2 - document 4 - Import - Bin + + + Favourites + + { + setShowSubFavorite(!showSubFavorite); + }} + > + + + + + Import + + + + Trash + + { createPage(); diff --git a/packages/app/src/components/workspace-slider-bar/style.ts b/packages/app/src/components/workspace-slider-bar/style.ts index 458c9a013a..a6fc9d072f 100644 --- a/packages/app/src/components/workspace-slider-bar/style.ts +++ b/packages/app/src/components/workspace-slider-bar/style.ts @@ -5,7 +5,7 @@ export const StyledSliderBar = styled.div<{ show: boolean }>( return { width: show ? '320px' : '0', height: '100vh', - background: '#FBFBFC', + background: theme.mode === 'dark' ? '#272727' : '#FBFBFC', boxShadow: theme.shadow.modal, transition: 'width .15s', position: 'relative', @@ -42,22 +42,25 @@ export const StyledArrowButton = styled.button<{ isShow: boolean }>( } ); -export const StyledListItem = styled.button(({ theme }) => { - return { - width: '296px', - height: '32px', - marginTop: '12px', - fontSize: theme.font.sm, - color: theme.colors.popoverColor, - padding: '0 12px', - borderRadius: '5px', - ...displayFlex('flex-start', 'center'), - ':hover': { - color: theme.colors.primaryColor, - backgroundColor: theme.colors.hoverBackground, - }, - }; -}); +export const StyledListItem = styled.button<{ active?: boolean }>( + ({ theme, active }) => { + return { + width: '296px', + height: '32px', + marginTop: '12px', + fontSize: theme.font.sm, + color: active ? theme.colors.primaryColor : theme.colors.popoverColor, + backgroundColor: active ? theme.colors.hoverBackground : 'unset', + paddingLeft: '12px', + borderRadius: '5px', + ...displayFlex('flex-start', 'center'), + ':hover': { + color: theme.colors.primaryColor, + backgroundColor: theme.colors.hoverBackground, + }, + }; + } +); export const StyledNewPageButton = styled(StyledListItem)(({ theme }) => { return { @@ -69,20 +72,32 @@ export const StyledNewPageButton = styled(StyledListItem)(({ theme }) => { }; }); -export const StyledSubListItem = styled.button(({ theme }) => { +export const StyledSubListItem = styled.button<{ + disable?: boolean; + active?: boolean; +}>(({ theme, disable, active }) => { return { width: '296px', height: '32px', marginTop: '4px', fontSize: theme.font.sm, - color: theme.colors.popoverColor, + color: disable + ? theme.colors.iconColor + : active + ? theme.colors.primaryColor + : theme.colors.popoverColor, + backgroundColor: active ? theme.colors.hoverBackground : 'unset', + + cursor: disable ? 'not-allowed' : 'pointer', paddingLeft: '45px', lineHeight: '32px', textAlign: 'start', ...textEllipsis(1), - ':hover': { - color: theme.colors.primaryColor, - backgroundColor: theme.colors.hoverBackground, - }, + ':hover': disable + ? {} + : { + color: theme.colors.primaryColor, + backgroundColor: theme.colors.hoverBackground, + }, }; }); diff --git a/packages/app/src/pages/affine.tsx b/packages/app/src/pages/affine.tsx index a0c3ee1cd1..1fd7340538 100644 --- a/packages/app/src/pages/affine.tsx +++ b/packages/app/src/pages/affine.tsx @@ -3,6 +3,11 @@ import { ThemeModeSwitch } from '@/components/theme-mode-switch'; import { Loading } from '@/components/loading'; import Modal from '@/ui/modal'; import { useState } from 'react'; +import { Button } from '@/ui/button'; +import { + MiddleFavouritedStatus2Icon, + MiddleFavouritesIcon, +} from '@blocksuite/icons'; export const StyledHeader = styled('div')({ height: '60px', width: '100vw', @@ -35,6 +40,20 @@ const Affine = () => {
hi
+ + + + + + + + ); }; diff --git a/packages/app/src/pages/page-list/all.tsx b/packages/app/src/pages/page-list/all.tsx index 2cef69aa69..fa80c8b56b 100644 --- a/packages/app/src/pages/page-list/all.tsx +++ b/packages/app/src/pages/page-list/all.tsx @@ -1,169 +1,18 @@ -import React from 'react'; import { Header } from '@/components/header'; -import { displayFlex, styled, textEllipsis } from '@/styles'; -import { Table, TableCell, TableHead, TableRow, TableBody } from '../ui/table'; -import { useConfirm } from '@/providers/confirm-provider'; -import { IconButton } from '@/ui/button'; -import { MoreVertical_24pxIcon } from '@blocksuite/icons'; -import { Menu, MenuItem } from '@/ui/menu'; -import { PageMeta, useEditor } from '@/providers/editor-provider'; -import { Wrapper } from '@/ui/layout'; +import { useEditor } from '@/providers/editor-provider'; +import { PageList } from '@/components/page-list'; -import { - MiddleFavouritesIcon, - MiddleFavouritedStatus2Icon, -} from '@blocksuite/icons'; - -const StyledTableContainer = styled.div(() => { - return { - height: 'calc(100vh - 60px)', - padding: '78px 72px', - overflowY: 'auto', - }; -}); -const StyledTitleWrapper = styled.div(({ theme }) => { - return { - ...displayFlex('flex-start', 'center'), - 'favorite-heart': {}, - }; -}); -const StyledTitleContent = styled.div(({ theme }) => { - return { - maxWidth: '90%', - marginRight: '18px', - ...textEllipsis(1), - }; -}); -const StyledFavoriteButton = styled.button<{ favorite: boolean }>( - ({ theme, favorite }) => { - return { - width: '32px', - height: '32px', - justifyContent: 'center', - alignItems: 'center', - display: 'none', - color: favorite ? theme.colors.primaryColor : theme.colors.iconColor, - '&:hover': { - color: theme.colors.primaryColor, - }, - }; - } -); -const StyledTableRow = styled(TableRow)(({ theme }) => { - return { - '&:hover': { - '.favorite-button': { - display: 'flex', - }, - }, - }; -}); - -const OperationArea = ({ pageMeta }: { pageMeta: PageMeta }) => { - const { id, favorite } = pageMeta; - const { openPage, toggleFavoritePage, toggleDeletePage } = useEditor(); - - const OperationMenu = ( - <> - { - toggleFavoritePage(id); - }} - > - {favorite ? 'Remove' : 'Add'} to favourites - - { - openPage(id); - }} - > - Open in new tab - - { - toggleDeletePage(id); - }} - > - Delete - - - ); - return ( - - - - - - - - ); -}; - -export const AllPage = () => { - const { confirm } = useConfirm(); - const { pageList, toggleFavoritePage } = useEditor(); +export const All = () => { + const { pageList: allPageList } = useEditor(); return ( <>
- - - - - - Documents - Created - Uploaded - - - - - {pageList.map((pageMeta, index) => { - return ( - - - - - {pageMeta.title || pageMeta.id} - - { - toggleFavoritePage(pageMeta.id); - }} - > - {pageMeta.favorite ? ( - - ) : ( - - )} - - - - {pageMeta.createDate} - {pageMeta.createDate} - - - - - ); - })} - -
- + !p.trash)} + showFavoriteTag={true} + /> ); }; -export default AllPage; +export default All; diff --git a/packages/app/src/pages/page-list/favorite.tsx b/packages/app/src/pages/page-list/favorite.tsx new file mode 100644 index 0000000000..5d5c0c542d --- /dev/null +++ b/packages/app/src/pages/page-list/favorite.tsx @@ -0,0 +1,15 @@ +import { Header } from '@/components/header'; +import { useEditor } from '@/providers/editor-provider'; +import { PageList } from '@/components/page-list'; + +export const Favorite = () => { + const { pageList: allPageList } = useEditor(); + return ( + <> +
+ p.favorite && !p.trash)} /> + + ); +}; + +export default Favorite; diff --git a/packages/app/src/pages/page-list/trash.tsx b/packages/app/src/pages/page-list/trash.tsx new file mode 100644 index 0000000000..4a139e1c76 --- /dev/null +++ b/packages/app/src/pages/page-list/trash.tsx @@ -0,0 +1,15 @@ +import { Header } from '@/components/header'; +import { useEditor } from '@/providers/editor-provider'; +import { PageList } from '@/components/page-list'; + +export const Trash = () => { + const { pageList: allPageList } = useEditor(); + return ( + <> +
+ p.trash)} isTrash={true} /> + + ); +}; + +export default Trash; diff --git a/packages/app/src/providers/confirm-provider.tsx b/packages/app/src/providers/confirm-provider.tsx index 4b7b374d42..6f8a2049c3 100644 --- a/packages/app/src/providers/confirm-provider.tsx +++ b/packages/app/src/providers/confirm-provider.tsx @@ -3,12 +3,12 @@ import type { PropsWithChildren } from 'react'; import { Confirm, ConfirmProps } from '@/ui/confirm'; type ConfirmContextValue = { - confirm: (props: ConfirmProps) => void; + confirm: (props: ConfirmProps) => Promise; }; type ConfirmContextProps = PropsWithChildren<{}>; export const ConfirmContext = createContext({ - confirm: () => {}, + confirm: () => Promise.resolve(false), }); export const useConfirm = () => useContext(ConfirmContext); @@ -22,21 +22,33 @@ export const ConfirmProvider = ({ return ( { - const confirmId = String(Date.now()); - setConfirmRecord(oldConfirmRecord => { - return { - ...oldConfirmRecord, - [confirmId]: ( - { - delete confirmRecord[confirmId]; - setConfirmRecord({ ...confirmRecord }); - }} - /> - ), + confirm: ({ onClose, onCancel, onConfirm, ...props }: ConfirmProps) => { + return new Promise((resolve, reject) => { + const confirmId = String(Date.now()); + const closeHandler = () => { + delete confirmRecord[confirmId]; + setConfirmRecord({ ...confirmRecord }); }; + setConfirmRecord(oldConfirmRecord => { + return { + ...oldConfirmRecord, + [confirmId]: ( + { + closeHandler(); + onCancel?.(); + resolve(false); + }} + onConfirm={() => { + closeHandler(); + onConfirm?.(); + resolve(true); + }} + /> + ), + }; + }); }); }, }} diff --git a/packages/app/src/providers/editor-provider/editor-provider.tsx b/packages/app/src/providers/editor-provider/editor-provider.tsx index 1690dad88e..b22b14622e 100644 --- a/packages/app/src/providers/editor-provider/editor-provider.tsx +++ b/packages/app/src/providers/editor-provider/editor-provider.tsx @@ -39,6 +39,7 @@ type EditorHandlers = { favoritePage: (pageId: string) => void; unFavoritePage: (pageId: string) => void; toggleFavoritePage: (pageId: string) => void; + permanentlyDeletePage: (pageId: string) => void; }; type EditorContextProps = PropsWithChildren<{}>; @@ -59,6 +60,7 @@ export const EditorContext = createContext({ favoritePage: () => {}, unFavoritePage: () => {}, toggleFavoritePage: () => {}, + permanentlyDeletePage: () => {}, }); export const useEditor = () => useContext(EditorContext); @@ -108,19 +110,23 @@ export const EditorProvider = ({ }); }, deletePage: pageId => { - workspace?.setPage(pageId, { trash: true }); + workspace?.setPageMeta(pageId, { trash: true }); }, recyclePage: pageId => { - workspace?.setPage(pageId, { trash: false }); + workspace?.setPageMeta(pageId, { trash: false }); }, toggleDeletePage: pageId => { const pageMeta = workspace?.meta.pages.find(p => p.id === pageId); if (pageMeta) { - workspace?.setPage(pageId, { trash: !pageMeta.trash }); + workspace?.setPageMeta(pageId, { trash: !pageMeta.trash }); } }, favoritePage: pageId => { - workspace?.setPage(pageId, { favorite: true }); + workspace?.setPageMeta(pageId, { favorite: true }); + }, + permanentlyDeletePage: pageId => { + // TODO: workspace.meta.removePage or workspace.removePage? + workspace?.meta.removePage(pageId); }, unFavoritePage: pageId => { workspace?.setPageMeta(pageId, { favorite: true }); diff --git a/packages/app/src/providers/themeProvider.tsx b/packages/app/src/providers/themeProvider.tsx index ce397182ba..f821da5d0a 100644 --- a/packages/app/src/providers/themeProvider.tsx +++ b/packages/app/src/providers/themeProvider.tsx @@ -1,9 +1,13 @@ +import { createContext, useContext, useEffect, useState } from 'react'; import { ThemeProvider as EmotionThemeProvider, Global, css, } from '@emotion/react'; -import { createContext, useContext, useEffect, useState } from 'react'; +import { + ThemeProvider as MuiThemeProvider, + createTheme as MuiCreateTheme, +} from '@mui/material/styles'; import type { PropsWithChildren } from 'react'; import { Theme, @@ -26,6 +30,7 @@ export const ThemeContext = createContext({ }); export const useTheme = () => useContext(ThemeContext); +const muiTheme = MuiCreateTheme(); export const ThemeProvider = ({ defaultTheme = 'light', @@ -87,16 +92,21 @@ export const ThemeProvider = ({ // }, [mode]); return ( - - - {children} - + // Use MuiThemeProvider is just because some Transitions in Mui components need it + + + + + {children} + + + ); };