ifritechnologies/pfm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactored project view into modal

Browse Source 
Elevated toast message priority
This commit is contained in:
hermes
2026-10-22 09:41:41 +02:00
parent ccc49df720
commit 0261a6093e
6 changed files with 1454 additions and 441 deletions
Download Patch File Download Diff File Expand all files Collapse all files
PostFundManagement.ConsoleUI/src/components/ui/Modal.tsx
+7 -3
View File
@@ -10,8 +10,9 @@ export interface ModalProps {
subtitle?: string;
helpText?: ReactNode;
children: ReactNode;
maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | 'full';
size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | 'full' | string;
maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | 'full-screen' | 'full';
size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | 'full-screen' | 'full' | string;
zIndex?: string;
}
export const Modal: React.FC<ModalProps> = ({
@@ -23,6 +24,7 @@ export const Modal: React.FC<ModalProps> = ({
children,
maxWidth = 'lg',
size,
zIndex = 'z-[9999]',
}) => {
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
@@ -57,13 +59,15 @@ export const Modal: React.FC<ModalProps> = ({
'4xl': 'max-w-4xl',
'5xl': 'max-w-5xl',
'6xl': 'max-w-6xl',
'7xl': 'max-w-7xl',
'full-screen': 'max-w-[96vw]',
full: 'max-w-full',
};
const maxWidthClass = maxWidthClassMap[effectiveSize] || 'max-w-lg';
const modalContent = (
<div
className="fixed inset-0 z-[9999] flex items-center justify-center p-4 bg-black/80 backdrop-blur-md animate-in fade-in duration-150 overflow-y-auto"
className={`fixed inset-0 ${zIndex} flex items-center justify-center p-4 bg-black/80 backdrop-blur-md animate-in fade-in duration-150 overflow-y-auto`}
onClick={onClose}
role="dialog"
aria-modal="true"
PostFundManagement.ConsoleUI/src/components/ui/Toast.tsx
+19 -13
View File
@@ -1,4 +1,5 @@
import React, { createContext, useContext, useState, useEffect, useRef, ReactNode } from 'react';
import { createPortal } from 'react-dom';
import {
CheckCircle2,
AlertCircle,
@@ -111,12 +112,12 @@ const ToastCard: React.FC<{
<div
onMouseEnter={() => setIsPaused(true)}
onMouseLeave={() => setIsPaused(false)}
className={`pointer-events-auto relative flex flex-col rounded-xl border shadow-2xl transition-all duration-200 overflow-hidden bg-[#111622] ${
className={`pointer-events-auto relative flex flex-col rounded-2xl border shadow-2xl transition-all duration-200 overflow-hidden bg-[#0d1322] backdrop-blur-none ${
toast.type === 'success'
? 'border-emerald-500/30 text-gray-200'
? 'border-emerald-500/60 text-gray-100 shadow-emerald-950/40 ring-1 ring-emerald-500/20'
: toast.type === 'error'
? 'border-rose-500/40 text-gray-200 shadow-rose-950/20'
: 'border-blue-500/30 text-gray-200'
? 'border-rose-500/70 text-gray-100 shadow-rose-950/60 ring-1 ring-rose-500/30'
: 'border-blue-500/60 text-gray-100 shadow-blue-950/40 ring-1 ring-blue-500/20'
}`}
>
<div className="flex items-start gap-3 p-4">
@@ -360,18 +361,23 @@ export const ToastProvider: React.FC<{ children: ReactNode }> = ({ children }) =
});
};
const toastRegion = (
<div
role="region"
aria-label="System Notifications"
className="fixed bottom-5 right-5 z-[999999] flex flex-col gap-3 max-w-md sm:max-w-lg w-full pointer-events-none p-2"
style={{ zIndex: 999999 }}
>
{toasts.map((t) => (
<ToastCard key={t.id} toast={t} onRemove={removeToast} />
))}
</div>
);
return (
<ToastContext.Provider value={{ toast: addToast, success, error, info }}>
{children}
<div
role="region"
aria-label="System Notifications"
className="fixed bottom-4 right-4 z-50 flex flex-col gap-3 max-w-lg w-full pointer-events-none p-2"
>
{toasts.map((t) => (
<ToastCard key={t.id} toast={t} onRemove={removeToast} />
))}
</div>
{typeof document !== 'undefined' ? createPortal(toastRegion, document.body) : null}
</ToastContext.Provider>
);
};