hamed
55ab2f5dfc
- Refactor color palette in `ui-design-spec.md` to utilize CSS variables exclusively, eliminating fixed hex values and Tailwind utility classes. - Complete dark mode implementation in `uiStore.ts`, ensuring proper theme application via `applyTheme()` and `applyBrand()`. - Create `admin-theme-dark-light-audit.md` to document the transition process, outlining issues with inline styles and fixed colors. - Introduce `theme-tokens.test.ts` to enforce rules against fixed hex colors and ensure compliance with the design system. - Update various components and styles to replace inline styles and fixed colors with CSS variables, ensuring consistent theming across light and dark modes. - Ensure all changes maintain visual integrity in both light and dark modes, with a focus on accessibility and contrast standards.
65 lines
3.1 KiB
TypeScript
65 lines
3.1 KiB
TypeScript
import {
|
|
FilesServiceAddServiceStep,
|
|
FilesAddServicePaymentStep,
|
|
FilesServiceDetailsStep,
|
|
} from './icons/FilesServiceIcons';
|
|
|
|
/**
|
|
* استپر صفحهی سرویس/تسویه — پورت tauri files/services/CustomizedStepper
|
|
* (کانکتور بنفش، آیکون دایرهای هر گام، تیک سبز برای گامهای کاملشده).
|
|
*/
|
|
|
|
// هر برچسب گام آیکون ثابت خودش را دارد تا در حالت payment-only هم درست بماند.
|
|
const ICON_BY_LABEL: Record<string, number> = {
|
|
'ایجاد سرویس': 1,
|
|
'ویرایش': 1,
|
|
'پرداخت': 2,
|
|
'جزییات': 3,
|
|
};
|
|
|
|
function StepIcon({ index, active, completed }: { index: number; active: boolean; completed: boolean }) {
|
|
if (completed && !active) {
|
|
// دایره سفید با تیک سبز (tauri ColorlibStepIconRoot completed state)
|
|
return (
|
|
<div style={{ width: 52, height: 52, borderRadius: '50%', background: 'var(--surface)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
|
<svg width="32" height="32" viewBox="0 0 24 24" style={{ fill: 'var(--success)' }} xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
|
|
</svg>
|
|
</div>
|
|
);
|
|
}
|
|
const shadow = active ? { boxShadow: '0 4px 10px 0 rgba(85, 89, 206, 0.25)', borderRadius: '50%' } : undefined;
|
|
switch (index) {
|
|
case 1: return <div style={shadow}><FilesServiceAddServiceStep active={active} /></div>;
|
|
case 2: return <div style={shadow}><FilesAddServicePaymentStep active={active} /></div>;
|
|
default: return <div style={shadow}><FilesServiceDetailsStep active={active} /></div>;
|
|
}
|
|
}
|
|
|
|
export default function SessionStepper({ activeStep = 0, steps = [] }: { activeStep?: number; steps?: string[] }) {
|
|
return (
|
|
<div style={{ display: 'flex', alignItems: 'flex-start', width: '100%', marginBottom: 24 }}>
|
|
{steps.map((label, i) => (
|
|
<div key={label} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', position: 'relative' }}>
|
|
{/* connector to previous step (tauri ColorlibConnector: top 22, h 3, marginX 40).
|
|
صفحه RTL است و گامِ قبلی سمت راست میافتد؛ MUI در tauri این را خودش flip میکرد. */}
|
|
{i > 0 && (
|
|
<div
|
|
data-testid={`step-connector-${i}`}
|
|
style={{
|
|
position: 'absolute', top: 22, left: 'calc(50% + 40px)', right: 'calc(-50% + 40px)',
|
|
height: 3, borderRadius: 1,
|
|
background: i <= activeStep ? 'linear-gradient(95deg, var(--primary) 0%, var(--primary) 100%)' : 'var(--surface-2)',
|
|
}}
|
|
/>
|
|
)}
|
|
<StepIcon index={ICON_BY_LABEL[label] ?? i + 1} active={i === activeStep} completed={i < activeStep} />
|
|
<span style={{ marginTop: 8, fontSize: '0.875rem', fontWeight: 600, color: 'var(--text)' }}>
|
|
{label}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|