Apply La Huasca brand colors across layout, nav, login, admin, user and home

src/app/admin/page.tsx

@@ -10,6 +10,10 @@ interface ImageRecord {
   uploaded_at: string;
 }
 
+const gold = '#E8A849';
+const navy = '#010D1E';
+const warm = '#a6683c';
+
 export default function AdminPage() {
   const router = useRouter();
   const [images, setImages] = useState<ImageRecord[]>([]);
@@ -73,25 +77,47 @@ export default function AdminPage() {
     }
   };
 
-  if (loading) return <main style={{ padding: '2rem' }}><p>Loading...</p></main>;
+  if (loading) {
+    return (
+      <main style={{ padding: '2rem', color: warm, fontSize: '18px' }}>
+        <p>Loading gallery...</p>
+      </main>
+    );
+  }
 
   return (
-    <main style={{ padding: '2rem' }}>
-      <h1>Admin Portal</h1>
-      <p>Total uploaded images: <strong>{count}</strong></p>
-      {error && <p style={{ color: 'crimson' }}>{error}</p>}
+    <main style={{ padding: '2rem', maxWidth: '72rem', margin: '0 auto' }}>
+      <h1 style={{ fontSize: 'clamp(28px, 4vw, 42px)', fontWeight: 400, fontStyle: 'italic', color: navy, margin: '0 0 0.5rem' }}>
+        Admin Portal
+      </h1>
+      <p style={{ color: '#555', marginBottom: '1.5rem' }}>
+        Total uploaded images: <strong style={{ color: warm }}>{count}</strong>
+      </p>
+      {error && <p style={{ color: '#c23b22', marginBottom: '1rem' }}>{error}</p>}
       <label
         style={{
-          display: 'inline-block',
-          padding: '0.75rem 1rem',
-          background: '#1a1a1a',
-          color: '#fff',
-          borderRadius: '4px',
+          display: 'inline-flex',
+          alignItems: 'center',
+          gap: '0.5rem',
+          padding: '0.75rem 1.25rem',
+          background: gold,
+          color: navy,
+          borderRadius: '999px',
           cursor: 'pointer',
-          marginBottom: '1rem',
+          fontWeight: 600,
+          marginBottom: '1.5rem',
+          transition: 'transform .12s, box-shadow .15s',
+        }}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.transform = 'translateY(-1px)';
+          e.currentTarget.style.boxShadow = '0 6px 18px rgba(232,168,73,0.35)';
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.transform = 'translateY(0)';
+          e.currentTarget.style.boxShadow = 'none';
         }}
       >
-        Upload images
+        + Upload images
         <input
           type="file"
           accept="image/*"
@@ -101,39 +127,51 @@ export default function AdminPage() {
         />
       </label>
       {images.length === 0 ? (
-        <p style={{ color: 'dimgray' }}>No images uploaded yet.</p>
+        <p style={{ color: '#777' }}>No images uploaded yet.</p>
       ) : (
         <div
           style={{
             display: 'grid',
-            gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))',
-            gap: '1rem',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+            gap: '1.25rem',
           }}
         >
           {images.map((img) => (
             <div
               key={img.id}
               style={{
-                border: '1px solid #ddd',
-                borderRadius: '8px',
+                borderRadius: '16px',
                 overflow: 'hidden',
                 display: 'flex',
                 flexDirection: 'column',
+                background: '#f5f0e8',
+                boxShadow: '0 1px 2px rgba(1,13,30,0.08)',
+                transition: 'transform .2s, box-shadow .2s',
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.transform = 'translateY(-2px)';
+                e.currentTarget.style.boxShadow = '0 6px 18px rgba(14,47,71,0.16)';
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.transform = 'translateY(0)';
+                e.currentTarget.style.boxShadow = '0 1px 2px rgba(1,13,30,0.08)';
               }}
             >
               <img
                 src={img.data}
                 alt={img.filename}
-                style={{ width: '100%', height: '160px', objectFit: 'cover' }}
+                style={{ width: '100%', height: '180px', objectFit: 'cover' }}
               />
               <button
                 onClick={() => handleDelete(img.id)}
                 style={{
-                  padding: '0.5rem',
-                  background: 'crimson',
+                  padding: '0.65rem',
+                  background: '#c23b22',
                   color: '#fff',
                   border: 'none',
                   cursor: 'pointer',
+                  fontSize: '14px',
+                  fontWeight: 600,
                 }}
               >
                 Delete