Skip to content

Commit

Permalink
Merge pull request #2225 from OneCommunityGlobal/hiral_fix_profile_pa…
Browse files Browse the repository at this point in the history 
…ge_formatting

Hiral fix profile page formatting
  • Loading branch information
@one-community
one-community authored Jun 29, 2024
2 parents 4889b4e + e53166d commit 2533dd0
Show file tree
Hide file tree
Showing 3 changed files with 47 additions and 43 deletions.
18 changes: 9 additions & 9 deletions src/components/UserProfile/BasicInformationTab/BasicInformationTab.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ const Email = props => {

<ToggleSwitch
switchType="email-subcription"
state={emailSubscriptions? emailSubscriptions : false}
state={emailSubscriptions ? emailSubscriptions : false}
handleUserProfile={props.handleUserProfile}
darkMode={darkMode}
/>
Expand Down Expand Up @@ -196,7 +196,7 @@ const formatPhoneNumber = str => {
return str;
};
const Phone = props => {
const { userProfile, setUserProfile, handleUserProfile, canEdit, desktopDisplay, darkMode} = props;
const { userProfile, setUserProfile, handleUserProfile, canEdit, desktopDisplay, darkMode } = props;
const { phoneNumber, privacySettings } = userProfile;
if (canEdit) {
return (
Expand Down Expand Up @@ -335,10 +335,10 @@ const BasicInformationTab = props => {

axios.get(ENDPOINTS.TIMEZONE_LOCATION(userProfile.location.userProvided)).then(res => {
if (res.status === 200) {
const {timezone, currentLocation } = res.data;
const { timezone, currentLocation } = res.data;
setTimeZoneFilter(timezone);
setUserProfile({ ...userProfile, timeZone: timezone, location: currentLocation });
}
}
}).catch(err => {
toast.error(`An error occurred : ${err.response.data}`);
if (errorOccurred) setErrorOccurred(false);
Expand Down Expand Up @@ -676,13 +676,13 @@ const BasicInformationTab = props => {
<Col md="8" className="mr-5">
<Label className={darkMode ? 'text-light' : ''}>Status</Label>
</Col>
<Col md="6">
<Col>
<Label className={darkMode ? 'text-light' : ''}>
{userProfile.isActive
? 'Active'
: userProfile.reactivationDate
? 'Paused until ' + formatDate(userProfile.reactivationDate)
: 'Inactive'}
? 'Paused until ' + formatDate(userProfile.reactivationDate)
: 'Inactive'}
</Label>
&nbsp;
{canEdit && (
Expand All @@ -705,8 +705,8 @@ const BasicInformationTab = props => {
{userProfile.isActive
? 'Active'
: userProfile.reactivationDate
? 'Paused until ' + formatDate(userProfile.reactivationDate)
: 'Inactive'}
? 'Paused until ' + formatDate(userProfile.reactivationDate)
: 'Inactive'}
</Label>
&nbsp;
{canEdit && (
Expand Down
10 changes: 6 additions & 4 deletions src/components/UserProfile/TeamsAndProjects/TeamsAndProjects.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
}

.project-auto-complete:hover {
background: #1d62f0;
background: #DDEBFF;
}

.team-auto-complete {
Expand All @@ -54,16 +54,18 @@
}

.team-auto-complete:hover {
background: #1d62f0;
background: #DDEBFF;
}

#myTabContent {
margin-top: 20px;
padding-top: 4px;
border-color: #dee2e6
border-color: #dee2e6
}

@media (max-width: 1024px) {
#myTabContent {
padding-top: 0px;
border-color: #fff #dee2e6 #dee2e6
border-color: #fff #dee2e6 #dee2e6
}
}
62 changes: 32 additions & 30 deletions src/components/UserProfile/TeamsAndProjects/UserTeamsTable.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,19 @@ import { boxStyle, boxStyleDark } from 'styles';
import { connect } from 'react-redux';

const UserTeamsTable = props => {
const {darkMode} = props;
const { darkMode } = props;

const [tooltipOpen, setTooltip] = useState(false);
const [teamCode, setTeamCode] = useState(props.userProfile? props.userProfile.teamCode: props.teamCode);
const [teamCode, setTeamCode] = useState(props.userProfile ? props.userProfile.teamCode : props.teamCode);

const canAssignTeamToUsers = props.hasPermission('assignTeamToUsers');
const fullCodeRegex = /^([a-zA-Z0-9]-[a-zA-Z0-9]{3,5}|[a-zA-Z0-9]{5,7})$/;
const toggleTooltip = () => setTooltip(!tooltipOpen);

const handleCodeChange = e => {
let value = e.target.value;



const regexTest = fullCodeRegex.test(value);
if (regexTest) {
props.setCodeValid(true);
Expand All @@ -38,7 +39,7 @@ const UserTeamsTable = props => {
return (
<div>
<div className={`teamtable-container desktop ${darkMode ? 'bg-yinmn-blue' : ''}`}>
<div className="container" style={{paddingLeft: '4px', paddingRight: '4px'}}>
<div className="container" style={{ paddingLeft: '4px', paddingRight: '4px' }}>
{props.canEditVisibility && (
<div className="row" >
<Col md="7">
Expand All @@ -54,19 +55,20 @@ const UserTeamsTable = props => {
</Col>
</div>
)}
<div className="row" style={{ margin: '0 auto'}}>
<div className="row" style={{ margin: '0 auto' }}>
<Col
md={canAssignTeamToUsers ? '7' : '10'}
style={{
backgroundColor: darkMode ? '#1C2541' : '#e9ecef',
backgroundColor: darkMode ? '#1C2541' : '#e9ecef',
backgroundColor: darkMode ? '#1C2541' : '#e9ecef',
border: '1px solid #ced4da',
marginBottom: '10px',
}}
>
<span className="teams-span">Teams</span>
</Col>
{props.edit && props.role && canAssignTeamToUsers && (
<Col md="3" style={{padding: '0'}}>
<Col md="3" style={{ padding: '0' }}>
{props.disabled ? (
<>
<Tooltip placement="bottom" isOpen={tooltipOpen} target="btn-assignteam" toggle={toggleTooltip}>
Expand All @@ -84,13 +86,13 @@ const UserTeamsTable = props => {
props.onButtonClick();
}}
style={darkMode ? {} : boxStyle}
>
>
Assign Team
</Button>
)}
</Col>
)}
<Col md="2" style={{padding: '0'}}>
<Col md="2" style={{ padding: '0' }}>
{props.canEditTeamCode ? (
<Input
id="teamCode"
Expand All @@ -99,8 +101,8 @@ const UserTeamsTable = props => {
placeholder="X-XXXXX"
/>
) : (
<div style={{fontSize: "12px" ,textAlign: 'center'}}>
{teamCode == ''? "No assigned team code": teamCode}
<div style={{ fontSize: "12px", textAlign: 'center' }}>
{teamCode == '' ? "No assigned team code" : teamCode}
</div>
)}
</Col>
Expand All @@ -110,8 +112,8 @@ const UserTeamsTable = props => {
<table className={`table table-bordered table-responsive-sm ${darkMode ? 'text-light' : ''}`}>
<thead className={darkMode ? 'bg-space-cadet' : ''}>
{props.role && (
<tr>
<th className={darkMode ? 'bg-space-cadet' : ''}>#</th>
<tr style={{ textAlign: 'center' }}>
<th className={darkMode ? 'bg-space-cadet' : ''} style={{ width: '10%' }} >#</th>
{canAssignTeamToUsers ? <th className={darkMode ? 'bg-space-cadet' : ''} style={{ width: '100px' }}>Team Name</th> : null}
{props.userTeamsById.length > 0 ? <th className={darkMode ? 'bg-space-cadet' : ''}></th> : null}
</tr>
Expand Down Expand Up @@ -150,17 +152,17 @@ const UserTeamsTable = props => {
<div style={{ display: 'flex', flexDirection: 'column' }}>
{props.canEditVisibility && (
<>
<Col
md='12'
<Col
md='12'
style={{
backgroundColor: darkMode ? '#1C2541' : '#e9ecef',
border: '1px solid #ced4da',
marginBottom: '10px',
}}
>
<span className="teams-span">Visibility</span>
<span className="teams-span">Visibility</span>
</Col>
<Col md='12' style={{ display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
<Col md='12' style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<ToggleSwitch
switchType="visible"
state={props.isVisible}
Expand All @@ -183,18 +185,18 @@ const UserTeamsTable = props => {
<span className="teams-span">Teams</span>
</Col>
<Col md="3" xs="12" style={{ padding: '0', marginBottom: '10px' }}>
{props.canEditTeamCode ? (
<Input
id="teamCode"
value={teamCode}
onChange={handleCodeChange}
placeholder="X-XXX"
/>
) : (
<div style={{paddingTop: '6px', textAlign: 'center'}}>
{teamCode == ''? "No assigned team code": teamCode}
</div>
)}
{props.canEditTeamCode ? (
<Input
id="teamCode"
value={teamCode}
onChange={handleCodeChange}
placeholder="X-XXX"
/>
) : (
<div style={{ paddingTop: '6px', textAlign: 'center' }}>
{teamCode == '' ? "No assigned team code" : teamCode}
</div>
)}
</Col>
</div>
{props.edit && props.role && (
Expand Down Expand Up @@ -231,7 +233,7 @@ const UserTeamsTable = props => {
<tr>
<th className={darkMode ? 'bg-space-cadet' : ''}>#</th>
<th className={darkMode ? 'bg-space-cadet' : ''}>Team Name</th>
{canAssignTeamToUsers ? <th style={{ flex: 2 }} className={darkMode ? 'bg-space-cadet' : ''}>{}</th> : null}
{canAssignTeamToUsers ? <th style={{ flex: 2 }} className={darkMode ? 'bg-space-cadet' : ''}>{ }</th> : null}
</tr>
)}
</thead>
Expand Down

0 comments on commit 2533dd0

Please sign in to comment.