Skip to content

Commit 0eeb45d

Browse files
one-communityone-community
authored
Merge pull request #5097 from OneCommunityGlobal/Keerthana-dark-mode-user-profile-fix
Keerthana - Fix Basic Information tab, Volunteering Times Tab Dark Mode Background and Save Button Visibility
2 parents 543c9fa + 20a01d6 commit 0eeb45d

6 files changed

Lines changed: 179 additions & 97 deletions

File tree

‎src/components/UserProfile/BasicInformationTab/BasicInformationTab.jsx‎

Lines changed: 45 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import TimeZoneDropDown from '../TimeZoneDropDown';
1313
import { connect , useDispatch } from 'react-redux';
1414
import hasPermission from '~/utils/permissions';
1515
import SetUpFinalDayButton from '~/components/UserManagement/SetUpFinalDayButton';
16-
import './BasicInformationTab.css';
16+
import styles from './BasicInformationTab.module.css';
1717
import { boxStyle, boxStyleDark } from '~/styles';
1818
import EditableInfoModal from '~/components/UserProfile/EditableModal/EditableInfoModal';
1919
import { formatDateLocal, formatDateCompany } from '~/utils/formatDate';
@@ -38,7 +38,7 @@ export const Name = props => {
3838
if (canEdit) {
3939
return (
4040
<>
41-
<Col md={desktopDisplay ? '3' : ''} style={{paddingRight: 0}}>
41+
<Col md={desktopDisplay ? '3' : ''} style={{paddingRight: 0}} className={darkMode ? 'bg-yinmn-blue' : ''}>
4242
<FormGroup>
4343
<div style={{position: 'relative'}}>
4444
<Input
@@ -84,7 +84,7 @@ export const Name = props => {
8484
<FormFeedback>First Name Can&apos;t be empty</FormFeedback>
8585
</FormGroup>
8686
</Col>
87-
<Col md={desktopDisplay ? '3' : ''}>
87+
<Col md={desktopDisplay ? '3' : ''} className={darkMode ? 'bg-yinmn-blue' : ''}>
8888
<FormGroup>
8989
<div style={{position: 'relative'}}>
9090
<Input
@@ -136,7 +136,7 @@ export const Name = props => {
136136

137137
return (
138138
<>
139-
<Col>
139+
<Col className={darkMode ? 'bg-yinmn-blue' : ''}>
140140
<p className={`text-right ${darkMode ? 'text-light' : ''}`}>{`${firstName} ${lastName}`}</p>
141141
</Col>
142142
</>
@@ -150,7 +150,7 @@ export const Name = props => {
150150
if (canEdit) {
151151
return (
152152
<>
153-
<Col md={desktopDisplay ? '6' : ''}>
153+
<Col md={desktopDisplay ? '6' : ''} className={darkMode ? 'bg-yinmn-blue' : ''}>
154154
<FormGroup>
155155
<div style={{position: 'relative', width: '100%'}}>
156156
<Input
@@ -191,7 +191,7 @@ export const Name = props => {
191191
}
192192
return (
193193
<>
194-
<Col>
194+
<Col className={darkMode ? 'bg-yinmn-blue' : ''}>
195195
<p className={`text-right ${darkMode ? 'text-light' : ''}`}>{`${jobTitle}`}</p>
196196
</Col>
197197
</>
@@ -217,7 +217,7 @@ export const Email = props => {
217217
if (canEdit) {
218218
return (
219219
<>
220-
<Col md={desktopDisplay ? '6' : ''}>
220+
<Col md={desktopDisplay ? '6' : ''} className={darkMode ? 'bg-yinmn-blue' : ''}>
221221
<FormGroup>
222222
<div style={{position: 'relative', width: '100%' }}>
223223
<Input
@@ -277,6 +277,7 @@ export const Email = props => {
277277
id="email"
278278
data-testid="email"
279279
value={email}
280+
className={`${darkMode ? 'bg-darkmode-liblack border-0 text-light' : ''}`}
280281
onChange={e => {
281282
setUserProfile({ ...userProfile, email: e.target.value });
282283
setFormValid({ ...formValid, email: emailPattern.test(e.target.value) });
@@ -294,7 +295,7 @@ export const Email = props => {
294295
return (
295296
<>
296297
{privacySettings?.email && (
297-
<Col>
298+
<Col className={darkMode ? 'bg-yinmn-blue' : ''}>
298299
<p className={`text-right ${darkMode ? 'text-light' : ''}`}>{email}</p>
299300
</Col>
300301
)}
@@ -341,7 +342,7 @@ export const Phone = props => {
341342
if (canEdit) {
342343
return (
343344
<>
344-
<Col md={desktopDisplay ? '6' : ''}>
345+
<Col md={desktopDisplay ? '6' : ''} className={darkMode ? 'bg-yinmn-blue' : ''}>
345346
<FormGroup>
346347
{/* one toggle, same as Email */}
347348
<ToggleSwitch
@@ -402,7 +403,7 @@ export const Phone = props => {
402403
return (
403404
<>
404405
{privacySettings?.phoneNumber && (
405-
<Col>
406+
<Col className={darkMode ? 'bg-yinmn-blue' : ''}>
406407
<p className={`text-right ${darkMode ? 'text-light' : ''}`}>
407408
{formatPhoneNumber(phoneNumber)}
408409
</p>
@@ -453,7 +454,7 @@ export const TimeZoneDifference = props => {
453454
if (!isUserSelf) {
454455
return (
455456
<>
456-
<Col md="6">
457+
<Col md="6" className={darkMode ? 'bg-yinmn-blue' : ''}>
457458
<p className={`text-right ${darkMode ? 'text-light' : ''}`}>{signedOffset} hours</p>
458459
</Col>
459460
</>
@@ -462,7 +463,7 @@ export const TimeZoneDifference = props => {
462463

463464
return (
464465
<>
465-
<Col md={desktopDisplay ? '6' : ''}>
466+
<Col md={desktopDisplay ? '6' : ''} className={darkMode ? 'bg-yinmn-blue' : ''}>
466467
<p
467468
className={`${darkMode ? 'text-light' : ''} ${
468469
desktopDisplay ? 'text-right' : 'text-left'
@@ -561,8 +562,8 @@ const BasicInformationTab = props => {
561562

562563
const nameComponent = (
563564
<>
564-
<Col>
565-
<span className="label-icon-container">
565+
<Col className={darkMode ? styles['dark-label-col'] : ''}>
566+
<span className={styles['label-icon-container']}>
566567
<Label className={darkMode ? 'text-light label-with-icon' : 'label-with-icon'}>
567568
Name
568569
</Label>
@@ -594,8 +595,8 @@ const BasicInformationTab = props => {
594595

595596
const titleComponent = (
596597
<>
597-
<Col>
598-
<span className="label-icon-container">
598+
<Col className={darkMode ? styles['dark-label-col'] : ''}>
599+
<span className={styles['label-icon-container']}>
599600
<Label className={darkMode ? 'text-light label-with-icon' : 'label-with-icon'}>
600601
Title
601602
</Label>
@@ -626,8 +627,8 @@ const BasicInformationTab = props => {
626627

627628
const emailComponent = (
628629
<>
629-
<Col>
630-
<span className="label-icon-container">
630+
<Col className={darkMode ? styles['dark-label-col'] : ''}>
631+
<span className={styles['label-icon-container']}>
631632
<Label className={darkMode ? 'text-light label-with-icon' : ' label-with-icon'}>
632633
Email
633634
</Label>
@@ -659,8 +660,8 @@ const BasicInformationTab = props => {
659660

660661
const phoneComponent = (
661662
<>
662-
<Col>
663-
<span className="label-icon-container">
663+
<Col className={darkMode ? styles['dark-label-col'] : ''}>
664+
<span className={styles['label-icon-container']}>
664665
<Label className={darkMode ? 'text-light label-with-icon' : 'label-with-icon'}>
665666
Phone
666667
</Label>
@@ -691,10 +692,10 @@ const BasicInformationTab = props => {
691692

692693
const videoCallPreferenceComponent = (
693694
<>
694-
<Col>
695+
<Col className={darkMode ? styles['dark-label-col'] : ''}>
695696
<Label className={darkMode ? 'text-light' : ''}>Video Call Preference</Label>
696697
</Col>
697-
<Col md={desktopDisplay ? '6' : ''}>
698+
<Col md={desktopDisplay ? '6' : ''} className={darkMode ? 'bg-yinmn-blue' : ''}>
698699
{canEdit ? (
699700
<FormGroup disabled={!canEdit}>
700701
<Input
@@ -719,10 +720,10 @@ const BasicInformationTab = props => {
719720

720721
const roleComponent = (
721722
<>
722-
<Col>
723+
<Col className={darkMode ? styles['dark-label-col'] : ''}>
723724
<Label className={darkMode ? 'text-light' : ''}>Role</Label>
724725
</Col>
725-
<Col md={desktopDisplay ? '6' : ''}>
726+
<Col md={desktopDisplay ? '6' : ''} className={darkMode ? 'bg-yinmn-blue' : ''}>
726727
{canEditRole ? (
727728
<FormGroup>
728729
<select
@@ -788,11 +789,11 @@ const BasicInformationTab = props => {
788789
<>
789790
{canEdit && (
790791
<>
791-
<Col md={{ size: 5, offset: 0 }}>
792+
<Col md={{ size: 5, offset: 0 }} className={darkMode ? styles['dark-label-col'] : ''}>
792793
<Label className={darkMode ? 'text-light' : ''}>Location</Label>
793794
</Col>
794795
{desktopDisplay ? (
795-
<Col md="6" style={{paddingRight: 0}}>
796+
<Col md="6" style={{paddingRight: 0}} className={darkMode ? 'bg-yinmn-blue' : ''}>
796797
<Row className="ml-0">
797798
<Col className="p-0">
798799
<Input
@@ -816,7 +817,7 @@ const BasicInformationTab = props => {
816817
</Row>
817818
</Col>
818819
) : (
819-
<Col className="cols">
820+
<Col className={styles['cols']}>
820821
<Input data-testid="location" onChange={handleLocation} value={userProfile.location.userProvided || ''} />
821822
<div>
822823
<Button
@@ -838,10 +839,10 @@ const BasicInformationTab = props => {
838839

839840
const timeZoneComponent = (
840841
<>
841-
<Col>
842+
<Col className={darkMode ? styles['dark-label-col'] : ''}>
842843
<Label className={darkMode ? 'text-light' : ''}>Time Zone</Label>
843844
</Col>
844-
<Col md={desktopDisplay ? '6' : ''}>
845+
<Col md={desktopDisplay ? '6' : ''} className={darkMode ? 'bg-yinmn-blue' : ''}>
845846
{!canEdit && <p className={darkMode ? 'text-light' : ''}>{userProfile.timeZone}</p>}
846847
{canEdit && (
847848
<TimeZoneDropDown
@@ -859,7 +860,7 @@ const BasicInformationTab = props => {
859860

860861
const timeZoneDifferenceComponent = (
861862
<>
862-
<Col md={desktopDisplay ? '5' : ''}>
863+
<Col md={desktopDisplay ? '5' : ''} className={darkMode ? styles['dark-label-col'] : ''}>
863864
{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
864865
<label className={darkMode ? 'text-light' : ''}>
865866
Difference in this Time Zone from Your Local
@@ -881,12 +882,12 @@ const BasicInformationTab = props => {
881882

882883
const statusComponent = (
883884
<>
884-
<Col md={desktopDisplay ? '5' : ''}>
885+
<Col md={desktopDisplay ? '5' : ''} className={darkMode ? styles['dark-label-col'] : ''}>
885886
<Label className={darkMode ? 'text-light' : ''}>
886887
Status
887888
</Label>
888889
</Col>
889-
<Col md={desktopDisplay ? '7' : ''}>
890+
<Col md={desktopDisplay ? '7' : ''} className={darkMode ? 'bg-yinmn-blue' : ''}>
890891
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
891892
<Label
892893
style={{ margin: '0' }}
@@ -914,12 +915,12 @@ const BasicInformationTab = props => {
914915

915916
const endDateComponent = (
916917
<>
917-
<Col md={desktopDisplay ? '5' : ''}>
918+
<Col md={desktopDisplay ? '5' : ''} className={darkMode ? styles['dark-label-col'] : ''}>
918919
<Label className={darkMode ? 'text-light' : ''}>
919920
End Date
920921
</Label>
921922
</Col>
922-
<Col md={desktopDisplay ? '7' : ''}>
923+
<Col md={desktopDisplay ? '7' : ''} className={darkMode ? 'bg-yinmn-blue' : ''}>
923924
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
924925
<Label className={darkMode ? 'text-light' : ''} style={{ margin: '0' }}>
925926
{userProfile.endDate
@@ -993,7 +994,7 @@ const BasicInformationTab = props => {
993994
<div className={darkMode ? 'bg-yinmn-blue text-light' : ''}>
994995
<div
995996
data-testid="basic-info-tab"
996-
className={desktopDisplay ? 'basic-info-tab-desktop' : 'basic-info-tab-tablet'}
997+
className={`${desktopDisplay ? styles['basic-info-tab-desktop'] : styles['basic-info-tab-tablet']} ${darkMode ? `bg-yinmn-blue ${styles['dark-mode']}` : ''}`}
997998
>
998999
{desktopDisplay ? (
9991000
<>
@@ -1032,15 +1033,15 @@ const BasicInformationTab = props => {
10321033
</>
10331034
) : (
10341035
<>
1035-
<Col className="cols">{nameComponent}</Col>
1036-
<Col className="cols">{titleComponent}</Col>
1037-
<Col className="cols">{emailComponent}</Col>
1038-
<Col className="cols">{phoneComponent}</Col>
1039-
<Col className="cols">{videoCallPreferenceComponent}</Col>
1040-
<Col className="cols">{roleComponent}</Col>
1041-
<Col className="cols">{locationComponent}</Col>
1042-
<Col className="cols">{timeZoneComponent}</Col>
1043-
<Col className="cols">{timeZoneDifferenceComponent}</Col>
1036+
<Col className={styles['cols']}>{nameComponent}</Col>
1037+
<Col className={styles['cols']}>{titleComponent}</Col>
1038+
<Col className={styles['cols']}>{emailComponent}</Col>
1039+
<Col className={styles['cols']}>{phoneComponent}</Col>
1040+
<Col className={styles['cols']}>{videoCallPreferenceComponent}</Col>
1041+
<Col className={styles['cols']}>{roleComponent}</Col>
1042+
<Col className={styles['cols']}>{locationComponent}</Col>
1043+
<Col className={styles['cols']}>{timeZoneComponent}</Col>
1044+
<Col className={styles['cols']}>{timeZoneDifferenceComponent}</Col>
10441045
<hr />
10451046
<Row xs="2" style={{ marginLeft: '1rem' }}>
10461047
{statusComponentMobile}

src/components/UserProfile/BasicInformationTab/BasicInformationTab.css renamed to src/components/UserProfile/BasicInformationTab/BasicInformationTab.module.css

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,4 +48,30 @@
4848
}
4949

5050

51+
}
52+
.basic-info-tab-desktop {
53+
width: 100%;
54+
}
55+
56+
57+
.basic-info-tab-desktop:not(.dark-mode) :global(.form-control){
58+
background-color: transparent;
59+
}
60+
61+
.dark-mode {
62+
/* marker class */
63+
}
64+
65+
.dark-mode :global(.row) {
66+
background-color: #1c2541 !important;
67+
}
68+
69+
.dark-label-col {
70+
background-color: #1c2541 !important;
71+
}
72+
.dark-label-col:hover {
73+
background-color: #1c2541 !important;
74+
}
75+
:global(.bg-yinmn-blue) .dark-label-col {
76+
background-color: #1c2541 !important;
5177
}

‎src/components/UserProfile/UserProfileEdit/SaveButton.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -102,14 +102,14 @@ const SaveButton = props => {
102102
/>
103103
<Button
104104
{...(darkMode ? { outline: false } : {outline: true})}
105-
color={darkMode ? 'light' : 'primary'}
105+
color='primary'
106106
// to={`/userprofile/${this.state.userProfile._id}`}
107107
//the line below caused the mouse over issue, so I commented it out
108108
//className='btn btn-outline-primary mr-1 bg-white'
109109
onClick={handleSave}
110110
disabled={disabled}
111111
className='mr-1'
112-
style={darkMode ? boxStyleDark : boxStyle}
112+
style={darkMode ? { ...boxStyleDark, backgroundColor: '#f8f9fa', color: '#000', border: '1px solid #adb5bd' } : boxStyle}
113113
>
114114
Save Changes
115115
</Button>

‎src/components/UserProfile/VolunteeringTimeTab/VolunteeringTimeTab.css‎

Lines changed: 0 additions & 25 deletions
This file was deleted.

0 commit comments

Comments
 (0)