chore: updating index page removing sx props started tables

apps/mantine-react-table-docs/components/mdx/FeatureTable.module.css

@@ -1,3 +1,8 @@
 .mantineReactTable {
-  color: var(--TODO)
-}
+  width: 100%;
+  border-collapse: collapse;
+  caption-side: top;
+  color: #c1c2c5;
+  line-height: 1.55;
+  display: table;
+}

apps/mantine-react-table-docs/components/mdx/FeatureTable.tsx

@@ -206,6 +206,9 @@ const data = [
 export const FeatureTable = () => {
   return (
     <MantineReactTable
+      mantineTableProps={{
+        className: classes.mantineReactTable,
+      }}
       columns={columns}
       data={data}
       enablePagination={false}

apps/mantine-react-table-docs/components/mdx/LinkHeading.module.css

@@ -25,4 +25,7 @@
   &:hover {
     opacity: 1;
   }
+  @mixin light {
+    color: rgb(73, 80, 87);
+  }
 }

apps/mantine-react-table-docs/components/navigation/Footer.module.css

@@ -0,0 +1,27 @@
+.wrapper {
+  border-radius: 8px;
+  border-bottom-left-radius: 0%;
+  border-bottom-right-radius: 0%;
+  margin-top: 100px;
+  padding: 24px;
+}
+
+.directoryWrapper {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  margin-top: 16px;
+  gap: 8px;
+  justify-content: space-between;
+  flex-direction: row;
+
+  @media (max-width: 800px) {
+    flex-direction: column;
+    justify-content: space-around;
+  }
+
+  @media (max-width: 600px) {
+    flex-direction: column;
+    justify-content: flex-start;
+  }
+}

apps/mantine-react-table-docs/components/navigation/Footer.tsx

@@ -1,91 +1,63 @@
-import { Box, Divider, Anchor, Paper, Text } from '@mantine/core';
+import { Box, Divider, Anchor, Paper, Text, Flex } from '@mantine/core';
 import { TableOfContentsList } from './TableOfContentsList';
 import { routes } from './routes';
+import classes from './Footer.module.css';
 
 export const Footer = () => {
   return (
     <Paper
       component="footer"
       shadow="sm"
       withBorder
-      sx={{
-        borderRadius: '8px',
-        borderBottomLeftRadius: '0',
-        borderBottomRightRadius: '0',
-        marginTop: '100px',
-        padding: '24px',
-      }}
+      className={classes.wrapper}
     >
-      <Text color="dimmed" ta="center" mb="16px">
+      <Text c="dimmed" ta="center" mb="16px">
         © {new Date().getFullYear()} Kevin&nbsp;Van&nbsp;Cott
       </Text>
-      <Box
-        sx={{
-          display: 'flex',
-          justifyContent: 'center',
-          gap: '16px',
-          flexWrap: 'wrap',
-        }}
-      >
+      <Flex justify={'center'} gap={16} wrap="wrap">
         <Anchor
-          color="dimmed"
+          c="dimmed"
           href="https://www.npmjs.com/package/mantine-react-table"
           target="_blank"
           rel="noopener"
         >
           NPM
         </Anchor>
         <Anchor
-          color="dimmed"
+          c="dimmed"
           href="https://github.com/KevinVandy/mantine-react-table"
           target="_blank"
           rel="noopener"
         >
           Source Code
         </Anchor>
         <Anchor
-          color="dimmed"
+          c="dimmed"
           href="https://github.com/KevinVandy/mantine-react-table/issues"
           target="_blank"
           rel="noopener"
         >
           Submit a Bug Report
         </Anchor>
         <Anchor
-          color="dimmed"
+          c="dimmed"
           href="https://discord.gg/5wqyRx6fnm"
           target="_blank"
           rel="noopener"
         >
           Join&nbsp;the&nbsp;Discord!
         </Anchor>
         <Anchor
-          color="dimmed"
+          c="dimmed"
           href="https://twitter.com/kevinvancott"
           target="_blank"
           rel="noopener"
         >
           Twitter
         </Anchor>
-      </Box>
-      <Divider sx={{ margin: '2rem 0' }} />
-      <Box
-        sx={{
-          display: 'flex',
-          flexWrap: 'wrap',
-          marginTop: '16px',
-          gap: '8px',
-          justifyContent: 'space-between',
-          '@media (max-width: 800px)': {
-            flexDirection: 'column',
-            justifyContent: 'space-around',
-          },
-          '@media (max-width: 600px)': {
-            flexDirection: 'column',
-            justifyContent: 'flex-start',
-          },
-        }}
-      >
+      </Flex>
+      <Divider my={'2rem'} />
+      <Box className={classes.directoryWrapper}>
         <Box>
           <Text>Site Directory</Text>
           <TableOfContentsList items={routes} isFooter />

apps/mantine-react-table-docs/components/navigation/TableOfContent.module.css

@@ -0,0 +1,38 @@
+
+
+.navigationLinkFooter {
+  cursor: pointer;
+  line-height: 1.6rem;
+  font-size: 0.9rem;
+  text-decoration: none;
+
+  @mixin light {
+    color: var(--mantine-color-gray-7);
+  }
+
+  @mixin dark {
+    color: var(--mantine-color-gray-3);
+  }
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+/* We need to create another classnmae */
+.isNotNavigationLinkFooter {
+  cursor: pointer;
+  line-height: 2rem;
+  font-size: 1.2rem;
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+  @mixin light {
+    color: var(--mantine-color-gray-7);
+  }
+
+  @mixin dark {
+    color: var(--mantine-color-gray-3);
+  }
+}

apps/mantine-react-table-docs/components/navigation/TableOfContentsList.tsx

@@ -3,39 +3,31 @@ import Link from 'next/link';
 import { Box, Anchor } from '@mantine/core';
 import { LinkHeading } from '../mdx/LinkHeading';
 import { type RouteItem } from './routes';
+import classes from './TableOfContent.module.css';
 
 export const TableOfContentsListItem = ({
   item,
   isFooter = false,
 }: {
   item: RouteItem;
   isFooter?: boolean;
-}) => (
-  <li>
-    <Link href={item.href} passHref legacyBehavior>
-      <Anchor
-        sx={(theme) => ({
-          color: !isFooter
-            ? theme.colorScheme === 'dark'
-              ? theme.white
-              : theme.black
-            : theme.colorScheme === 'dark'
-            ? theme.colors.gray[3]
-            : theme.colors.gray[7],
-          cursor: 'pointer',
-          lineHeight: isFooter ? '1.6rem' : '2rem',
-          fontSize: isFooter ? '0.9rem' : '1.2rem',
-          textDecoration: 'none',
-          '&:hover': {
-            textDecoration: 'underline',
-          },
-        })}
-      >
-        {item.label}
-      </Anchor>
-    </Link>
-  </li>
-);
+}) => {
+  return (
+    <li>
+      <Link href={item.href} passHref legacyBehavior>
+        <Anchor
+          className={
+            isFooter
+              ? classes.navigationLinkFooter
+              : classes.isNotNavigationLinkFooter
+          }
+        >
+          {item.label}
+        </Anchor>
+      </Link>
+    </li>
+  );
+};
 
 interface Props {
   items: Array<RouteItem>;

apps/mantine-react-table-docs/example-groups/BasicExamples.tsx

@@ -15,10 +15,10 @@ const BasicExamples = ({ isPage = false }) => {
 
   return (
     <>
-      <Box sx={{ width: '100%', marginTop: '1rem' }}>
+      <Box w={'100%'} mt={1}>
         <Tabs
           value={isPage ? pathname.split('/').pop() : activeTab}
-          onTabChange={(newPath) =>
+          onChange={(newPath) =>
             isPage && newPath !== 'more'
               ? push(newPath as string)
               : setActiveTab(newPath as string)

apps/mantine-react-table-docs/pages/index.module.css

@@ -36,6 +36,7 @@
 .titleMantineReactTable {
   display: inline;
   font-size: 2rem;
+  line-height: 6rem;
   @media (min-width: 768px) {
     font-size: 4rem;
   }

apps/mantine-react-table-docs/pages/index.tsx

@@ -19,6 +19,7 @@ const HomePage = () => {
         Welcome To
         <br />
         <Text
+          fw={'bold'}
           variant="gradient"
           gradient={{ from: 'teal.7', to: 'blue.7', deg: 90 }}
           className={classes.titleMantineReactTable}