refactor: enhance SingleDatePicker button styles and improve hover effects

src/components/SingleDatePicker.tsx

@@ -20,9 +20,11 @@ export default () => {
 
 	return (<div className='datenel-component'>
 		<div className='header'>
-			<button><img src={LeftArrowIcon} /></button>
+			<button className='month-stepper'><img src={LeftArrowIcon} /></button>
-			<button>month</button>
+			<button className='month-indicator'>
-			<button><img src={RightArrowIcon} /></button>
+				{new Date(currentYear, currentMonth).toLocaleString('default', { month: 'long', year: 'numeric' })}
+			</button>
+			<button className='month-stepper'><img src={RightArrowIcon} /></button>
 		</div>
 		<div className='body'>
 			

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;
+			}
 		}
 	}