From 0d707207d64d19945c08a2605ac311ba158c3b48 Mon Sep 17 00:00:00 2001
From: hp <mohitgkp464@gmail.com>
Date: Mon, 21 Oct 2024 03:12:27 +0530
Subject: [PATCH] Solve Dark Mode Visibility on Instant OPD Section

---
 client/src/pages/OPDRegistration.jsx | 394 ++++++++++++++-------------
 client/src/styles/OPD.css            |  21 ++
 2 files changed, 219 insertions(+), 196 deletions(-)

diff --git a/client/src/pages/OPDRegistration.jsx b/client/src/pages/OPDRegistration.jsx
index 99f38834..8142b4ca 100644
--- a/client/src/pages/OPDRegistration.jsx
+++ b/client/src/pages/OPDRegistration.jsx
@@ -171,219 +171,221 @@ function OPDRegistrationForm() {
 
   return (
     <>
+        <div className={`${dark === 'dark' ? 'dark' : ''}`}>
       <section className={`form-container ${dark === 'dark' ? 'dark' : ''}`}>
         <h2 className={dark === 'dark' ? 'text-yellow-400' : 'text-gray-900'}>
           OPD Registration
         </h2>
 
-        <form onSubmit={handleSubmit} className="opd-registration-form">
-          <div className={`form-group ${dark === 'dark' ? 'dark-mode' : ''}`}>
-            <label htmlFor="name">Name:</label>
-            <input
-              type="text"
-              id="name"
-              name="name"
-              placeholder="Enter your full name"
-              value={formData.name}
-              onChange={handleChange}
-              required
-              className={dark === 'dark' ? 'input-dark' : ''}
-            />
-            {errors.name && <span className="error">{errors.name}</span>}
-          </div>
-
-          <div className="form-group">
-            <label htmlFor="email">Email:</label>
-            <input
-              type="email"
-              id="email"
-              name="email"
-              placeholder="Enter your email"
-              value={formData.email}
-              onChange={handleChange}
-              required
-              className={dark === 'dark' ? 'input-dark' : ''}
-            />
-            {errors.email && <span className="error">{errors.email}</span>}
-          </div>
+          <form onSubmit={handleSubmit} className="opd-registration-form ">
+            <div className={`form-group ${dark === 'dark' ? 'dark-mode' : ''}`}>
+              <label htmlFor="name">Name:</label>
+              <input
+                type="text"
+                id="name"
+                name="name"
+                placeholder="Enter your full name"
+                value={formData.name}
+                onChange={handleChange}
+                required
+                className={dark === 'dark' ? 'input-dark' : ''}
+              />
+              {errors.name && <span className="error">{errors.name}</span>}
+            </div>
 
-          <div className="form-group">
-            <label htmlFor="age">Age:</label>
-            <input
-              type="number"
-              id="age"
-              name="age"
-              placeholder="Enter your age"
-              value={formData.age}
-              onChange={handleChange}
-              required
-              className={dark === 'dark' ? 'input-dark' : ''}
-            />
-            {errors.age && <span className="error">{errors.age}</span>}
-          </div>
+            <div className="form-group">
+              <label htmlFor="email">Email:</label>
+              <input
+                type="email"
+                id="email"
+                name="email"
+                placeholder="Enter your email"
+                value={formData.email}
+                onChange={handleChange}
+                required
+                className={dark === 'dark' ? 'input-dark' : ''}
+              />
+              {errors.email && <span className="error">{errors.email}</span>}
+            </div>
 
-          <div className="form-group">
-            <label htmlFor="gender">Gender:</label>
-            <select
-              id="gender"
-              name="gender"
-              value={formData.gender}
-              onChange={handleChange}
-              required
-              className={dark === 'dark' ? 'input-dark' : ''}
-            >
-              <option value="" disabled>
-                Select gender
-              </option>
-              <option value="Male">Male</option>
-              <option value="Female">Female</option>
-              <option value="Other">Other</option>
-            </select>
-            {errors.gender && <span className="error">{errors.gender}</span>}
-          </div>
+            <div className="form-group">
+              <label htmlFor="age">Age:</label>
+              <input
+                type="number"
+                id="age"
+                name="age"
+                placeholder="Enter your age"
+                value={formData.age}
+                onChange={handleChange}
+                required
+                className={dark === 'dark' ? 'input-dark' : ''}
+              />
+              {errors.age && <span className="error">{errors.age}</span>}
+            </div>
 
-          <div className="form-group">
-            <label htmlFor="contact">Contact Number:</label>
-            <input
-              type="tel"
-              id="contact"
-              name="contact"
-              placeholder="Enter your contact number"
-              value={formData.contact}
-              onChange={handleChange}
-              required
-              className={dark === 'dark' ? 'input-dark' : ''}
-            />
-            {errors.contact && <span className="error">{errors.contact}</span>}
-          </div>
+            <div className="form-group">
+              <label htmlFor="gender">Gender:</label>
+              <select
+                id="gender"
+                name="gender"
+                value={formData.gender}
+                onChange={handleChange}
+                required
+                className={dark === 'dark' ? 'input-dark' : ''}
+              >
+                <option value="" disabled>
+                  Select gender
+                </option>
+                <option value="Male">Male</option>
+                <option value="Female">Female</option>
+                <option value="Other">Other</option>
+              </select>
+              {errors.gender && <span className="error">{errors.gender}</span>}
+            </div>
 
-          <div className="form-group">
-            <label htmlFor="address">Address:</label>
-            <input
-              type="text"
-              id="address"
-              name="address"
-              placeholder="Enter your address"
-              value={formData.address}
-              onChange={handleChange}
-              required
-              className={dark === 'dark' ? 'input-dark' : ''}
-            />
-            {errors.address && <span className="error">{errors.address}</span>}
-          </div>
+            <div className="form-group">
+              <label htmlFor="contact">Contact Number:</label>
+              <input
+                type="tel"
+                id="contact"
+                name="contact"
+                placeholder="Enter your contact number"
+                value={formData.contact}
+                onChange={handleChange}
+                required
+                className={dark === 'dark' ? 'input-dark' : ''}
+              />
+              {errors.contact && <span className="error">{errors.contact}</span>}
+            </div>
 
-          <div className="form-group">
-            <label htmlFor="pincode">Pincode:</label>
-            <input
-              type="text"
-              id="pincode"
-              name="pincode"
-              placeholder="Enter your pincode"
-              value={formData.pincode}
-              onChange={handleChange}
-              required
-              className={dark === 'dark' ? 'input-dark' : ''}
-            />
-            {errors.pincode && <span className="error">{errors.pincode}</span>}
-          </div>
+            <div className="form-group">
+              <label htmlFor="address">Address:</label>
+              <input
+                type="text"
+                id="address"
+                name="address"
+                placeholder="Enter your address"
+                value={formData.address}
+                onChange={handleChange}
+                required
+                className={dark === 'dark' ? 'input-dark' : ''}
+              />
+              {errors.address && <span className="error">{errors.address}</span>}
+            </div>
 
-          <div className="form-group">
-            <label htmlFor="department">Department:</label>
-            <select
-              id="department"
-              name="department"
-              value={formData.department}
-              onChange={handleChange}
-              required
-              className={dark === 'dark' ? 'input-dark' : ''}
-            >
-              <option value="" disabled>
-                Select Department
-              </option>
-              <option value="cardiology">Cardiology</option>
-              <option value="neurology">Neurology</option>
-              <option value="orthopedics">Orthopedics</option>
-              <option value="pediatrics">Pediatrics</option>
-              <option value="gynecology">Gynecology</option>
-              <option value="dermatology">Dermatology</option>
-            </select>
-            {errors.department && (
-              <span className="error">{errors.department}</span>
-            )}
-          </div>
+            <div className="form-group">
+              <label htmlFor="pincode">Pincode:</label>
+              <input
+                type="text"
+                id="pincode"
+                name="pincode"
+                placeholder="Enter your pincode"
+                value={formData.pincode}
+                onChange={handleChange}
+                required
+                className={dark === 'dark' ? 'input-dark' : ''}
+              />
+              {errors.pincode && <span className="error">{errors.pincode}</span>}
+            </div>
 
-          <div className="form-group  form-textarea">
-            <label htmlFor="reason">Reason:</label>
-            <textarea
-              id="reason"
-              name="reason"
-              placeholder="Enter the reason for your visit"
-              value={formData.reason}
-              onChange={handleChange}
-              required
-              className={dark === 'dark' ? 'input-dark' : ''}
-            ></textarea>
-            {errors.reason && <span className="error">{errors.reason}</span>}
-          </div>
+            <div className="form-group">
+              <label htmlFor="department">Department:</label>
+              <select
+                id="department"
+                name="department"
+                value={formData.department}
+                onChange={handleChange}
+                required
+                className={dark === 'dark' ? 'input-dark' : ''}
+              >
+                <option value="" disabled>
+                  Select Department
+                </option>
+                <option value="cardiology">Cardiology</option>
+                <option value="neurology">Neurology</option>
+                <option value="orthopedics">Orthopedics</option>
+                <option value="pediatrics">Pediatrics</option>
+                <option value="gynecology">Gynecology</option>
+                <option value="dermatology">Dermatology</option>
+              </select>
+              {errors.department && (
+                <span className="error">{errors.department}</span>
+              )}
+            </div>
 
-          <div className="form-group">
-            <label htmlFor="date">Date:</label>
-            <input
-  type="date"
-  id="date"
-  name="date"
-  value={formData.date}
-  onChange={handleChange}
-  required
-  className={dark === 'dark' ? 'input-dark' : ''}
-  min={today} // Set the minimum value to today's date
-/>
-            {errors.date && <span className="error">{errors.date}</span>}
-          </div>
+            <div className="form-group  form-textarea">
+              <label htmlFor="reason">Reason:</label>
+              <textarea
+                id="reason"
+                name="reason"
+                placeholder="Enter the reason for your visit"
+                value={formData.reason}
+                onChange={handleChange}
+                required
+                className={dark === 'dark' ? 'input-dark' : ''}
+              ></textarea>
+              {errors.reason && <span className="error">{errors.reason}</span>}
+            </div>
 
-          <div className="form-group">
-            <label htmlFor="report">Upload Report (Optional):</label>
-            <input
-              type="file"
-              id="report"
-              name="report"
-              multiple
-              onChange={handleChange}
-              className={dark === 'dark' ? 'input-dark' : ''}
-            />
-            {errors.report && <span className="error">{errors.report}</span>}
-          </div>
-          <div className="form-group form-textarea">
-            <label htmlFor="reason">Reason:</label>
-            <textarea
-              id="reason"
-              name="reason"
-              placeholder="Enter the reason for your visit"
-              value={formData.reason}
-              onChange={handleChange}
-              required
-            ></textarea>
-            {errors.reason && <span className="error">{errors.reason}</span>}
-          </div>
+            <div className={`form-group ${dark === 'dark' ? 'input-dark' : ''}`}>
+              <label htmlFor="date">Date:</label>
+              <input
+                className={dark === 'dark' ? 'input-dark' : ''}
+                type="date"
+                id="date"
+                name="date"
+                value={formData.date}
+                onChange={handleChange}
+                required
+                min={today} // Set the minimum value to today's date
+              />
+              {errors.date && <span className="error">{errors.date}</span>}
+            </div>
 
-          <div className="form-actions form-buttons">
-            <button
-              type="submit"
-              className={`submit-btn ${dark === 'dark' ? 'btn-dark' : ''}`}
-              disabled={isSubmitting}
-            >
-              {isSubmitting ? 'Registering...' : 'Register'}
-            </button>
+            <div className="form-group">
+              <label htmlFor="report">Upload Report (Optional):</label>
+              <input
+                type="file"
+                id="report"
+                name="report"
+                multiple
+                onChange={handleChange}
+                className={dark === 'dark' ? 'input-dark' : ''}
+              />
+              {errors.report && <span className="error">{errors.report}</span>}
+            </div>
+            <div className="form-group form-textarea">
+              <label htmlFor="reason">Reason:</label>
+              <textarea
+                id="reason"
+                name="reason"
+                placeholder="Enter the reason for your visit"
+                value={formData.reason}
+                onChange={handleChange}
+                required
+              ></textarea>
+              {errors.reason && <span className="error">{errors.reason}</span>}
+            </div>
 
-            <Link
-              to="/"
-              className={`back-btn ${dark === 'dark' ? 'link-dark' : ''}`}
-            >
-              Back to Home
-            </Link>
-          </div>
-        </form>
+            <div className="form-actions form-buttons">
+              <button
+                type="submit"
+                className={`submit-btn ${dark === 'dark' ? 'btn-dark' : ''}`}
+                disabled={isSubmitting}
+              >
+                {isSubmitting ? 'Registering...' : 'Register'}
+              </button>
+
+              <Link
+                to="/"
+                className={`back-btn ${dark === 'dark' ? 'link-dark' : ''}`}
+              >
+                Back to Home
+              </Link>
+            </div>
+          </form>
       </section>
+        </div>
       {showModal && (
         <div className={`modal ${dark === 'dark' ? 'modal-dark' : ''}`}>
           <div className="modal-content">
diff --git a/client/src/styles/OPD.css b/client/src/styles/OPD.css
index fc9e6e0b..b7b606fd 100644
--- a/client/src/styles/OPD.css
+++ b/client/src/styles/OPD.css
@@ -328,3 +328,24 @@ input[type='file'] {
 .dark .OPDText {
   color: #f1f1f1;
 }
+
+
+/* Dark mode date picker styling */
+input[type="date"].input-dark {
+  background-color: #333;
+  /* Dark background */
+  color: #fff;
+  /* Light text */
+  border: 1px solid #ccc;
+  /* Border color for contrast */
+}
+
+/* Light mode date picker styling */
+input[type="date"] {
+  background-color: #fff;
+  /* Default light background */
+  color: #000;
+  /* Default dark text */
+  border: 1px solid #ccc;
+  /* Default border color */
+}