scroll to top of page on logo click

konfig-dev · Oct 21, 2023 · 8398d78 · 8398d78
1 parent d0b736e
commit 8398d78
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 10 deletions.
diff --git a/konfigthis.com/src/components/HeaderSimple/HeaderSimple.tsx b/konfigthis.com/src/components/HeaderSimple/HeaderSimple.tsx
@@ -3,19 +3,14 @@ import {
   Button,
   Burger,
   MediaQuery,
-  clsx,
   NavLink,
   Transition,
   MantineTransition,
 } from "@mantine/core";
 import logo from "../../../public/portal-logo-light.png";
 import Image from "@/components/Image";
-import {
-  IconCalendarEvent,
-  IconChevronDown,
-  IconExternalLink,
-} from "@tabler/icons-react";
-import { useDisclosure } from "@mantine/hooks";
+import { IconCalendarEvent, IconExternalLink } from "@tabler/icons-react";
+import { useDisclosure, useWindowScroll } from "@mantine/hooks";
 import { scrollIntoView } from "@/utils/scroll-into-view";
 import { useSmMediaQuery } from "@/utils/use-sm-media-query";
 import { useCallback, useEffect } from "react";
@@ -49,6 +44,8 @@ export function HeaderSimple() {
     document.body && document.body.classList.add("overflow-hidden");
   };
 
+  const [_, scrollTo] = useWindowScroll();
+
   const greaterThanSm = useSmMediaQuery();
 
   useEffect(() => {
@@ -146,7 +143,14 @@ export function HeaderSimple() {
         </Transition>
       </MediaQuery>
       <div className="flex justify-between items-center h-full px-4 mx-auto max-w-5xl">
-        <Image height={35} src={logo} placeholder="empty" alt="Konfig Logo" />
+        <Image
+          className="cursor-pointer"
+          onClick={() => scrollTo({ y: 0 })}
+          height={35}
+          src={logo}
+          placeholder="empty"
+          alt="Konfig Logo"
+        />
         <MediaQuery largerThan="sm" styles={{ display: "none" }}>
           <Burger
             size="md"

diff --git a/konfigthis.com/src/components/HeroBullets/HeroBullets.tsx b/konfigthis.com/src/components/HeroBullets/HeroBullets.tsx
@@ -165,8 +165,8 @@ export function HeroBullets() {
                 target="_blank"
                 leftIcon={<IconExternalLink />}
                 size="lg"
-                variant="outline"
-                color="dark"
+                color="gray"
+                variant="default"
                 radius="xl"
                 className={clsx(
                   classes.control,