Merge pull request #2351 from oasisprotocol/mz/mui

Remove MUI themes and eslint rules

Author: buberdds

.changelog/2351.internal.md

@@ -0,0 +1 @@
+Remove MUI themes and eslint rules

.eslintrc.js

@@ -21,14 +21,6 @@ const config = {
       'error',
       {
         paths: [
-          {
-            name: '@mui/material',
-            message: "Use '@mui/material/*' instead.",
-          },
-          {
-            name: '@mui/icons-material',
-            message: "Use '@mui/icons-material/*' instead.",
-          },
           {
             name: 'date-fns',
             message: "Use 'date-fns/*' instead.",
@@ -43,10 +35,6 @@ const config = {
           },
         ],
         patterns: [
-          {
-            group: ['@mui/system', '@emotion/styled'],
-            message: "Use '@mui/material/styles' instead.",
-          },
           {
             group: ['**/oasis-nexus/generated/api'],
             message: "Import 'oasis-nexus/api' instead.",

package.json

@@ -52,7 +52,6 @@
     "@fontsource-variable/roboto-mono": "^5.0.17",
     "@metamask/jazzicon": "2.0.0",
     "@monaco-editor/react": "^4.7.0",
-    "@mui/base": "5.0.0-beta.61",
     "@mui/icons-material": "5.16.7",
     "@mui/material": "5.16.7",
     "@oasisprotocol/client": "1.2.0",

src/app/components/AccountAvatar/InitialsAvatar.tsx

@@ -25,7 +25,7 @@ export const InitialsAvatar = ({
   return (
     <svg width={width} viewBox="0 0 100 100" style={style}>
       <rect width="100" height="100" rx="50" fill={COLORS.brandDark} />
-      <text fontSize="40" x="50" y="50" dominantBaseline="central" textAnchor="middle" fill={COLORS.white}>
+      <text fontSize="40" x="50" y="50" dominantBaseline="central" textAnchor="middle" fill="#ffffff">
         {extractTwoChars(name)}
       </text>
     </svg>

src/app/components/ThemeByScope/index.tsx

@@ -1,19 +1,13 @@
 import { FC, ReactNode } from 'react'
 import { Network } from '../../../types/network'
-import { ThemeProvider } from '@mui/material/styles'
-import { getThemeForScope } from '../../../styles/theme'
 import { fixedNetwork } from '../../utils/route-utils'
 import { Layer } from '../../../oasis-nexus/api'
 
 export const ThemeByScope: FC<{
   network: Network
   layer?: Layer
   children: React.ReactNode
-}> = ({ network, layer, children }) => (
-  <ThemeProvider theme={getThemeForScope(network, layer)}>
-    <div className={network}>{children}</div>
-  </ThemeProvider>
-)
+}> = ({ network, children }) => <div className={network}>{children}</div>
 
 export const withDefaultTheme = (node: ReactNode, alwaysMainnet = false) => (
   <ThemeByScope network={alwaysMainnet ? 'mainnet' : (fixedNetwork ?? 'mainnet')}>{node}</ThemeByScope>

src/app/components/UptimeStatus/index.tsx

@@ -43,14 +43,12 @@ export const UptimeStatus: FC<UptimeStatusProps> = ({ uptime, small }) => {
           <div
             key={`${value}-${index}`}
             className={cn(
-              'inline-block',
               small
                 ? 'w-[3px] min-w-[3px] h-[15px] rounded-[2px] mr-[1px]'
                 : 'w-[7px] min-w-[7px] rounded-[4px] mr-[2px]',
             )}
             style={{
               backgroundColor: getUptimeItemColor(value),
-              color: COLORS.white,
               height: `${Math.round((value * 45) / 1200)}px`,
             }}
           />

src/app/components/charts/PieChart.tsx

@@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next'
 import CircleIcon from '@mui/icons-material/Circle'
 import { TooltipContent, type Formatters } from './Tooltip'
 import { COLORS } from '../../../styles/theme/colors'
-import { COLORS as TESTNET_COLORS } from '../../../styles/theme/testnet/colors'
 import { Props } from 'recharts/types/component/DefaultLegendContent'
 import { PieSectorDataItem } from 'recharts/types/polar/Pie'
 import { cn } from '@oasisprotocol/ui-library/src/lib/utils'
@@ -16,7 +15,7 @@ interface PieChartProps<T extends object> extends Formatters {
   prependLegendList?: ReactNode
 }
 
-const colorPalette = [COLORS.brandDark, COLORS.brandMedium, TESTNET_COLORS.testnet, COLORS.grayMedium2]
+const colorPalette = ['#0500E2', '#0092f6', '#ffa800', '#d5d6d7']
 
 type LegendListItemProps = {
   children: ReactNode

src/app/pages/NFTInstanceDashboardPage/InstanceImageCard.tsx

@@ -10,7 +10,6 @@ import OpenInFullIcon from '@mui/icons-material/OpenInFull'
 import { EvmNft } from 'oasis-nexus/api'
 import { processNftImageUrl } from '../../utils/nft-images'
 import { isUrlSafe } from '../../utils/url'
-import { COLORS } from '../../../styles/theme/colors'
 import { ImagePreview } from '../../components/ImagePreview'
 import { NoPreview } from '../../components/NoPreview'
 import { cn } from '@oasisprotocol/ui-library/src/lib/utils'
@@ -78,17 +77,9 @@ export const InstanceImageCard: FC<InstanceImageCardProps> = ({ isFetched, isLoa
   const [imageLoadError, setImageLoadError] = useState(false)
 
   return (
-    <Card
-      variant="layout"
-      style={{
-        background: darkMode ? COLORS.grayExtraDark : COLORS.white,
-      }}
-    >
+    <Card variant="layout" className={cn(darkMode ? 'bg-gray-900' : 'bg-white')}>
       <CardContent>
-        <div
-          className={cn('flex flex-col items-center justify-between', darkMode ? 'bg-gray-900' : 'bg-white')}
-          style={{ minHeight: imageSize }}
-        >
+        <div className="flex flex-col items-center justify-between" style={{ minHeight: imageSize }}>
           {isLoading && <Skeleton className="w-[350px] h-[350px]" />}
           {/* API did not process NFT data fully */}
           {isFetched && !nft?.image && <NoPreview placeholderSize={imageSize} />}

src/app/pages/RuntimeAccountDetailsPage/Staking.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Card, CardContent, CardHeader, CardTitle } from '@oasisprotocol/ui-library/src/components/cards'
-import Link from '@mui/material/Link'
+import { Link } from '@oasisprotocol/ui-library/src/components/link'
 import { Skeleton } from '@oasisprotocol/ui-library/src/components/ui/skeleton'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@oasisprotocol/ui-library/src/components/tabs'
 import {
@@ -79,7 +79,7 @@ const ActiveDelegations: FC<DelegationCardProps> = ({ address }) => {
   if (isFetched && !delegationsQuery.data?.data.delegations.length) {
     return (
       <AccountCardEmptyState label={t('account.notStaking')}>
-        <Link href={dapps.stake} rel="noopener noreferrer" target="_blank">
+        <Link className="font-semibold" href={dapps.stake} rel="noopener noreferrer" target="_blank">
           {t('account.startStaking')}
         </Link>
       </AccountCardEmptyState>

src/app/pages/SearchResultsPage/ExploreOasisButton.tsx

@@ -1,6 +1,6 @@
 import { useNavigate } from 'react-router-dom'
 import { FC, useCallback } from 'react'
-import { Button } from '@mui/base/Button'
+import { Button } from '@oasisprotocol/ui-library/src/components/ui/button'
 import ArrowForward from '@mui/icons-material/ArrowForward'
 import { useTranslation } from 'react-i18next'
 
@@ -9,15 +9,7 @@ export const ExploreOasisButton: FC = () => {
   const navigate = useNavigate()
   const explore = useCallback(() => navigate('/'), [navigate])
   return (
-    <Button
-      style={{
-        marginTop: '2em',
-        paddingLeft: '1em',
-        paddingRight: '1em',
-        height: '3em',
-      }}
-      onClick={explore}
-    >
+    <Button variant="ghost" className="mt-8" size="lg" onClick={explore}>
       <div className="flex items-center gap-1">
         {t('home.exploreBtnText')}
         <ArrowForward fontSize={'small'} />