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,24 +168,27 @@ export default function Hero() {
                   </Typography>
                 </Box>
               </Stack>
-              <Icon
-                fontSize={20}
+              <IconButton
                 onClick={(e) => {
                   e.stopPropagation();
                   toggleBookmarked(option.path);
                   setBookmarkedToolPaths(getBookmarkedToolPaths());
                 }}
-                color={
-                  isBookmarked(option.path)
-                    ? theme.palette.primary.main
-                    : theme.palette.grey[500]
-                }
-                icon={
-                  isBookmarked(option.path)
-                    ? 'mdi:bookmark'
-                    : 'mdi:bookmark-plus-outline'
-                }
-              />
+              >
+                <Icon
+                  fontSize={20}
+                  color={
+                    isBookmarked(option.path)
+                      ? theme.palette.primary.main
+                      : theme.palette.grey[500]
+                  }
+                  icon={
+                    isBookmarked(option.path)
+                      ? 'mdi:bookmark'
+                      : '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'}>
-                <Typography>{tool.label}</Typography>
+              <Stack direction={'row'} spacing={1} alignItems={'center'}>
+                <Typography textAlign={'center'}>{tool.label}</Typography>
                 {bookmarkedToolPaths.length > 0 && (
-                  <Icon
-                    icon={'mdi:close'}
-                    color={theme.palette.grey[500]}
-                    fontSize={20}
+                  <IconButton
                     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,19 +108,22 @@ export default function ToolHeader({
             <Typography mb={2} fontSize={30} color={'primary'}>
               {title}
             </Typography>
-            <Icon
-              fontSize={30}
-              color={
-                bookmarked
-                  ? theme.palette.primary.main
-                  : theme.palette.grey[500]
-              }
+            <IconButton
               onClick={(e) => {
                 toggleBookmarked(path);
                 setBookmarked(!bookmarked);
               }}
-              icon={bookmarked ? 'mdi:bookmark' : 'mdi:bookmark-plus-outline'}
-            />
+            >
+              <Icon
+                fontSize={30}
+                color={
+                  bookmarked
+                    ? theme.palette.primary.main
+                    : theme.palette.grey[500]
+                }
+                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>