refactor: enhance UI components and fix styling issues

Author: sajjadmrx

src/renderer/component/button/button.tsx

@@ -1,4 +1,5 @@
 import type React from 'react'
+import { IoReload } from 'react-icons/io5'
 
 interface ButtonProps {
 	onClick?: () => void
@@ -37,8 +38,8 @@ export function Button(prop: ButtonProps) {
 			{prop.loading
 				? prop.loadingText || (
 						<div className="flex items-center gap-1">
-							{/* <Icon name="spinner" className="animate-spin" /> */}
-							<span className="text-xs">wait...</span>
+							<IoReload size={18} className="animate-spin" />
+							{/* <span className="text-xs">wait...</span> */}
 						</div>
 					)
 				: prop.children}

src/renderer/component/cards/advertisement.card.component.tsx

@@ -44,7 +44,7 @@ export function AdvertisementCardComponent() {
 		return (
 			<div
 				className={
-					'p-2bg-base-200 rounded-2xl shadow-sm h-17.5  flex items-center justify-center'
+					'p-2 bg-base-200 rounded-2xl h-17.5  flex items-center justify-center'
 				}
 			>
 				<div className="flex flex-row items-center gap-2">

src/renderer/component/input/text-input.tsx

@@ -105,7 +105,7 @@ export const TextInput = memo(function TextInput({
 		onKeyDown,
 		dir: direction,
 		placeholder: placeholder || '',
-		className: `input bg-content w-full text-[14px] ${sizes[size]} rounded-xl !outline-none transition-all duration-300 focus:ring-1 focus:ring-blue-500/20 focus:border-primary font-light ${className}`,
+		className: `input w-full text-[14px] ${sizes[size]} rounded-xl !outline-none transition-all duration-300 focus:ring-1 focus:ring-blue-500/20 focus:border-primary font-light ${className}`,
 		onChange: handleChange,
 		maxLength,
 		autoComplete,

src/renderer/component/modals/add-dns.component.tsx

@@ -349,7 +349,7 @@ function InputDNS(index: number, className: string, onChange: any) {
 			<input
 				key={index}
 				type="text"
-				className={`${className} w-10 h-10 border-none rounded font-[Inter] outline outline-1 outline-gray-700/20  dark:outline-none dark:text-gray-300/95 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-indigo-500 text-center`}
+				className={`${className} input w-10 p-0! h-10 rounded-xl font-[Inter] outline-none! transition-all duration-300 focus:ring-1 focus:ring-primary/20 focus:border-primary text-center`}
 				maxLength={3}
 				onChange={onChange}
 			/>

src/renderer/component/modals/confirmation-modal.tsx

@@ -47,14 +47,14 @@ export function ConfirmationModal({
 	isOpen,
 	onClose,
 	onConfirm,
-	title = 'تأیید عملیات',
-	message = 'آیا از انجام این عملیات اطمینان دارید؟',
-	confirmText = 'تأیید',
-	cancelText = 'انصراف',
+	title = 'Confirm Operation',
+	message = 'Are you sure you want to perform this operation?',
+	confirmText = 'Confirm',
+	cancelText = 'Cancel',
 	variant = 'danger',
 	isLoading = false,
 	icon,
-	direction = 'rtl',
+	direction,
 }: ConfirmationModalProps) {
 	const config = variantConfig[variant]
 	const displayIcon = icon || config.icon
@@ -97,29 +97,28 @@ export function ConfirmationModal({
 				</div>
 
 				<div className="flex gap-3 pt-2">
+					<Button
+						onClick={handleCancel}
+						size="md"
+						disabled={isLoading}
+						className="flex-1 border border-content/20 text-content hover:bg-base-300/50 rounded-2xl"
+					>
+						{cancelText}
+					</Button>
 					<Button
 						onClick={handleConfirm}
 						size="md"
 						disabled={isLoading}
 						loading={isLoading}
 						loadingText={
 							<div className="flex items-center gap-1">
-								{/* <IconLoading className="!mx-0 !text-white" /> */}
-								<span className="text-xs">در حال انجام...</span>
+								<span className="text-xs">Please wait ...</span>
 							</div>
 						}
 						className={`flex-1 ${config.confirmBg} ${config.confirmText} border-none rounded-2xl`}
 					>
 						{confirmText}
 					</Button>
-					<Button
-						onClick={handleCancel}
-						size="md"
-						disabled={isLoading}
-						className="flex-1 border border-content/20 text-content hover:bg-base-300/50 rounded-2xl"
-					>
-						{cancelText}
-					</Button>
 				</div>
 			</div>
 		</Modal>

src/renderer/component/modals/modal.tsx

@@ -15,31 +15,11 @@ type ModalProps = {
 }
 
 const sizeClasses = {
-	sm: {
-		w: 'w-[calc(100vw-2rem)] max-w-sm',
-		h: 'max-h-[calc(100vh-4rem)] md:max-h-[560px]',
-		minH: 'min-h-[180px]',
-	},
-	md: {
-		w: 'w-[calc(100vw-2rem)] max-w-md',
-		h: 'max-h-[calc(100vh-4rem)] md:max-h-[640px]',
-		minH: 'min-h-[200px]',
-	},
-	lg: {
-		w: 'w-[calc(100vw-2rem)] max-w-lg',
-		h: 'max-h-[calc(100vh-4rem)] md:max-h-[720px]',
-		minH: 'min-h-[240px]',
-	},
-	xl: {
-		w: 'w-[calc(100vw-2rem)] max-w-4xl',
-		h: 'max-h-[calc(100vh-4rem)] md:max-h-[800px]',
-		minH: 'min-h-[280px]',
-	},
-	full: {
-		w: 'w-[calc(100vw-1rem)] max-w-5xl',
-		h: 'h-[calc(100vh-4rem)] md:h-[calc(100vh-6rem)]',
-		minH: 'min-h-[calc(100vh-4rem)]',
-	},
+	sm: 'max-w-sm max-h-[80vh]',
+	md: 'max-w-md max-h-[80vh]',
+	lg: 'max-w-lg max-h-[80vh]',
+	xl: 'max-w-4xl max-h-[80vh]',
+	full: 'max-w-[95vw] max-h-[95vh]',
 } as const
 
 export default function Modal({
@@ -53,95 +33,81 @@ export default function Modal({
 	showCloseButton = true,
 	className = '',
 }: ModalProps) {
-	const modalRef = useRef<HTMLDivElement>(null)
-	const sizeValue = sizeClasses[size] || sizeClasses.md
+	const dialogRef = useRef<HTMLDialogElement>(null)
 
-	// Lock body scroll when modal is open
 	useEffect(() => {
 		if (isOpen) {
-			document.documentElement.classList.add('modal-isActive')
-			document.body.style.overflow = 'hidden'
+			dialogRef.current?.showModal()
 		} else {
-			document.documentElement.classList.remove('modal-isActive')
-			document.body.style.overflow = ''
-		}
-		return () => {
-			document.documentElement.classList.remove('modal-isActive')
-			document.body.style.overflow = ''
+			dialogRef.current?.close()
 		}
 	}, [isOpen])
 
-	// Handle keyboard events
-	useEffect(() => {
-		if (!isOpen) return
-
-		const handleKeyDown = (e: KeyboardEvent) => {
-			if (e.key === 'Escape') {
-				e.preventDefault()
-				onClose()
-			}
+	const handleBackdropClick = (e: React.MouseEvent<HTMLDialogElement>) => {
+		if (!closeOnBackdropClick) return
+		const rect = dialogRef.current?.getBoundingClientRect()
+		if (!rect) return
+		const isClickOutside =
+			e.clientX < rect.left ||
+			e.clientX > rect.right ||
+			e.clientY < rect.top ||
+			e.clientY > rect.bottom
+		if (isClickOutside) {
+			onClose()
 		}
+	}
 
-		document.addEventListener('keydown', handleKeyDown)
-		return () => document.removeEventListener('keydown', handleKeyDown)
-	}, [isOpen, onClose])
+	const handleCancel = (e: React.SyntheticEvent<HTMLDialogElement>) => {
+		e.preventDefault()
+		onClose()
+	}
 
-	// Focus management
-	useEffect(() => {
-		if (isOpen && modalRef.current) {
-			const focusableElements = modalRef.current.querySelectorAll(
-				'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-			)
-			const firstElement = focusableElements[0] as HTMLElement
-			firstElement?.focus()
-		}
-	}, [isOpen])
-
-	const modalBoxClasses = `
-		modal-box overflow-hidden rounded-xl md:rounded-2xl p-3 md:p-4 shadow-xl transition-all duration-200
-		${sizeValue.w} ${sizeValue.minH} ${size === 'full' ? sizeValue.h : ''} ${className}
-	`
-
-	if (!isOpen) return null
+	const sizeClass = sizeClasses[size] || sizeClasses.md
 
 	return createPortal(
 		<dialog
-			open={isOpen}
+			ref={dialogRef}
 			dir={direction}
-			aria-labelledby={typeof title === 'string' ? title : 'modal-title'}
-			aria-modal="true"
-			onClick={() => closeOnBackdropClick && onClose()}
-			className="flex items-center justify-center p-2 transition-opacity duration-200 opacity-100 modal modal-middle md:p-4"
+			onCancel={handleCancel}
+			onClick={handleBackdropClick}
+			className="modal"
 		>
 			<div
-				ref={modalRef}
-				onClick={(e) => e.stopPropagation()}
-				className={`${modalBoxClasses} animate-modal-in`}
+				className={`
+          modal-box 
+          rounded-xl md:rounded-2xl 
+          p-3 md:p-4 
+          shadow-xl 
+          overflow-hidden
+          ${sizeClass}
+          ${className}
+        `}
 			>
 				{(title || showCloseButton) && (
 					<div className="flex items-center justify-between gap-2 mb-2 md:mb-3 md:gap-4">
 						{title && (
-							<h3
-								id="modal-title"
-								className="text-base font-semibold md:text-lg"
-							>
+							<h3 className="text-base font-semibold md:text-lg">
 								{title}
 							</h3>
 						)}
 						{showCloseButton && (
 							<button
 								type="button"
 								onClick={onClose}
-								className="flex items-center justify-center transition-all rounded-full cursor-pointer w-7 h-7 md:w-8 md:h-8 bg-base-300 text-muted hover:bg-base-content/10 hover:scale-105 active:scale-95 shrink-0 outline-0! border-0!"
+								className="min-h-0 p-0 rounded-full  btn btn-sm btn-ghost w-7 h-7 md:w-8 md:h-8 text-base-content/60 hover:text-base-content hover:bg-base-content/10"
 								aria-label="Close modal"
 							>
-								<IoClose />
+								<IoClose className="w-5 h-5" />
 							</button>
 						)}
 					</div>
 				)}
 				<div
-					className={`overflow-y-auto overflow-x-hidden ${size !== 'full' ? sizeValue.h : 'h-full'} pr-0.5 md:pr-1`}
+					className={`
+            overflow-y-auto overflow-x-hidden 
+            pr-0.5 md:pr-1
+            ${size !== 'full' ? 'max-h-[70vh]' : 'max-h-[85vh]'}
+          `}
 				>
 					{children}
 				</div>

src/renderer/component/modals/network-options.component.tsx

@@ -73,7 +73,7 @@ export function NetworkOptionsModalComponent(props: Props) {
 						onChange={(value) =>
 							setNetworkInterfaceInterface(value.target.value)
 						}
-						className="px-2 select"
+						className="border cursor-pointer select rounded-xl bg-base-200 border-base-300 outline-primary/30"
 					>
 						{networkAdapters.map((item) => (
 							<option value={item} selected={item === network} key={item}>