Fixed icon bug and finalzied styling

the-collab-lab · May 29, 2023 · 53d470a · 53d470a
1 parent 99589d1
commit 53d470a
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 40 deletions.
diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx
@@ -51,43 +51,49 @@ export function ListItem({ item, listId, handleDeleteConfirmation, urgency }) {
  name={name}
  />
  <AccordionItem key={item.id} borderTop="0px" borderBottom="0px">
- <h2>
- <AccordionButton
- _expanded={{ bg: '#DEDFE3', color: '#3B293D' }}
- _hover={{ bg: '#DEDFE3', color: '#3B293D' }}
- >
- <Box as="span" flex="1" textAlign="left">
- <li className="ListItem" style={{ display: 'block' }}>
- <Checkbox
- size="lg"
- onChange={handlePurchase}
- isChecked={isWithinLastDay(item.dateLastPurchased)}
- colorScheme={urgencyColors[urgency]}
- bg={urgencyColors[urgency]}
- borderRadius="md"
- margin="1"
- ></Checkbox>
- <label htmlFor={`mark-${name}-purchased-id-${id}`}>
- {name}
- </label>
- </li>
- </Box>
+ <AccordionButton
+ color="text.500"
+ _expanded={{
+ bg: 'text.500',
+ color: 'brand.500',
+ }}
+ _hover={{
+ bg: 'text.500',
+ color: 'brand.500',
+ }}
+ >
+ <Box as="span" flex="1" textAlign="left">
+ <li className="ListItem" style={{ display: 'block' }}>
+ <Checkbox
+ size="lg"
+ onChange={handlePurchase}
+ isChecked={isWithinLastDay(item.dateLastPurchased)}
+ colorScheme={urgencyColors[urgency]}
+ bg={urgencyColors[urgency]}
+ borderRadius="md"
+ margin="1"
+ ></Checkbox>
+ <label htmlFor={`mark-${name}-purchased-id-${id}`}>{name}</label>
+ </li>
+ </Box>
 
- <IconButton
- aria-label="delete"
- size="sm"
- bg="none"
- m="0.5em"
- onClick={(e) => {
- e.stopPropagation();
- onOpen();
- }}
- icon={<DeleteIcon />}
- />
-
- <AccordionIcon />
- </AccordionButton>
- </h2>
+ <IconButton
+ aria-label="delete"
+ size="sm"
+ m="0.5em"
+ isActive
+ bg="transparent"
+ colorScheme="transparent"
+ color="currentColor"
+ transition="none"
+ onClick={(e) => {
+ e.stopPropagation();
+ onOpen();
+ }}
+ icon={<DeleteIcon />}
+ />
+ <AccordionIcon />
+ </AccordionButton>
  <AccordionPanel pd={4}>
  <Center>
  <ListItemDetails

diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
@@ -3,7 +3,6 @@ import { Outlet, useLocation } from 'react-router-dom';
 import { useDisclosure } from '@chakra-ui/hooks';
 import { About } from '../components/About';
 
-
 export function Layout() {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const location = useLocation();
@@ -27,7 +26,7 @@ export function Layout() {
  <VisuallyHidden>Open about modal</VisuallyHidden>
  </Heading>
  </Center>
- <Box as="main" h="100%">
+ <Box as="main" h="100%" p={8}>
  <Outlet />
  </Box>
  </Flex>

diff --git a/src/views/List.jsx b/src/views/List.jsx
@@ -79,7 +79,7 @@ export function List({ data, listId }) {
  {listId}
 
  <IconButton
- aria-label="delete"
+ aria-label="copy"
  size="sm"
  bg="none"
  _hover={{ cursor: 'pointer' }}
@@ -88,7 +88,7 @@ export function List({ data, listId }) {
  navigator.clipboard.writeText(`${listId}`);
  successToast({ description: `Token copied!` });
  }}
- icon={<CopyIcon />}
+ icon={<CopyIcon color="text.500" />}
  />
  </Text>
  <IconButton