Skip to content

Improve Search Bar UI and Alignment on Contributors Page #889

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Aarya-Chaudhari wants to merge 8 commits into
base: main
Choose a base branch
from
Open

Improve Search Bar UI and Alignment on Contributors Page #889

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6c18e09
Removing duplicate programs
Aarya-Chaudhari Feb 18, 2026
3f93b52
Adding feedback card
Aarya-Chaudhari Feb 18, 2026
b446e4c
Adding tips
Aarya-Chaudhari Feb 18, 2026
143a080
Fixing dark mode
Aarya-Chaudhari Feb 18, 2026
461c4dd
Adding dark toggle
Aarya-Chaudhari Feb 19, 2026
8e20a4c
Stucturing faqs
Aarya-Chaudhari Feb 19, 2026
5637ff6
Search bar
Aarya-Chaudhari Feb 19, 2026
6d06762
Merge branch 'main' into search
Aarya-Chaudhari Feb 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 104 additions & 10 deletions frontend/css/contributors.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -923,6 +923,90 @@ body.dark-mode .contributors-section p {
align-items: center;
}

/* ===== Contributors Controls (Search + Toggle) ===== */
.contributors-controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin: 30px auto 20px;
max-width: 900px;
flex-wrap: wrap;
}

/* Search Wrapper */
.search-wrapper {
position: relative;
flex: 1;
min-width: 280px;
}

/* Search Icon */
.search-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: #9ca3af;
font-size: 15px;
pointer-events: none;
}

/* Search Input Styling */
#contributor-search {
width: 100%;
padding: 14px 16px 14px 42px;
border-radius: 12px;
border: 1.5px solid #e5e7eb;
font-size: 16px;
font-family: "Inter", sans-serif;
background: #ffffff;
transition: all 0.25s ease;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

/* Hover Effect */
#contributor-search:hover {
border-color: #d1d5db;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

/* Focus Effect (Important for UX) */
#contributor-search:focus {
outline: none;
border-color: var(--primary-gold, #d4af37);
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
background: #ffffff;
}

/* Bot Toggle Styling */
.bot-toggle {
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
color: #374151;
background: #ffffff;
padding: 10px 14px;
border-radius: 10px;
border: 1px solid #e5e7eb;
transition: all 0.2s ease;
cursor: pointer;
}

.bot-toggle:hover {
border-color: #d1d5db;
background: #f9fafb;
}

