Improve tab scaling styles (#1706)

Co-authored-by: Carson Full <[email protected]>

Author: rdonigian

src/components/Tabs/Tab.tsx

@@ -0,0 +1,19 @@
+import { Tab as BaseTab, TabProps, TabTypeMap } from '@mui/material';
+// eslint-disable-next-line @seedcompany/no-restricted-imports
+import { Link, LinkProps } from 'react-router-dom';
+
+export const Tab: typeof BaseTab = (props: TabTypeMap['props']) => (
+  <BaseTab
+    {...props}
+    // Wrap string labels in span so we can scale them when selected (CSS in theme)
+    label={
+      typeof props.label === 'string' ? <span>{props.label}</span> : props.label
+    }
+  />
+);
+
+export const TabLink = (
+  props: Omit<TabProps<'a'>, 'component'> & { selected?: boolean } & LinkProps
+) => (
+  <Tab component={Link} {...props} aria-current={props.selected && 'page'} />
+);

src/components/Tabs/index.tsx

@@ -1,2 +1,3 @@
+export * from './Tab';
 export * from './TabsContainer';
 export * from './TabPanelContent';

src/scenes/Partners/Detail/PartnerDetail.tsx

@@ -5,7 +5,7 @@ import {
   Timeline as TimelineIcon,
 } from '@mui/icons-material';
 import { TabContext, TabList, TabPanel } from '@mui/lab';
-import { Box, Skeleton, Stack, Tab, Tooltip, Typography } from '@mui/material';
+import { Box, Skeleton, Stack, Tooltip, Typography } from '@mui/material';
 import { Many, Nil } from '@seedcompany/common';
 import { Helmet } from 'react-helmet-async';
 import { useParams } from 'react-router-dom';
@@ -17,7 +17,7 @@ import { Error } from '~/components/Error';
 import { FormattedDate, FormattedDateTime } from '~/components/Formatters';
 import { IconButton } from '~/components/IconButton';
 import { InactiveStatusIcon } from '~/components/Icons/InactiveStatusIcon';
-import { TabsContainer } from '~/components/Tabs';
+import { Tab, TabsContainer } from '~/components/Tabs';
 import { TogglePinButton } from '~/components/TogglePinButton';
 import { EnumParam, makeQueryHandler, withDefault } from '~/hooks';
 import { useComments } from '../../../components/Comments/CommentsContext';

src/scenes/Projects/List/ProjectList.tsx

@@ -3,8 +3,7 @@ import { Stack } from '@mui/material';
 import { Helmet } from 'react-helmet-async';
 import { useLocation } from 'react-router-dom';
 import { ContentContainer } from '~/components/Layout';
-import { TabPanelContent, TabsContainer } from '~/components/Tabs';
-import { TabLink } from '../../../components/Routing/TabLink';
+import { TabLink, TabPanelContent, TabsContainer } from '~/components/Tabs';
 import { EngagementsPanel } from './EngagementsPanel';
 import { ProjectsPanel } from './ProjectsPanel';
 

src/theme/overrides.ts

@@ -207,9 +207,13 @@ export const appComponents = ({
       styleOverrides: {
         root: ({ theme }) => ({
           textTransform: 'none',
-          transition: theme.transitions.create('transform'),
-          '&.Mui-selected': {
-            transform: 'scale(1.43)', // 20px
+          fontSize: '1.25rem',
+          'span:not(.MuiTouchRipple-root)': {
+            transition: theme.transitions.create('transform'),
+            transform: 'scale(.75)',
+          },
+          '&.Mui-selected span:not(.MuiTouchRipple-root)': {
+            transform: 'scale(1)',
           },
         }),
       },