Replace MUI tabs with Oasis UI Library component

.changelog/2122.internal.md

@@ -0,0 +1 @@
+Remove usage of MUI Tabs component

src/app/components/DurationPills/index.tsx

@@ -1,19 +1,7 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import { styled } from '@mui/material/styles'
-import Box from '@mui/material/Box'
-import Chip from '@mui/material/Chip'
-import Typography from '@mui/material/Typography'
 import { ChartDuration } from '../../utils/chart-utils'
-import { COLORS } from '../../../styles/theme/colors'
-
-export const StyledBox = styled(Box)(({ theme }) => ({
-  backgroundColor: COLORS.brandDark,
-  width: 14,
-  height: 14,
-  marginRight: theme.spacing(3),
-  borderRadius: 4,
-}))
+import { Tabs, TabsList, TabsTrigger } from '@oasisprotocol/ui-library/src/components/tabs'
 
 type DurationPillsProps = {
   handleChange: (duration: ChartDuration) => void
@@ -38,25 +26,15 @@ export const DurationPills: FC<DurationPillsProps> = ({ handleChange, value }) =
   ]
 
   return (
-    <>
-      {options.map(option => (
-        <Chip
-          key={option.value}
-          onClick={() => handleChange(option.value)}
-          clickable
-          color="secondary"
-          label={
-            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-              <StyledBox />
-              <Typography component="span" sx={{ fontSize: 12 }}>
-                {option.label}
-              </Typography>
-            </Box>
-          }
-          sx={{ mr: 2 }}
-          variant={value === option.value ? 'outlined-selected' : 'outlined'}
-        />
-      ))}
-    </>
+    // Mobile margin prevents overflow Recharts
+    <Tabs defaultValue={value} className="my-2 lg:my-0">
+      <TabsList className="ml-auto w-full lg:w-auto">
+        {options.map(option => (
+          <TabsTrigger key={option.value} value={option.value} onClick={() => handleChange(option.value)}>
+            {option.label}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+    </Tabs>
   )
 }

src/app/components/FilterButtons/index.tsx

@@ -1,7 +1,4 @@
-import Box from '@mui/material/Box'
-import Chip from '@mui/material/Chip'
-import CheckIcon from '@mui/icons-material/Check'
-import { COLORS } from '../../../styles/theme/colors'
+import { Tabs, TabsList, TabsTrigger } from '@oasisprotocol/ui-library/src/components/tabs'
 
 type FilterButtonsProps<T extends string> = {
   options: { label: string; value: T }[]
@@ -11,27 +8,14 @@ type FilterButtonsProps<T extends string> = {
 
 export const FilterButtons = <T extends string>({ options, onSelect, value }: FilterButtonsProps<T>) => {
   return (
-    <Box component="span" fontSize={25}>
-      {options.map(option => {
-        const selected = option.value === value
-        return (
-          <Chip
-            key={option.value}
-            onClick={() => onSelect(option.value)}
-            clickable
-            color="secondary"
-            icon={selected ? <CheckIcon /> : undefined}
-            label={option.label}
-            sx={{
-              mr: 3,
-              borderColor: COLORS.brandMedium,
-              backgroundColor: selected ? COLORS.brandMedium : COLORS.brandMedium15,
-              color: selected ? COLORS.white : COLORS.grayExtraDark,
-            }}
-            variant={selected ? 'outlined-selected' : 'outlined'}
-          />
-        )
-      })}
-    </Box>
+    <Tabs defaultValue={value} className="inline-flex w-auto">
+      <TabsList>
+        {options.map(option => (
+          <TabsTrigger key={option.value} value={option.value} onClick={() => onSelect(option.value)}>
+            {option.label}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+    </Tabs>
   )
 }

src/app/components/LinkableCardLayout/index.tsx

@@ -13,7 +13,13 @@ type LinkableCardLayoutProps = {
 }
 export const LinkableCardLayout: FC<LinkableCardLayoutProps> = ({ children, containerId, title, action }) => {
   return (
-    <Card>
+    <Card
+      sx={{
+        borderTopRightRadius: 0,
+        borderTopLeftRadius: 0,
+        borderTop: 'none',
+      }}
+    >
       <LinkableDiv id={containerId}>
         <CardHeader disableTypography component="h3" title={title} action={action} />
       </LinkableDiv>

src/app/components/RouterTabs/index.tsx

@@ -1,7 +1,6 @@
 import { useLocation, Outlet, useMatches } from 'react-router-dom'
 import { NonScrollingRouterLink } from '../NonScrollingRouterLink'
-import Tabs from '@mui/material/Tabs'
-import Tab from '@mui/material/Tab'
+import { Tabs, TabsList, TabsTrigger } from '@oasisprotocol/ui-library/src/components/tabs'
 
 type RouterTabsProps<Context> = {
   tabs: {
@@ -29,18 +28,18 @@ export function RouterTabs<Context>({ tabs, context }: RouterTabsProps<Context>)
 
   return (
     <>
-      <Tabs value={targetTab?.to} variant="scrollable" scrollButtons={false}>
-        {tabs
-          .filter(tab => tab === targetTab || tab.visible !== false)
-          .map(tab => (
-            <Tab
-              key={tab.to}
-              component={NonScrollingRouterLink}
-              value={tab.to}
-              label={tab.label}
-              to={tab.to}
-            />
-          ))}
+      <Tabs value={targetTab?.to}>
+        <TabsList variant="layout">
+          {tabs
+            .filter(tab => tab === targetTab || tab.visible !== false)
+            .map(tab => (
+              <TabsTrigger key={tab.to} value={tab.to} asChild>
+                <NonScrollingRouterLink to={tab.to} className="flex items-center">
+                  {tab.label}
+                </NonScrollingRouterLink>
+              </TabsTrigger>
+            ))}
+        </TabsList>
       </Tabs>
       <Outlet context={context} />
     </>

src/app/pages/ConsensusAccountDetailsPage/Staking.tsx

@@ -1,12 +1,10 @@
-import { FC, useState } from 'react'
+import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import Box from '@mui/material/Box'
 import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
 import Link from '@mui/material/Link'
 import { Skeleton } from '@oasisprotocol/ui-library/src/components/ui/skeleton'
-import Tabs from '@mui/material/Tabs'
-import Tab from '@mui/material/Tab'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@oasisprotocol/ui-library/src/components/tabs'
 import { styled } from '@mui/material/styles'
 import {
   Account,
@@ -25,6 +23,9 @@ import { tableCellClasses } from '@mui/material/TableCell'
 
 export const StyledCard = styled(Card)(({ theme }) => ({
   flex: 1,
+  borderTopRightRadius: 0,
+  borderTopLeftRadius: 0,
+  borderTop: 'none',
   '&': {
     padding: `0 ${theme.spacing(4)}`,
     marginBottom: 0,
@@ -41,22 +42,31 @@ type StakingProps = {
 
 export const Staking: FC<StakingProps> = ({ account, isLoading }) => {
   const { t } = useTranslation()
-  const [tab, setTabValue] = useState(0)
 
   return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
-      <Tabs value={tab} onChange={(event, tab) => setTabValue(tab)} aria-label={t('validator.delegations')}>
-        <Tab label={t('common.staked')} />
-        <Tab label={t('common.debonding')} />
+    <div className="flex flex-col h-full">
+      <Tabs defaultValue="staked" className="h-full" aria-label={t('validator.delegations')}>
+        <TabsList variant="layout">
+          <TabsTrigger value="staked">{t('common.staked')}</TabsTrigger>
+          <TabsTrigger value="debonding">{t('common.debonding')}</TabsTrigger>
+        </TabsList>
+        <StyledCard>
+          <CardContent>
+            {isLoading && <Skeleton className="h-[300px] mt-8" />}
+            {!isLoading && account && (
+              <>
+                <TabsContent value="staked">
+                  <ActiveDelegations address={account?.address} />
+                </TabsContent>
+                <TabsContent value="debonding">
+                  <DebondingDelegations address={account?.address} />
+                </TabsContent>
+              </>
+            )}
+          </CardContent>
+        </StyledCard>
       </Tabs>
-      <StyledCard>
-        <CardContent>
-          {isLoading && <Skeleton className="h-[300px] mt-8" />}
-          {account && tab === 0 && <ActiveDelegations address={account?.address} />}
-          {account && tab === 1 && <DebondingDelegations address={account?.address} />}
-        </CardContent>
-      </StyledCard>
-    </Box>
+    </div>
   )
 }
 

src/app/pages/RuntimeAccountDetailsPage/ContractCodeCard.tsx

@@ -30,7 +30,13 @@ export const ContractCodeCard: FC<TokenDashboardContext> = ({ scope, address })
     .sort((a, b) => b.path.endsWith(entryFilePath) - a.path.endsWith(entryFilePath))
 
   return (
-    <Card>
+    <Card
+      sx={{
+        borderTopRightRadius: 0,
+        borderTopLeftRadius: 0,
+        borderTop: 'none',
+      }}
+    >
       {noCode && <CardEmptyState label={t('contract.noCode')} />}
       {contract && (contract.creation_bytecode || contract.runtime_bytecode) && (
         <CardContent>