chore: refine bookmarking

src/components/Hero.tsx

@@ -23,6 +23,7 @@ import {
   isBookmarked,
   toggleBookmarked
 } from '@utils/bookmark';
+import IconButton from '@mui/material/IconButton';
 
 const GroupHeader = styled('div')(({ theme }) => ({
   position: 'sticky',
@@ -167,13 +168,15 @@ export default function Hero() {
                   </Typography>
                 </Box>
               </Stack>
-              <Icon
+              <IconButton
-                fontSize={20}
                 onClick={(e) => {
                   e.stopPropagation();
                   toggleBookmarked(option.path);
                   setBookmarkedToolPaths(getBookmarkedToolPaths());
                 }}
+              >
+                <Icon
+                  fontSize={20}
                   color={
                     isBookmarked(option.path)
                       ? theme.palette.primary.main
@@ -185,6 +188,7 @@ export default function Hero() {
                       : 'mdi:bookmark-plus-outline'
                   }
                 />
+              </IconButton>
             </Stack>
           </Box>
         )}
@@ -194,9 +198,6 @@ export default function Hero() {
           }
         }}
       />
-      {bookmarkedToolPaths.length > 0 && (
-        <Typography fontSize={{ xs: 20, md: 25 }}>Bookmarked tools:</Typography>
-      )}
       <Grid container spacing={2} mt={2}>
         {displayedTools.map((tool) => (
           <Grid
@@ -223,23 +224,28 @@ export default function Hero() {
                 cursor: 'pointer',
                 '&:hover': {
                   backgroundColor: 'background.hover'
-                }
+                },
+                height: '100%'
               }}
             >
-              <Stack direction={'row'} spacing={2} alignItems={'center'}>
+              <Stack direction={'row'} spacing={1} alignItems={'center'}>
-                <Typography>{tool.label}</Typography>
+                <Typography textAlign={'center'}>{tool.label}</Typography>
                 {bookmarkedToolPaths.length > 0 && (
-                  <Icon
+                  <IconButton
-                    icon={'mdi:close'}
-                    color={theme.palette.grey[500]}
-                    fontSize={20}
                     onClick={(e) => {
                       e.stopPropagation();
                       const path = tool.url.substring(1);
                       toggleBookmarked(path);
                       setBookmarkedToolPaths(getBookmarkedToolPaths());
                     }}
+                    size={'small'}
+                  >
+                    <Icon
+                      icon={'mdi:close'}
+                      color={theme.palette.grey[500]}
+                      fontSize={15}
                     />
+                  </IconButton>
                 )}
               </Stack>
             </Box>

src/components/ToolHeader.tsx

@@ -8,6 +8,7 @@ import { categoriesColors } from '../config/uiConfig';
 import { getToolsByCategory } from '@tools/index';
 import { useEffect, useState } from 'react';
 import { isBookmarked, toggleBookmarked } from '@utils/bookmark';
+import IconButton from '@mui/material/IconButton';
 
 const StyledButton = styled(Button)(({ theme }) => ({
   backgroundColor: 'white',
@@ -107,6 +108,12 @@ export default function ToolHeader({
             <Typography mb={2} fontSize={30} color={'primary'}>
               {title}
             </Typography>
+            <IconButton
+              onClick={(e) => {
+                toggleBookmarked(path);
+                setBookmarked(!bookmarked);
+              }}
+            >
               <Icon
                 fontSize={30}
                 color={
@@ -114,12 +121,9 @@ export default function ToolHeader({
                     ? theme.palette.primary.main
                     : theme.palette.grey[500]
                 }
-              onClick={(e) => {
-                toggleBookmarked(path);
-                setBookmarked(!bookmarked);
-              }}
                 icon={bookmarked ? 'mdi:bookmark' : 'mdi:bookmark-plus-outline'}
               />
+            </IconButton>
           </Stack>
           <Typography fontSize={20}>{description}</Typography>
           <ToolLinks />

src/components/ToolLayout.tsx

@@ -14,13 +14,13 @@ export default function ToolLayout({
   description,
   icon,
   type,
-  path
+  fullPath
 }: {
   title: string;
   description: string;
   icon?: IconifyIcon | string;
   type: string;
-  path: string;
+  fullPath: string;
   children: ReactNode;
 }) {
   const otherCategoryTools =
@@ -51,7 +51,7 @@ export default function ToolLayout({
           description={description}
           icon={icon}
           type={type}
-          path={path}
+          path={fullPath}
         />
         {children}
         <Separator backgroundColor="#5581b5" margin="50px" />

src/tools/defineTool.tsx

@@ -74,7 +74,7 @@ export const defineTool = (
           description={description}
           icon={icon}
           type={basePath}
-          path={`${basePath}/${path}`}
+          fullPath={`${basePath}/${path}`}
         >
           <Component title={name} longDescription={longDescription} />
         </ToolLayout>