Merge pull request #267 from icflorescu/next

Docs website tweaks
icflorescu · Apr 21, 2023 · 6e7c60a · 6e7c60a
2 parents 2dd9913 + 76d0ce7
commit 6e7c60a
Show file tree

Hide file tree

Showing 10 changed files with 278 additions and 192 deletions.
diff --git a/docs/components/AppFooter.tsx b/docs/components/AppFooter.tsx
@@ -1,4 +1,4 @@
-import { createStyles, Group, Text, useMantineColorScheme } from '@mantine/core';
+import { createStyles, Group, Text } from '@mantine/core';
 import {
   AUTHOR_LINK,
   FOOTER_HEIGHT_ABOVE_NAVBAR_BREAKPOINT,
@@ -53,13 +53,15 @@ const useStyles = createStyles((theme) => {
 });
 
 export default function AppFooter() {
-  const { colorScheme } = useMantineColorScheme();
-  const badgeStyle = colorScheme === 'dark' ? 'flat' : 'social';
-  const { classes } = useStyles();
+  const {
+    classes,
+    theme: { colors },
+  } = useStyles();
+  const badgeParams = `?style=flat&color=${colors.blue[7].substring(1)}`;
   return (
     <div className={classes.root}>
       <ExternalLink to={`${REPO_LINK}/blob/main/LICENSE`} rel="license">
-        <img src={`https://img.shields.io/npm/l/mantine-datatable.svg?style=${badgeStyle}`} alt="MIT License" />
+        <img src={`https://img.shields.io/npm/l/mantine-datatable.svg${badgeParams}`} alt="MIT License" />
       </ExternalLink>
       <Text size="sm" align="center">
         Built by <ExternalLink to={AUTHOR_LINK}>Ionut-Cristian Florescu</ExternalLink> and{' '}
@@ -71,12 +73,12 @@ export default function AppFooter() {
       <Group spacing="xs">
         <ExternalLink to={REPO_LINK}>
           <img
-            src={`https://img.shields.io/github/stars/icflorescu/mantine-datatable?style=${badgeStyle}`}
+            src={`https://img.shields.io/github/stars/icflorescu/mantine-datatable${badgeParams}`}
             alt="GitHub Stars"
           />
         </ExternalLink>
         <ExternalLink to="https://npmjs.org/package/mantine-datatable">
-          <img src={`https://img.shields.io/npm/dm/mantine-datatable.svg?style=${badgeStyle}`} alt="NPM Downloads" />
+          <img src={`https://img.shields.io/npm/dm/mantine-datatable.svg${badgeParams}`} alt="NPM Downloads" />
         </ExternalLink>
       </Group>
     </div>

diff --git a/docs/components/AppHeader.tsx b/docs/components/AppHeader.tsx
@@ -1,8 +1,6 @@
 import {
   ActionIcon,
-  Box,
   Button,
-  Center,
   createStyles,
   Group,
   px,
@@ -11,15 +9,19 @@ import {
   useMantineColorScheme,
 } from '@mantine/core';
 import { useWindowScroll } from '@mantine/hooks';
-import { IconMenu2, IconMoon, IconSun } from '@tabler/icons-react';
-import { HEADER_HEIGHT, NAVBAR_BREAKPOINT, NAVBAR_WIDTH, REPO_LINK } from '~/config';
+import { IconHeartFilled, IconMenu2, IconMoon, IconSun } from '@tabler/icons-react';
+import { HEADER_HEIGHT, NAVBAR_BREAKPOINT, NAVBAR_WIDTH, REPO_LINK, SPONSOR_LINK } from '~/config';
+import AppHeaderColorSchemeLabel from './AppHeaderColorSchemeLabel';
 import GitHubIcon from './GitHubIcon';
 import Logo from './Logo';
 
+const REPO_LINK_ARIA_LABEL = 'View Mantine DataTable source code on GitHub';
+const SPONSORS_LINK_ARIA_LABEL = 'Sponsor Mantine DataTable project on GitHub Sponsors';
+
 const useStyles = createStyles((theme) => {
   const breakpointMediaQuery = `@media (min-width: ${theme.breakpoints[NAVBAR_BREAKPOINT]})`;
   const buttonBorder = `1px solid ${theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]}`;
-  const actionIconColor = theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6];
+  const actionIconColor = theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[7];
   const shadowGradientAlpha = theme.colorScheme === 'dark' ? 0.3 : 0.03;
 
   return {
@@ -69,41 +71,45 @@ const useStyles = createStyles((theme) => {
       },
     },
     menuIcon: {
-      color: actionIconColor,
+      color: theme.fn[theme.colorScheme === 'dark' ? 'lighten' : 'darken'](actionIconColor, 0.75),
       [breakpointMediaQuery]: {
         display: 'none',
       },
     },
     logo: {
-      opacity: 1,
-      transition: 'opacity .15s ease',
       [breakpointMediaQuery]: {
         display: 'none',
       },
     },
-    logoWithNavbarVisible: {
-      opacity: 0,
-    },
     actionIcons: {
       [breakpointMediaQuery]: {
         display: 'none',
       },
     },
     actionIcon: {
-      border: `1px solid ${actionIconColor}`,
+      border: `1px solid ${theme.fn[theme.colorScheme === 'dark' ? 'darken' : 'lighten'](actionIconColor, 0.25)}`,
       color: actionIconColor,
     },
-    sourceCodeButton: {
-      border: buttonBorder,
+    actionIconRed: {
+      color: theme.colors.red[theme.colorScheme === 'dark' ? 8 : 6],
+    },
+    buttons: {
       display: 'none',
       [breakpointMediaQuery]: {
         display: 'inherit',
       },
     },
-    sourceCodeButtonIcon: {
-      '&&': { marginRight: 5 },
+    button: {
+      border: buttonBorder,
+      paddingRight: theme.spacing.xs,
+    },
+    buttonIcon: {
+      '&&': { marginRight: 8 },
+    },
+    buttonIconRed: {
+      color: theme.colors.red[theme.colorScheme === 'dark' ? 8 : 6],
     },
-    sourceCodeButtonLabel: {
+    buttonLabel: {
       marginBottom: -2,
     },
     colorSchemeSegmentedControlContainer: {
@@ -118,49 +124,74 @@ const useStyles = createStyles((theme) => {
   };
 });
 
-export default function AppHeader({
-  navbarVisible,
-  onShowNavbarClick,
-}: {
-  navbarVisible: boolean;
-  onShowNavbarClick: () => void;
-}) {
+export default function AppHeader({ onShowNavbarClick }: { onShowNavbarClick: () => void }) {
   const { colorScheme, toggleColorScheme } = useMantineColorScheme();
   const ColorSchemeIcon = colorScheme === 'dark' ? IconSun : IconMoon;
   const [{ y: windowScrollY }] = useWindowScroll();
 
   const { classes, cx } = useStyles();
 
   return (
-    <Group className={cx(classes.root, { [classes.windowScrolledOnY]: windowScrollY !== 0 })} px="sm" spacing="xs">
-      <IconMenu2 className={classes.menuIcon} strokeWidth={1} onClick={onShowNavbarClick} />
-      <Button
-        classNames={{
-          root: classes.sourceCodeButton,
-          icon: classes.sourceCodeButtonIcon,
-          label: classes.sourceCodeButtonLabel,
-        }}
-        size="xs"
-        variant="default"
-        leftIcon={<GitHubIcon size={16} />}
-        component="a"
-        href={REPO_LINK}
-        target="_blank"
-      >
-        Source code
-      </Button>
-      <Logo className={cx(classes.logo, { [classes.logoWithNavbarVisible]: navbarVisible })} insideHeader />
+    <Group className={cx(classes.root, { [classes.windowScrolledOnY]: windowScrollY !== 0 })} px="sm" spacing={0}>
+      <Group spacing="xs">
+        <IconMenu2 className={classes.menuIcon} strokeWidth={1} onClick={onShowNavbarClick} />
+        <Group spacing="xs" className={classes.buttons}>
+          <Button
+            classNames={{
+              root: classes.button,
+              icon: classes.buttonIcon,
+              label: classes.buttonLabel,
+            }}
+            size="xs"
+            variant="default"
+            leftIcon={<GitHubIcon size={16} />}
+            component="a"
+            href={REPO_LINK}
+            target="_blank"
+            aria-label={REPO_LINK_ARIA_LABEL}
+          >
+            Source code
+          </Button>
+          <Button
+            classNames={{
+              root: classes.button,
+              icon: cx(classes.buttonIcon, classes.buttonIconRed),
+              label: classes.buttonLabel,
+            }}
+            size="xs"
+            variant="default"
+            leftIcon={<IconHeartFilled size={16} />}
+            component="a"
+            href={SPONSOR_LINK}
+            target="_blank"
+            aria-label={SPONSORS_LINK_ARIA_LABEL}
+          >
+            Sponsor
+          </Button>
+        </Group>
+        <Logo className={classes.logo} insideHeader />
+      </Group>
       <Group className={classes.actionIcons} spacing="xs">
         <ActionIcon
-          aria-label="Soure code"
           className={classes.actionIcon}
           variant="outline"
           component="a"
           href={REPO_LINK}
           target="_blank"
+          aria-label={REPO_LINK_ARIA_LABEL}
         >
           <GitHubIcon size={16} />
         </ActionIcon>
+        <ActionIcon
+          className={cx(classes.actionIcon, classes.actionIconRed)}
+          variant="outline"
+          component="a"
+          href={SPONSOR_LINK}
+          target="_blank"
+          aria-label={SPONSORS_LINK_ARIA_LABEL}
+        >
+          <IconHeartFilled size={16} />
+        </ActionIcon>
         <ActionIcon
           aria-label="Toggle color scheme"
           className={classes.actionIcon}
@@ -180,28 +211,8 @@ export default function AppHeader({
           value={colorScheme}
           onChange={() => toggleColorScheme()}
           data={[
-            {
-              value: 'light',
-              label: (
-                <Center>
-                  <IconSun size={14} />
-                  <Box ml={10} mb={-2}>
-                    Light
-                  </Box>
-                </Center>
-              ),
-            },
-            {
-              value: 'dark',
-              label: (
-                <Center>
-                  <IconMoon size={14} />
-                  <Box ml={10} mb={-2}>
-                    Dark
-                  </Box>
-                </Center>
-              ),
-            },
+            { value: 'light', label: <AppHeaderColorSchemeLabel value="Light" /> },
+            { value: 'dark', label: <AppHeaderColorSchemeLabel value="Dark" /> },
           ]}
         />
       </Group>

diff --git a/docs/components/AppHeaderColorSchemeLabel.tsx b/docs/components/AppHeaderColorSchemeLabel.tsx
@@ -0,0 +1,14 @@
+import { Box, Center } from '@mantine/core';
+import { IconMoon, IconSun } from '@tabler/icons-react';
+
+export default function AppHeaderColorSchemeLabel({ value }: { value: 'Dark' | 'Light' }) {
+  const Icon = value === 'Dark' ? IconMoon : IconSun;
+  return (
+    <Center>
+      <Icon size={14} />
+      <Box ml={10} mb={-2}>
+        {value}
+      </Box>
+    </Center>
+  );
+}
diff --git a/docs/components/AppWrapper.tsx b/docs/components/AppWrapper.tsx
@@ -92,7 +92,7 @@ export default function AppWrapper({ children }: { children: ReactNode }) {
         />
       )}
       <AppNavbar visible={navbarVisible} onHideClick={() => setNavbarVisible(false)} />
-      <AppHeader navbarVisible={navbarVisible} onShowNavbarClick={() => setNavbarVisible(true)} />
+      <AppHeader onShowNavbarClick={() => setNavbarVisible(true)} />
       <div className={classes.main}>{children}</div>
       <AppFooter />
     </>

diff --git a/docs/components/Logo.tsx b/docs/components/Logo.tsx
@@ -11,23 +11,33 @@ const useStyles = createStyles((theme) => ({
     gap: theme.spacing.xs,
   },
   iconInsideHeader: {
-    '@media (max-width: 300px)': {
+    '@media (min-width: 310px)': {
       display: 'none',
     },
+    '@media (min-width: 340px)': {
+      display: 'inherit',
+    },
   },
   title: {
     font: '24px/1 BenchNine, sans-serif',
     margin: '0 0 -3px',
   },
+  titleInsideHeader: {
+    display: 'none',
+    '@media (min-width: 310px)': {
+      display: 'block',
+    },
+  },
   version: {
     fontSize: 11,
     lineHeight: 1,
-    padding: '3px 4px 0',
+    padding: '4px 4px 0',
     margin: '-8px 0 0 -4px',
   },
   versionInsideHeader: {
-    '@media (max-width: 359px)': {
-      display: 'none',
+    display: 'none',
+    '@media (min-width: 400px)': {
+      display: 'inherit',
     },
   },
 }));
@@ -39,7 +49,7 @@ export default function Logo({ className, insideHeader }: { className?: string;
       <ThemeIcon className={cx({ [classes.iconInsideHeader]: insideHeader })} size="md" radius="lg">
         <IconTable size={16} />
       </ThemeIcon>
-      <Text className={classes.title} component="h1">
+      <Text className={cx(classes.title, { [classes.titleInsideHeader]: insideHeader })} component="h1">
         Mantine DataTable
       </Text>
       <Code className={cx(classes.version, { [classes.versionInsideHeader]: insideHeader })}>