dmail fix dark mode bug

src/components/DatePicker.tsx

@@ -5,7 +5,7 @@ import persian_fa from 'react-date-object/locales/persian_fa';
 import DateObject from 'react-date-object';
 import { Calendar } from 'iconsax-react';
 import { clx } from '@/helpers/utils';
-import { getIconColor } from '@/utils/colorUtils';
+import { useTheme } from '@/contexts/ThemeContext';
 
 type Props = {
     onChange: (date: string) => void;
@@ -19,7 +19,8 @@ type Props = {
     readOnly?: boolean;
 };
 
-const DatePickerComponent: FC<Props> = (props: Props) => {
+const DatePickerComponent: FC<Props> = (props) => {
+    const { theme } = useTheme();
     const [value, setValue] = useState<DateObject | null>(null);
 
     useEffect(() => {
@@ -50,9 +51,7 @@ const DatePickerComponent: FC<Props> = (props: Props) => {
         <div className="w-full">
             {
                 props.label &&
-                <div className='text-sm'>
+                <div className='text-sm text-foreground font-medium mb-2'>{props.label}</div>
-                    {props.label}
-                </div>
             }
             <div className={clx(
                 'relative',
@@ -68,6 +67,15 @@ const DatePickerComponent: FC<Props> = (props: Props) => {
                     calendarPosition="bottom-right"
                     className={props.className}
                     readOnly={props.readOnly}
+                    style={{
+                        backgroundColor: theme === 'dark' ? 'var(--secondary)' : 'var(--card)',
+                        color: theme === 'dark' ? 'var(--secondary-foreground)' : 'var(--card-foreground)',
+                        border: `1px solid ${theme === 'dark' ? 'var(--border)' : 'var(--border)'}`,
+                        borderRadius: '0.5rem',
+                        padding: '0.5rem 2rem 0.5rem 0.5rem',
+                        width: '100%',
+                        fontSize: '0.875rem'
+                    }}
                 />
                 {props.error_text && props.error_text !== '' && (
                     <div className="text-xs text-right text-red-600 mt-2 mr-2 font-medium">
@@ -77,7 +85,7 @@ const DatePickerComponent: FC<Props> = (props: Props) => {
 
                 <Calendar
                     size={20}
-                    color={getIconColor('muted')}
+                    color={theme === 'dark' ? '#969696' : '#8c90a3'}
                     className='absolute top-0 bottom-0 my-auto left-2 pointer-events-none'
                 />
             </div>

src/components/DefaulModal.tsx

@@ -1,5 +1,6 @@
 import { FC, Fragment, ReactNode, useEffect } from 'react'
 import HeaderModal from './HeaderModal'
+import { useTheme } from '@/contexts/ThemeContext'
 
 interface Props {
     open: boolean,
@@ -11,6 +12,7 @@ interface Props {
 }
 
 const DefaulModal: FC<Props> = (props: Props) => {
+    const { theme } = useTheme();
 
     useEffect(() => {
         if (props.open) {
@@ -28,13 +30,16 @@ const DefaulModal: FC<Props> = (props: Props) => {
                     <Fragment>
                         <div style={{ maxWidth: props.width }} className='xl:justify-center xl:items-center items-end flex overflow-x-hidden  overflow-y-auto fixed inset-0 z-[9999999]  h-auto top-0 bottom-0 m-auto outline-none focus:outline-none xl:max-w-xl mx-auto'>
                             <div className='relative xl:h-full max-h-[80%] bottom-0 left-0  flex xl:items-center sm:h-auto w-full xl:my-6 xl:p-2'>
-                                <div className='border-0 h-auto p-5 lg:min-w-full overflow-y-auto rounded-3xl rounded-b-none xl:rounded-b-3xl relative flex flex-col w-full modalGlass2  outline-none focus:outline-none'>
+                                <div className={`border-0 h-auto p-5 lg:min-w-full overflow-y-auto rounded-3xl rounded-b-none xl:rounded-b-3xl relative flex flex-col w-full outline-none focus:outline-none ${theme === 'dark'
-
+                                        ? 'bg-card border border-border'
+                                        : 'modalGlass2'
+                                    }`}>
 
                                     {
                                         props.isHeader && props.title_header &&
                                         <div onClick={props.close} className='pb-6 border-b border-border border-opacity-20'>
-                                            <div className='h-[5px] w-[200px] mx-auto bg-[#D1D3D7] rounded-full mb-4 xl:hidden'></div>
+                                            <div className={`h-[5px] w-[200px] mx-auto rounded-full mb-4 xl:hidden ${theme === 'dark' ? 'bg-secondary' : 'bg-[#D1D3D7]'
+                                                }`}></div>
                                             <HeaderModal close={props.close} label={props.title_header} />
                                         </div>
                                     }

src/components/Filters.tsx

@@ -6,6 +6,7 @@ import Select, { ItemsSelectType } from './Select';
 import DefaulModal from './DefaulModal';
 import moment from 'moment-jalaali'
 import Button from './Button';
+import { useTheme } from '@/contexts/ThemeContext';
 
 export type DateFieldType = {
     type: 'date';
@@ -50,6 +51,7 @@ const Filters: FC<FiltersProps> = ({
     fieldClassName = "flex flex-col sm:flex-row gap-3 md:gap-4 w-full md:w-auto",
     searchField = "search"
 }) => {
+    const { theme } = useTheme();
     const [filters, setFilters] = useState<FilterValues>({});
     const [isFiltersOpen, setIsFiltersOpen] = useState(false);
     const [inputValues, setInputValues] = useState<Record<string, string>>({});
@@ -171,9 +173,15 @@ const Filters: FC<FiltersProps> = ({
             <div className="flex md:hidden items-center justify-between w-full mb-2">
                 <button
                     onClick={() => setIsFiltersOpen(!isFiltersOpen)}
-                    className="flex items-center gap-2 px-3 py-2 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
+                    className={`flex items-center gap-2 px-3 py-2 rounded-lg transition-colors ${theme === 'dark'
+                        ? 'bg-secondary text-secondary-foreground border border-border hover:bg-accent hover:bg-opacity-80'
+                        : 'bg-card text-card-foreground border border-border hover:bg-secondary hover:bg-opacity-80'
+                        }`}
                 >
-                    <Filter size={18} color="#000" />
+                    <Filter
+                        size={18}
+                        color={theme === 'dark' ? '#cccccc' : '#000000'}
+                    />
                     <span className="text-sm">فیلترها</span>
                 </button>
                 {searchFieldObj && (
@@ -200,10 +208,10 @@ const Filters: FC<FiltersProps> = ({
                 isHeader={true}
                 title_header="فیلتر کردن نتایج"
             >
-                <div className="pb-5 gap-4 flex flex-col-reverse">
+                <div className="pb-5 gap-4 flex flex-col-reverse mt-3">
                     {otherFields.map(field => (
                         <div key={field.name} className="w-full">
-                            <label className="block text-sm font-medium text-gray-700 mb-2">
+                            <label className="block text-sm font-medium text-foreground mb-2">
                                 {field.placeholder}
                             </label>
                             <div className="w-full">
@@ -216,6 +224,7 @@ const Filters: FC<FiltersProps> = ({
                     <Button
                         label='بستن'
                         onClick={() => setIsFiltersOpen(false)}
+                        variant={theme === 'dark' ? 'secondary' : 'primary'}
                     />
                 </div>
             </DefaulModal>

src/components/HeaderModal.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import { CloseCircle } from 'iconsax-react'
-
+import { useTheme } from '@/contexts/ThemeContext'
 
 type Props = {
     label: string,
@@ -8,11 +8,21 @@ type Props = {
 }
 
 const HeaderModal: FC<Props> = (props: Props) => {
+    const { theme } = useTheme();
+
     return (
         <div className='flex justify-between items-center'>
-            <div className='text-sm'>{props.label}</div>
+            <div className='text-sm text-foreground font-medium'>{props.label}</div>
-            <div className='size-7 rounded-full bg-white bg-opacity-35 flex justify-center items-center'>
+            <div className={`size-7 rounded-full flex justify-center items-center transition-colors ${theme === 'dark'
-                <CloseCircle size={20} color='black' onClick={props.close} />
+                    ? 'bg-secondary hover:bg-accent'
+                    : 'bg-white bg-opacity-35 hover:bg-opacity-50'
+                }`}>
+                <CloseCircle
+                    size={20}
+                    color={theme === 'dark' ? '#cccccc' : '#000000'}
+                    onClick={props.close}
+                    className="cursor-pointer"
+                />
             </div>
         </div>
     )