deepkoluguri
/
curaflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: premium redesign of dashboard header and accessibility fixes
Build Curio HMS / build-and-deploy (push) Successful in 49s Details

This commit is contained in:
Deep Koluguri 2026-05-15 16:25:41 -04:00
parent 083ea41dda
commit f948e48b28
2 changed files with 36 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
dashboard.css
View File

@ -42,30 +42,42 @@
flex: 1; flex: 1;
max-width: 600px; max-width: 600px;
position: relative; position: relative;
display: flex;
align-items: center;
}
.search-icon {
position: absolute;
left: 1.25rem;
color: var(--text-muted);
font-size: 1.1rem;
pointer-events: none;
z-index: 1;
} }
.search-bar input { .search-bar input {
width: 100%; width: 100%;
padding: 1rem 1.5rem; padding: 1rem 1.5rem 1rem 3rem;
border-radius: var(--radius-md); border-radius: 16px;
border: 1px solid var(--border); border: 1px solid var(--border);
background: var(--surface); background: var(--surface);
font-size: 0.95rem; font-size: 0.95rem;
transition: var(--transition); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: var(--shadow-sm); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
} }
.search-bar input:focus { .search-bar input:focus {
outline: none; outline: none;
border-color: var(--secondary); border-color: var(--secondary);
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.05); background: white;
transform: translateY(-1px); box-shadow: 0 10px 25px rgba(37, 99, 235, 0.1);
transform: translateY(-2px);
} }
.header-actions { .header-actions {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1.5rem; gap: 1.25rem;
} }
.date-picker-group { .date-picker-group {
@ -73,19 +85,30 @@
align-items: center; align-items: center;
gap: 0.75rem; gap: 0.75rem;
background: var(--surface); background: var(--surface);
padding: 0.5rem 1rem; padding: 0.65rem 1.25rem;
border-radius: var(--radius-md); border-radius: 14px;
border: 1px solid var(--border); border: 1px solid var(--border);
box-shadow: var(--shadow-sm); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
transition: all 0.2s;
}
.date-picker-group:hover {
border-color: var(--secondary);
transform: translateY(-1px);
}
.calendar-icon {
font-size: 1.1rem;
} }
.date-input { .date-input {
border: none; border: none;
font-family: inherit; font-family: 'Inter', sans-serif;
font-weight: 600; font-weight: 600;
color: var(--text-main); color: var(--text-main);
outline: none; outline: none;
background: transparent; background: transparent;
cursor: pointer;
} }
.logo { .logo {
display: flex; display: flex;
@ -118,14 +141,6 @@
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
} }
.logo-text {
font-size: 1.5rem;
font-weight: 700;
color: white !important;
font-family: 'Outfit', sans-serif;
letter-spacing: -0.02em;
}
.side-nav { .side-nav {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

3
dashboard.html
View File

@ -43,11 +43,12 @@
<main class="dashboard-main"> <main class="dashboard-main">
<header class="dash-header"> <header class="dash-header">
<div class="search-bar"> <div class="search-bar">
<span class="search-icon">🔍</span>
<input type="text" id="patientSearch" placeholder="Search patients by name or WhatsApp number..." aria-label="Search patients"> <input type="text" id="patientSearch" placeholder="Search patients by name or WhatsApp number..." aria-label="Search patients">
</div> </div>
<div class="header-actions"> <div class="header-actions">
<div class="date-picker-group"> <div class="date-picker-group">
<label for="queueDate">Select Date:</label> <span class="calendar-icon">📅</span>
<input type="date" id="queueDate" class="date-input" aria-label="Queue Date"> <input type="date" id="queueDate" class="date-input" aria-label="Queue Date">
</div> </div>
<span class="badge counter-badge">Reception Counter: 1</span> <span class="badge counter-badge">Reception Counter: 1</span>