From 4a02a4fa8ff558c8f10667b2e91106f844075397 Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Tue, 28 Jul 2026 07:58:00 +0000
Subject: [PATCH] date picker

---
 .../src/app/components/AmharicDatePicker.css  | 26 ++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/apps/portal/src/app/components/AmharicDatePicker.css b/apps/portal/src/app/components/AmharicDatePicker.css
index 36cc97bee..cf982ab54 100644
--- a/apps/portal/src/app/components/AmharicDatePicker.css
+++ b/apps/portal/src/app/components/AmharicDatePicker.css
@@ -3,6 +3,8 @@
    no border/box affordance and a hardcoded blue chevron. */
 .amharic-daypicker {
   --rdp-accent-color: var(--mantine-primary-color-filled);
+  --rdp-nav_button-width: 2.75rem;
+  --rdp-nav_button-height: 2.75rem;
 }
 
 .amharic-daypicker .rdp-dropdowns {
@@ -27,12 +29,34 @@
   color: var(--mantine-color-text);
 }
 
-.amharic-daypicker .rdp-chevron {
+.amharic-daypicker .rdp-dropdown_root .rdp-chevron {
   width: 12px;
   height: 12px;
   fill: var(--mantine-color-dimmed);
 }
 
+/* Prev/next month buttons: bigger tap target + visible button box (border,
+   background, accent-colored chevron) instead of the default bare, tiny
+   blue arrow — the dropdown captions replaced them as the primary nav, so
+   they need to stay easy to spot and hit. */
+.amharic-daypicker .rdp-button_previous,
+.amharic-daypicker .rdp-button_next {
+  border: 1px solid var(--mantine-color-default-border);
+  border-radius: var(--mantine-radius-sm);
+  background-color: var(--mantine-color-body);
+}
+
+.amharic-daypicker .rdp-button_previous:not([aria-disabled='true']):hover,
+.amharic-daypicker .rdp-button_next:not([aria-disabled='true']):hover {
+  background-color: var(--mantine-color-default-hover);
+}
+
+.amharic-daypicker .rdp-nav .rdp-chevron {
+  width: 20px;
+  height: 20px;
+  fill: var(--mantine-primary-color-filled);
+}
+
 .amharic-daypicker .rdp-month_caption {
   font-size: inherit;
   font-weight: 600;