Skip to content

Commit 44704dd

Browse files
pavanputtipavanputti
committed
Fix dark mode for comment cards, backgrounds, and borders
- Add dark mode styles for .commentItem with proper background (#2e5061) and borders - Update .commentBox and .commentsList for dark mode compatibility - Replace inline styles in reply forms with CSS module classes - Add dark mode styles for reply form containers and reply cards - Ensure all light-colored backgrounds (#fafafa, #f8f9fa) are replaced with dark equivalents - Fix text colors for comment names, timestamps, and text in dark mode Related to: Fix Dark Mode Styling Issues on Engagement Page
1 parent 5e5ca26 commit 44704dd

2 files changed

Lines changed: 191 additions & 74 deletions

File tree

‎src/components/CommunityPortal/Activities/activityId/ActivityComments.jsx‎

Lines changed: 13 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -917,65 +917,27 @@ function ActivityComments() {
917917

918918
{/* Reply Form */}
919919
{replyingTo === comment.id && (
920-
<div
921-
style={{
922-
marginTop: '12px',
923-
marginLeft: '40px',
924-
padding: '12px',
925-
backgroundColor: '#f8f9fa',
926-
borderRadius: '8px',
927-
border: '1px solid #e9ecef',
928-
}}
929-
>
930-
<div style={{ display: 'flex', gap: '8px', alignItems: 'flex-start' }}>
920+
<div className={styles.replyFormContainer}>
921+
<div className={styles.replyFormInner}>
931922
<img
932923
src="/pfp-default.png"
933924
alt="profile"
934-
style={{
935-
width: '32px',
936-
height: '32px',
937-
borderRadius: '50%',
938-
objectFit: 'cover',
939-
}}
925+
className={styles.replyProfilePic}
940926
/>
941927
<textarea
942-
style={{
943-
flex: 1,
944-
padding: '8px 12px',
945-
border: '1px solid #ddd',
946-
borderRadius: '6px',
947-
fontSize: '0.9rem',
948-
resize: 'vertical',
949-
minHeight: '60px',
950-
}}
928+
className={styles.replyTextarea}
951929
placeholder={`Reply to ${comment.name}...`}
952930
value={replyInput}
953931
onChange={e => setReplyInput(e.target.value)}
954932
/>
955933
<button
956-
style={{
957-
padding: '8px 16px',
958-
backgroundColor: '#1976d2',
959-
color: 'white',
960-
border: 'none',
961-
borderRadius: '6px',
962-
fontSize: '0.9rem',
963-
cursor: 'pointer',
964-
}}
934+
className={styles.replySubmitBtn}
965935
onClick={() => handlePostReply(comment.id)}
966936
>
967937
Reply
968938
</button>
969939
<button
970-
style={{
971-
padding: '8px 12px',
972-
backgroundColor: '#6c757d',
973-
color: 'white',
974-
border: 'none',
975-
borderRadius: '6px',
976-
fontSize: '0.9rem',
977-
cursor: 'pointer',
978-
}}
940+
className={styles.replyCancelBtn}
979941
onClick={() => setReplyingTo(null)}
980942
>
981943
Cancel
@@ -986,44 +948,21 @@ function ActivityComments() {
986948

987949
{/* Display Replies */}
988950
{comment.replies && comment.replies.length > 0 && (
989-
<div style={{ marginTop: '12px', marginLeft: '40px' }}>
951+
<div className={styles.repliesContainer}>
990952
{comment.replies.map(reply => (
991-
<div
992-
key={reply.id}
993-
style={{
994-
padding: '12px',
995-
backgroundColor: '#f8f9fa',
996-
borderRadius: '8px',
997-
marginBottom: '8px',
998-
border: '1px solid #e9ecef',
999-
}}
1000-
>
1001-
<div
1002-
style={{
1003-
display: 'flex',
1004-
alignItems: 'center',
1005-
gap: '8px',
1006-
marginBottom: '8px',
1007-
}}
1008-
>
953+
<div key={reply.id} className={styles.replyCard}>
954+
<div className={styles.replyCardHeader}>
1009955
<img
1010956
src={reply.profilePic}
1011957
alt="profile"
1012-
style={{
1013-
width: '24px',
1014-
height: '24px',
1015-
borderRadius: '50%',
1016-
objectFit: 'cover',
1017-
}}
958+
className={styles.replyCardProfilePic}
1018959
/>
1019-
<span style={{ fontWeight: '500', fontSize: '0.9rem' }}>
1020-
{reply.name}
1021-
</span>
1022-
<span style={{ color: '#666', fontSize: '0.8rem' }}>
960+
<span className={styles.replyCardName}>{reply.name}</span>
961+
<span className={styles.replyCardTimestamp}>
1023962
{reply.fixedTimestamp || getRelativeTime(reply.createdAt)}
1024963
</span>
1025964
</div>
1026-
<div style={{ fontSize: '0.9rem', color: '#333' }}>{reply.text}</div>
965+
<div className={styles.replyCardText}>{reply.text}</div>
1027966
</div>
1028967
))}
1029968
</div>

‎src/components/CommunityPortal/Activities/activityId/ActivityComments.module.css‎

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -229,3 +229,181 @@
229229
.loadMoreBtn:hover {
230230
background: #ddd;
231231
}
232+
233+
/* ============================================
234+
DARK MODE STYLES - Commit 1: Comment Cards, Backgrounds, and Borders
235+
============================================ */
236+
237+
/* Comment Item - Dark Mode */
238+
:global(body.dark-mode) .commentItem,
239+
:global(body.bm-dashboard-dark) .commentItem {
240+
background: #2e5061 !important;
241+
border: 1px solid #3a506b;
242+
color: #ffffff !important;
243+
}
244+
245+
:global(body.dark-mode) .commentItem .commentName,
246+
:global(body.bm-dashboard-dark) .commentItem .commentName {
247+
color: #ffffff !important;
248+
}
249+
250+
:global(body.dark-mode) .commentItem .commentText,
251+
:global(body.bm-dashboard-dark) .commentItem .commentText {
252+
color: #ffffff !important;
253+
}
254+
255+
:global(body.dark-mode) .commentItem .commentTimestamp,
256+
:global(body.bm-dashboard-dark) .commentItem .commentTimestamp {
257+
color: #b8c5d1 !important;
258+
}
259+
260+
/* Comment Box - Dark Mode */
261+
:global(body.dark-mode) .commentBox,
262+
:global(body.bm-dashboard-dark) .commentBox {
263+
background: transparent;
264+
}
265+
266+
/* Comments List - Dark Mode */
267+
:global(body.dark-mode) .commentsList,
268+
:global(body.bm-dashboard-dark) .commentsList {
269+
background: transparent;
270+
}
271+
272+
/* Reply Form Container */
273+
.replyFormContainer {
274+
margin-top: 12px;
275+
margin-left: 40px;
276+
padding: 12px;
277+
background-color: #f8f9fa;
278+
border-radius: 8px;
279+
border: 1px solid #e9ecef;
280+
}
281+
282+
.replyFormInner {
283+
display: flex;
284+
gap: 8px;
285+
align-items: flex-start;
286+
}
287+
288+
.replyProfilePic {
289+
width: 32px;
290+
height: 32px;
291+
border-radius: 50%;
292+
object-fit: cover;
293+
}
294+
295+
.replyTextarea {
296+
flex: 1;
297+
padding: 8px 12px;
298+
border: 1px solid #ddd;
299+
border-radius: 6px;
300+
font-size: 0.9rem;
301+
resize: vertical;
302+
min-height: 60px;
303+
}
304+
305+
.replySubmitBtn {
306+
padding: 8px 16px;
307+
background-color: #1976d2;
308+
color: white;
309+
border: none;
310+
border-radius: 6px;
311+
font-size: 0.9rem;
312+
cursor: pointer;
313+
}
314+
315+
.replyCancelBtn {
316+
padding: 8px 12px;
317+
background-color: #6c757d;
318+
color: white;
319+
border: none;
320+
border-radius: 6px;
321+
font-size: 0.9rem;
322+
cursor: pointer;
323+
}
324+
325+
/* Reply Card */
326+
.replyCard {
327+
padding: 12px;
328+
background-color: #f8f9fa;
329+
border-radius: 8px;
330+
margin-bottom: 8px;
331+
border: 1px solid #e9ecef;
332+
}
333+
334+
.replyCardHeader {
335+
display: flex;
336+
align-items: center;
337+
gap: 8px;
338+
margin-bottom: 8px;
339+
}
340+
341+
.replyCardProfilePic {
342+
width: 24px;
343+
height: 24px;
344+
border-radius: 50%;
345+
object-fit: cover;
346+
}
347+
348+
.replyCardName {
349+
font-weight: 500;
350+
font-size: 0.9rem;
351+
}
352+
353+
.replyCardTimestamp {
354+
color: #666;
355+
font-size: 0.8rem;
356+
}
357+
358+
.replyCardText {
359+
font-size: 0.9rem;
360+
color: #333;
361+
}
362+
363+
.repliesContainer {
364+
margin-top: 12px;
365+
margin-left: 40px;
366+
}
367+
368+
/* Reply Form Background - Dark Mode */
369+
:global(body.dark-mode) .replyFormContainer,
370+
:global(body.bm-dashboard-dark) .replyFormContainer {
371+
background-color: #2e5061 !important;
372+
border: 1px solid #3a506b !important;
373+
color: #ffffff !important;
374+
}
375+
376+
:global(body.dark-mode) .replyTextarea,
377+
:global(body.bm-dashboard-dark) .replyTextarea {
378+
background-color: #2e5061 !important;
379+
border: 1px solid #3a506b !important;
380+
color: #ffffff !important;
381+
}
382+
383+
:global(body.dark-mode) .replyTextarea::placeholder,
384+
:global(body.bm-dashboard-dark) .replyTextarea::placeholder {
385+
color: #b8c5d1 !important;
386+
}
387+
388+
/* Reply Card Background - Dark Mode */
389+
:global(body.dark-mode) .replyCard,
390+
:global(body.bm-dashboard-dark) .replyCard {
391+
background-color: #2e5061 !important;
392+
border: 1px solid #3a506b !important;
393+
color: #ffffff !important;
394+
}
395+
396+
:global(body.dark-mode) .replyCardName,
397+
:global(body.bm-dashboard-dark) .replyCardName {
398+
color: #ffffff !important;
399+
}
400+
401+
:global(body.dark-mode) .replyCardTimestamp,
402+
:global(body.bm-dashboard-dark) .replyCardTimestamp {
403+
color: #b8c5d1 !important;
404+
}
405+
406+
:global(body.dark-mode) .replyCardText,
407+
:global(body.bm-dashboard-dark) .replyCardText {
408+
color: #ffffff !important;
409+
}

0 commit comments

Comments
 (0)