From 7e3e666fd582bbf7dd0eba091849a534c33219aa Mon Sep 17 00:00:00 2001
From: Mason McElvain <52104630+masonmcelvain@users.noreply.github.com>
Date: Sat, 20 May 2023 10:50:23 -0700
Subject: [PATCH] feat(shortcuts): add tooltip hints

---
 src/components/ActionBar.tsx     | 42 +++++++++++++++++++-------------
 src/components/LinkEditModal.tsx |  5 +++-
 2 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/src/components/ActionBar.tsx b/src/components/ActionBar.tsx
index f71ce492..18ad4131 100644
--- a/src/components/ActionBar.tsx
+++ b/src/components/ActionBar.tsx
@@ -2,6 +2,7 @@ import {
    ButtonGroup,
    Divider,
    IconButton,
+   Tooltip,
    useColorMode,
    useColorModeValue,
 } from "@chakra-ui/react";
@@ -29,23 +30,30 @@ export default function ActionBar({
       <>
          <Divider />
          <ButtonGroup variant="ghost" spacing={2}>
-            <IconButton
-               aria-label="Edit links"
-               icon={<Edit size={24} />}
-               onClick={toggleEditMode}
-            />
-
-            <IconButton
-               aria-label="Create new link"
-               icon={<Plus size={32} />}
-               onClick={onLinkEditModalOpen}
-            />
-
-            <IconButton
-               aria-label="Toggle color mode"
-               icon={useColorModeValue(<Moon size={24} />, <Sun size={24} />)}
-               onClick={onColorModeClick}
-            />
+            <Tooltip label="Edit links (e)" openDelay={750}>
+               <IconButton
+                  aria-label="Edit links"
+                  icon={<Edit size={24} />}
+                  onClick={toggleEditMode}
+               />
+            </Tooltip>
+            <Tooltip label="Create new link (n)" openDelay={750}>
+               <IconButton
+                  aria-label="Create new link"
+                  icon={<Plus size={32} />}
+                  onClick={onLinkEditModalOpen}
+               />
+            </Tooltip>
+            <Tooltip label="Toggle color mode" openDelay={750}>
+               <IconButton
+                  aria-label="Toggle color mode"
+                  icon={useColorModeValue(
+                     <Moon size={24} />,
+                     <Sun size={24} />
+                  )}
+                  onClick={onColorModeClick}
+               />
+            </Tooltip>
          </ButtonGroup>
       </>
    );
diff --git a/src/components/LinkEditModal.tsx b/src/components/LinkEditModal.tsx
index 12012848..3f826a08 100644
--- a/src/components/LinkEditModal.tsx
+++ b/src/components/LinkEditModal.tsx
@@ -14,6 +14,7 @@ import {
    ModalHeader,
    ModalOverlay,
    Text,
+   Tooltip,
    VStack,
 } from "@chakra-ui/react";
 import { LINK_NAME_MAX_LENGTH } from "@config/constants";
@@ -161,7 +162,9 @@ export default function LinkEditModal({
          <form>
             <ModalContent borderRadius="none" onKeyDown={onKeyDown}>
                <ModalHeader>Update Link</ModalHeader>
-               <ModalCloseButton />
+               <Tooltip label="Close (esc)" openDelay={750}>
+                  <ModalCloseButton />
+               </Tooltip>
                <ModalBody>
                   <VStack w="full" h="full" spacing={2}>
                      <FormControl isRequired>