dmail fix dark mode bug
This commit is contained in:
hamid zarghami
Binary file not shown.
|
Before Width: | Height: | Size: 498 B After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.3 KiB After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 76 KiB |
@@ -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'>
|
||||
{props.label}
|
||||
</div>
|
||||
<div className='text-sm text-foreground font-medium mb-2'>{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>
|
||||
|
||||
@@ -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>
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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='size-7 rounded-full bg-white bg-opacity-35 flex justify-center items-center'>
|
||||
<CloseCircle size={20} color='black' onClick={props.close} />
|
||||
<div className='text-sm text-foreground font-medium'>{props.label}</div>
|
||||
<div className={`size-7 rounded-full flex justify-center items-center transition-colors ${theme === 'dark'
|
||||
? '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>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user