From 35f65bb23e56f5b01f5b2efc0c0859da66108061 Mon Sep 17 00:00:00 2001
From: Michal Sapka <michal@sapka.me>
Date: Wed, 7 Sep 2022 21:59:21 +0200
Subject: feat: add brightness to topnav

---
 components/topnav.tsx | 4 +++-
 lib/theme.tsx         | 4 ++++
 pages/index.tsx       | 4 ++--
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/components/topnav.tsx b/components/topnav.tsx
index 80a6ce3..e1cdb71 100644
--- a/components/topnav.tsx
+++ b/components/topnav.tsx
@@ -9,8 +9,9 @@ import {
   MenuButton,
   MenuList,
   MenuItem,
+  Container,
   useMediaQuery,
-  Container
+  useColorModeValue
 } from '@chakra-ui/react'
 import { GiHamburgerMenu } from "react-icons/gi"
 import { DiGithubBadge } from "react-icons/di"
@@ -45,6 +46,7 @@ export default function Navbar() {
     position="fixed"
     backdropFilter="auto" 
     backdropBlur="6px"
+    backdropBrightness={useColorModeValue("1.1", "1")}
     width="100%"
     pt="5px"
   >
diff --git a/lib/theme.tsx b/lib/theme.tsx
index 2d24742..e374a88 100644
--- a/lib/theme.tsx
+++ b/lib/theme.tsx
@@ -22,6 +22,10 @@ const components = {
       'topnav-link': (props : StyleFunctionProps) => ({
         color: mode('#282a36', '#f8f8f2')(props),
         textDecoration: "none"
+      }),
+      'list-link': (props : StyleFunctionProps) => ({
+        color: mode('#282a36', '#f8f8f2')(props),
+        textDecoration: "none"
       })
     }
   },
diff --git a/pages/index.tsx b/pages/index.tsx
index f6a0754..990e34b 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -97,10 +97,10 @@ const Home: NextPage = () => {
           <Heading variant="section-title" as="h3">On the web</Heading>
           <VStack spacing="1" alignItems="start">
             <Box>
-              <Link href="https://github.com/michalsapka" isExternal><Icon as={AiFillGithub}/> Github</Link>
+              <Link variant="list-link" href="https://github.com/michalsapka" isExternal><Icon as={AiFillGithub}/> Github</Link>
             </Box>
             <Box>
-              <Link href="https://medium.com/@msapka" isExternal><Icon as={AiFillMediumCircle}/> Medium</Link>
+              <Link variant="list-link" href="https://medium.com/@msapka" isExternal><Icon as={AiFillMediumCircle}/> Medium</Link>
             </Box>
           </VStack>
 
-- 
cgit v1.2.3