Skip to content

Commit cd9daaa

Browse files
yany960yany960
authored
Merge pull request #5100 from OneCommunityGlobal/yany960-refactor/css-modules-followup-email-template
Yu Yan - refactor/css modules followup email template
2 parents 7fdfece + 2035b0c commit cd9daaa

3 files changed

Lines changed: 1185 additions & 1193 deletions

File tree

‎src/components/CommunityPortal/Activities/FollowUpEmailTemplate.jsx‎

Lines changed: 32 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,51 @@
1-
import { useParams, Link } from 'react-router-dom';
21
import { useSelector } from 'react-redux';
3-
import styles from './FollowUpEmailTemplate.module.css';
4-
import { FaLinkedin, FaInstagram, FaFacebook } from 'react-icons/fa';
2+
import { FaFacebook, FaInstagram, FaLinkedin } from 'react-icons/fa';
3+
import { Link, useParams } from 'react-router-dom';
54
import companyLogo from '../../../assets/images/logo2.png';
5+
import styles from './FollowUpEmailTemplate.module.css';
66

77
function FollowUpEmailTemplate() {
88
const { eventId = 1234, email = '' } = useParams();
9-
10-
// Dark mode state from Redux
119
const darkMode = useSelector(state => state.theme.darkMode);
1210

11+
const textClassName = `${styles.p} ${darkMode ? styles.textLight : ''}`;
12+
const dividerClassName = `${styles.emailDivider} ${darkMode ? styles.emailDividerDark : ''}`;
13+
const socialIconsClassName = `${styles.socialIcons} ${darkMode ? styles.socialIconsDark : ''}`;
14+
const listClassName = `${styles.ul} ${darkMode ? styles.textLight : ''} ${
15+
darkMode ? styles.linkSoftDark : ''
16+
}`;
17+
const feedbackLinkClassName = `${styles.feedbackLink} ${darkMode ? styles.feedbackLinkDark : ''}`;
18+
1319
return (
1420
<div
1521
className={`${styles.emailTemplateContainer} ${
1622
darkMode ? styles.emailTemplateContainerDark : ''
1723
}`}
1824
>
19-
{/* Company Logo */}
2025
<img src={companyLogo} alt="One Community Logo" className={styles.emailLogo} />
2126

22-
<h2 className={darkMode ? styles.textLight : ''}>Hi {email || '[Name]'},</h2>
27+
<h2 className={`${styles.h2} ${darkMode ? styles.textLight : ''}`}>
28+
Hi {email || '[Name]'},
29+
</h2>
2330

24-
<p className={darkMode ? styles.textLight : ''}>
31+
<p className={textClassName}>
2532
We hope you enjoyed our recent event. Your feedback is valuable to us as we strive to
2633
improve our future events.
2734
</p>
2835

29-
<p className={darkMode ? styles.textLight : ''}>
36+
<p className={textClassName}>
3037
Please take a moment to share your thoughts:
3138
<br />
3239
<Link
3340
to={`/communityportal/activities/FeedbackForm/${eventId}/${email || 'no-email'}`}
34-
className={`${styles.feedbackLink} ${darkMode ? styles.feedbackLinkDark : ''}`}
41+
className={feedbackLinkClassName}
3542
>
3643
Survey Form
3744
</Link>
3845
</p>
3946

40-
<p className={darkMode ? styles.textLight : ''}>If you’d like to:</p>
41-
<ul className={`${darkMode ? styles.textLight : ''} ${darkMode ? styles.linkSoftDark : ''}`}>
47+
<p className={textClassName}>If you&apos;d like to:</p>
48+
<ul className={listClassName}>
4249
<li>
4350
Reschedule: <a href="https://www.onecommunityevents.org/reschedule">Reschedule Link</a>
4451
</li>
@@ -48,24 +55,22 @@ function FollowUpEmailTemplate() {
4855
</li>
4956
</ul>
5057

51-
<p className={darkMode ? styles.textLight : ''}>Best regards,</p>
52-
<p className={darkMode ? styles.textLight : ''}>One Community Team</p>
53-
<p className={darkMode ? styles.textLight : ''}>Primary Email: jae@onecommunityglobal.org</p>
54-
<p className={darkMode ? styles.textLight : ''}>Google Email: onecommunityglobal@gmail.com</p>
55-
<p className={darkMode ? styles.textLight : ''}>Timezone: Los Angeles, CA - Pacific Time</p>
58+
<p className={textClassName}>Best regards,</p>
59+
<p className={textClassName}>One Community Team</p>
60+
<p className={textClassName}>Primary Email: jae@onecommunityglobal.org</p>
61+
<p className={textClassName}>Google Email: onecommunityglobal@gmail.com</p>
62+
<p className={textClassName}>Timezone: Los Angeles, CA - Pacific Time</p>
5663

57-
{/* Divider */}
58-
<hr className={`${styles.emailDivider} ${darkMode ? styles.emailDividerDark : ''}`} />
64+
<hr className={dividerClassName} />
5965

60-
{/* Social Icons */}
61-
<div className={`${styles.socialIcons} ${darkMode ? styles.socialIconsDark : ''}`}>
66+
<div className={socialIconsClassName}>
6267
<a
6368
href="https://www.linkedin.com/company/one-community-global/"
6469
target="_blank"
6570
rel="noopener noreferrer"
6671
aria-label="LinkedIn"
6772
>
68-
<FaLinkedin className={styles.socialIcon} />
73+
<FaLinkedin className={`${styles.socialIcon} ${styles.linkedin}`} />
6974
</a>
7075

7176
<a
@@ -74,7 +79,7 @@ function FollowUpEmailTemplate() {
7479
rel="noopener noreferrer"
7580
aria-label="Instagram"
7681
>
77-
<FaInstagram className={styles.socialIcon} />
82+
<FaInstagram className={`${styles.socialIcon} ${styles.instagram}`} />
7883
</a>
7984

8085
<a
@@ -83,24 +88,23 @@ function FollowUpEmailTemplate() {
8388
rel="noopener noreferrer"
8489
aria-label="Facebook"
8590
>
86-
<FaFacebook className={styles.socialIcon} />
91+
<FaFacebook className={`${styles.socialIcon} ${styles.facebook}`} />
8792
</a>
8893
</div>
8994

90-
{/* Divider */}
91-
<hr className={`${styles.emailDivider} ${darkMode ? styles.emailDividerDark : ''}`} />
95+
<hr className={dividerClassName} />
9296

9397
<p
9498
style={{ fontWeight: 'bold', textAlign: 'center' }}
95-
className={darkMode ? styles.textLight : ''}
99+
className={`${styles.p} ${darkMode ? styles.textLight : ''}`}
96100
>
97101
Jae M.Sabol <br /> Executive Director - One Community <br />
98102
&quot;Open Source Sustainability for The Highest Good of All&quot;
99103
</p>
100104

101105
<p
102106
style={{ fontSize: '12px', textAlign: 'center' }}
103-
className={darkMode ? styles.textLight : ''}
107+
className={`${styles.p} ${darkMode ? styles.textLight : ''}`}
104108
>
105109
You are receiving this mail because you registered to join the One Community Global platform
106110
as a user or a creator. This also shows that you agree to our Terms of Use and Privacy

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

Lines changed: 31 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,10 @@
99
background-color: #ffffff;
1010
}
1111

12-
/* DARK MODE CONTAINER */
1312
.emailTemplateContainerDark {
14-
background-color: #1C2541 !important;
15-
border: 1px solid #3A506B !important;
16-
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.45) !important;
13+
background-color: #1c2541 !important;
14+
border: 1px solid #3a506b !important;
15+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) !important;
1716
color: #ffffff !important;
1817
}
1918

@@ -22,7 +21,7 @@
2221
}
2322

2423
.linkSoftDark a {
25-
color: #9fc1ff !important;
24+
color: #9fc1ff !important;
2625
}
2726

2827
.emailLogo {
@@ -32,23 +31,26 @@
3231
height: auto;
3332
}
3433

35-
.emailTemplateContainer h2 {
34+
.h2 {
3635
text-align: left;
3736
color: #333;
3837
}
3938

40-
.emailTemplateContainerDark h2 {
39+
.emailTemplateContainerDark .h2 {
4140
color: #ffffff !important;
4241
}
4342

44-
.emailTemplateContainer p {
43+
.p {
4544
font-size: 16px;
4645
color: #555;
4746
margin: 5px 0;
4847
line-height: 1.3;
4948
}
5049

51-
/* BUTTON — LIGHT MODE */
50+
.emailTemplateContainerDark .p {
51+
color: #ffffff !important;
52+
}
53+
5254
.feedbackLink {
5355
display: flex;
5456
justify-content: center;
@@ -58,7 +60,7 @@
5860
margin-top: 10px;
5961
padding: 10px 15px;
6062
background-color: #007bff;
61-
color: white;
63+
color: #fff;
6264
font-size: 16px;
6365
text-align: center;
6466
text-decoration: none;
@@ -68,42 +70,38 @@
6870
transition: background-color 0.3s ease, box-shadow 0.3s ease;
6971
}
7072

71-
/* BUTTON — DARK MODE */
7273
.feedbackLinkDark {
73-
background-color: #3A506B !important;
74-
color: #ffffff !important;
75-
border: none !important;
76-
height: 45px !important;
7774
display: flex !important;
7875
justify-content: center !important;
7976
align-items: center !important;
77+
height: 45px !important;
78+
background-color: #3a506b !important;
79+
color: #ffffff !important;
80+
border: none !important;
8081
}
8182

82-
.feedbackLinkDark:hover {
83-
background-color: #5B7CA6 !important;
84-
}
85-
86-
/* LIGHT MODE HOVER */
8783
.feedbackLink:hover {
8884
background-color: #3399ff;
89-
box-shadow: 0px 4px 10px rgba(0, 123, 255, 0.2);
85+
box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);
86+
}
87+
88+
.feedbackLinkDark:hover {
89+
background-color: #5b7ca6 !important;
9090
}
9191

9292
.feedbackLink:active {
9393
background-color: #0056b3;
9494
box-shadow: none;
9595
}
9696

97-
/* LIST */
98-
.emailTemplateContainer ul {
97+
.ul {
9998
padding-left: 20px;
10099
}
101100

102-
.emailTemplateContainer ul li {
101+
.ul li {
103102
margin-bottom: 5px;
104103
}
105104

106-
/* SOCIAL ICONS */
107105
.socialIcons {
108106
display: flex;
109107
justify-content: center;
@@ -121,19 +119,18 @@
121119
transition: color 0.3s ease;
122120
}
123121

124-
.socialIconLinkedin:hover {
122+
.linkedin:hover {
125123
color: #0077b5;
126124
}
127125

128-
.socialIconInstagram:hover {
126+
.instagram:hover {
129127
color: #e4405f;
130128
}
131129

132-
.socialIconFacebook:hover {
130+
.facebook:hover {
133131
color: #07a3db;
134132
}
135133

136-
/* FOOTER LINKS */
137134
.footerLinksContainer {
138135
display: flex;
139136
flex-direction: row;
@@ -143,31 +140,26 @@
143140
}
144141

145142
.footerLinks {
143+
margin: 5px 0;
144+
padding: 0 8px;
146145
font-size: 12px;
147146
font-weight: bold;
148147
color: #555;
149-
margin: 5px 0;
150-
}
151-
152-
.footerLinks a {
153148
text-decoration: none;
154-
color: #007bff;
155-
padding: 0 8px;
156149
}
157150

158-
.footerLinks a:hover {
151+
.footerLinks:hover {
159152
text-decoration: underline;
160153
}
161154

162-
/* DIVIDER */
163155
.emailDivider {
164156
width: 95%;
165157
height: 1px;
158+
margin: 10px auto;
166159
background-color: #ddd;
167160
border: none;
168-
margin: 10px auto;
169161
}
170162

171163
.emailDividerDark {
172-
background-color: #3A506B !important;
164+
background-color: #3a506b !important;
173165
}

0 commit comments

Comments
 (0)