Use material-tailwind to replace MUI

packages/extension/package.json

@@ -28,6 +28,7 @@
  "dependencies": {
  "@emotion/react": "11.11.1",
  "@emotion/styled": "11.11.0",
+ "@material-tailwind/react": "^2.1.5",
  "@mui/icons-material": "5.14.19",
  "@mui/material": "5.14.19",
  "@mui/styles": "5.14.19",

packages/extension/src/js/components/App.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useMemo, StrictMode } from 'react'
 import { observer } from 'mobx-react-lite'
 import useSystemTheme from 'use-system-theme'
+import { ThemeProvider as MaterialTailwindThemeProvider } from '@material-tailwind/react'
 import { createTheme, ThemeProvider } from '@mui/material/styles'
 import { darkTheme, lightTheme } from 'libs/themes'
 import { DndProvider } from 'react-dnd'
@@ -20,7 +21,7 @@ export default observer(() => {
  (!userStore.useSystemTheme && userStore.darkTheme)
  const theme = useMemo(
  () => createTheme(isDarkTheme ? darkTheme : lightTheme),
- [isDarkTheme]
+ [isDarkTheme],
  )
  useEffect(() => {
  const { availHeight, availLeft, availTop, availWidth } = screen
@@ -36,16 +37,18 @@ export default observer(() => {
  <StrictMode>
  <StoreContext.Provider value={store}>
  <ThemeProvider theme={theme}>
- {/* The context for DndProvider is a workaround: https://github.com/react-dnd/react-dnd/issues/3257#issuecomment-1239254032 */}
- <DndProvider context={window} backend={HTML5Backend}>
- <ThemeContext.Provider value={isDarkTheme}>
- <ReduceMotionProvider>
- <BrowserRouter>
- <Main />
- </BrowserRouter>
- </ReduceMotionProvider>
- </ThemeContext.Provider>
- </DndProvider>
+ <MaterialTailwindThemeProvider>
+ {/* The context for DndProvider is a workaround: https://github.com/react-dnd/react-dnd/issues/3257#issuecomment-1239254032 */}
+ <DndProvider context={window} backend={HTML5Backend}>
+ <ThemeContext.Provider value={isDarkTheme}>
+ <ReduceMotionProvider>
+ <BrowserRouter>
+ <Main />
+ </BrowserRouter>
+ </ReduceMotionProvider>
+ </ThemeContext.Provider>
+ </DndProvider>
+ </MaterialTailwindThemeProvider>
  </ThemeProvider>
  </StoreContext.Provider>
  </StrictMode>

packages/extension/src/js/components/CloseButton.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import classNames from 'classnames'
-
+import { IconButton } from '@material-tailwind/react'
 export interface CloseButtonProps {
  /**
  * Is the button disabled
@@ -15,23 +15,24 @@ export interface CloseButtonProps {
 const CloseButton: React.FC<CloseButtonProps> = (props) => {
  const { onClick, disabled, ...restProps } = props
  return (
- <button
+ <IconButton
  {...restProps}
  {...{
  onClick,
  disabled,
  }}
+ variant="text"
  className={classNames(
- 'inline-flex justify-center w-8 h-8 m-2 text-xl text-red-200 bg-transparent rounded-full disabled:opacity-75',
+ 'bg-transparent rounded-full text-red-200 disabled:opacity-75',
  {
  'hover:text-red-500 hover:bg-red-100 focus:outline-none focus:ring active:bg-red-300 active:text-red-700':
  !disabled,
  'cursor-not-allowed': disabled,
- }
+ },
  )}
  >
- x
- </button>
+ X
+ </IconButton>
  )
 }
 

packages/extension/src/js/components/CommandPalette.tsx

@@ -1,14 +1,14 @@
 import React from 'react'
 import ReactCommandPalette from 'react-command-palette'
 import { observer } from 'mobx-react-lite'
-import Tooltip from '@mui/material/Tooltip'
+import { Tooltip } from '@material-tailwind/react'
 import LiveHelpOutlined from '@mui/icons-material/LiveHelpOutlined'
 import IconButton from '@mui/material/IconButton'
 import { useStore } from './hooks/useStore'
 import CommandPaletteHeader from './CommandPaletteHeader'
 
 const trigger = (
- <Tooltip title="Command Palette">
+ <Tooltip content="Command Palette">
  <IconButton onClick={() => {}} className="focus:outline-none">
  <LiveHelpOutlined />
  </IconButton>

packages/extension/src/js/components/OpenInTab.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
-import Tooltip from '@mui/material/Tooltip'
+import { Tooltip } from '@material-tailwind/react'
 import OpenInBrowser from '@mui/icons-material/OpenInBrowser'
 import IconButton from '@mui/material/IconButton'
 import { openInNewTab } from 'libs'
 
 export default () => (
- <Tooltip title="Open in new tab" placement="left">
+ <Tooltip content="Open in new tab" placement="left">
  <IconButton onClick={openInNewTab} className="focus:outline-none">
  <OpenInBrowser />
  </IconButton>

packages/extension/src/js/components/SyncButton.tsx

@@ -1,14 +1,14 @@
 import React from 'react'
 import { observer } from 'mobx-react-lite'
-import Tooltip from '@mui/material/Tooltip'
+import { Tooltip } from '@material-tailwind/react'
 import IconButton from '@mui/material/IconButton'
 import Sync from '@mui/icons-material/Sync'
 import { useStore } from './hooks/useStore'
 
 export default observer(() => {
  const { windowStore } = useStore()
  return (
- <Tooltip title="Sync All Windows" placement="left">
+ <Tooltip content="Sync All Windows" placement="left">
  <IconButton
  onClick={() => windowStore.syncAllWindows()}
  className="focus:outline-none"

packages/extension/src/js/components/Tab/Icon.tsx

@@ -1,23 +1,17 @@
 import React from 'react'
 import classNames from 'classnames'
 import { observer } from 'mobx-react-lite'
-import Checkbox from '@mui/material/Checkbox'
-import IconButton from '@mui/material/IconButton'
+import { Checkbox } from '@material-tailwind/react'
 import { useStore } from 'components/hooks/useStore'
 import { TabProps } from 'components/types'
 
-const ARIA_LABEL = 'Toggle select'
-
 export const Icon = observer((props: TabProps) => {
  const { userStore } = useStore()
- const { focus, select, iconUrl, isSelected, bulkSelect } = props.tab
+ const { select, iconUrl, isSelected, bulkSelect } = props.tab
  const checkbox = (
  <Checkbox
- color="primary"
+ color="indigo"
  checked={isSelected}
- inputProps={{
- 'aria-label': ARIA_LABEL,
- }}
  onClick={(e) => {
  if (process.env.TARGET_BROWSER === 'firefox') {
  if (e.altKey) {
@@ -36,21 +30,14 @@ export const Icon = observer((props: TabProps) => {
  return checkbox
  }
  return (
- <div className="group">
+ <div className="flex justify-center w-12 group">
  <div
- className={classNames({
+ className={classNames('bg-blue-gray-100', {
  hidden: isSelected,
  'group-hover:hidden': !isSelected,
  })}
  >
- <IconButton
- aria-label={ARIA_LABEL}
- className="focus:outline-none focus:ring"
- onClick={select}
- onFocus={focus}
- >
- <img className="w-6 h-6" src={iconUrl} />
- </IconButton>
+ <img className="w-6 h-6" src={iconUrl} />
  </div>
  <div
  className={classNames('focus:outline-none focus:ring', {
@@ -70,14 +57,8 @@ export default observer((props: TabProps) => {
  return <Icon {...props} />
  }
  return (
- <div>
- <IconButton
- disabled
- aria-label={ARIA_LABEL}
- className="focus:outline-none focus:ring"
- >
- <img className="w-6 h-6" src={iconUrl} />
- </IconButton>
+ <div className="flex items-center justify-center w-10 group">
+ <img className="w-6 h-6" src={iconUrl} />
  </div>
  )
 })

packages/extension/src/js/components/Tab/TabContent.tsx

@@ -3,7 +3,7 @@ import { observer } from 'mobx-react-lite'
 import classNames from 'classnames'
 import Url from 'components/Tab/Url'
 import { useStore } from 'components/hooks/useStore'
-import Tooltip from '@mui/material/Tooltip'
+import { Tooltip } from '@material-tailwind/react'
 import { TabProps } from 'components/types'
 import HighlightNode from 'components/HighlightNode'
 
@@ -32,7 +32,7 @@ const TabContent = observer(
  </div>
  )
  return (
- <Tooltip {...{ open, title: tooltip }}>
+ <Tooltip {...{ open, content: tooltip }}>
  <button
  ref={buttonRef}
  onClick={activate}
@@ -43,7 +43,7 @@ const TabContent = observer(
  </button>
  </Tooltip>
  )
- }
+ },
 )
 
 export default observer((props: TabProps) => {
@@ -58,14 +58,14 @@ export default observer((props: TabProps) => {
  }
  return <HighlightNode {...{ query, text }} />
  },
- [isMatched, query]
+ [isMatched, query],
  )
  const duplicated = highlightDuplicatedTab && isDuplicated
  const buttonClassName = classNames(
  'group flex flex-col justify-center flex-1 h-12 overflow-hidden text-left m-0 rounded-sm text-base',
  {
  'text-red-400': duplicated,
- }
+ },
  )
  const content = (
  <>

packages/extension/src/js/components/ThemeToggle.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { observer } from 'mobx-react-lite'
-import Tooltip from '@mui/material/Tooltip'
+import { Tooltip } from '@material-tailwind/react'
 import IconButton from '@mui/material/IconButton'
 import LightbulbOutline from 'svgIcons/LightbulbOutline'
 import LightbulbFull from 'svgIcons/LightbulbFull'
@@ -13,7 +13,7 @@ export default observer(() => {
  } = useStore()
  const isDarkTheme = useTheme()
  return (
- <Tooltip title="Toggle light/dark theme" placement="left">
+ <Tooltip content="Toggle light/dark theme" placement="left">
  <IconButton
  onClick={() => toggleDarkTheme(isDarkTheme)}
  className="focus:outline-none"

packages/extension/src/js/components/Toolbar/Close.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { observer } from 'mobx-react-lite'
-import Tooltip from '@mui/material/Tooltip'
+import { Tooltip } from '@material-tailwind/react'
 import { TOOLTIP_DELAY } from 'libs'
 import { useStore } from 'components/hooks/useStore'
 import CloseButton from 'components/CloseButton'
@@ -10,7 +10,7 @@ export default observer(() => {
  const { tabDescription } = tabStore
  const title = `Close ${tabDescription}`
  return (
- <Tooltip title={title} enterDelay={TOOLTIP_DELAY}>
+ <Tooltip content={title} enterDelay={TOOLTIP_DELAY}>
  <div className="flex">
  <CloseButton
  {...{

packages/extension/src/js/components/Toolbar/GroupAndSort.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { observer } from 'mobx-react-lite'
-import Tooltip from '@mui/material/Tooltip'
+import { Tooltip } from '@material-tailwind/react'
 import FilterList from '@mui/icons-material/FilterList'
 import IconButton from '@mui/material/IconButton'
 import { TOOLTIP_DELAY } from 'libs'
@@ -13,7 +13,7 @@ export default observer(() => {
 
  const { groupTabs } = arrangeStore
  return (
- <Tooltip title={TITLE} enterDelay={TOOLTIP_DELAY}>
+ <Tooltip content={TITLE} enterDelay={TOOLTIP_DELAY}>
  <div className="flex">
  <IconButton
  onClick={() => groupTabs()}

packages/extension/src/js/components/Toolbar/Help.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { observer } from 'mobx-react-lite'
 import Help from '@mui/icons-material/Help'
 import IconButton from '@mui/material/IconButton'
-import Tooltip from '@mui/material/Tooltip'
+import { Tooltip } from '@material-tailwind/react'
 import { TOOLTIP_DELAY } from 'libs'
 import { useStore } from 'components/hooks/useStore'
 
@@ -11,7 +11,7 @@ const TITLE = 'Show shortcut hints'
 export default observer(() => {
  const { shortcutStore } = useStore()
  return (
- <Tooltip title={TITLE} enterDelay={TOOLTIP_DELAY}>
+ <Tooltip content={TITLE} enterDelay={TOOLTIP_DELAY}>
  <div className="flex">
  <IconButton
  onClick={() => shortcutStore.openDialog()}

packages/extension/src/js/components/Toolbar/InvertSelect.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { observer } from 'mobx-react-lite'
-import Tooltip from '@mui/material/Tooltip'
+import { Tooltip } from '@material-tailwind/react'
 import Flip from '@mui/icons-material/Flip'
 import IconButton from '@mui/material/IconButton'
 import { TOOLTIP_DELAY } from 'libs'
@@ -12,7 +12,7 @@ export default observer(() => {
  const { searchStore } = useStore()
  const { invertSelect, matchedTabs } = searchStore
  return (
- <Tooltip title={TITLE} enterDelay={TOOLTIP_DELAY}>
+ <Tooltip content={TITLE} enterDelay={TOOLTIP_DELAY}>
  <div className="flex">
  <IconButton
  onClick={invertSelect}

packages/extension/src/js/components/Toolbar/NewWindow.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { observer } from 'mobx-react-lite'
-import Tooltip from '@mui/material/Tooltip'
+import { Tooltip } from '@material-tailwind/react'
 import OpenInNew from '@mui/icons-material/OpenInNew'
 import IconButton from '@mui/material/IconButton'
 import { TOOLTIP_DELAY } from 'libs'
@@ -12,7 +12,7 @@ export default observer(() => {
  const { selection, tabDescription } = tabStore
  const title = `Open ${tabDescription} in new window`
  return (
- <Tooltip title={title} enterDelay={TOOLTIP_DELAY}>
+ <Tooltip content={title} enterDelay={TOOLTIP_DELAY}>
  <div className="flex">
  <IconButton
  onClick={() => dropToNewWindow()}

packages/extension/src/js/components/Toolbar/Reload.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { observer } from 'mobx-react-lite'
 import Refresh from '@mui/icons-material/Refresh'
 import IconButton from '@mui/material/IconButton'
-import Tooltip from '@mui/material/Tooltip'
+import { Tooltip } from '@material-tailwind/react'
 import { TOOLTIP_DELAY } from 'libs'
 import { useStore } from 'components/hooks/useStore'
 
@@ -11,7 +11,7 @@ const TITLE = 'Reload select tab(s)'
 export default observer(() => {
  const { hasFocusedOrSelectedTab, reload } = useStore()
  return (
- <Tooltip title={TITLE} enterDelay={TOOLTIP_DELAY}>
+ <Tooltip content={TITLE} enterDelay={TOOLTIP_DELAY}>
  <div className="flex">
  <IconButton
  onClick={reload}

packages/extension/src/js/components/Toolbar/RemoveDuplicated.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { observer } from 'mobx-react-lite'
 import DeleteSweep from '@mui/icons-material/DeleteSweep'
 import IconButton from '@mui/material/IconButton'
-import Tooltip from '@mui/material/Tooltip'
+import { Tooltip } from '@material-tailwind/react'
 import { TOOLTIP_DELAY } from 'libs'
 import { useStore } from 'components/hooks/useStore'
 
@@ -12,7 +12,7 @@ export default observer(() => {
  const { windowStore } = useStore()
  const { cleanDuplicatedTabs, duplicatedTabs } = windowStore
  return (
- <Tooltip title={TITLE} enterDelay={TOOLTIP_DELAY}>
+ <Tooltip content={TITLE} enterDelay={TOOLTIP_DELAY}>
  <div className="flex">
  <IconButton
  onClick={cleanDuplicatedTabs}