Repace MUI tabs in RouterTabs

Author: buberdds

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

@@ -23,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,
@@ -47,13 +50,7 @@ export const Staking: FC<StakingProps> = ({ account, isLoading }) => {
           <TabsTrigger value="staked">{t('common.staked')}</TabsTrigger>
           <TabsTrigger value="debonding">{t('common.debonding')}</TabsTrigger>
         </TabsList>
-        <StyledCard
-          sx={{
-            borderTopRightRadius: 0,
-            borderTopLeftRadius: 0,
-            borderTop: 'none',
-          }}
-        >
+        <StyledCard>
           <CardContent>
             {isLoading && <Skeleton className="h-[300px] mt-8" />}
             {!isLoading && account && (

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>