.bot-toggle input {
accent-color: var(--primary-gold, #d4af37);
cursor: pointer;
}

/* Mobile Responsiveness */
@media (max-width: 640px) {
.contributors-controls {
/* Animation trigger */
.contributor-card.is-visible {
opacity: 1;
Expand Down Expand Up @@ -1020,7 +1104,6 @@ body.dark-mode .contributors-section p {

/* =========================================
SKELETON LOADING ANIMATION
========================================= */
.contributor-skeleton {
background: #fff;
border: 1px solid #eee;
Expand Down Expand Up @@ -1064,7 +1147,6 @@ body.dark-mode .contributors-section p {

/* =========================================
DARK MODE OVERRIDES (The Fix)
========================================= */
body.dark-mode .contributor-card {
background-color: #1e1e1e !important;
border-color: #333 !important;
Expand Down Expand Up @@ -1112,7 +1194,6 @@ body.dark-mode .sk {

/* =========================================
CONTRIBUTORS STATS
========================================= */

.contributors-stats {
display: flex;
Expand Down Expand Up @@ -1173,7 +1254,6 @@ body.dark-mode .sk {

/* =========================================
TOP CONTRIBUTOR – ENHANCED
========================================= */

.stat-pill.stat-top {
background: linear-gradient(180deg, #e6c453, #fdeeb5);
Expand All @@ -1196,7 +1276,6 @@ body.dark-mode .sk {

/* =========================================
CONTRIBUTORS CONTROLS
========================================= */

.contributors-controls {
display: flex;
Expand Down Expand Up @@ -1238,7 +1317,6 @@ body.dark-mode .sk {

/* =========================================
RESPONSIVE
========================================= */

@media (max-width: 768px) {
.contributors-stats {
Expand All @@ -1257,6 +1335,25 @@ body.dark-mode .sk {
align-items: stretch;
}

.bot-toggle {
justify-content: center;
}
}

.contributors-section {
padding-top: 40px;
}

.contributors-section h3 {
text-align: center;
margin-bottom: 10px;
}

.contributors-section p {
text-align: center;
margin-bottom: 20px;
color: #6b7280;
}
.stat-pill {
width: 100%;
justify-content: center;
Expand All @@ -1274,7 +1371,6 @@ body.dark-mode .sk {

/* =========================================
DARK MODE
========================================= */

body.dark-mode .stat-pill {
background: linear-gradient(180deg, #ffffff, #ffe9a9);
Expand Down Expand Up @@ -1311,7 +1407,6 @@ body.dark-mode #contributor-search {

/* =========================================
ANIMATION
========================================= */

@keyframes statFadeUp {
to {
Expand All @@ -1322,7 +1417,6 @@ body.dark-mode #contributor-search {

/* ==========================
Enhance contributors UI
========================== */

.dark-mode {
--contributors-bg: #0f172a;
Expand Down Expand Up @@ -1401,4 +1495,4 @@ body.dark-mode #contributor-search {
/* Divider lines */
.dark-mode hr {
border-color: var(--contributors-border);
}
}
76 changes: 73 additions & 3 deletions frontend/css/feedback.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,15 @@
body {
margin: 0;
}

.feedback-header {
text-align: center;
padding: 80px 20px 40px;
padding: 40px 20px 0px; /* remove bottom gap */
margin-bottom: 0;
}



.feedback-header h1 {
font-size: 2.5rem;
color: var(--deep-navy);
Expand All @@ -15,10 +22,12 @@

.feedback-container {
max-width: 600px;
margin: auto;
padding: 30px;
margin: 0 auto 60px; /* removes top gap */
padding: 0 20px 40px;
}



form {
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -61,3 +70,64 @@ button:hover {
margin-top: 10px;
font-weight: 600;
}

/* ===== Card Layout Enhancement ===== */

.feedback-container {
max-width: 700px;
margin: auto;
padding: 40px 20px 80px;
display: flex;
justify-content: center;
}

.feedback-card {
width: 100%;
background: #ffffff;
padding: 35px 30px;
border-radius: 14px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Hover effect for modern UI depth */
.feedback-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12);
}

/* Improve input styling consistency */
.feedback-card input,
.feedback-card select,
.feedback-card textarea {
width: 100%;
padding: 12px;
border-radius: 8px;
border: 1px solid #dcdcdc;
font-size: 1rem;
transition: border 0.2s ease, box-shadow 0.2s ease;
}

/* Focus interaction */
.feedback-card input:focus,
.feedback-card select:focus,
.feedback-card textarea:focus {
outline: none;
border-color: var(--primary-gold);
box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
}

/* Better button polish */
.feedback-card button {
margin-top: 10px;
font-size: 1rem;
letter-spacing: 0.3px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feedback-card button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

65 changes: 63 additions & 2 deletions frontend/css/guides.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -789,10 +789,71 @@ html {
}
}

/* =========================================================
DARK MODE FIX — GUIDES PAGE READABILITY (Issue #860)
========================================================= */

/* Page background & base text */
body.dark-mode {
background-color: #0f172a;
color: #e5e7eb;
}

/* Section headings */
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4 {
color: #f9fafb !important;
}

/* Paragraph text readability */
body.dark-mode p,
body.dark-mode li {
color: #cbd5e1 !important;
}

/* Guide cards (major issue: parchment background in dark mode) */
body.dark-mode .guide-list li,
body.dark-mode .pr-steps li,
body.dark-mode .practice-item,
body.dark-mode .mistakes-list li {
background: #1e293b !important; /* replaces light parchment */
color: #e5e7eb !important;
border: 1px solid rgba(255,255,255,0.06);
}

/* Fix titles inside cards */
body.dark-mode .guide-list h4,
body.dark-mode .pr-steps h4,
body.dark-mode .timeline-list h4,
body.dark-mode .practice-item h4 {
color: #ffffff !important;
}

/* Fix description text inside components */
body.dark-mode .guide-list p,
body.dark-mode .pr-steps p,
body.dark-mode .timeline-list p,
body.dark-mode .practice-item p,
body.dark-mode .mistakes-list p {
color: #cbd5e1 !important;
}

/* Timeline line visibility */
body.dark-mode .timeline-list::before {
background: linear-gradient(to bottom, #facc15, #eab308);
}

/* Icons contrast */
body.dark-mode .icon,
body.dark-mode .step,
body.dark-mode .mistake-icon {
background: #facc15 !important;
color: #0f172a !important;
}
/* =====================================================
Dark Mode Refinement – Guides Page (Final Patch)
Paste at the bottom of guides.css
===================================================== */

/* Section surfaces */
.dark-mode .guides-hero,
Expand Down Expand Up @@ -888,4 +949,4 @@ html {

.dark-mode .mistakes-list li:hover p {
color: #f9fafb !important;
}
}
Loading
Loading