feat: ui changes

src/components/ToolHeader.tsx

@@ -3,11 +3,13 @@ import Typography from '@mui/material/Typography';
 import ToolBreadcrumb from './ToolBreadcrumb';
 import { capitalizeFirstLetter } from '../utils/string';
 import Grid from '@mui/material/Grid';
+import { Icon, IconifyIcon } from '@iconify/react';
+import { categoriesColors } from '../config/uiConfig';
 
 interface ToolHeaderProps {
   title: string;
   description: string;
-  image?: string;
+  icon?: IconifyIcon;
   type: string;
 }
 
@@ -15,17 +17,32 @@ function ToolLinks() {
   return (
     <Grid container spacing={2} mt={1}>
       <Grid item md={12} lg={4}>
-        <Button fullWidth variant="outlined" href="#tool">
+        <Button
+          sx={{ backgroundColor: 'white' }}
+          fullWidth
+          variant="outlined"
+          href="#tool"
+        >
           Use This Tool
         </Button>
       </Grid>
       <Grid item md={12} lg={4}>
-        <Button fullWidth variant="outlined" href="#examples">
+        <Button
+          sx={{ backgroundColor: 'white' }}
+          fullWidth
+          variant="outlined"
+          href="#examples"
+        >
           See Examples
         </Button>
       </Grid>
       <Grid item md={12} lg={4}>
-        <Button fullWidth variant="outlined" href="#tour">
+        <Button
+          sx={{ backgroundColor: 'white' }}
+          fullWidth
+          variant="outlined"
+          href="#tour"
+        >
           Learn How to Use
         </Button>
       </Grid>
@@ -34,7 +51,7 @@ function ToolLinks() {
 }
 
 export default function ToolHeader({
-  image,
+  icon,
   title,
   description,
   type
@@ -60,10 +77,18 @@ export default function ToolHeader({
           <ToolLinks />
         </Grid>
 
-        {image && (
+        {icon && (
           <Grid item xs={12} md={4}>
             <Box sx={{ display: 'flex', justifyContent: 'center' }}>
-              <img width={'250'} src={image} />
+              <Icon
+                icon={icon}
+                fontSize={'250'}
+                color={
+                  categoriesColors[
+                    Math.floor(Math.random() * categoriesColors.length)
+                  ]
+                }
+              />
             </Box>
           </Grid>
         )}