fix: date picker select year and custom time style

Author: adam-strzelec

src/components/v5/common/ActionSidebar/partials/TimeRow/TimeRow.tsx

@@ -13,8 +13,7 @@ import { StreamingPaymentEndCondition } from '~gql';
 import Tooltip from '~shared/Extensions/Tooltip/Tooltip.tsx';
 import { formatText } from '~utils/intl.ts';
 import ActionFormRow from '~v5/common/ActionFormRow/index.ts';
-
-import useHasNoDecisionMethods from '../../hooks/permissions/useHasNoDecisionMethods.ts';
+import useHasNoDecisionMethods from '~v5/common/ActionSidebar/hooks/permissions/useHasNoDecisionMethods.ts';
 
 import { END_OPTIONS, START_OPTIONS } from './consts.ts';
 import { CUSTOM_DATE_VALUE } from './partials/TimeRowField/consts.ts';

src/components/v5/common/ActionSidebar/partials/TimeRow/partials/TimeRowField/TimeRowField.tsx

@@ -1,4 +1,5 @@
 import clsx from 'clsx';
+import { addYears, subYears } from 'date-fns';
 import format from 'date-fns/format';
 import isDate from 'date-fns/isDate';
 import React, { useState, type FC } from 'react';
@@ -36,6 +37,9 @@ const TimeRowField: FC<TimeRowFieldProps> = ({
     isDate(field.value) ? customDateValue : field.value,
   );
 
+  const year15YearsAgo = subYears(new Date(), 15).getFullYear();
+  const year15YearsAhead = addYears(new Date(), 15).getFullYear();
+
   return (
     <CardSelect<string>
       options={options}
@@ -97,6 +101,8 @@ const TimeRowField: FC<TimeRowFieldProps> = ({
                   inline
                   onClose={onClick}
                   minDate={minDate}
+                  minYear={year15YearsAgo}
+                  maxYear={year15YearsAhead}
                 />
               </div>
             )}

src/styles/main.css

@@ -61,6 +61,14 @@ body.ReactModal__Body--open:not(.show-header-in-modal) .modal-blur-navigation {
   @apply blur-[0.125rem];
 }
 
+ul.react-datepicker__time-list {
+  @apply bg-base-white;
+}
+
+li.react-datepicker__time-list-item {
+  @apply hover:bg-gray-50 !important;
+}
+
 :root {
   --onboard-connect-sidebar-background: var(--color-gray-200);
   --onboard-main-scroll-container-background: var(--color-base-white);

tailwind.config.js

@@ -133,7 +133,7 @@ module.exports = {
         content: '0px 1px 2px rgba(16, 24, 40, 0.05)',
         overlay: 'blur(2px)',
         'light-blue': '0px 0px 3px 3px rgba(239, 248, 255, 1)',
-        'select': '0px 1px 2px 0px rgba(16, 24, 40, 0.05);'
+        select: '0px 1px 2px 0px rgba(16, 24, 40, 0.05);',
       },
       transitionDuration: {
         slow: '450ms',
@@ -158,7 +158,7 @@ module.exports = {
       },
       spacing: {
         4.5: '1.125rem',
-        8.5: '2.125rem'
+        8.5: '2.125rem',
       },
     },
   },
@@ -307,6 +307,12 @@ module.exports = {
         '.divider': {
           '@apply w-full border border-gray-200': {},
         },
+        'ul.react-datepicker__time-list': {
+          '@apply bg-base-white': {},
+        },
+        'li.react-datepicker__time-list-item': {
+          '@apply hover:bg-gray-50 !important': {},
+        },
       });
     },
   ],