From 3feade92413d1e0418d116c96968602ac5fe1d39 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Sat, 12 Sep 2020 22:45:58 -0700
Subject: [PATCH] add focus state for own/want checkbox buttons

---
 src/app/ItemPage.js | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/app/ItemPage.js b/src/app/ItemPage.js
index 340f9e3..1984c4c 100644
--- a/src/app/ItemPage.js
+++ b/src/app/ItemPage.js
@@ -1,4 +1,5 @@
 import React from "react";
+import { css } from "emotion";
 import {
   AspectRatio,
   Badge,
@@ -8,6 +9,7 @@ import {
   VisuallyHidden,
   VStack,
   useColorModeValue,
+  useTheme,
   useToast,
 } from "@chakra-ui/core";
 import { CheckIcon, ExternalLinkIcon, StarIcon } from "@chakra-ui/icons";
@@ -180,11 +182,12 @@ function LinkBadge({ children, href }) {
 }
 
 function ItemPageOwnWantButtons({ itemId }) {
+  const theme = useTheme();
+  const toast = useToast();
+
   const [currentUserOwnsThis, setCurrentUserOwnsThis] = React.useState(false);
   const [currentUserWantsThis, setCurrentUserWantsThis] = React.useState(false);
 
-  const toast = useToast();
-
   const { loading, error } = useQuery(
     gql`
       query ItemPageOwnWantButtons($itemId: ID!) {
@@ -208,7 +211,6 @@ function ItemPageOwnWantButtons({ itemId }) {
     return <Box color="red.400">{error.message}</Box>;
   }
 
-  // TODO: Focus state!
   return (
     <Box display="flex">
       <Skeleton isLoaded={!loading} marginRight="4">
@@ -232,6 +234,11 @@ function ItemPageOwnWantButtons({ itemId }) {
             size="lg"
             cursor="pointer"
             transitionDuration="0.4s"
+            className={css`
+              input:focus + & {
+                box-shadow: ${theme.shadows.outline};
+              }
+            `}
           >
             <IconCheckbox
               icon={<CheckIcon />}
@@ -264,6 +271,11 @@ function ItemPageOwnWantButtons({ itemId }) {
             size="lg"
             cursor="pointer"
             transitionDuration="0.4s"
+            className={css`
+              input:focus + & {
+                box-shadow: ${theme.shadows.outline};
+              }
+            `}
           >
             <IconCheckbox
               icon={<StarIcon />}