From a85b90d28377b02570bb9965b100d26eda5541de Mon Sep 17 00:00:00 2001
From: Satyam Rastogi <satyamrastogi302@gmail.com>
Date: Fri, 15 May 2026 15:19:51 +0530
Subject: [PATCH] redesigned createItemModal with responsive and light /dark
 mode

---
 src/components/owner/CreateItemModal.jsx | 135 ++++++++++++-----------
 1 file changed, 73 insertions(+), 62 deletions(-)

diff --git a/src/components/owner/CreateItemModal.jsx b/src/components/owner/CreateItemModal.jsx
index 89936d1..9f39182 100644
--- a/src/components/owner/CreateItemModal.jsx
+++ b/src/components/owner/CreateItemModal.jsx
@@ -20,84 +20,95 @@ const CreateItemModal = ({ isOpen, onClose, title, icon: Icon, iconColor = "text
         onClose();
     };
 
+    const inputBase = "w-full bg-white dark:bg-[#18181b] border border-zinc-200 dark:border-white/10 rounded-xl px-4 py-3 text-sm text-zinc-900 dark:text-white placeholder-zinc-400 dark:placeholder-zinc-600 focus:outline-none focus:border-[#00f0ff] focus:ring-1 focus:ring-[#00f0ff] transition-all";
+
     return createPortal(
-        <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4" role="dialog" aria-modal="true">
-            <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
-            <div className="relative w-full max-w-md bg-[#121214] rounded-2xl shadow-[0_0_40px_rgba(0,0,0,0.8)] border border-white/10 overflow-hidden animate-in zoom-in-95 duration-200">
+        <div className="fixed inset-0 z-[9999] flex items-center justify-center p-3 sm:p-4" role="dialog" aria-modal="true">
+            <div className="absolute inset-0 bg-black/50 dark:bg-black/60 backdrop-blur-sm" onClick={onClose} />
+            <div className="relative w-full max-w-md max-h-[92vh] sm:max-h-[90vh] bg-white dark:bg-[#121214] rounded-2xl shadow-2xl shadow-zinc-900/20 dark:shadow-[0_0_40px_rgba(0,0,0,0.8)] border border-zinc-200 dark:border-white/10 overflow-hidden flex flex-col animate-in zoom-in-95 duration-200">
                 {/* Header */}
-                <div className="px-6 py-5 border-b border-white/10 flex justify-between items-center bg-white/5">
-                    <div className="flex items-center gap-3">
+                <div className="px-5 sm:px-6 py-4 sm:py-5 border-b border-zinc-200 dark:border-white/10 flex justify-between items-center bg-zinc-50 dark:bg-white/5 shrink-0">
+                    <div className="flex items-center gap-3 min-w-0">
                         {Icon && (
-                            <div className={`p-2 rounded-xl ${iconBg} ${iconColor}`}>
+                            <div className={`p-2 rounded-xl ${iconBg} ${iconColor} shrink-0`}>
                                 <Icon size={20} />
                             </div>
                         )}
-                        <h2 className="text-lg font-bold text-white tracking-widest uppercase">{title}</h2>
+                        <h2 className="text-base sm:text-lg font-bold text-zinc-900 dark:text-white tracking-widest uppercase truncate">{title}</h2>
                     </div>
-                    <button onClick={onClose} className="p-2 rounded-lg hover:bg-white/10 text-zinc-500 hover:text-white transition-colors">
+                    <button onClick={onClose} className="p-2 rounded-lg hover:bg-zinc-100 dark:hover:bg-white/10 text-zinc-500 hover:text-zinc-900 dark:hover:text-white transition-colors shrink-0">
                         <X size={18} />
                     </button>
                 </div>
 
                 {/* Content */}
-                <form onSubmit={handleSubmit} className="p-6 space-y-5">
-                    {fields.map((field, i) => (
-                        <div key={i} className="space-y-1.5">
-                            <label htmlFor={field.name} className="text-xs font-bold uppercase tracking-wider text-zinc-400">{field.label}</label>
-                            {field.type === 'textarea' ? (
-                                <textarea
-                                    id={field.name}
-                                    name={field.name}
-                                    className="w-full bg-[#18181b] border border-white/10 rounded-xl px-4 py-3 text-sm text-white placeholder-zinc-600 focus:outline-none focus:border-[#00f0ff] focus:ring-1 focus:ring-[#00f0ff] transition-all"
-                                    rows={4}
-                                    placeholder={field.placeholder || ''}
-                                    required={field.required}
-                                    value={formData[field.name] || ''}
-                                    onChange={e => setFormData({ ...formData, [field.name]: e.target.value })}
-                                />
-                            ) : field.type === 'select' ? (
-                                <select
-                                    id={field.name}
-                                    name={field.name}
-                                    className="w-full bg-[#18181b] border border-white/10 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-[#00f0ff] focus:ring-1 focus:ring-[#00f0ff] transition-all"
-                                    required={field.required}
-                                    value={formData[field.name] || ''}
-                                    onChange={e => setFormData({ ...formData, [field.name]: e.target.value })}
-                                >
-                                    <option value="" disabled>Select {field.label}</option>
-                                    {field.options.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
-                                </select>
-                            ) : field.type === 'file' ? (
-                                <input
-                                    id={field.name}
-                                    name={field.name}
-                                    type="file"
-                                    accept={field.accept}
-                                    className="w-full text-sm text-zinc-400 file:mr-4 file:py-2.5 file:px-4 file:rounded-xl file:border file:border-white/10 file:text-sm file:font-bold file:bg-[#18181b] file:text-white hover:file:bg-white/5 transition-all"
-                                    required={field.required}
-                                    onChange={e => setFormData({ ...formData, [field.name]: e.target.files[0] })}
-                                />
-                            ) : (
-                                <input
-                                    id={field.name}
-                                    name={field.name}
-                                    type={field.type || 'text'}
-                                    className="w-full bg-[#18181b] border border-white/10 rounded-xl px-4 py-3 text-sm text-white placeholder-zinc-600 focus:outline-none focus:border-[#00f0ff] focus:ring-1 focus:ring-[#00f0ff] transition-all"
-                                    placeholder={field.placeholder || ''}
-                                    required={field.required}
-                                    value={formData[field.name] || ''}
-                                    onChange={e => setFormData({ ...formData, [field.name]: e.target.value })}
-                                />
-                            )}
-                        </div>
-                    ))}
+                <form onSubmit={handleSubmit} className="flex-1 flex flex-col min-h-0">
+                    <div className="flex-1 overflow-y-auto px-5 sm:px-6 py-5 space-y-5">
+                        {fields.map((field, i) => (
+                            <div key={i} className="space-y-1.5">
+                                <label htmlFor={field.name} className="text-xs font-bold uppercase tracking-wider text-zinc-600 dark:text-zinc-400">{field.label}</label>
+                                {field.type === 'textarea' ? (
+                                    <textarea
+                                        id={field.name}
+                                        name={field.name}
+                                        className={inputBase}
+                                        rows={4}
+                                        placeholder={field.placeholder || ''}
+                                        required={field.required}
+                                        value={formData[field.name] || ''}
+                                        onChange={e => setFormData({ ...formData, [field.name]: e.target.value })}
+                                    />
+                                ) : field.type === 'select' ? (
+                                    <select
+                                        id={field.name}
+                                        name={field.name}
+                                        className={inputBase}
+                                        required={field.required}
+                                        value={formData[field.name] || ''}
+                                        onChange={e => setFormData({ ...formData, [field.name]: e.target.value })}
+                                    >
+                                        <option value="" disabled>Select {field.label}</option>
+                                        {field.options.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
+                                    </select>
+                                ) : field.type === 'file' ? (
+                                    <input
+                                        id={field.name}
+                                        name={field.name}
+                                        type="file"
+                                        accept={field.accept}
+                                        className="w-full text-sm text-zinc-600 dark:text-zinc-400 file:mr-4 file:py-2.5 file:px-4 file:rounded-xl file:border file:border-zinc-200 dark:file:border-white/10 file:text-sm file:font-bold file:bg-zinc-50 dark:file:bg-[#18181b] file:text-zinc-900 dark:file:text-white hover:file:bg-zinc-100 dark:hover:file:bg-white/5 transition-all"
+                                        required={field.required}
+                                        onChange={e => setFormData({ ...formData, [field.name]: e.target.files[0] })}
+                                    />
+                                ) : (
+                                    <input
+                                        id={field.name}
+                                        name={field.name}
+                                        type={field.type || 'text'}
+                                        className={inputBase}
+                                        placeholder={field.placeholder || ''}
+                                        required={field.required}
+                                        value={formData[field.name] || ''}
+                                        onChange={e => setFormData({ ...formData, [field.name]: e.target.value })}
+                                    />
+                                )}
+                            </div>
+                        ))}
+                    </div>
 
                     {/* Footer */}
-                    <div className="pt-4 flex justify-end gap-3">
-                        <button type="button" onClick={onClose} className="px-5 py-2.5 text-sm font-bold text-zinc-400 hover:text-white transition-colors">
+                    <div className="px-5 sm:px-6 py-4 border-t border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-white/[0.02] flex flex-col-reverse sm:flex-row sm:justify-end gap-2 sm:gap-3 shrink-0">
+                        <button
+                            type="button"
+                            onClick={onClose}
+                            className="px-5 py-2.5 text-sm font-bold rounded-xl border border-zinc-200 dark:border-white/10 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-white/5 hover:text-zinc-900 dark:hover:text-white transition-colors"
+                        >
                             Cancel
                         </button>
-                        <button type="submit" className={`px-6 py-2.5 text-sm font-bold rounded-xl border ${submitColor} hover:brightness-110 transition-all shadow-[0_0_15px_rgba(0,0,0,0.5)]`}>
+                        <button
+                            type="submit"
+                            className={`px-6 py-2.5 text-sm font-bold rounded-xl border ${submitColor} hover:brightness-110 transition-all shadow-sm dark:shadow-[0_0_15px_rgba(0,0,0,0.5)]`}
+                        >
                             {submitLabel}
                         </button>
                     </div>