Update DateRangePicker styles

client/src/common/components/DateRangePicker/DateRangePicker.jsx

@@ -205,10 +205,6 @@ export const DateRangePicker = ({ from, to, onChange, minDate, maxDate }) => {
 
             {isOpen && (
                 <div className="date-range-popover" ref={popoverRef}>
-                    <div className="selection-hint">
-                        {selecting === "from" ? t("calendar.select_start") : t("calendar.select_end")}
-                    </div>
-                    
                     <div className="calendar-nav">
                         <button className="nav-btn" onClick={prevMonth}>
                             <FontAwesomeIcon icon={faChevronLeft} />

client/src/common/components/DateRangePicker/styles.sass

@@ -7,41 +7,38 @@
 .date-range-trigger
   display: flex
   align-items: center
-  gap: 0.75rem
-  padding: 0.75rem 1.25rem
+  gap: 0.5rem
+  padding: 0.5rem 0.875rem
   background-color: $dark-gray
   border: 1px solid $light-gray
-  border-radius: 0.75rem
+  border-radius: 0.5rem
   cursor: pointer
   transition: all 0.2s ease-in-out
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)
   
   &:hover
     border-color: $accent-primary
-    transform: translateY(-2px)
-    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12)
 
 .calendar-icon
   color: $subtext
-  font-size: 1.1rem
+  font-size: 0.875rem
 
 .date-range-text
   color: $white
-  font-size: 0.95rem
-  font-weight: 500
+  font-size: 0.8rem
+  font-weight: 600
   white-space: nowrap
 
 .date-range-popover
   position: absolute
-  top: calc(100% + 0.5rem)
+  top: calc(100% + 0.375rem)
   left: 0
   z-index: 1000
   background-color: $dark-gray
   border: 1px solid $light-gray
   border-radius: 0.75rem
-  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.25)
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25)
   overflow: hidden
-  padding: 1.25rem
+  padding: 1rem
   animation: popoverFadeIn 0.2s ease-out
 
 @keyframes popoverFadeIn
@@ -52,33 +49,25 @@
     opacity: 1
     transform: translateY(0)
 
-.selection-hint
-  text-align: center
-  color: $subtext
-  font-size: 0.75rem
-  font-weight: 500
-  margin-bottom: 0.75rem
-  padding-bottom: 0.75rem
-  border-bottom: 1px solid $light-gray
-
 .calendar-nav
   display: flex
   align-items: center
   justify-content: space-between
-  margin-bottom: 1rem
+  margin-bottom: 0.75rem
 
 .nav-btn
   display: flex
   align-items: center
   justify-content: center
-  width: 2rem
-  height: 2rem
+  width: 1.75rem
+  height: 1.75rem
   background: transparent
   border: 1px solid $light-gray
   border-radius: 0.375rem
   color: $subtext
   cursor: pointer
   transition: all 0.15s ease
+  font-size: 0.75rem
   
   &:hover:not(:disabled)
     border-color: $accent-primary
@@ -91,24 +80,24 @@
 
 .current-month
   color: $white
-  font-size: 0.95rem
+  font-size: 0.8rem
   font-weight: 600
 
 .calendar-grid
-  min-width: 280px
+  min-width: 240px
 
 .weekdays
   display: grid
   grid-template-columns: repeat(7, 1fr)
-  margin-bottom: 0.5rem
+  margin-bottom: 0.375rem
 
 .weekday
   text-align: center
   color: $subtext
-  font-size: 0.7rem
+  font-size: 0.625rem
   font-weight: 600
   text-transform: uppercase
-  padding: 0.5rem 0
+  padding: 0.375rem 0
 
 .days
   display: grid
@@ -118,42 +107,42 @@
   display: flex
   align-items: center
   justify-content: center
-  width: 40px
-  height: 36px
+  width: 100%
+  height: 30px
   background: transparent
   border: none
   color: $white
-  font-size: 0.85rem
-  font-weight: 500
+  font-size: 0.75rem
+  font-weight: 600
   cursor: pointer
-  transition: all 0.15s ease
-  border-radius: 0.25rem
+  transition: background-color 0.1s ease, color 0.1s ease
+  border-radius: 0
   
-  &:hover:not(.disabled):not(.selected)
+  &:hover:not(.disabled):not(.selected):not(.in-range)
     background-color: $darker-gray
+    border-radius: 0.25rem
   
   &.other-month
     color: $subtext
     opacity: 0.4
   
   &.in-range
-    background-color: rgba(16, 185, 129, 0.15)
-    border-radius: 0
+    background-color: rgba(16, 185, 129, 0.2)
   
   &.range-start
     background-color: $accent-primary
     color: #fff
     font-weight: 600
-    border-radius: 0.375rem 0 0 0.375rem
+    border-radius: 0.25rem 0 0 0.25rem
     
     &.range-end
-      border-radius: 0.375rem
+      border-radius: 0.25rem
   
   &.range-end
     background-color: $accent-primary
     color: #fff
     font-weight: 600
-    border-radius: 0 0.375rem 0.375rem 0
+    border-radius: 0 0.25rem 0.25rem 0
   
   &.today:not(.selected)
     position: relative
@@ -162,11 +151,11 @@
     &::after
       content: ""
       position: absolute
-      bottom: 4px
+      bottom: 3px
       left: 50%
       transform: translateX(-50%)
-      width: 4px
-      height: 4px
+      width: 3px
+      height: 3px
       background-color: $accent-primary
       border-radius: 50%
   
@@ -188,5 +177,5 @@
     min-width: unset
 
   .day-btn
-    width: 36px
-    height: 32px
+    height: 28px
+    font-size: 0.7rem