Fix dark mode styling for Follow Up Email Template (button, text, dividers, container, icons)

Author: Neeraj-Kondaveeti

src/components/CommunityPortal/Activities/FollowUpEmailTemplate.jsx

@@ -1,34 +1,44 @@
 import { useParams, Link } from 'react-router-dom';
+import { useSelector } from 'react-redux';
 import styles from './FollowUpEmailTemplate.module.css';
 import { FaLinkedin, FaInstagram, FaFacebook } from 'react-icons/fa';
 import companyLogo from '../../../assets/images/logo2.png';
 
 function FollowUpEmailTemplate() {
-  const { eventId = 1234, email = '' } = useParams(); // || { email: '' };
+  const { eventId = 1234, email = '' } = useParams();
+
+  // Dark mode state from Redux
+  const darkMode = useSelector(state => state.theme.darkMode);
+
   return (
-    <div className={styles.emailTemplateContainer}>
+    <div
+      className={`${styles.emailTemplateContainer} ${
+        darkMode ? styles.emailTemplateContainerDark : ''
+      }`}
+    >
       {/* Company Logo */}
       <img src={companyLogo} alt="One Community Logo" className={styles.emailLogo} />
 
-      <h2>Hi {email || '[Name]'},</h2>
-      <p>
+      <h2 className={darkMode ? styles.textLight : ''}>Hi {email || '[Name]'},</h2>
+
+      <p className={darkMode ? styles.textLight : ''}>
         We hope you enjoyed our recent event. Your feedback is valuable to us as we strive to
         improve our future events.
       </p>
 
-      <p>
+      <p className={darkMode ? styles.textLight : ''}>
         Please take a moment to share your thoughts:
         <br />
         <Link
           to={`/communityportal/activities/FeedbackForm/${eventId}/${email || 'no-email'}`}
-          className={styles.feedbackLink}
+          className={`${styles.feedbackLink} ${darkMode ? styles.feedbackLinkDark : ''}`}
         >
           Survey Form
         </Link>
       </p>
 
-      <p>If you’d like to:</p>
-      <ul>
+      <p className={darkMode ? styles.textLight : ''}>If you’d like to:</p>
+      <ul className={`${darkMode ? styles.textLight : ''} ${darkMode ? styles.linkSoftDark : ''}`}>
         <li>
           Reschedule: <a href="https://www.onecommunityevents.org/reschedule">Reschedule Link</a>
         </li>
@@ -38,24 +48,24 @@ function FollowUpEmailTemplate() {
         </li>
       </ul>
 
-      <p>Best regards,</p>
-      <p>One Community Team</p>
-      <p>Primary Email: jae@onecommunityglobal.org</p>
-      <p>Google Email: onecommunityglobal@gmail.com</p>
-      <p>Timezone: Los Angeles, CA - Pacific Time</p>
+      <p className={darkMode ? styles.textLight : ''}>Best regards,</p>
+      <p className={darkMode ? styles.textLight : ''}>One Community Team</p>
+      <p className={darkMode ? styles.textLight : ''}>Primary Email: jae@onecommunityglobal.org</p>
+      <p className={darkMode ? styles.textLight : ''}>Google Email: onecommunityglobal@gmail.com</p>
+      <p className={darkMode ? styles.textLight : ''}>Timezone: Los Angeles, CA - Pacific Time</p>
 
-      {/* Horizontal Line */}
-      <hr className={styles.emailDivider} />
+      {/* Divider */}
+      <hr className={`${styles.emailDivider} ${darkMode ? styles.emailDividerDark : ''}`} />
 
-      {/* Social Media Icons */}
-      <div className={styles.socialIcons}>
+      {/* Social Icons */}
+      <div className={`${styles.socialIcons} ${darkMode ? styles.socialIconsDark : ''}`}>
         <a
           href="https://www.linkedin.com/company/one-community-global/"
           target="_blank"
           rel="noopener noreferrer"
           aria-label="LinkedIn"
         >
-          <FaLinkedin className={`${styles.socialIcon} ${styles.socialIconLinkedin}`} />
+          <FaLinkedin className={styles.socialIcon} />
         </a>
 
         <a
@@ -64,7 +74,7 @@ function FollowUpEmailTemplate() {
           rel="noopener noreferrer"
           aria-label="Instagram"
         >
-          <FaInstagram className={`${styles.socialIcon} ${styles.socialIconInstagram}`} />
+          <FaInstagram className={styles.socialIcon} />
         </a>
 
         <a
@@ -73,19 +83,25 @@ function FollowUpEmailTemplate() {
           rel="noopener noreferrer"
           aria-label="Facebook"
         >
-          <FaFacebook className={`${styles.socialIcon} ${styles.socialIconFacebook}`} />
+          <FaFacebook className={styles.socialIcon} />
         </a>
       </div>
 
-      {/* Horizontal Line */}
-      <hr className={styles.emailDivider} />
+      {/* Divider */}
+      <hr className={`${styles.emailDivider} ${darkMode ? styles.emailDividerDark : ''}`} />
 
-      <p style={{ fontWeight: 'bold', textAlign: 'center' }}>
+      <p
+        style={{ fontWeight: 'bold', textAlign: 'center' }}
+        className={darkMode ? styles.textLight : ''}
+      >
         Jae M.Sabol <br /> Executive Director - One Community <br />
         &quot;Open Source Sustainability for The Highest Good of All&quot;
       </p>
 
-      <p style={{ fontSize: '12px', textAlign: 'center', color: '#888' }}>
+      <p
+        style={{ fontSize: '12px', textAlign: 'center' }}
+        className={darkMode ? styles.textLight : ''}
+      >
         You are receiving this mail because you registered to join the One Community Global platform
         as a user or a creator. This also shows that you agree to our Terms of Use and Privacy
         Policies. If you no longer want to receive mails from us, click the unsubscribe link below.

src/components/CommunityPortal/Activities/FollowUpEmailTemplate.module.css

@@ -9,6 +9,22 @@
   background-color: #ffffff;
 }
 
+/* DARK MODE CONTAINER */
+.emailTemplateContainerDark {
+  background-color: #1C2541 !important;
+  border: 1px solid #3A506B !important;
+  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.45) !important;
+  color: #ffffff !important;
+}
+
+.textLight {
+  color: #ffffff !important;
+}
+
+.linkSoftDark a {
+  color: #9fc1ff !important; 
+}
+
 .emailLogo {
   display: block;
   margin: 0 auto;
@@ -21,16 +37,24 @@
   color: #333;
 }
 
+.emailTemplateContainerDark h2 {
+  color: #ffffff !important;
+}
+
 .emailTemplateContainer p {
   font-size: 16px;
   color: #555;
   margin: 5px 0;
   line-height: 1.3;
 }
 
+/* BUTTON — LIGHT MODE */
 .feedbackLink {
-  display: inline-block;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   width: 100%;
+  height: 45px;
   margin-top: 10px;
   padding: 10px 15px;
   background-color: #007bff;
@@ -44,17 +68,33 @@
   transition: background-color 0.3s ease, box-shadow 0.3s ease;
 }
 
+/* BUTTON — DARK MODE */
+.feedbackLinkDark {
+  background-color: #3A506B !important; 
+  color: #ffffff !important;
+  border: none !important;
+  height: 45px !important;
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center !important;
+}
+
+.feedbackLinkDark:hover {
+  background-color: #5B7CA6 !important;
+}
+
+/* LIGHT MODE HOVER */
 .feedbackLink:hover {
   background-color: #3399ff;
   box-shadow: 0px 4px 10px rgba(0, 123, 255, 0.2);
-  text-decoration: none;
 }
 
 .feedbackLink:active {
   background-color: #0056b3;
   box-shadow: none;
 }
 
+/* LIST */
 .emailTemplateContainer ul {
   padding-left: 20px;
 }
@@ -63,14 +103,18 @@
   margin-bottom: 5px;
 }
 
-/* Social Media Icons */
+/* SOCIAL ICONS */
 .socialIcons {
   display: flex;
   justify-content: center;
   gap: 15px;
   margin: 10px 0;
 }
 
+.socialIconsDark .socialIcon {
+  color: #ffffff !important;
+}
+
 .socialIcon {
   font-size: 28px;
   color: #333;
@@ -89,6 +133,7 @@
   color: #07a3db;
 }
 
+/* FOOTER LINKS */
 .footerLinksContainer {
   display: flex;
   flex-direction: row;
@@ -114,6 +159,7 @@
   text-decoration: underline;
 }
 
+/* DIVIDER */
 .emailDivider {
   width: 95%;
   height: 1px;
@@ -122,3 +168,7 @@
   margin: 10px auto;
 }
 
+.emailDividerDark {
+  background-color: #3A506B !important;
+}
+