ShanmugaKrishnanSM/RIT-nexus
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

ui: implement dynamic orange border highlight and shadow glow on hover for all cards

Browse Source
This commit is contained in:
Devesh S
2026-07-23 13:32:58 +05:30
parent 1c8c6c066b
commit 2174736532
1 changed files with 189 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/pages/Community/Community.tsx
View File

@@ -401,8 +401,7 @@ export default function Community() {
<button
key={chip.id}
onClick={() => setSortFilter(chip.id as any)}
className={`px-4 py-1.5 rounded-full text-xs font-semibold whitespace-nowrap cursor-pointer transition-all border ${
isActive
className={`px-4 py-1.5 rounded-full text-xs font-semibold whitespace-nowrap cursor-pointer transition-all border ${isActive
? 'bg-[#F97316] text-white border-[#F97316] shadow-sm'
: 'bg-white hover:bg-slate-50 text-slate-600 border-[#E5E7EB]'
}`}
@@ -490,15 +489,13 @@ export default function Community() {
</div>
</div>
<h3 className={`font-bold text-[#1E293B] mb-1 hover:text-[#F97316] transition-colors tracking-tight ${
isFeatured ? 'text-base md:text-lg' : 'text-sm md:text-base'
<h3 className={`font-bold text-[#1E293B] mb-1 hover:text-[#F97316] transition-colors tracking-tight ${isFeatured ? 'text-base md:text-lg' : 'text-sm md:text-base'
}`}
style={{ fontFamily: 'Playfair Display, serif' }}>
{q.title}
</h3>
<p className={`text-[12.5px] text-slate-500 mb-3.5 leading-relaxed transition-all duration-300 ${
isBodyExpanded ? '' : 'line-clamp-1'
<p className={`text-[12.5px] text-slate-500 mb-3.5 leading-relaxed transition-all duration-300 ${isBodyExpanded ? '' : 'line-clamp-1'
}`} style={{ fontFamily: 'Inter, sans-serif' }}>
{q.body}
</p>
@@ -509,8 +506,7 @@ export default function Community() {
{/* Replies button */}
<button
onClick={(e) => { e.stopPropagation(); handleCardClick(q.id); }}
className={`flex items-center gap-1 text-[11px] font-bold transition-all duration-200 cursor-pointer ${
expandedQuestionIds.has(q.id.toString())
className={`flex items-center gap-1 text-[11px] font-bold transition-all duration-200 cursor-pointer ${expandedQuestionIds.has(q.id.toString())
? 'text-[#F97316]'
: 'text-slate-500 hover:text-slate-800'
}`}
@@ -524,8 +520,7 @@ export default function Community() {
{/* Upvotes button */}
<button
onClick={(e) => { e.stopPropagation(); handleLike(q.id.toString()); }}
className={`flex items-center gap-1 text-[11px] font-bold transition-all duration-200 cursor-pointer ${
isLiked
className={`flex items-center gap-1 text-[11px] font-bold transition-all duration-200 cursor-pointer ${isLiked
? 'text-rose-600'
: 'text-slate-500 hover:text-slate-850'
}`}
@@ -578,7 +573,7 @@ export default function Community() {
{/* Blue verified check icon for senior helpers */}
<span className="inline-flex text-blue-500" title="Verified Senior Helper">
<svg className="w-3.5 h-3.5 fill-current" viewBox="0 0 24 24">
<path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
<path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
</svg>
</span>
<span className="text-[9px] text-slate-350">•</span>
@@ -615,8 +610,7 @@ export default function Community() {
whileTap={{ scale: 0.95 }}
onClick={() => handlePageChange(currentPage - 1)}
disabled={currentPage === 0 || loading}
className={`flex items-center gap-1.5 px-4 py-2 rounded-xl border text-[12px] font-semibold transition-all duration-200 ${
currentPage === 0
className={`flex items-center gap-1.5 px-4 py-2 rounded-xl border text-[12px] font-semibold transition-all duration-200 ${currentPage === 0
? 'border-slate-100 bg-slate-50 text-slate-300 cursor-not-allowed'
: 'border-slate-200 bg-white text-slate-700 hover:bg-slate-50 hover:border-slate-300 shadow-sm cursor-pointer'
}`}
@@ -635,8 +629,7 @@ export default function Community() {
whileTap={{ scale: 0.95 }}
onClick={() => handlePageChange(currentPage + 1)}
disabled={currentPage >= totalPages - 1 || loading}
className={`flex items-center gap-1.5 px-4 py-2 rounded-xl border text-[12px] font-semibold transition-all duration-200 ${
currentPage >= totalPages - 1
className={`flex items-center gap-1.5 px-4 py-2 rounded-xl border text-[12px] font-semibold transition-all duration-200 ${currentPage >= totalPages - 1
? 'border-slate-100 bg-slate-50 text-slate-300 cursor-not-allowed'
: 'border-slate-200 bg-white text-slate-700 hover:bg-slate-50 hover:border-slate-300 shadow-sm cursor-pointer'
}`}
@@ -803,8 +796,7 @@ export default function Community() {
<div className="flex items-center justify-between">
<button
onClick={() => toggleLike(conf.id)}
className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg transition-all duration-200 cursor-pointer border text-[10px] font-bold ${
likedIds.has(conf.id)
className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg transition-all duration-200 cursor-pointer border text-[10px] font-bold ${likedIds.has(conf.id)
? 'bg-rose-50 text-rose-600 border-rose-100/60 hover:bg-rose-100/60'
: 'bg-slate-50 hover:bg-slate-100 text-slate-500 hover:text-slate-700 border-slate-200/30'
}`}