Upload folder using huggingface_hub

client/src/components/HitokotoBar.tsx

@@ -60,18 +60,18 @@ const HitokotoBar: React.FC = () => {
   if (hidden) return null;
 
   return (
-    <div className="fixed bottom-0 left-0 right-0 z-50">
-      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pb-3">
-        <div className="bg-white border border-gray-200 shadow-md rounded-lg px-4 py-2 flex items-center justify-between">
+    <div className="fixed bottom-0 right-0 z-50 w-[calc(100%-240px)] md:w-[calc(100%-240px)]">
+      <div className="ml-auto max-w-7xl px-4 sm:px-6 lg:px-8 pb-3">
+        <div className="bg-white border border-ui-bg shadow-md rounded-lg px-4 py-2 flex items-center justify-between">
           <div className="flex items-center min-w-0">
-            <span className="mr-2 text-indigo-600">💬</span>
+            <span className="mr-2 text-ui-navy">💬</span>
             <div className="min-w-0">
               {loading ? (
-                <div className="text-sm text-gray-600">Loading…</div>
+                <div className="text-sm text-ui-navy/70">Loading…</div>
               ) : error ? (
                 <div className="text-sm text-red-600">{error}</div>
               ) : (
-                <div className="text-sm text-gray-800 truncate">
+                <div className="text-sm text-ui-navy truncate">
                   {quote ? `『${quote.hitokoto}』 — ${quote.from_who || quote.from || 'Hitokoto'}` : ' '}
                 </div>
               )}
@@ -80,14 +80,14 @@ const HitokotoBar: React.FC = () => {
           <div className="flex items-center space-x-2 flex-shrink-0">
             <button
               onClick={fetchQuote}
-              className="text-xs px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-700"
+              className="text-xs px-2 py-1 rounded bg-ui-bg hover:bg-white border border-ui-bg text-ui-navy"
               title="Next quote"
             >
               Next
             </button>
             <button
               onClick={() => { setHidden(true); localStorage.setItem(LOCAL_HIDE_KEY, '1'); }}
-              className="text-xs px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-700"
+              className="text-xs px-2 py-1 rounded bg-ui-bg hover:bg-white border border-ui-bg text-ui-navy"
               title="Hide"
             >
               Hide

client/src/components/Layout.tsx

@@ -8,8 +8,6 @@ import {
   WrenchScrewdriverIcon,
   UserIcon,
   ArrowRightOnRectangleIcon,
-  MagnifyingGlassIcon,
-  UserCircleIcon,
   PowerIcon
 } from '@heroicons/react/24/outline';
 import HitokotoBar from './HitokotoBar';
@@ -137,9 +135,11 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   }, [user?.role]);
 
   const handleLogout = () => {
-    localStorage.removeItem('token');
-    localStorage.removeItem('user');
-    window.location.href = '/';
+    try {
+      localStorage.removeItem('token');
+      localStorage.removeItem('user');
+    } catch {}
+    window.location.href = '/login';
   };
 
   let navigation = [
@@ -163,46 +163,19 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   }
 
   return (
-    <div className="min-h-screen bg-antique text-eclipse">
-      {/* Top Bar (search + user profile) */}
-      <header className="sticky top-0 z-40 bg-white/80 backdrop-blur border-b border-primrose">
+    <div className="min-h-screen bg-ui-bg text-ui-navy">
+      {/* Top Bar */}
+      <header className="sticky top-0 z-40 bg-white/80 backdrop-blur border-b border-ui-bg">
         <div className="px-4 sm:px-6 lg:px-8 h-14 flex items-center justify-between">
-          <Link to="/dashboard" className="text-lg font-bold text-lyons">TransHub</Link>
-          <div className="flex-1 mx-4 hidden md:block">
-            <form
-              onSubmit={(e) => {
-                e.preventDefault();
-                const form = e.currentTarget as HTMLFormElement;
-                const input = form.querySelector('input[name="q"]') as HTMLInputElement | null;
-                const q = (input?.value || '').trim();
-                const target = q ? `/search?q=${encodeURIComponent(q)}` : '/search';
-                window.location.href = target;
-              }}
-            >
-              <div className="relative">
-                <MagnifyingGlassIcon className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-eclipse/50" />
-                <input
-                  name="q"
-                  type="search"
-                  placeholder="Search…"
-                  className="w-full pl-10 pr-3 py-2 rounded-lg border border-primrose/60 bg-white placeholder-eclipse/40 focus:outline-none focus:ring-2 focus:ring-lyons"
-                />
-              </div>
-            </form>
-          </div>
-          <div className="flex items-center space-x-3">
-            <div className="hidden sm:flex items-center">
-              <UserCircleIcon className="h-7 w-7 text-lyons" />
-              {user && <span className="ml-2 text-sm font-medium">{user.name}</span>}
-            </div>
-          </div>
+          <Link to="/dashboard" className="text-lg font-bold text-ui-navy">TransHub</Link>
+          <div />
         </div>
       </header>
 
       {/* Shell: Sidebar + Content */}
       <div className="flex">
         {/* Sidebar */}
-        <aside className="hidden md:flex md:flex-col w-60 min-h-[calc(100vh-56px)] border-r border-primrose bg-white">
+        <aside className="hidden md:flex md:flex-col w-60 min-h-[calc(100vh-56px)] border-r border-ui-bg bg-white">
           <nav className="p-3 space-y-1 flex-1">
             {navigation.map((item) => {
               const isActive = location.pathname === item.href;
@@ -211,7 +184,7 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
                   key={item.name}
                   to={item.href}
                   className={`flex items-center px-3 py-2 rounded-md text-sm font-medium transition-colors ${
-                    isActive ? 'bg-primrose text-eclipse' : 'text-eclipse/80 hover:bg-primrose/60'
+                    isActive ? 'bg-white text-ui-navy shadow-sm' : 'text-ui-navy/80 hover:bg-ui-bg'
                   }`}
                 >
                   <item.icon className="h-4 w-4 mr-2" />
@@ -220,14 +193,14 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
               );
             })}
           </nav>
-          <div className="p-3 border-t border-primrose">
+          <div className="p-3 border-t border-ui-bg">
             {user ? (
-              <button onClick={handleLogout} className="w-full flex items-center justify-start px-3 py-2 rounded-md text-sm font-medium text-eclipse/80 hover:bg-primrose/60">
+              <button onClick={handleLogout} className="w-full flex items-center justify-start px-3 py-2 rounded-md text-sm font-medium text-ui-navy/80 hover:bg-ui-bg">
                 <PowerIcon className="h-4 w-4 mr-2" />
                 Log Out
               </button>
             ) : (
-              <Link to="/login" className="w-full flex items-center justify-start px-3 py-2 rounded-md text-sm font-medium text-eclipse/80 hover:bg-primrose/60">
+              <Link to="/login" className="w-full flex items-center justify-start px-3 py-2 rounded-md text-sm font-medium text-ui-navy/80 hover:bg-ui-bg">
                 <PowerIcon className="h-4 w-4 mr-2" />
                 Log In
               </Link>
@@ -245,8 +218,8 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
       {isTransitioning && (
         <div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50">
           <div className="bg-white rounded-lg shadow-lg p-4 flex items-center space-x-3">
-            <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-lyons"></div>
-            <span className="text-eclipse font-medium">Loading...</span>
+            <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-ui-navy"></div>
+            <span className="text-ui-navy font-medium">Loading...</span>
           </div>
         </div>
       )}

client/src/index.css

@@ -7,29 +7,29 @@
     font-family: 'Inter', system-ui, sans-serif;
   }
   body {
-    @apply bg-antique text-eclipse;
+    @apply bg-ui-bg text-ui-navy;
   }
 }
 
 @layer components {
   .btn-primary {
-    @apply bg-lyons hover:bg-lyons/90 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
+    @apply bg-ui-navy hover:bg-ui-navy/90 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
   }
   
   .btn-secondary {
-    @apply bg-primrose hover:bg-primrose/80 text-eclipse font-medium py-2 px-4 rounded-lg transition-colors duration-200;
+    @apply bg-white hover:bg-ui-bg text-ui-navy font-medium py-2 px-4 rounded-lg border border-ui-bg transition-colors duration-200;
   }
   
   .btn-danger {
-    @apply bg-chili hover:bg-chili/90 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
+    @apply bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
   }
   
   .input-field {
-    @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-lyons focus:border-transparent;
+    @apply w-full px-3 py-2 border border-ui-bg rounded-lg focus:outline-none focus:ring-2 focus:ring-ui-navy focus:border-transparent;
   }
   
   .card {
-    @apply bg-white rounded-lg shadow-md border border-gray-200 p-6;
+    @apply bg-white rounded-xl shadow-sm border border-ui-bg p-6;
   }
   
   .highlight-cultural {
@@ -37,7 +37,7 @@
   }
   
   .text-gradient {
-    @apply bg-gradient-to-r from-lyons to-damson bg-clip-text text-transparent;
+    @apply bg-gradient-to-r from-ui-navy to-ui-teal bg-clip-text text-transparent;
   }
   
   .font-smiley {

client/src/pages/Dashboard.tsx

@@ -113,15 +113,15 @@ const Dashboard: React.FC = () => {
         <div className="mb-8">
           <div className="flex items-center justify-between">
             <div>
-              <h1 className="text-3xl font-bold text-damson">{getGreeting()}</h1>
-              <p className="text-eclipse/70 mt-2">
+              <h1 className="text-3xl font-bold text-ui-navy">{getGreeting()}</h1>
+              <p className="text-ui-navy/70 mt-2">
                 Ready to practice your translation skills?
               </p>
             </div>
             <div className="flex items-center space-x-3">
-              <span className="text-sm text-eclipse/70">{getRoleDisplay()}</span>
+              <span className="text-sm text-ui-navy/70">{getRoleDisplay()}</span>
               {user.role === 'admin' && (
-                <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primrose text-eclipse border border-eclipse/10">
+                <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-ui-gold/20 text-ui-navy border border-ui-bg">
                   Admin
                 </span>
               )}
@@ -131,21 +131,21 @@ const Dashboard: React.FC = () => {
 
         {/* Quick Actions */}
         <div className="mb-8">
-          <h2 className="text-lg font-semibold text-damson mb-4">Quick Actions</h2>
+          <h2 className="text-lg font-semibold text-ui-navy mb-4">Quick Actions</h2>
           <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
             {actionsToShow.map((action) => (
               <Link
                 key={action.name}
                 to={action.href}
-                className="bg-white rounded-xl shadow-sm border border-primrose/60 p-6 hover:shadow-md hover:border-primrose transition"
+                className="bg-white rounded-xl shadow-sm border border-ui-bg p-6 hover:shadow-md hover:border-ui-bg transition"
               >
                 <div className="flex items-center">
-                  <div className={`p-3 rounded-lg bg-lyons`}>
+                  <div className={`p-3 rounded-lg bg-ui-teal`}>
                     <action.icon className="h-6 w-6 text-white" />
                   </div>
                   <div className="ml-4">
-                    <h3 className="text-lg font-medium text-eclipse">{action.name}</h3>
-                    <p className="text-eclipse/70">{action.description}</p>
+                    <h3 className="text-lg font-medium text-ui-navy">{action.name}</h3>
+                    <p className="text-ui-navy/70">{action.description}</p>
                   </div>
                 </div>
               </Link>
@@ -176,23 +176,23 @@ const Dashboard: React.FC = () => {
         )}
 
         {/* Overview */}
-        <div className="bg-white rounded-xl shadow-sm border border-primrose/60 p-6">
+        <div className="bg-white rounded-xl shadow-sm border border-ui-bg p-6">
           <div className="flex items-center mb-4">
-            <ChartBarIcon className="h-6 w-6 text-lyons mr-3" />
-            <h3 className="text-lg font-semibold text-damson">Course Overview</h3>
+            <ChartBarIcon className="h-6 w-6 text-ui-navy mr-3" />
+            <h3 className="text-lg font-semibold text-ui-navy">Course Overview</h3>
           </div>
           <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
             <div className="text-center">
-              <div className="text-2xl font-bold text-lyons">6</div>
-              <div className="text-sm text-eclipse/70">Weeks</div>
+              <div className="text-2xl font-bold text-ui-navy">6</div>
+              <div className="text-sm text-ui-navy/70">Weeks</div>
             </div>
             <div className="text-center">
-              <div className="text-2xl font-bold text-lyons">2</div>
-              <div className="text-sm text-eclipse/70">Task Types</div>
+              <div className="text-2xl font-bold text-ui-navy">2</div>
+              <div className="text-sm text-ui-navy/70">Task Types</div>
             </div>
             <div className="text-center">
-              <div className="text-2xl font-bold text-damson">Voting</div>
-              <div className="text-sm text-eclipse/70">Peer Review</div>
+              <div className="text-2xl font-bold text-ui-navy">Voting</div>
+              <div className="text-sm text-ui-navy/70">Peer Review</div>
             </div>
           </div>
         </div>

client/tailwind.config.js

@@ -6,13 +6,13 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        // Pantone-inspired palette approximations
-        antique: '#FAEBD7', // Antique White 11-0105 TCX
-        lyons: '#0B5F73',   // Lyons Blue 19-4340 TCX (approx)
-        primrose: '#F2D7DD', // Primrose Pink 12-2904 TCX (approx)
-        damson: '#7A3E57',  // Damson 18-1716 TCX (approx)
-        eclipse: '#2F2B3A', // Eclipse 19-3810 TCX (approx)
-        chili: '#8A3332',   // Chili Oil 18-1440 TCX (approx)
+        // Dashboard palette (sampled from provided image)
+        ui: {
+          bg: '#EDEDED',     // light gray background
+          gold: '#E1AB3D',   // accent badges/buttons
+          teal: '#63C6AF',   // charts/highlights
+          navy: '#242B3E',   // primary text/buttons
+        },
       },
       fontFamily: {
         sans: ['Inter', 'system-ui', 'sans-serif'],