Merge pull request #445 from gregrickaby/feature/mantine-v6

Mantine v6

components/BackToTop.tsx

@@ -1,4 +1,11 @@
-import {ActionIcon, createStyles, useMantineColorScheme} from '@mantine/core'
+import {
+  Affix,
+  Button,
+  createStyles,
+  rem,
+  Transition,
+  useMantineColorScheme
+} from '@mantine/core'
 import {useWindowScroll} from '@mantine/hooks'
 import {IconArrowUp} from '@tabler/icons-react'
 
@@ -19,22 +26,19 @@ export default function BackToTop() {
   const {classes} = useStyles()
   const {colorScheme} = useMantineColorScheme()
 
-  // Only show the button if the user has scrolled down 100px.
-  if (scroll.y < 100) {
-    return <></>
-  }
-
   return (
-    <ActionIcon
-      aria-label="scroll to top"
-      className={classes.backToTop}
-      color={colorScheme === 'dark' ? 'gray' : 'dark'}
-      onClick={() => scrollTo({y: 0})}
-      size="xl"
-      tabIndex={0}
-      variant="filled"
-    >
-      <IconArrowUp />
-    </ActionIcon>
+    <Affix position={{bottom: rem(20), right: rem(20)}}>
+      <Transition transition="slide-up" mounted={scroll.y > 0}>
+        {(transitionStyles) => (
+          <Button
+            leftIcon={<IconArrowUp size="1rem" />}
+            style={transitionStyles}
+            onClick={() => scrollTo({y: 0})}
+          >
+            Scroll to top
+          </Button>
+        )}
+      </Transition>
+    </Affix>
   )
 }

components/Media.tsx

@@ -36,17 +36,17 @@ export default function Media(props: Post) {
    */
   function maybeLazyLoad() {
     // For large desktop, eager load the first 12 images.
-    if (width > theme.breakpoints.lg) {
+    if (width > 1200) {
       return props.index > 11 ? 'lazy' : 'eager'
     }
 
     // For small desktop, eager load the first 9 images.
-    if (width > theme.breakpoints.md) {
+    if (width > 1024) {
       return props.index > 8 ? 'lazy' : 'eager'
     }
 
     // For tablet, eager load the first 6 images.
-    if (width > theme.breakpoints.md) {
+    if (width > 768) {
       return props.index > 5 ? 'lazy' : 'eager'
     }
 

components/Results.tsx

@@ -4,6 +4,7 @@ import {
   Button,
   Card,
   createStyles,
+  Flex,
   SimpleGrid
 } from '@mantine/core'
 import dynamic from 'next/dynamic'
@@ -36,11 +37,6 @@ const useStyles = createStyles((theme) => ({
       borderBottom: '1px solid transparent',
       textDecoration: 'none'
     }
-  },
-
-  loadMore: {
-    display: 'flex',
-    margin: `${theme.spacing.xl}px auto`
   }
 }))
 
@@ -133,9 +129,11 @@ export default function Results() {
         ))}
       </SimpleGrid>
       {!loading && (
-        <Button className={classes.loadMore} ref={ref} onClick={infiniteScroll}>
-          {loadingMore ? <>Loading...</> : <>Load more</>}
-        </Button>
+        <Flex justify="center" align="center" p="xl">
+          <Button ref={ref} onClick={infiniteScroll}>
+            {loadingMore ? <>Loading...</> : <>Load more</>}
+          </Button>
+        </Flex>
       )}
     </>
   )

components/Settings.tsx

@@ -6,9 +6,8 @@ import {
   Switch,
   useMantineColorScheme
 } from '@mantine/core'
-import {useHotkeys} from '@mantine/hooks'
+import {useDisclosure, useHotkeys} from '@mantine/hooks'
 import {IconSettings} from '@tabler/icons-react'
-import {useState} from 'react'
 import {useRedditContext} from '~/components/RedditProvider'
 import Sort from '~/components/Sort'
 
@@ -26,7 +25,7 @@ const useStyles = createStyles((theme) => ({
  * Settings component.
  */
 export default function Settings() {
-  const [opened, setOpened] = useState(false)
+  const [opened, {open, close}] = useDisclosure(false)
   const {colorScheme, toggleColorScheme} = useMantineColorScheme()
   const {blurNSFW, setBlurNSFW} = useRedditContext()
   const {classes} = useStyles()
@@ -38,17 +37,18 @@ export default function Settings() {
       <ActionIcon
         aria-label="open settings"
         className={classes.settings}
-        onClick={() => setOpened(true)}
+        onClick={open}
         size="lg"
         variant="transparent"
       >
         <IconSettings size={48} />
       </ActionIcon>
 
       <Modal
-        closeButtonLabel="close settings"
-        onClose={() => setOpened(false)}
+        closeButtonProps={{'aria-label': 'close settings'}}
+        onClose={close}
         opened={opened}
+        padding="xl"
         title="Settings"
       >
         <Stack justify="space-between">