abhishekbhakat/zhealth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: replace inline styles with new CSS utility classes across various pages.

Browse Source
This commit is contained in:
abhishekbhakat
2025-12-20 16:08:11 +05:30
parent d9f6694b2f
commit c8b4beafff
8 changed files with 364 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/pages/Admin.tsx
View File

@@ -121,7 +121,7 @@ export function AdminPage() {
const isConfigAdmin = (user: User) => user.username === CONFIG_ADMIN_USERNAME
if (loading) {
return <div style={{ padding: 'var(--space-lg)' }}>Loading...</div>
return <div className="p-lg">Loading...</div>
}
if (!currentUser || currentUser.role !== 'admin') {
@@ -129,10 +129,10 @@ export function AdminPage() {
}
return (
<div style={{ padding: 'var(--space-lg)', maxWidth: '1000px', margin: '0 auto' }}>
<header style={{ marginBottom: 'var(--space-xl)' }}>
<div className="admin-page p-lg max-w-xl">
<header className="mb-xl">
<Link to="/" className="text-secondary text-sm">← Back to Dashboard</Link>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 'var(--space-sm)' }}>
<div className="flex-between mt-sm">
<h1>User Management</h1>
<button className="btn btn-primary" onClick={() => setShowCreateModal(true)}>
+ New User
@@ -172,7 +172,7 @@ export function AdminPage() {
</td>
<td className="text-secondary text-sm">{new Date(user.created_at).toLocaleDateString()}</td>
<td>
<div style={{ display: 'flex', gap: 'var(--space-xs)' }}>
<div className="flex gap-xs">
<button
className="btn btn-secondary btn-sm"
onClick={() => setEditingUser(user)}
@@ -243,7 +243,7 @@ export function AdminPage() {
<option value="admin">Admin</option>
</select>
</div>
<div style={{ display: 'flex', gap: 'var(--space-sm)', marginTop: 'var(--space-lg)' }}>
<div className="flex gap-sm mt-lg">
<button type="submit" className="btn btn-primary">Create</button>
<button type="button" className="btn btn-secondary" onClick={() => setShowCreateModal(false)}>Cancel</button>
</div>
@@ -327,7 +327,7 @@ function EditUserModal({ user, onClose, onSave, setMessage }: EditUserModalProps
placeholder="Full name"
/>
</div>
<div style={{ display: 'flex', gap: 'var(--space-sm)', marginTop: 'var(--space-lg)' }}>
<div className="flex gap-sm mt-lg">
<button type="submit" className="btn btn-primary" disabled={saving}>
{saving ? 'Saving...' : 'Save'}
</button>
@@ -419,7 +419,7 @@ function ResetPasswordModal({ user, onClose, onSave, setMessage }: ResetPassword
/>
</div>
{error && <div className="error-message">{error}</div>}
<div style={{ display: 'flex', gap: 'var(--space-sm)', marginTop: 'var(--space-lg)' }}>
<div className="flex gap-sm mt-lg">
<button type="submit" className="btn btn-primary" disabled={saving}>
{saving ? 'Resetting...' : 'Reset Password'}
</button>

33
frontend/src/pages/Dashboard.tsx
View File

@@ -60,53 +60,38 @@ export function DashboardPage() {
</header>
<section>
<h2 style={{ marginBottom: 'var(--space-md)' }}>Biomarker Categories</h2>
<div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-sm)' }}>
<h2 className="mb-md">Biomarker Categories</h2>
<div className="flex-col gap-sm">
{categories.map(category => {
const categoryBiomarkers = getBiomarkersForCategory(category.id)
const isExpanded = expandedCategories.has(category.id)
return (
<div key={category.id} className="card" style={{ padding: 0 }}>
<div key={category.id} className="card category-card">
<button
className="collapsible-header"
className="collapsible-header w-full p-md flex-between"
onClick={() => toggleCategory(category.id)}
style={{
width: '100%',
padding: 'var(--space-md)',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
background: 'none',
border: 'none',
cursor: 'pointer',
textAlign: 'left',
color: 'var(--text-primary)',
}}
>
<div>
<span style={{ fontSize: '16px', fontWeight: 600, textTransform: 'uppercase' }}>{category.name}</span>
<span className="text-secondary text-sm" style={{ marginLeft: 'var(--space-sm)' }}>
<span className="category-name">{category.name}</span>
<span className="text-secondary text-sm ml-sm">
({categoryBiomarkers.length} biomarkers)
</span>
</div>
<img
src="/icons/general/icons8-collapse-arrow-50.png"
alt="expand"
className="theme-icon"
className="theme-icon collapse-icon"
style={{
width: 18,
height: 18,
transition: 'transform 0.2s',
transform: isExpanded ? 'rotate(180deg)' : 'rotate(0)'
}}
/>
</button>
{isExpanded && (
<div style={{ borderTop: '1px solid var(--border)', padding: 'var(--space-sm)' }}>
<div className="category-content border-t p-sm">
{categoryBiomarkers.length === 0 ? (
<p className="text-secondary text-sm" style={{ padding: 'var(--space-sm)' }}>
<p className="text-secondary text-sm p-sm">
No biomarkers in this category
</p>
) : (

4
frontend/src/pages/Insights.tsx
View File

@@ -6,8 +6,8 @@ export function InsightsPage() {
<p className="text-secondary">AI-powered analysis of your health data</p>
</header>
<div className="card" style={{ textAlign: 'center', padding: 'var(--space-xl)' }}>
<div style={{ fontSize: '48px', marginBottom: 'var(--space-md)' }}>🚀</div>
<div className="card text-center p-xl">
<div className="coming-soon-icon mb-md">🚀</div>
<h3>Coming Soon</h3>
<p className="text-secondary">
AI-generated health insights and recommendations based on your biomarker data.

2
frontend/src/pages/Login.tsx
View File

@@ -91,7 +91,7 @@ export function LoginPage() {
</button>
</form>
<p className="text-secondary text-sm" style={{ marginTop: 'var(--space-md)', textAlign: 'center' }}>
<p className="text-secondary text-sm mt-md text-center">
Don't have an account? <Link to="/signup">Sign up</Link>
</p>
</div>

14
frontend/src/pages/Profile.tsx
View File

@@ -123,7 +123,7 @@ export function ProfilePage() {
}
return (
<div className="page" style={{ maxWidth: '600px' }}>
<div className="page max-w-md">
<header className="page-header">
<h1>Profile</h1>
<p className="text-secondary">Manage your account and health information</p>
@@ -131,8 +131,8 @@ export function ProfilePage() {
<form onSubmit={handleSubmit}>
{/* Account Info */}
<div className="card" style={{ marginBottom: 'var(--space-lg)' }}>
<h3 style={{ marginBottom: 'var(--space-md)' }}>Account</h3>
<div className="card mb-lg">
<h3 className="mb-md">Account</h3>
<div className="form-group">
<label>Username</label>
<input type="text" className="input" value={username} disabled />
@@ -165,8 +165,8 @@ export function ProfilePage() {
</div>
{/* Physical Info */}
<div className="card" style={{ marginBottom: 'var(--space-lg)' }}>
<h3 style={{ marginBottom: 'var(--space-md)' }}>Physical Info</h3>
<div className="card mb-lg">
<h3 className="mb-md">Physical Info</h3>
<div className="form-group">
<label htmlFor="height">Height (cm)</label>
@@ -214,8 +214,8 @@ export function ProfilePage() {
</div>
{/* Lifestyle */}
<div className="card" style={{ marginBottom: 'var(--space-lg)' }}>
<h3 style={{ marginBottom: 'var(--space-md)' }}>Lifestyle</h3>
<div className="card mb-lg">
<h3 className="mb-md">Lifestyle</h3>
<div className="form-group">
<label htmlFor="diet">Diet</label>

2
frontend/src/pages/Signup.tsx
View File

@@ -98,7 +98,7 @@ export function SignupPage() {
</button>
</form>
<p className="text-secondary text-sm" style={{ marginTop: 'var(--space-md)', textAlign: 'center' }}>
<p className="text-secondary text-sm mt-md text-center">
Already have an account? <Link to="/login">Sign in</Link>
</p>
</div>

69
frontend/src/pages/Sources.tsx
View File

@@ -117,13 +117,13 @@ export function SourcesPage() {
</header>
<div className="card">
<h3 style={{ marginBottom: 'var(--space-md)' }}>Upload Data</h3>
<p className="text-secondary text-sm" style={{ marginBottom: 'var(--space-lg)' }}>
<h3 className="mb-md">Upload Data</h3>
<p className="text-secondary text-sm mb-lg">
Upload lab reports in PDF, CSV, or Excel format to import your biomarker data.
</p>
{error && (
<div className="alert alert-error" style={{ marginBottom: 'var(--space-md)' }}>
<div className="alert alert-error mb-md">
{error}
</div>
)}
@@ -131,7 +131,7 @@ export function SourcesPage() {
<input
type="file"
ref={fileInputRef}
style={{ display: 'none' }}
className="hidden"
multiple
accept=".pdf,.csv,.xlsx,.xls,.jpg,.jpeg,.png"
onChange={(e) => handleUpload(e.target.files)}
@@ -139,15 +139,6 @@ export function SourcesPage() {
<div
className={`upload-zone ${dragOver ? 'drag-over' : ''}`}
style={{
border: `2px dashed ${dragOver ? 'var(--accent)' : 'var(--border)'}`,
borderRadius: 'var(--radius-md)',
padding: 'var(--space-xl)',
textAlign: 'center',
cursor: uploading ? 'wait' : 'pointer',
backgroundColor: dragOver ? 'color-mix(in srgb, var(--accent) 5%, var(--bg-secondary))' : 'transparent',
transition: 'all 0.2s',
}}
onClick={() => !uploading && fileInputRef.current?.click()}
onDragOver={(e) => { e.preventDefault(); setDragOver(true) }}
onDragLeave={() => setDragOver(false)}
@@ -159,20 +150,20 @@ export function SourcesPage() {
>
{uploading ? (
<>
<div style={{ marginBottom: 'var(--space-sm)', textAlign: 'center' }}>
<img src="/icons/general/icons8-clock-50.png" alt="Uploading" className="theme-icon" style={{ width: 36, height: 36, display: 'block', margin: '0 auto' }} />
<div className="mb-sm text-center">
<img src="/icons/general/icons8-clock-50.png" alt="Uploading" className="upload-icon theme-icon" />
</div>
<p className="text-secondary">Uploading...</p>
</>
) : (
<>
<div style={{ marginBottom: 'var(--space-sm)', textAlign: 'center' }}>
<img src="/icons/general/icons8-upload-to-the-cloud-50.png" alt="Upload" className="theme-icon" style={{ width: 36, height: 36, display: 'block', margin: '0 auto' }} />
<div className="mb-sm text-center">
<img src="/icons/general/icons8-upload-to-the-cloud-50.png" alt="Upload" className="upload-icon theme-icon" />
</div>
<p className="text-secondary">
Drag & drop files here, or click to browse
</p>
<p className="text-secondary text-xs" style={{ marginTop: 'var(--space-sm)' }}>
<p className="text-secondary text-xs mt-sm">
Supported: PDF, CSV, XLSX, Images
</p>
</>
@@ -180,8 +171,8 @@ export function SourcesPage() {
</div>
</div>
<div className="card" style={{ marginTop: 'var(--space-lg)' }}>
<h3 style={{ marginBottom: 'var(--space-md)' }}>Recent Uploads</h3>
<div className="card mt-lg">
<h3 className="mb-md">Recent Uploads</h3>
{loading ? (
<p className="text-secondary text-sm">Loading...</p>
@@ -190,28 +181,22 @@ export function SourcesPage() {
) : (
<div className="sources-list">
{sources.map(source => (
<div key={source.id} className="source-item" style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: 'var(--space-sm) 0',
borderBottom: '1px solid var(--border)',
}}>
<div style={{ flex: 1, minWidth: 0 }}>
<div style={{ fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
<div key={source.id} className="source-item flex-between">
<div className="flex-1 min-w-0">
<div className="font-medium truncate">
{source.name}
</div>
<div className="text-secondary text-xs">
{source.file_type} • {formatFileSize(source.file_size)} • {formatDate(source.uploaded_at)}
</div>
</div>
<div style={{ display: 'flex', gap: 'var(--space-sm)' }}>
<div className="flex gap-sm items-center">
{source.ocr_data ? (
<span style={{ color: 'var(--success)', fontSize: '12px', display: 'flex', alignItems: 'center', gap: '4px' }}>
<img src="/icons/general/icons8-checkmark-50.png" alt="Parsed" style={{ width: 14, height: 14 }} /> Parsed
<span className="status-parsed flex items-center gap-xs text-xs">
<img src="/icons/general/icons8-checkmark-50.png" alt="Parsed" className="icon-sm" /> Parsed
</span>
) : (
<span style={{ color: 'var(--text-secondary)', fontSize: '12px' }}>Pending</span>
<span className="text-secondary text-xs">Pending</span>
)}
<button
className="btn btn-danger btn-sm"
@@ -228,21 +213,13 @@ export function SourcesPage() {
{/* Delete Confirmation Modal */}
{deleteConfirmId !== null && (
<div style={{
position: 'fixed',
inset: 0,
backgroundColor: 'rgba(0,0,0,0.5)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
zIndex: 1000,
}}>
<div className="card" style={{ maxWidth: 400, textAlign: 'center' }}>
<h3 style={{ marginBottom: 'var(--space-md)' }}>Delete File?</h3>
<p className="text-secondary" style={{ marginBottom: 'var(--space-lg)' }}>
<div className="modal-overlay">
<div className="card modal-content">
<h3 className="mb-md">Delete File?</h3>
<p className="text-secondary mb-lg">
Are you sure you want to delete this file? This action cannot be undone.
</p>
<div style={{ display: 'flex', gap: 'var(--space-sm)', justifyContent: 'center' }}>
<div className="flex gap-sm justify-center">
<button className="btn" onClick={() => setDeleteConfirmId(null)}>
Cancel
</button>