0x5t4l1n/AURHub
1
0
Fork 0
mirror of https://github.com/0x5t4l1n/AURHub.git synced 2026-05-26 11:25:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor: Enhance layout contrast and UI design

Browse Source
This commit is contained in:
Stalin S
2026-05-21 02:52:27 +05:30
parent 027847fbac
commit 245cf3fbb0
5 changed files with 189 additions and 273 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/PackageCard.jsx
+31 -25
View File
@@ -1,5 +1,5 @@
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { CheckCircle, AlertTriangle, Star, ArrowDownToLine } from 'lucide-react'; import { CheckCircle, AlertTriangle, Star, ArrowRight } from 'lucide-react';
export default function PackageCard({ pkg }) { export default function PackageCard({ pkg }) {
const navigate = useNavigate(); const navigate = useNavigate();
@@ -9,55 +9,61 @@ export default function PackageCard({ pkg }) {
return ( return (
<div <div
className="card card-interactive p-5 flex flex-col gap-3" className="card card-interactive p-5 flex flex-col gap-3 justify-between"
onClick={() => navigate(`/package/${pkg.name}`)} onClick={() => navigate(`/package/${pkg.name}`)}
role="button" role="button"
tabIndex={0} tabIndex={0}
onKeyDown={(e) => e.key === 'Enter' && navigate(`/package/${pkg.name}`)} onKeyDown={(e) => e.key === 'Enter' && navigate(`/package/${pkg.name}`)}
> >
{/* Top row: name + badge */} <div className="flex flex-col gap-2">
{/* Top: Name and badges */}
<div className="flex items-start justify-between gap-3"> <div className="flex items-start justify-between gap-3">
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<div className="flex items-center gap-2"> <div className="flex items-center gap-1.5 flex-wrap">
<h3 className="font-semibold truncate" style={{ color: 'var(--text-primary)', fontSize: '0.95rem' }}> <h3 className="font-bold text-sm tracking-tight truncate" style={{ color: 'var(--text-primary)' }}>
{pkg.name} {pkg.name}
</h3> </h3>
{pkg.installed && <CheckCircle size={14} style={{ color: 'var(--green)', flexShrink: 0 }} />} {pkg.installed && <CheckCircle size={13} className="text-emerald-500 shrink-0" />}
{pkg.out_of_date && <AlertTriangle size={14} style={{ color: 'var(--amber)', flexShrink: 0 }} />} {pkg.out_of_date && <AlertTriangle size={13} className="text-amber-500 shrink-0" />}
</div> </div>
<span className="text-xs font-mono" style={{ color: 'var(--text-tertiary)' }}> <span className="text-[11px] font-mono font-medium" style={{ color: 'var(--text-tertiary)' }}>
{pkg.version || '—'} {pkg.version || '—'}
</span> </span>
</div> </div>
<span className={`badge ${sourceBadge}`}>{sourceLabel}</span> <span className={`badge ${sourceBadge} shrink-0`}>{sourceLabel}</span>
</div> </div>
{/* Description */} {/* Mid: Description */}
<p className="text-sm leading-relaxed flex-1" <p className={`text-xs leading-relaxed ${!pkg.description ? 'italic' : ''}`}
style={{ color: 'var(--text-secondary)', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}> style={{
color: pkg.description ? 'var(--text-secondary)' : 'var(--text-tertiary)',
display: '-webkit-box',
WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical',
overflow: 'hidden',
minHeight: '2.5rem'
}}>
{pkg.description || 'No description available'} {pkg.description || 'No description available'}
</p> </p>
</div>
{/* Footer */} {/* Bottom: Stats & Action */}
<div className="flex items-center justify-between pt-1" <div className="flex items-center justify-between pt-3 mt-1"
style={{ borderTop: '1px solid var(--border-primary)', marginTop: 'auto' }}> style={{ borderTop: '1px solid var(--border-primary)' }}>
<div className="flex items-center gap-3 text-xs" style={{ color: 'var(--text-tertiary)' }}> <div className="flex items-center gap-3 text-[11px] font-medium" style={{ color: 'var(--text-tertiary)' }}>
{pkg.votes !== undefined && ( {pkg.votes !== undefined && pkg.votes > 0 && (
<span className="flex items-center gap-1"> <span className="flex items-center gap-1">
<Star size={12} /> {pkg.votes} <Star size={11} className="fill-amber-400 stroke-amber-400" /> {pkg.votes}
</span> </span>
)} )}
{pkg.popularity > 0 && ( {pkg.popularity > 0 && (
<span>{pkg.popularity.toFixed(2)}</span> <span>Pop: {pkg.popularity.toFixed(1)}</span>
)} )}
</div> </div>
{pkg.installed ? (
<span className="badge badge-installed">Installed</span> <span className="flex items-center gap-1 text-[11px] font-bold" style={{ color: 'var(--accent)' }}>
) : ( Details <ArrowRight size={12} className="transition-transform group-hover:translate-x-1" />
<span className="flex items-center gap-1 text-xs font-semibold" style={{ color: 'var(--accent)' }}>
<ArrowDownToLine size={13} /> Get
</span> </span>
)}
</div> </div>
</div> </div>
); );
frontend/src/components/SearchBar.jsx
+2 -2
View File
@@ -10,7 +10,7 @@ export default function SearchBar({ onSearch, initialQuery = '' }) {
}, [query, onSearch]); }, [query, onSearch]);
return ( return (
<form onSubmit={handleSubmit} className="w-full max-w-xl relative"> <form onSubmit={handleSubmit} className="searchbar">
<Search <Search
size={17} size={17}
className="absolute left-4 top-1/2 -translate-y-1/2 pointer-events-none" className="absolute left-4 top-1/2 -translate-y-1/2 pointer-events-none"
@@ -19,7 +19,7 @@ export default function SearchBar({ onSearch, initialQuery = '' }) {
<input <input
id="search-input" id="search-input"
type="text" type="text"
className="input pl-11 pr-5 py-3 rounded-xl" className="input input-search pl-11 pr-5 rounded-xl"
style={{ background: 'var(--bg-secondary)', fontSize: '0.9rem' }} style={{ background: 'var(--bg-secondary)', fontSize: '0.9rem' }}
placeholder="Search packages..." placeholder="Search packages..."
value={query} value={query}
frontend/src/index.css
+114 -204
View File
@@ -1,3 +1,4 @@
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");
@import "tailwindcss"; @import "tailwindcss";
/* ═══════════════════════════════════════════════ /* ═══════════════════════════════════════════════
@@ -5,25 +6,26 @@
Dark & Light theme with CSS custom properties Dark & Light theme with CSS custom properties
═══════════════════════════════════════════════ */ ═══════════════════════════════════════════════ */
/* ── Dark Mode (Default) ─────────────────────── */
:root { :root {
--bg-base: #07090f; /* Default: Dark Theme */
--bg-primary: #0c1018; --bg-base: #080c14;
--bg-secondary: #111827; --bg-primary: #0e1420;
--bg-tertiary: #1a2235; --bg-secondary: #151d30;
--bg-card: #111827; --bg-tertiary: #1b263f;
--bg-card-hover: #162036; --bg-card: #0e1420;
--bg-elevated: #1e293b; --bg-card-hover: #151d30;
--bg-input: #0f172a; --bg-elevated: #1b263f;
--bg-sidebar: rgba(11, 15, 25, 0.92); --bg-input: #080c14;
--bg-overlay: rgba(0, 0, 0, 0.6); --bg-sidebar: rgba(14, 20, 32, 0.9);
--bg-overlay: rgba(0, 0, 0, 0.7);
--topbar-bg: rgba(14, 20, 32, 0.85);
--border-primary: #1e293b; --border-primary: #1b263f;
--border-secondary: #334155; --border-secondary: #2c3b5e;
--text-primary: #f1f5f9; --text-primary: #f8fafc;
--text-secondary: #94a3b8; --text-secondary: #cbd5e1;
--text-tertiary: #64748b; --text-tertiary: #94a3b8;
--text-inverse: #0f172a; --text-inverse: #0f172a;
--accent-h: 199; --accent-h: 199;
@@ -32,16 +34,16 @@
--accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l)); --accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
--accent-hover: hsl(var(--accent-h), var(--accent-s), 56%); --accent-hover: hsl(var(--accent-h), var(--accent-s), 56%);
--accent-muted: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.12); --accent-muted: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.12);
--accent-glow: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.2); --accent-glow: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.25);
--green: #22c55e; --green: #10b981;
--green-muted: rgba(34, 197, 94, 0.12); --green-muted: rgba(16, 185, 129, 0.15);
--amber: #f59e0b; --amber: #f59e0b;
--amber-muted: rgba(245, 158, 11, 0.12); --amber-muted: rgba(245, 158, 11, 0.15);
--red: #ef4444; --red: #ef4444;
--red-muted: rgba(239, 68, 68, 0.1); --red-muted: rgba(239, 68, 68, 0.15);
--blue: #3b82f6; --blue: #3b82f6;
--blue-muted: rgba(59, 130, 246, 0.12); --blue-muted: rgba(59, 130, 246, 0.15);
--violet: #8b5cf6; --violet: #8b5cf6;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
@@ -55,14 +57,15 @@
--radius-xl: 24px; --radius-xl: 24px;
--radius-full: 9999px; --radius-full: 9999px;
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-spring: 350ms cubic-bezier(0.16, 1, 0.3, 1); --transition-spring: 350ms cubic-bezier(0.16, 1, 0.3, 1);
} }
/* ── Light Mode ──────────────────────────────── */
.light { .light {
/* Light Theme */
--bg-base: #f8fafc; --bg-base: #f8fafc;
--bg-primary: #f1f5f9; --bg-primary: #f1f5f9;
--bg-secondary: #ffffff; --bg-secondary: #ffffff;
@@ -71,34 +74,34 @@
--bg-card-hover: #f8fafc; --bg-card-hover: #f8fafc;
--bg-elevated: #ffffff; --bg-elevated: #ffffff;
--bg-input: #f1f5f9; --bg-input: #f1f5f9;
--bg-sidebar: rgba(255, 255, 255, 0.92); --bg-sidebar: rgba(255, 255, 255, 0.9);
--bg-overlay: rgba(15, 23, 42, 0.3); --bg-overlay: rgba(15, 23, 42, 0.3);
--topbar-bg: rgba(255, 255, 255, 0.85);
--border-primary: #e2e8f0; --border-primary: #e2e8f0;
--border-secondary: #cbd5e1; --border-secondary: #cbd5e1;
--text-primary: #0f172a; --text-primary: #0f172a;
--text-secondary: #475569; --text-secondary: #334155;
--text-tertiary: #94a3b8; --text-tertiary: #64748b;
--text-inverse: #f1f5f9; --text-inverse: #f8fafc;
--accent: hsl(var(--accent-h), var(--accent-s), 42%); --accent: hsl(var(--accent-h), var(--accent-s), 42%);
--accent-hover: hsl(var(--accent-h), var(--accent-s), 35%); --accent-hover: hsl(var(--accent-h), var(--accent-s), 35%);
--accent-muted: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.08); --accent-muted: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.08);
--accent-glow: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.1); --accent-glow: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.15);
--green-muted: rgba(34, 197, 94, 0.08); --green-muted: rgba(16, 185, 129, 0.08);
--amber-muted: rgba(245, 158, 11, 0.08); --amber-muted: rgba(245, 158, 11, 0.08);
--red-muted: rgba(239, 68, 68, 0.06); --red-muted: rgba(239, 68, 68, 0.06);
--blue-muted: rgba(59, 130, 246, 0.08); --blue-muted: rgba(59, 130, 246, 0.08);
--shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05);
--shadow-md: 0 4px 20px -4px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 20px -4px rgba(15, 23, 42, 0.08);
--shadow-lg: 0 12px 40px -8px rgba(15, 23, 42, 0.08); --shadow-lg: 0 12px 40px -8px rgba(15, 23, 42, 0.1);
--shadow-glow: 0 0 30px -5px var(--accent-glow); --shadow-glow: 0 0 30px -5px var(--accent-glow);
} }
/* ── Tailwind v4 Theme Tokens ────────────────── */
@theme { @theme {
--color-bg-base: var(--bg-base); --color-bg-base: var(--bg-base);
--color-bg-primary: var(--bg-primary); --color-bg-primary: var(--bg-primary);
@@ -135,23 +138,19 @@
--color-violet: var(--violet); --color-violet: var(--violet);
--font-sans: var(--font-sans); --font-sans: var(--font-sans);
--font-mono: var(--font-mono);
} }
/* ═══════════════════════════════════════════════ /* ═══════════════════════════════════════════════
Global Resets Base Resets
═══════════════════════════════════════════════ */ ═══════════════════════════════════════════════ */
*, *::before, *::after { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body { body {
font-family: var(--font-sans); font-family: var(--font-sans);
background-color: var(--bg-base); background-color: var(--bg-base);
@@ -162,60 +161,29 @@ body {
transition: background-color var(--transition-normal), color var(--transition-normal); transition: background-color var(--transition-normal), color var(--transition-normal);
} }
/* Scrollbar */ /* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar {
::-webkit-scrollbar-track { background: transparent; } width: 8px;
::-webkit-scrollbar-thumb { background: var(--border-primary); border-radius: var(--radius-full); } height: 8px;
::-webkit-scrollbar-thumb:hover { background: var(--border-secondary); } }
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--border-primary);
border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
background: var(--border-secondary);
}
/* ═══════════════════════════════════════════════ /* ═══════════════════════════════════════════════
Animations App Structure
═══════════════════════════════════════════════ */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse-ring {
0% { transform: scale(0.9); opacity: 0.5; }
100% { transform: scale(1.3); opacity: 0; }
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.animate-fade-in { animation: fadeIn 0.3s ease-out both; }
.animate-slide-up { animation: slideUp 0.4s ease-out both; }
.stagger > * { animation: fadeIn 0.35s ease-out both; }
.stagger > *:nth-child(1) { animation-delay: 30ms; }
.stagger > *:nth-child(2) { animation-delay: 60ms; }
.stagger > *:nth-child(3) { animation-delay: 90ms; }
.stagger > *:nth-child(4) { animation-delay: 120ms; }
.stagger > *:nth-child(5) { animation-delay: 150ms; }
.stagger > *:nth-child(6) { animation-delay: 180ms; }
.stagger > *:nth-child(7) { animation-delay: 210ms; }
.stagger > *:nth-child(8) { animation-delay: 240ms; }
.stagger > *:nth-child(n+9) { animation-delay: 270ms; }
/* ═══════════════════════════════════════════════
Layout Structure
═══════════════════════════════════════════════ */ ═══════════════════════════════════════════════ */
.app-layout { .app-layout {
display: flex; display: flex;
min-height: 100vh; min-height: 100vh;
background: var(--bg-base);
} }
.sidebar { .sidebar {
@@ -223,24 +191,24 @@ body {
left: 0; left: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
width: 272px; width: 280px;
z-index: 50; z-index: 50;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 28px 20px; padding: 32px 24px;
overflow-y: auto;
background: var(--bg-sidebar); background: var(--bg-sidebar);
backdrop-filter: blur(24px) saturate(1.4);
-webkit-backdrop-filter: blur(24px) saturate(1.4);
border-right: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
transition: transform var(--transition-spring), background var(--transition-normal); transition: transform var(--transition-spring), background var(--transition-normal);
} }
.main-content { .main-content {
margin-left: 272px; margin-left: 280px;
flex: 1; flex: 1;
min-height: 100vh; min-height: 100vh;
padding: 36px 48px; padding: 40px 48px;
background-color: var(--bg-base);
transition: margin-left var(--transition-spring); transition: margin-left var(--transition-spring);
} }
@@ -258,21 +226,20 @@ body {
} }
/* ═══════════════════════════════════════════════ /* ═══════════════════════════════════════════════
Nav Items Sidebar Items
═══════════════════════════════════════════════ */ ═══════════════════════════════════════════════ */
.nav-link { .nav-link {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 14px; gap: 12px;
padding: 11px 16px; padding: 10px 16px;
border-radius: var(--radius-md); border-radius: var(--radius-md);
color: var(--text-secondary); color: var(--text-secondary);
text-decoration: none; text-decoration: none;
font-size: 0.9rem; font-size: 0.92rem;
font-weight: 500; font-weight: 500;
transition: all var(--transition-fast); transition: all var(--transition-fast);
position: relative;
} }
.nav-link:hover { .nav-link:hover {
background: var(--accent-muted); background: var(--accent-muted);
@@ -283,20 +250,9 @@ body {
color: var(--accent); color: var(--accent);
font-weight: 600; font-weight: 600;
} }
.nav-link.active::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 20px;
background: var(--accent);
border-radius: 0 var(--radius-full) var(--radius-full) 0;
}
/* ═══════════════════════════════════════════════ /* ═══════════════════════════════════════════════
Card System Cards & Elements
═══════════════════════════════════════════════ */ ═══════════════════════════════════════════════ */
.card { .card {
@@ -313,74 +269,63 @@ body {
cursor: pointer; cursor: pointer;
} }
.card-interactive:hover { .card-interactive:hover {
transform: translateY(-4px); transform: translateY(-2px);
box-shadow: var(--shadow-lg); background: var(--bg-card-hover);
border-color: var(--border-secondary); border-color: var(--border-secondary);
box-shadow: var(--shadow-md);
} }
/* ═══════════════════════════════════════════════
Badges
═══════════════════════════════════════════════ */
.badge { .badge {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 4px;
padding: 3px 10px; padding: 3px 10px;
border-radius: var(--radius-full); border-radius: var(--radius-full);
font-size: 0.68rem; font-size: 0.7rem;
font-weight: 700; font-weight: 700;
letter-spacing: 0.04em; letter-spacing: 0.03em;
text-transform: uppercase; text-transform: uppercase;
} }
.badge-pacman { .badge-pacman {
background: var(--accent-muted); background: var(--accent-muted);
color: var(--accent); color: var(--accent);
border: 1px solid rgba(2, 132, 199, 0.25);
} }
.badge-aur { .badge-aur {
background: var(--amber-muted); background: var(--amber-muted);
color: var(--amber); color: var(--amber);
border: 1px solid rgba(245, 158, 11, 0.25);
} }
.badge-installed { .badge-installed {
background: var(--green-muted); background: var(--green-muted);
color: var(--green); color: var(--green);
border: 1px solid rgba(16, 185, 129, 0.25);
} }
/* ═══════════════════════════════════════════════ /* Buttons */
Buttons
═══════════════════════════════════════════════ */
.btn { .btn {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 8px; gap: 8px;
padding: 10px 22px; padding: 10px 20px;
border-radius: var(--radius-md); border-radius: var(--radius-md);
font-size: 0.85rem; font-size: 0.88rem;
font-weight: 600; font-weight: 600;
font-family: var(--font-sans);
cursor: pointer; cursor: pointer;
border: none; border: none;
transition: all var(--transition-fast); transition: all var(--transition-fast);
white-space: nowrap;
} }
.btn:disabled { .btn:disabled {
opacity: 0.5; opacity: 0.6;
cursor: not-allowed; cursor: not-allowed;
transform: none !important;
box-shadow: none !important;
} }
.btn-primary { .btn-primary {
background: var(--accent); background: var(--accent);
color: white; color: #ffffff;
box-shadow: 0 2px 12px var(--accent-glow);
} }
.btn-primary:hover:not(:disabled) { .btn-primary:hover:not(:disabled) {
background: var(--accent-hover); background: var(--accent-hover);
transform: translateY(-1px);
box-shadow: 0 4px 20px var(--accent-glow);
} }
.btn-secondary { .btn-secondary {
@@ -389,37 +334,32 @@ body {
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
} }
.btn-secondary:hover:not(:disabled) { .btn-secondary:hover:not(:disabled) {
border-color: var(--border-secondary);
background: var(--bg-tertiary); background: var(--bg-tertiary);
border-color: var(--border-secondary);
} }
.btn-danger { .btn-danger {
background: var(--red-muted); background: var(--red-muted);
color: var(--red); color: var(--red);
border: 1px solid rgba(239, 68, 68, 0.2); border: 1px solid rgba(239, 68, 68, 0.3);
} }
.btn-danger:hover:not(:disabled) { .btn-danger:hover:not(:disabled) {
background: rgba(239, 68, 68, 0.15); background: rgba(239, 68, 68, 0.25);
border-color: rgba(239, 68, 68, 0.4);
} }
.btn-ghost { .btn-ghost {
background: transparent; background: transparent;
color: var(--text-secondary); color: var(--text-secondary);
padding: 8px 14px;
} }
.btn-ghost:hover:not(:disabled) { .btn-ghost:hover:not(:disabled) {
background: var(--bg-tertiary); background: var(--bg-secondary);
color: var(--text-primary); color: var(--text-primary);
} }
/* ═══════════════════════════════════════════════ /* Inputs */
Inputs
═══════════════════════════════════════════════ */
.input { .input {
width: 100%; width: 100%;
padding: 11px 16px; padding: 10px 16px;
background: var(--bg-input); background: var(--bg-input);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: var(--radius-md); border-radius: var(--radius-md);
@@ -429,41 +369,36 @@ body {
outline: none; outline: none;
transition: all var(--transition-fast); transition: all var(--transition-fast);
} }
.input::placeholder { color: var(--text-tertiary); } .input::placeholder {
color: var(--text-tertiary);
}
.input:focus { .input:focus {
border-color: var(--accent); border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-glow); box-shadow: 0 0 0 3px var(--accent-glow);
} }
/* ═══════════════════════════════════════════════ /* Typography Helpers */
Typography
═══════════════════════════════════════════════ */
.page-title { .page-title {
font-size: 1.75rem; font-size: 1.8rem;
font-weight: 800; font-weight: 800;
letter-spacing: -0.03em; letter-spacing: -0.02em;
color: var(--text-primary); color: var(--text-primary);
line-height: 1.2;
} }
.page-subtitle { .page-subtitle {
font-size: 0.95rem; font-size: 0.95rem;
color: var(--text-secondary); color: var(--text-tertiary);
margin-top: 4px;
} }
/* ═══════════════════════════════════════════════ /* Layout Grids */
Grids
═══════════════════════════════════════════════ */
.pkg-grid { .pkg-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 20px; gap: 16px;
}
@media (max-width: 640px) {
.pkg-grid {
grid-template-columns: 1fr;
} }
@media (max-width: 720px) {
.pkg-grid { grid-template-columns: 1fr; }
} }
.cat-grid { .cat-grid {
@@ -472,38 +407,33 @@ body {
gap: 16px; gap: 16px;
} }
/* ═══════════════════════════════════════════════ /* Shimmer Loader */
Utility Components
═══════════════════════════════════════════════ */
.shimmer { .shimmer {
background: linear-gradient(90deg, background: linear-gradient(90deg,
var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%); var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%);
background-size: 200% 100%; background-size: 200% 100%;
animation: shimmer 1.5s infinite; animation: shimmer-anim 1.5s infinite;
border-radius: var(--radius-md); border-radius: var(--radius-md);
} }
@keyframes shimmer-anim {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.spinner { .spinner {
width: 28px; height: 28px; width: 28px;
height: 28px;
border: 3px solid var(--border-primary); border: 3px solid var(--border-primary);
border-top-color: var(--accent); border-top-color: var(--accent);
border-radius: 50%; border-radius: 50%;
animation: spin 0.7s linear infinite; animation: spin-anim 0.8s linear infinite;
}
@keyframes spin-anim {
to { transform: rotate(360deg); }
} }
.divider { /* Theme Toggle Button */
height: 1px;
background: var(--border-primary);
border: none;
}
/* ═══════════════════════════════════════════════
Theme Toggle
═══════════════════════════════════════════════ */
.theme-toggle { .theme-toggle {
position: relative;
width: 40px; width: 40px;
height: 40px; height: 40px;
border-radius: var(--radius-md); border-radius: var(--radius-md);
@@ -521,23 +451,3 @@ body {
color: var(--text-primary); color: var(--text-primary);
background: var(--bg-tertiary); background: var(--bg-tertiary);
} }
/* ═══════════════════════════════════════════════
Decorative
═══════════════════════════════════════════════ */
.gradient-text {
background: linear-gradient(135deg, var(--accent), var(--violet));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.glow-ring {
position: absolute;
border-radius: 50%;
background: var(--accent);
opacity: 0.06;
filter: blur(60px);
pointer-events: none;
}
frontend/src/layouts/MainLayout.jsx
+5 -3
View File
@@ -42,8 +42,9 @@ export default function MainLayout() {
<Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} /> <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
<main className="main-content"> <main className="main-content">
<div className="content-shell">
{/* ── Top Bar ── */} {/* ── Top Bar ── */}
<header className="flex items-center gap-3 mb-10"> <header className="topbar">
{/* Mobile menu */} {/* Mobile menu */}
<button <button
id="menu-toggle" id="menu-toggle"
@@ -55,7 +56,7 @@ export default function MainLayout() {
</button> </button>
{/* Search */} {/* Search */}
<div className="flex-1"> <div className="topbar-search">
<SearchBar onSearch={handleSearch} /> <SearchBar onSearch={handleSearch} />
</div> </div>
@@ -71,9 +72,10 @@ export default function MainLayout() {
</header> </header>
{/* ── Page ── */} {/* ── Page ── */}
<div className="animate-fade-in"> <div className="page-shell animate-fade-in">
<Outlet /> <Outlet />
</div> </div>
</div>
</main> </main>
</div> </div>
); );
frontend/src/pages/Updates.jsx
+1 -3
View File
@@ -95,12 +95,10 @@ export default function Updates() {
<div className="card overflow-hidden"> <div className="card overflow-hidden">
{updates.map((u, i) => ( {updates.map((u, i) => (
<div key={`${u.source}-${u.name}`} <div key={`${u.source}-${u.name}`}
className="flex items-center justify-between px-5 py-4 transition-colors" className="update-row"
style={{ style={{
borderBottom: i < updates.length - 1 ? '1px solid var(--border-primary)' : 'none', borderBottom: i < updates.length - 1 ? '1px solid var(--border-primary)' : 'none',
}} }}
onMouseEnter={(e) => e.currentTarget.style.background = 'var(--bg-card-hover)'}
onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
> >
<div> <div>
<div className="flex items-center gap-2 mb-1"> <div className="flex items-center gap-2 mb-1">