From b6d58d15be44aa14ac2cb711c6fe0091cdd66a44 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 15 Aug 2022 12:13:25 +0800
Subject: [PATCH] Make the library layout toggles into buttons

---
 packages/web/components/elements/Button.tsx               | 1 +
 .../web/components/templates/library/LibraryHeadline.tsx  | 8 ++++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/web/components/elements/Button.tsx b/packages/web/components/elements/Button.tsx
index 7ad86281c..48f11221a 100644
--- a/packages/web/components/elements/Button.tsx
+++ b/packages/web/components/elements/Button.tsx
@@ -191,6 +191,7 @@ export const Button = styled('button', {
         color: 'transparent',
         border: 'none',
         bg: 'transparent',
+        cursor: 'pointer',
         '&:hover': {
           opacity: 0.8,
         },
diff --git a/packages/web/components/templates/library/LibraryHeadline.tsx b/packages/web/components/templates/library/LibraryHeadline.tsx
index 28c2e22c9..505c44b3e 100644
--- a/packages/web/components/templates/library/LibraryHeadline.tsx
+++ b/packages/web/components/templates/library/LibraryHeadline.tsx
@@ -15,8 +15,12 @@ export function LibraryHeadline(): JSX.Element {
       <StyledText style="libraryHeader">Home</StyledText>
       <HStack alignment="center" distribution="start" css={{ marginLeft: 'auto', gap: '16px' }}>
         <Button style="ctaDarkYellow">Add Link</Button>
-        <LibraryListLayoutIcon color="#D6D6D6" />
-        <LibraryGridLayoutIcon color={theme.colors.omnivoreCtaYellow.toString()} />
+        <Button style="ghost">
+          <LibraryListLayoutIcon color="#D6D6D6" />
+        </Button>
+        <Button style="ghost">
+          <LibraryGridLayoutIcon color={theme.colors.omnivoreCtaYellow.toString()} />
+        </Button>
       </HStack>
     </HStack>
   )