From a50028e1fbe9794e1e73b092679a6f3de34b02f5 Mon Sep 17 00:00:00 2001
From: Yihao Wang <yesiamyihao@gmail.com>
Date: Mon, 14 Jul 2025 13:35:48 +1200
Subject: [PATCH] Improve styling

---
 src/components/Hero.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index 0508014..09f6843 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -151,7 +151,7 @@ export default function Hero() {
             <Stack
               direction={'row'}
               alignItems={'center'}
-              justifyContent={'stretch'}
+              justifyContent={'space-between'}
               width={'100%'}
             >
               <Stack direction={'row'} spacing={2} alignItems={'center'}>
@@ -170,6 +170,11 @@ export default function Hero() {
                   toggleBookmarked(option);
                   setBookmarkedToolPaths(getBookmarkedToolPaths());
                 }}
+                color={
+                  isBookmarked(option)
+                    ? theme.palette.primary.main
+                    : theme.palette.grey[500]
+                }
                 icon={
                   isBookmarked(option)
                     ? 'mdi:bookmark'
@@ -185,6 +190,9 @@ 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