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
+41 -35
View File
@@ -1,5 +1,5 @@
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 }) {
const navigate = useNavigate();
@@ -9,55 +9,61 @@ export default function PackageCard({ pkg }) {
return (
<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}`)}
role="button"
tabIndex={0}
onKeyDown={(e) => e.key === 'Enter' && navigate(`/package/${pkg.name}`)}
>
{/* Top row: name + badge */}
<div className="flex items-start justify-between gap-3">
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2">
<h3 className="font-semibold truncate" style={{ color: 'var(--text-primary)', fontSize: '0.95rem' }}>
{pkg.name}
</h3>
{pkg.installed && <CheckCircle size={14} style={{ color: 'var(--green)', flexShrink: 0 }} />}
{pkg.out_of_date && <AlertTriangle size={14} style={{ color: 'var(--amber)', flexShrink: 0 }} />}
<div className="flex flex-col gap-2">
{/* Top: Name and badges */}
<div className="flex items-start justify-between gap-3">
<div className="min-w-0 flex-1">
<div className="flex items-center gap-1.5 flex-wrap">
<h3 className="font-bold text-sm tracking-tight truncate" style={{ color: 'var(--text-primary)' }}>
{pkg.name}
</h3>
{pkg.installed && <CheckCircle size={13} className="text-emerald-500 shrink-0" />}
{pkg.out_of_date && <AlertTriangle size={13} className="text-amber-500 shrink-0" />}
</div>
<span className="text-[11px] font-mono font-medium" style={{ color: 'var(--text-tertiary)' }}>
{pkg.version || '—'}
</span>
</div>
<span className="text-xs font-mono" style={{ color: 'var(--text-tertiary)' }}>
{pkg.version || '—'}
</span>
<span className={`badge ${sourceBadge} shrink-0`}>{sourceLabel}</span>
</div>
<span className={`badge ${sourceBadge}`}>{sourceLabel}</span>
{/* Mid: Description */}
<p className={`text-xs leading-relaxed ${!pkg.description ? 'italic' : ''}`}
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'}
</p>
</div>
{/* Description */}
<p className="text-sm leading-relaxed flex-1"
style={{ color: 'var(--text-secondary)', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
{pkg.description || 'No description available'}
</p>
{/* Footer */}
<div className="flex items-center justify-between pt-1"
style={{ borderTop: '1px solid var(--border-primary)', marginTop: 'auto' }}>
<div className="flex items-center gap-3 text-xs" style={{ color: 'var(--text-tertiary)' }}>
{pkg.votes !== undefined && (
{/* Bottom: Stats & Action */}
<div className="flex items-center justify-between pt-3 mt-1"
style={{ borderTop: '1px solid var(--border-primary)' }}>
<div className="flex items-center gap-3 text-[11px] font-medium" style={{ color: 'var(--text-tertiary)' }}>
{pkg.votes !== undefined && pkg.votes > 0 && (
<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>
)}
{pkg.popularity > 0 && (
<span>{pkg.popularity.toFixed(2)}</span>
<span>Pop: {pkg.popularity.toFixed(1)}</span>
)}
</div>
{pkg.installed ? (
<span className="badge badge-installed">Installed</span>
) : (
<span className="flex items-center gap-1 text-xs font-semibold" style={{ color: 'var(--accent)' }}>
<ArrowDownToLine size={13} /> Get
</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>
</div>
</div>
);
frontend/src/components/SearchBar.jsx
+2 -2
View File
@@ -10,7 +10,7 @@ export default function SearchBar({ onSearch, initialQuery = '' }) {
}, [query, onSearch]);
return (
<form onSubmit={handleSubmit} className="w-full max-w-xl relative">
<form onSubmit={handleSubmit} className="searchbar">
<Search
size={17}
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
id="search-input"
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' }}
placeholder="Search packages..."
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";
/* ═══════════════════════════════════════════════
@@ -5,25 +6,26 @@
Dark & Light theme with CSS custom properties
═══════════════════════════════════════════════ */
/* ── Dark Mode (Default) ─────────────────────── */
:root {
--bg-base: #07090f;
--bg-primary: #0c1018;
--bg-secondary: #111827;
--bg-tertiary: #1a2235;
--bg-card: #111827;
--bg-card-hover: #162036;
--bg-elevated: #1e293b;
--bg-input: #0f172a;
--bg-sidebar: rgba(11, 15, 25, 0.92);
--bg-overlay: rgba(0, 0, 0, 0.6);
/* Default: Dark Theme */
--bg-base: #080c14;
--bg-primary: #0e1420;
--bg-secondary: #151d30;
--bg-tertiary: #1b263f;
--bg-card: #0e1420;
--bg-card-hover: #151d30;
--bg-elevated: #1b263f;
--bg-input: #080c14;
--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-secondary: #334155;
--border-primary: #1b263f;
--border-secondary: #2c3b5e;
--text-primary: #f1f5f9;
--text-secondary: #94a3b8;
--text-tertiary: #64748b;
--text-primary: #f8fafc;
--text-secondary: #cbd5e1;
--text-tertiary: #94a3b8;
--text-inverse: #0f172a;
--accent-h: 199;
@@ -32,16 +34,16 @@
--accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
--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-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-muted: rgba(34, 197, 94, 0.12);
--green: #10b981;
--green-muted: rgba(16, 185, 129, 0.15);
--amber: #f59e0b;
--amber-muted: rgba(245, 158, 11, 0.12);
--amber-muted: rgba(245, 158, 11, 0.15);
--red: #ef4444;
--red-muted: rgba(239, 68, 68, 0.1);
--red-muted: rgba(239, 68, 68, 0.15);
--blue: #3b82f6;
--blue-muted: rgba(59, 130, 246, 0.12);
--blue-muted: rgba(59, 130, 246, 0.15);
--violet: #8b5cf6;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
@@ -55,14 +57,15 @@
--radius-xl: 24px;
--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-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-spring: 350ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* ── Light Mode ──────────────────────────────── */
.light {
/* Light Theme */
--bg-base: #f8fafc;
--bg-primary: #f1f5f9;
--bg-secondary: #ffffff;
@@ -71,34 +74,34 @@
--bg-card-hover: #f8fafc;
--bg-elevated: #ffffff;
--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);
--topbar-bg: rgba(255, 255, 255, 0.85);
--border-primary: #e2e8f0;
--border-secondary: #cbd5e1;
--text-primary: #0f172a;
--text-secondary: #475569;
--text-tertiary: #94a3b8;
--text-inverse: #f1f5f9;
--text-secondary: #334155;
--text-tertiary: #64748b;
--text-inverse: #f8fafc;
--accent: hsl(var(--accent-h), var(--accent-s), 42%);
--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-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);
--red-muted: rgba(239, 68, 68, 0.06);
--blue-muted: rgba(59, 130, 246, 0.08);
--shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.04);
--shadow-md: 0 4px 20px -4px rgba(15, 23, 42, 0.06);
--shadow-lg: 0 12px 40px -8px rgba(15, 23, 42, 0.08);
--shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05);
--shadow-md: 0 4px 20px -4px 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);
}
/* ── Tailwind v4 Theme Tokens ────────────────── */
@theme {
--color-bg-base: var(--bg-base);
--color-bg-primary: var(--bg-primary);
@@ -135,23 +138,19 @@
--color-violet: var(--violet);
--font-sans: var(--font-sans);
--font-mono: var(--font-mono);
}
/* ═══════════════════════════════════════════════
Global Resets
Base Resets
═══════════════════════════════════════════════ */
*, *::before, *::after {
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-sans);
background-color: var(--bg-base);
@@ -162,60 +161,29 @@ body {
transition: background-color var(--transition-normal), color var(--transition-normal);
}
/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-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); }
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-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
═══════════════════════════════════════════════ */
@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 Structure
═══════════════════════════════════════════════ */
.app-layout {
display: flex;
min-height: 100vh;
background: var(--bg-base);
}
.sidebar {
@@ -223,24 +191,24 @@ body {
left: 0;
top: 0;
bottom: 0;
width: 272px;
width: 280px;
z-index: 50;
display: flex;
flex-direction: column;
padding: 28px 20px;
overflow-y: auto;
padding: 32px 24px;
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);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
transition: transform var(--transition-spring), background var(--transition-normal);
}
.main-content {
margin-left: 272px;
margin-left: 280px;
flex: 1;
min-height: 100vh;
padding: 36px 48px;
padding: 40px 48px;
background-color: var(--bg-base);
transition: margin-left var(--transition-spring);
}
@@ -258,21 +226,20 @@ body {
}
/* ═══════════════════════════════════════════════
Nav Items
Sidebar Items
═══════════════════════════════════════════════ */
.nav-link {
display: flex;
align-items: center;
gap: 14px;
padding: 11px 16px;
gap: 12px;
padding: 10px 16px;
border-radius: var(--radius-md);
color: var(--text-secondary);
text-decoration: none;
font-size: 0.9rem;
font-size: 0.92rem;
font-weight: 500;
transition: all var(--transition-fast);
position: relative;
}
.nav-link:hover {
background: var(--accent-muted);
@@ -283,20 +250,9 @@ body {
color: var(--accent);
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 {
@@ -313,74 +269,63 @@ body {
cursor: pointer;
}
.card-interactive:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
background: var(--bg-card-hover);
border-color: var(--border-secondary);
box-shadow: var(--shadow-md);
}
/* ═══════════════════════════════════════════════
Badges
═══════════════════════════════════════════════ */
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: var(--radius-full);
font-size: 0.68rem;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.04em;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.badge-pacman {
background: var(--accent-muted);
color: var(--accent);
border: 1px solid rgba(2, 132, 199, 0.25);
}
.badge-aur {
background: var(--amber-muted);
color: var(--amber);
border: 1px solid rgba(245, 158, 11, 0.25);
}
.badge-installed {
background: var(--green-muted);
color: var(--green);
border: 1px solid rgba(16, 185, 129, 0.25);
}
/* ═══════════════════════════════════════════════
Buttons
═══════════════════════════════════════════════ */
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 22px;
padding: 10px 20px;
border-radius: var(--radius-md);
font-size: 0.85rem;
font-size: 0.88rem;
font-weight: 600;
font-family: var(--font-sans);
cursor: pointer;
border: none;
transition: all var(--transition-fast);
white-space: nowrap;
}
.btn:disabled {
opacity: 0.5;
opacity: 0.6;
cursor: not-allowed;
transform: none !important;
box-shadow: none !important;
}
.btn-primary {
background: var(--accent);
color: white;
box-shadow: 0 2px 12px var(--accent-glow);
color: #ffffff;
}
.btn-primary:hover:not(:disabled) {
background: var(--accent-hover);
transform: translateY(-1px);
box-shadow: 0 4px 20px var(--accent-glow);
}
.btn-secondary {
@@ -389,37 +334,32 @@ body {
border: 1px solid var(--border-primary);
}
.btn-secondary:hover:not(:disabled) {
border-color: var(--border-secondary);
background: var(--bg-tertiary);
border-color: var(--border-secondary);
}
.btn-danger {
background: var(--red-muted);
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) {
background: rgba(239, 68, 68, 0.15);
border-color: rgba(239, 68, 68, 0.4);
background: rgba(239, 68, 68, 0.25);
}
.btn-ghost {
background: transparent;
color: var(--text-secondary);
padding: 8px 14px;
}
.btn-ghost:hover:not(:disabled) {
background: var(--bg-tertiary);
background: var(--bg-secondary);
color: var(--text-primary);
}
/* ═══════════════════════════════════════════════
Inputs
═══════════════════════════════════════════════ */
/* Inputs */
.input {
width: 100%;
padding: 11px 16px;
padding: 10px 16px;
background: var(--bg-input);
border: 1px solid var(--border-primary);
border-radius: var(--radius-md);
@@ -429,41 +369,36 @@ body {
outline: none;
transition: all var(--transition-fast);
}
.input::placeholder { color: var(--text-tertiary); }
.input::placeholder {
color: var(--text-tertiary);
}
.input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-glow);
}
/* ═══════════════════════════════════════════════
Typography
═══════════════════════════════════════════════ */
/* Typography Helpers */
.page-title {
font-size: 1.75rem;
font-size: 1.8rem;
font-weight: 800;
letter-spacing: -0.03em;
letter-spacing: -0.02em;
color: var(--text-primary);
line-height: 1.2;
}
.page-subtitle {
font-size: 0.95rem;
color: var(--text-secondary);
margin-top: 4px;
color: var(--text-tertiary);
}
/* ═══════════════════════════════════════════════
Grids
═══════════════════════════════════════════════ */
/* Layout Grids */
.pkg-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 16px;
}
@media (max-width: 720px) {
.pkg-grid { grid-template-columns: 1fr; }
@media (max-width: 640px) {
.pkg-grid {
grid-template-columns: 1fr;
}
}
.cat-grid {
@@ -472,38 +407,33 @@ body {
gap: 16px;
}
/* ═══════════════════════════════════════════════
Utility Components
═══════════════════════════════════════════════ */
/* Shimmer Loader */
.shimmer {
background: linear-gradient(90deg,
var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
animation: shimmer-anim 1.5s infinite;
border-radius: var(--radius-md);
}
@keyframes shimmer-anim {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.spinner {
width: 28px; height: 28px;
width: 28px;
height: 28px;
border: 3px solid var(--border-primary);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 0.7s linear infinite;
animation: spin-anim 0.8s linear infinite;
}
@keyframes spin-anim {
to { transform: rotate(360deg); }
}
.divider {
height: 1px;
background: var(--border-primary);
border: none;
}
/* ═══════════════════════════════════════════════
Theme Toggle
═══════════════════════════════════════════════ */
/* Theme Toggle Button */
.theme-toggle {
position: relative;
width: 40px;
height: 40px;
border-radius: var(--radius-md);
@@ -521,23 +451,3 @@ body {
color: var(--text-primary);
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
+31 -29
View File
@@ -42,37 +42,39 @@ export default function MainLayout() {
<Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
<main className="main-content">
{/* ── Top Bar ── */}
<header className="flex items-center gap-3 mb-10">
{/* Mobile menu */}
<button
id="menu-toggle"
className="btn-ghost lg:hidden !p-2.5 rounded-xl"
onClick={() => setSidebarOpen(!sidebarOpen)}
aria-label="Toggle menu"
>
{sidebarOpen ? <X size={20} /> : <Menu size={20} />}
</button>
<div className="content-shell">
{/* ── Top Bar ── */}
<header className="topbar">
{/* Mobile menu */}
<button
id="menu-toggle"
className="btn-ghost lg:hidden !p-2.5 rounded-xl"
onClick={() => setSidebarOpen(!sidebarOpen)}
aria-label="Toggle menu"
>
{sidebarOpen ? <X size={20} /> : <Menu size={20} />}
</button>
{/* Search */}
<div className="flex-1">
<SearchBar onSearch={handleSearch} />
{/* Search */}
<div className="topbar-search">
<SearchBar onSearch={handleSearch} />
</div>
{/* Theme toggle */}
<button
onClick={toggleTheme}
className="theme-toggle"
aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
>
{theme === 'dark' ? <Sun size={18} /> : <Moon size={18} />}
</button>
</header>
{/* ── Page ── */}
<div className="page-shell animate-fade-in">
<Outlet />
</div>
{/* Theme toggle */}
<button
onClick={toggleTheme}
className="theme-toggle"
aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
>
{theme === 'dark' ? <Sun size={18} /> : <Moon size={18} />}
</button>
</header>
{/* ── Page ── */}
<div className="animate-fade-in">
<Outlet />
</div>
</main>
</div>
frontend/src/pages/Updates.jsx
+1 -3
View File
@@ -95,12 +95,10 @@ export default function Updates() {
<div className="card overflow-hidden">
{updates.map((u, i) => (
<div key={`${u.source}-${u.name}`}
className="flex items-center justify-between px-5 py-4 transition-colors"
className="update-row"
style={{
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 className="flex items-center gap-2 mb-1">