Skip to content

Commit

Permalink
feat(shortcuts): add tooltip hints
Browse files Browse the repository at this point in the history
  • Loading branch information
masonmcelvain committed May 20, 2023
1 parent 965f923 commit 7e3e666
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 18 deletions.
42 changes: 25 additions & 17 deletions src/components/ActionBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import {
ButtonGroup,
Divider,
IconButton,
Tooltip,
useColorMode,
useColorModeValue,
} from "@chakra-ui/react";
Expand Down Expand Up @@ -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>
</>
);
Expand Down
5 changes: 4 additions & 1 deletion src/components/LinkEditModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
ModalHeader,
ModalOverlay,
Text,
Tooltip,
VStack,
} from "@chakra-ui/react";
import { LINK_NAME_MAX_LENGTH } from "@config/constants";
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit 7e3e666

Please sign in to comment.