From 50fd75d6c8ebec3f2b335b33da2a98e86d7bda76 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 25 Mar 2024 12:24:03 +0300
Subject: [PATCH] Fixed calendar dropdown style

---
 .../themes/primeone/base/calendar/index.js    | 52 +++++++++++++++++--
 .../primeone/presets/aura/calendar/index.js   | 23 ++++++++
 2 files changed, 71 insertions(+), 4 deletions(-)

diff --git a/components/lib/themes/primeone/base/calendar/index.js b/components/lib/themes/primeone/base/calendar/index.js
index 8c1bfbb08..1ba44c2af 100644
--- a/components/lib/themes/primeone/base/calendar/index.js
+++ b/components/lib/themes/primeone/base/calendar/index.js
@@ -15,13 +15,57 @@ export default {
     border-bottom-right-radius: 0;
 }
 
-.p-calendar-w-btn .p-datepicker-trigger {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
+.p-datepicker-trigger {
+    cursor: pointer;
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    width: ${dt('calendar.dropdown.width')};
+    border-top-right-radius: ${dt('rounded.base')};
+    border-bottom-right-radius: ${dt('rounded.base')};
+    background: ${dt('calendar.dropdown.background')};
+    border: 1px solid ${dt('calendar.dropdown.border.color')};
+    border-left: 0 none;
+    background: ${dt('calendar.dropdown.background')};
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    outline-color: transparent;
 }
 
-.p-calendar .p-datepicker-trigger-icon {
+.p-datepicker-trigger:not(:disabled):hover {
+    background: ${dt('calendar.dropdown.hover.background')};
+    border-color: ${dt('calendar.dropdown.hover.border.color')};
+    background: ${dt('calendar.dropdown.hover.background')};
+}
+
+.p-datepicker-trigger:not(:disabled):active {
+    background: ${dt('calendar.dropdown.active.background')};
+    border-color: ${dt('calendar.dropdown.active.border.color')};
+    background: ${dt('calendar.dropdown.active.background')};
+}
+
+.p-datepicker-trigger:focus-visible {
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('button.primary.background')};
+    outline-offset: ${dt('focus.ring.offset')};
+}
+
+.p-calendar:has(.p-input-icon) {
+    position: relative;
+}
+
+.p-calendar:has(.p-input-icon) .p-calendar-input {
+    padding-right: 2.5rem;
+}
+
+.p-calendar .p-input-icon {
     cursor: pointer;
+    position: absolute;
+    top: 50%;
+    right: .75rem;
+    margin-top: -.5rem;
 }
 
 .p-fluid .p-calendar {
diff --git a/components/lib/themes/primeone/presets/aura/calendar/index.js b/components/lib/themes/primeone/presets/aura/calendar/index.js
index c74f0f074..6b214aae3 100644
--- a/components/lib/themes/primeone/presets/aura/calendar/index.js
+++ b/components/lib/themes/primeone/presets/aura/calendar/index.js
@@ -64,6 +64,18 @@ export default {
                 hoverBackground: '{surface.100}',
                 color: '{surface.500}',
                 hoverColor: '{surface.600}'
+            },
+            dropdown: {
+                width: '2.5rem',
+                background: '{surface.100}',
+                hoverBackground: '{surface.200}',
+                activeBackground: '{surface.300}',
+                borderColor: '{form.field.border.color}',
+                hoverBorderColor: '{form.field.border.color}',
+                activeBorderColor: '{form.field.border.color}',
+                color: '{surface.600}',
+                hoverColor: '{surface.700}',
+                activeColor: '{surface.800}'
             }
         },
         dark: {
@@ -130,6 +142,17 @@ export default {
                 hoverBackground: '{surface.800}',
                 color: '{surface.400}',
                 hoverColor: '{surface.300}'
+            },
+            dropdown: {
+                background: '{surface.800}',
+                hoverBackground: '{surface.700}',
+                activeBackground: '{surface.600}',
+                borderColor: '{form.field.border.color}',
+                hoverBorderColor: '{form.field.border.color}',
+                activeBorderColor: '{form.field.border.color}',
+                color: '{surface.300}',
+                hoverColor: '{surface.200}',
+                activeColor: '{surface.100}'
             }
         }
     }