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