Skip to content

Commit cebeebe

Browse files
sayali-2308sayali-2308
committed
feat: enable direct communication actions on team member skill contact page
1 parent e79cb9a commit cebeebe

3 files changed

Lines changed: 102 additions & 23 deletions

File tree

‎src/components/HGNHelpSkillsDashboard/TeamCard/TeamCard.jsx‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import PropTypes from 'prop-types';
22
import { useState } from 'react';
3-
import { useSelector } from 'react-redux';
43
import { toast } from 'react-toastify';
54
import styles from './TeamCard.module.css';
65
import { TeamMemberRow } from './TeamMemberRow';
@@ -36,13 +35,24 @@ ConfirmModal.propTypes = {
3635

3736
export default function TeamCard() {
3837
const teamMembers = [
39-
{ id: 1, name: 'Shreya Laheri', score: '9/10' },
40-
{ id: 2, name: 'Shreya Vithala', score: '7/10' },
41-
{ id: 3, name: 'Jae Sabol', score: '5/10' },
42-
{ id: 4, name: 'Sara Sabol', score: '2/10' },
38+
{
39+
id: 1,
40+
name: 'Shreya Laheri',
41+
score: '9/10',
42+
email: 'shreya.laheri@mock.com',
43+
slackId: 'U12345001',
44+
},
45+
{
46+
id: 2,
47+
name: 'Shreya Vithala',
48+
score: '7/10',
49+
email: 'shreya.vithala@mock.com',
50+
slackId: 'U12345002',
51+
},
52+
{ id: 3, name: 'Jae Sabol', score: '5/10', email: '', slackId: '' },
53+
{ id: 4, name: 'Sara Sabol', score: '2/10', email: 'sara.sabol@mock.com', slackId: '' },
4354
];
4455

45-
const darkMode = useSelector(state => state.theme.darkMode);
4656
const [selectedMembers, setSelectedMembers] = useState([]);
4757
const [confirmAction, setConfirmAction] = useState(null);
4858

@@ -78,7 +88,7 @@ export default function TeamCard() {
7888
const noneSelected = selectedMembers.length === 0;
7989

8090
return (
81-
<div className={styles.teamCardWrapper}>
91+
<div className={styles.pageWrapper}>
8292
<div className={styles.teamCardContainer}>
8393
<div className={styles.teamCardHeader}>
8494
<h2 className={styles.teamCardTitle}>
@@ -157,7 +167,6 @@ export default function TeamCard() {
157167
count={selectedMembers.length}
158168
onConfirm={handleConfirm}
159169
onCancel={handleCancel}
160-
darkMode={darkMode}
161170
/>
162171
)}
163172
</div>

‎src/components/HGNHelpSkillsDashboard/TeamCard/TeamCard.module.css‎

Lines changed: 41 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
align-items: center;
5050
justify-content: space-between;
5151
padding: 10px 12px;
52-
margin: 0 0 8px 0;
52+
margin: 0 0 8px;
5353
border: 1px solid #adb5bd;
5454
border-radius: 8px;
5555
background: transparent;
@@ -70,23 +70,23 @@
7070
padding: 7px 14px;
7171
border: none;
7272
border-radius: 4px;
73-
background: #007bff;
73+
background: #07f;
7474
color: #fff;
7575
font-size: 13px;
7676
cursor: pointer;
7777
transition: background 0.2s;
7878
}
7979

80-
.bulkBtn:hover:not(:disabled) {
81-
background: #0056b3;
82-
}
83-
8480
.bulkBtn:disabled {
8581
background: #adb5bd;
8682
cursor: not-allowed;
8783
opacity: 0.7;
8884
}
8985

86+
.bulkBtn:hover:not(:disabled) {
87+
background: #0056b3;
88+
}
89+
9090
/* ── Member Row ── */
9191
.teamMemberRow {
9292
padding: 12px;
@@ -98,15 +98,15 @@
9898
}
9999

100100
.teamMemberRowSelected {
101-
background: rgba(0, 123, 255, 0.08);
101+
background: rgb(0 123 255 / 8%);
102102
}
103103

104104
.memberCheckbox {
105105
width: 18px;
106106
height: 18px;
107107
margin-right: 12px;
108108
cursor: pointer;
109-
accent-color: #007bff;
109+
accent-color: #07f;
110110
flex-shrink: 0;
111111
}
112112

@@ -151,7 +151,7 @@
151151
}
152152

153153
.scoreRed {
154-
color: #ff0000;
154+
color: #f00;
155155
}
156156

157157
.showMoreLink {
@@ -175,11 +175,39 @@
175175
justify-content: space-evenly;
176176
}
177177

178+
.iconLink {
179+
display: inline-flex;
180+
align-items: center;
181+
color: inherit;
182+
text-decoration: none;
183+
border-radius: 4px;
184+
outline-offset: 2px;
185+
}
186+
187+
.iconLink:focus-visible {
188+
outline: 2px solid #06c;
189+
}
190+
191+
.iconDisabled {
192+
display: inline-flex;
193+
align-items: center;
194+
opacity: 0.35;
195+
cursor: not-allowed;
196+
}
197+
198+
.pageWrapper {
199+
display: flex;
200+
flex-direction: column;
201+
align-items: center;
202+
justify-content: center;
203+
min-height: 80vh;
204+
}
205+
178206
/* ── Confirmation Modal ── */
179207
.modalOverlay {
180208
position: fixed;
181209
inset: 0;
182-
background: rgba(0, 0, 0, 0.5);
210+
background: rgb(0 0 0 / 50%);
183211
display: flex;
184212
align-items: center;
185213
justify-content: center;
@@ -192,12 +220,12 @@
192220
padding: 28px 32px;
193221
width: 380px;
194222
max-width: 90%;
195-
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
223+
box-shadow: 0 8px 24px rgb(0 0 0 / 40%);
196224
text-align: center;
197225
}
198226

199227
.modalTitle {
200-
margin: 0 0 12px 0;
228+
margin: 0 0 12px;
201229
font-size: 1.2rem;
202230
font-family: Inter, sans-serif;
203231
color: #000;
@@ -218,7 +246,7 @@
218246

219247
.confirmBtn {
220248
padding: 9px 20px;
221-
background: #007bff;
249+
background: #07f;
222250
color: #fff;
223251
border: none;
224252
border-radius: 4px;

‎src/components/HGNHelpSkillsDashboard/TeamCard/TeamMemberRow.jsx‎

Lines changed: 44 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@ export const TeamMemberRow = ({ member, isSelected, onToggleSelect }) => {
1010
return `${styles.scoreBase} ${scoreColor}`;
1111
};
1212

13+
const hasEmail = member.email && member.email.trim() !== '';
14+
const hasSlack = member.slackId && member.slackId.trim() !== '';
15+
1316
return (
1417
<div className={`${styles.teamMemberRow} ${isSelected ? styles.teamMemberRowSelected : ''}`}>
1518
<input
@@ -22,8 +25,45 @@ export const TeamMemberRow = ({ member, isSelected, onToggleSelect }) => {
2225
<div className={styles.teamMemberInfo}>
2326
<span className={styles.teamMemberName}>{member.name}</span>
2427
<div className={styles.teamMemberIcons}>
25-
<Mail size={16} className={styles.icon} />
26-
<SlackIcon size={16} />
28+
{hasEmail ? (
29+
<a
30+
href={`mailto:${member.email}`}
31+
title={`Email ${member.name}`}
32+
aria-label={`Email ${member.name}`}
33+
className={styles.iconLink}
34+
>
35+
<Mail size={16} className={styles.icon} />
36+
</a>
37+
) : (
38+
<span
39+
title="No email available"
40+
aria-label="No email available"
41+
className={styles.iconDisabled}
42+
>
43+
<Mail size={16} className={styles.icon} />
44+
</span>
45+
)}
46+
47+
{hasSlack ? (
48+
<a
49+
href={`https://slack.com/app_redirect?channel=${member.slackId}`}
50+
target="_blank"
51+
rel="noopener noreferrer"
52+
title={`Message ${member.name} on Slack`}
53+
aria-label={`Message ${member.name} on Slack`}
54+
className={styles.iconLink}
55+
>
56+
<SlackIcon size={16} />
57+
</a>
58+
) : (
59+
<span
60+
title="No Slack ID available"
61+
aria-label="No Slack ID available"
62+
className={styles.iconDisabled}
63+
>
64+
<SlackIcon size={16} />
65+
</span>
66+
)}
2767
</div>
2868
</div>
2969
<span className={getScoreStyle(member.score.split('/')[0])}>{member.score}</span>
@@ -36,6 +76,8 @@ TeamMemberRow.propTypes = {
3676
id: PropTypes.number.isRequired,
3777
name: PropTypes.string.isRequired,
3878
score: PropTypes.string.isRequired,
79+
email: PropTypes.string,
80+
slackId: PropTypes.string,
3981
}).isRequired,
4082
isSelected: PropTypes.bool.isRequired,
4183
onToggleSelect: PropTypes.func.isRequired,

0 commit comments

Comments
 (0)