Skip to content

Commit 331045d

Browse files
princyballabhprincyballabh
committed
Improve GenSec endorsement cards: remove redundant headers, add Endorse buttons, make compact
1 parent 93a5386 commit 331045d

3 files changed

Lines changed: 91 additions & 129 deletions

File tree

‎frontend/src/Components/GenSec/AchievementsEndorsementTab.jsx‎

Lines changed: 26 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -117,26 +117,21 @@ const AchievementsEndorsementTab = ({ skillType }) => {
117117
{achievements.map((ach) => (
118118
<div
119119
key={ach._id}
120-
className="bg-pink-50 border border-pink-100 rounded-lg p-6 hover:shadow-md transition-shadow duration-200"
120+
className="bg-pink-50 border border-pink-100 rounded-lg p-4 hover:shadow-md transition-shadow duration-200"
121121
>
122122
{/* Card Header */}
123-
<div className="flex justify-between items-start mb-4">
124-
<div className="flex-1">
125-
<h3 className="text-lg font-semibold text-gray-900 mb-1">
126-
Achievement Request
127-
</h3>
128-
<h4 className="text-md font-medium text-gray-800 mb-2">
129-
{ach.title}
130-
</h4>
131-
<p className="text-sm text-gray-600 mb-3 line-clamp-2">
132-
"{ach.description}"
133-
</p>
134-
</div>
123+
<div className="mb-4">
124+
<h3 className="text-lg font-semibold text-gray-900 mb-2">
125+
{ach.title}
126+
</h3>
127+
<p className="text-sm text-gray-600 mb-3 line-clamp-2">
128+
"{ach.description}"
129+
</p>
135130
</div>
136131

137132
{/* User Information */}
138133
{ach.user_id && (
139-
<div className="flex items-center gap-2 mb-3 text-sm text-gray-700">
134+
<div className="flex items-center gap-2 mb-2 text-sm text-gray-700">
140135
<User className="w-4 h-4" />
141136
<span className="font-medium">
142137
{ach.user_id.personal_info?.name}
@@ -149,48 +144,45 @@ const AchievementsEndorsementTab = ({ skillType }) => {
149144

150145
{/* Event Information */}
151146
{ach.event_id && (
152-
<div className="bg-white rounded-md p-3 mb-3">
147+
<div className="bg-white rounded-md p-2 mb-2">
153148
<p className="text-sm font-medium text-gray-900">
154149
Event: {ach.event_id.title}
155150
</p>
156151
{ach.event_id.description && (
157-
<p className="text-sm text-gray-600 mt-1">
152+
<p className="text-xs text-gray-600 mt-1">
158153
{ach.event_id.description}
159154
</p>
160155
)}
161156
</div>
162157
)}
163158

164-
{/* Date Information */}
165-
<div className="flex items-center gap-2 mb-4 text-sm text-gray-600">
166-
<Calendar className="w-4 h-4" />
167-
<span>{format(new Date(ach.date_achieved), "dd MMM yyyy")}</span>
168-
</div>
169-
170-
{/* Certificate Link */}
171-
{ach.certificate_url && (
172-
<div className="mb-4">
159+
{/* Date and Certificate */}
160+
<div className="flex items-center justify-between mb-2 text-sm">
161+
<div className="flex items-center gap-2 text-gray-600">
162+
<Calendar className="w-4 h-4" />
163+
<span>{format(new Date(ach.date_achieved), "dd MMM yyyy")}</span>
164+
</div>
165+
{ach.certificate_url && (
173166
<a
174167
href={ach.certificate_url}
175168
target="_blank"
176169
rel="noopener noreferrer"
177-
className="inline-flex items-center gap-2 text-sm text-blue-600 hover:text-blue-800 transition-colors"
170+
className="inline-flex items-center gap-1 text-sm text-blue-600 hover:text-blue-800 transition-colors"
178171
>
179-
<ExternalLink className="w-4 h-4" />
180-
View Certificate
172+
<ExternalLink className="w-3 h-3" />
173+
Certificate
181174
</a>
182-
</div>
183-
)}
175+
)}
176+
</div>
184177

185178
{/* Action Button */}
186-
<div className="flex justify-end">
179+
<div className="flex justify-end pt-2 border-t border-pink-200">
187180
<button
188181
onClick={() => handleVerify(ach._id)}
189182
disabled={verifying.has(ach._id)}
190-
className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-blue-600 hover:text-blue-800 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
183+
className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
191184
>
192-
<span>{verifying.has(ach._id) ? "Processing..." : "View"}</span>
193-
<ChevronRight className="w-4 h-4" />
185+
<span>{verifying.has(ach._id) ? "Endorsing..." : "Endorse"}</span>
194186
</button>
195187
</div>
196188
</div>

‎frontend/src/Components/GenSec/GenSecEndorse.jsx‎

Lines changed: 44 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -54,80 +54,46 @@ const UserSkillCard = ({ skill, onEndorse, isEndorsing }) => {
5454
};
5555

5656
return (
57-
<div className="bg-pink-50 border border-pink-100 rounded-lg p-6 hover:shadow-md transition-shadow duration-200">
57+
<div className="bg-pink-50 border border-pink-100 rounded-lg p-4 hover:shadow-md transition-shadow duration-200">
5858
{/* Card Header */}
59-
<div className="flex justify-between items-start mb-4">
60-
<div className="flex-1">
61-
<h3 className="text-lg font-semibold text-gray-900 mb-1">
62-
User Skill Request
63-
</h3>
64-
<h4 className="text-md font-medium text-gray-800 mb-2">
65-
{skill.skill_id.name}
66-
</h4>
67-
<p className="text-sm text-gray-600 mb-3">
68-
{skill.skill_id.category}
69-
</p>
70-
<span
71-
className={`inline-block px-2 py-1 rounded-full text-xs font-medium ${getProficiencyColor(skill.proficiency_level)}`}
72-
>
73-
{skill.proficiency_level.charAt(0).toUpperCase() +
74-
skill.proficiency_level.slice(1)}
75-
</span>
76-
</div>
59+
<div className="mb-4">
60+
<h3 className="text-lg font-semibold text-gray-900 mb-2">
61+
{skill.skill_id.name}
62+
</h3>
63+
<p className="text-sm text-gray-600 mb-2">{skill.skill_id.category}</p>
64+
<span
65+
className={`inline-block px-2 py-1 rounded-full text-xs font-medium ${getProficiencyColor(skill.proficiency_level)}`}
66+
>
67+
{skill.proficiency_level.charAt(0).toUpperCase() +
68+
skill.proficiency_level.slice(1)}
69+
</span>
7770
</div>
7871

7972
{/* User Information */}
80-
<div className="mb-4">
81-
<div className="flex items-center gap-2 mb-2 text-sm">
82-
<div className="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center">
83-
<span className="text-xs font-medium text-gray-700">
84-
{skill.user_id.personal_info.name.charAt(0)}
85-
</span>
86-
</div>
87-
<div>
88-
<p className="font-medium text-gray-900">
89-
{skill.user_id.personal_info.name}
90-
</p>
91-
<p className="text-sm text-gray-600">{skill.user_id.user_id}</p>
92-
</div>
73+
<div className="flex items-center gap-2 mb-3 text-sm">
74+
<div className="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center">
75+
<span className="text-xs font-medium text-gray-700">
76+
{skill.user_id.personal_info.name.charAt(0)}
77+
</span>
9378
</div>
94-
</div>
95-
96-
{/* Position Information */}
97-
{skill.position_id && (
98-
<div className="bg-white rounded-md p-3 mb-4">
99-
<p className="text-sm font-medium text-gray-900">
100-
Position: {skill.position_id.title}
79+
<div>
80+
<p className="font-medium text-gray-900">
81+
{skill.user_id.personal_info.name}
10182
</p>
83+
<p className="text-sm text-gray-600">{skill.user_id.user_id}</p>
10284
</div>
103-
)}
104-
105-
{/* Date Information */}
106-
<div className="flex items-center gap-2 mb-4 text-sm text-gray-600">
107-
<svg
108-
className="w-4 h-4"
109-
fill="none"
110-
stroke="currentColor"
111-
viewBox="0 0 24 24"
112-
>
113-
<path
114-
strokeLinecap="round"
115-
strokeLinejoin="round"
116-
strokeWidth={2}
117-
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
118-
/>
119-
</svg>
120-
<span>Submitted: {formatDate(skill.created_at)}</span>
12185
</div>
12286

123-
{/* Action Button */}
124-
<div className="flex justify-end">
125-
<button
126-
onClick={() => onEndorse(skill._id)}
127-
disabled={isEndorsing}
128-
className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-blue-600 hover:text-blue-800 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
129-
>
130-
<span>{isEndorsing ? "Processing..." : "View"}</span>
87+
{/* Position and Date Information */}
88+
<div className="space-y-2 mb-2">
89+
{skill.position_id && (
90+
<div className="bg-white rounded-md p-2">
91+
<p className="text-sm font-medium text-gray-900">
92+
Position: {skill.position_id.title}
93+
</p>
94+
</div>
95+
)}
96+
<div className="flex items-center gap-2 text-sm text-gray-600">
13197
<svg
13298
className="w-4 h-4"
13399
fill="none"
@@ -138,9 +104,21 @@ const UserSkillCard = ({ skill, onEndorse, isEndorsing }) => {
138104
strokeLinecap="round"
139105
strokeLinejoin="round"
140106
strokeWidth={2}
141-
d="M9 5l7 7-7 7"
107+
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
142108
/>
143109
</svg>
110+
<span>Submitted: {formatDate(skill.created_at)}</span>
111+
</div>
112+
</div>
113+
114+
{/* Action Button */}
115+
<div className="flex justify-end pt-2 border-t border-pink-200">
116+
<button
117+
onClick={() => onEndorse(skill._id)}
118+
disabled={isEndorsing}
119+
className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
120+
>
121+
<span>{isEndorsing ? "Endorsing..." : "Endorse"}</span>
144122
</button>
145123
</div>
146124
</div>

‎frontend/src/Components/GenSec/SkillsEndorsementTab.jsx‎

Lines changed: 21 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -34,49 +34,41 @@ const SkillCard = ({ skill, onEndorse, isEndorsing }) => {
3434
});
3535

3636
return (
37-
<div className="bg-pink-50 border border-pink-100 rounded-lg p-6 hover:shadow-md transition-shadow duration-200">
37+
<div className="bg-pink-50 border border-pink-100 rounded-lg p-4 hover:shadow-md transition-shadow duration-200">
3838
{/* Card Header */}
39-
<div className="flex justify-between items-start mb-4">
40-
<div className="flex-1">
41-
<h3 className="text-lg font-semibold text-gray-900 mb-1">
42-
Skill Request
43-
</h3>
44-
<h4 className="text-md font-medium text-gray-800 mb-2">
45-
{skill.name}
46-
</h4>
47-
<p className="text-sm text-gray-600 mb-3">{skill.category}</p>
48-
{skill.description && (
49-
<p className="text-sm text-gray-600 mb-3 line-clamp-2">
50-
"{skill.description}"
51-
</p>
52-
)}
53-
</div>
39+
<div className="mb-4">
40+
<h3 className="text-lg font-semibold text-gray-900 mb-2">
41+
{skill.name}
42+
</h3>
43+
<p className="text-sm text-gray-600 mb-2">{skill.category}</p>
44+
{skill.description && (
45+
<p className="text-sm text-gray-600 mb-3 line-clamp-2">
46+
"{skill.description}"
47+
</p>
48+
)}
5449
</div>
5550

56-
{/* Skill ID Badge */}
57-
{skill.skill_id && (
58-
<div className="mb-3">
51+
{/* Skill ID and Date */}
52+
<div className="flex items-center justify-between mb-2">
53+
{skill.skill_id && (
5954
<span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full font-medium">
6055
ID: {skill.skill_id}
6156
</span>
57+
)}
58+
<div className="flex items-center gap-2 text-sm text-gray-600">
59+
<Calendar className="w-4 h-4" />
60+
<span>{formatDate(skill.created_at)}</span>
6261
</div>
63-
)}
64-
65-
{/* Date Information */}
66-
<div className="flex items-center gap-2 mb-4 text-sm text-gray-600">
67-
<Calendar className="w-4 h-4" />
68-
<span>Created: {formatDate(skill.created_at)}</span>
6962
</div>
7063

7164
{/* Action Button */}
72-
<div className="flex justify-end">
65+
<div className="flex justify-end pt-2 border-t border-pink-200">
7366
<button
7467
onClick={() => onEndorse(skill._id)}
7568
disabled={isEndorsing}
76-
className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-blue-600 hover:text-blue-800 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
69+
className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
7770
>
78-
<span>{isEndorsing ? "Processing..." : "View"}</span>
79-
<ChevronRight className="w-4 h-4" />
71+
<span>{isEndorsing ? "Endorsing..." : "Endorse"}</span>
8072
</button>
8173
</div>
8274
</div>

0 commit comments

Comments
 (0)