From 1b204b8dc0035f5b9c4c5fd25bca6bc988463ecb Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Wed, 19 Feb 2025 15:03:55 +1100
Subject: [PATCH] refactor: enhance SingleDatePicker button styles and improve
 hover effects

---
 src/components/SingleDatePicker.tsx |  8 +++++---
 src/style.scss                      | 19 ++++++++++++++++++-
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/components/SingleDatePicker.tsx b/src/components/SingleDatePicker.tsx
index 9ae7a58..91073e5 100644
--- a/src/components/SingleDatePicker.tsx
+++ b/src/components/SingleDatePicker.tsx
@@ -20,9 +20,11 @@ export default () => {
 
 	return (<div className='datenel-component'>
 		<div className='header'>
-			<button><img src={LeftArrowIcon} /></button>
-			<button>month</button>
-			<button><img src={RightArrowIcon} /></button>
+			<button className='month-stepper'><img src={LeftArrowIcon} /></button>
+			<button className='month-indicator'>
+				{new Date(currentYear, currentMonth).toLocaleString('default', { month: 'long', year: 'numeric' })}
+			</button>
+			<button className='month-stepper'><img src={RightArrowIcon} /></button>
 		</div>
 		<div className='body'>
 			
diff --git a/src/style.scss b/src/style.scss
index 61b47f6..762823b 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -2,7 +2,7 @@
 	--main-color: #000000;
 	--accent-color: #000000;
 	--reversed-color: #ffffff;
-	--hover-color: #0000002a;
+	--hover-color: #00000017;
 
 	user-select: none;
 	color: var(--main-color);
@@ -12,6 +12,9 @@
 		background: none;
 		cursor: pointer;
 		color: var(--main-color);
+		&:hover {
+			background: var(--hover-color);
+		}
 	}
 
 	.header {
@@ -26,6 +29,20 @@
 				width: 1rem;
 				height: 1rem;
 			}
+
+			&.month-stepper{
+				width: 1.75rem;
+				height: 1.75rem;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				border-radius: 50%;
+			}
+
+			&.month-indicator {
+				padding: 0.25rem 0.5rem;
+				border-radius: 0.25rem;
+			}
 		}
 	}