Upload folder using huggingface_hub

client/src/components/Layout.tsx

@@ -185,7 +185,7 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
                   key={item.name}
                   to={item.href}
                   className={`flex items-center px-3 py-2 rounded-lg text-[0.95rem] font-medium transition-colors ${
-                    isActive ? 'bg-ui-bg text-ui-text neon-border' : 'text-ui-text/80 hover:bg-ui-panel/60'
+                    isActive ? 'bg-ui-bg text-ui-text shadow-[0_0_6px_rgba(14,165,233,0.45)]' : 'text-ui-text/80 hover:bg-ui-panel/60'
                   }`}
                 >
                   <item.icon className="h-5 w-5 mr-3 text-ui-neonBlue" />

client/src/pages/TutorialTasks.tsx

@@ -271,7 +271,7 @@ const TutorialTasks: React.FC = () => {
       .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
       .replace(/\*(.+?)\*/g, '<em>$1</em>')
       .replace(/\n/g, '<br/>');
-    return <span dangerouslySetInnerHTML={{ __html: html }} />;
+    return <span dangerouslySetInnerHTML={{ __html: html.replace(/text-indigo-600/g, 'text-ui-neonBlue').replace(/text-indigo-900/g, 'text-ui-text') }} />;
   };
 
   const applyLinkFormat = (
@@ -1064,15 +1064,15 @@ const TutorialTasks: React.FC = () => {
   // Remove intrusive loading screen - just show content with loading state
 
   return (
-    <div className="min-h-screen bg-gray-50 py-8">
+    <div className="min-h-screen bg-ui-bg py-8">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         {/* Header */}
         <div className="mb-8">
           <div className="flex items-center mb-4">
-            <AcademicCapIcon className="h-8 w-8 text-indigo-900 mr-3" />
-            <h1 className="text-3xl font-bold text-gray-900">Tutorial Tasks</h1>
+            <AcademicCapIcon className="h-8 w-8 text-ui-neonBlue mr-3" />
+            <h1 className="text-3xl font-bold text-ui-text">Tutorial Tasks</h1>
           </div>
-          <p className="text-gray-600">
+          <p className="text-ui-text/70">
             Complete weekly tutorial tasks with your group to practice collaborative translation skills.
           </p>
         </div>
@@ -1086,8 +1086,8 @@ const TutorialTasks: React.FC = () => {
                 onClick={() => handleWeekChange(week)}
                 className={`px-4 py-2 rounded-lg font-medium whitespace-nowrap transition-all duration-200 ease-in-out ${
                   selectedWeek === week
-                    ? 'bg-indigo-600 text-white'
-                    : 'bg-white text-gray-700 hover:bg-gray-50 border border-gray-300'
+                    ? 'bg-ui-neonBlue text-white'
+                    : 'bg-ui-panel text-ui-text hover:bg-white border border-ui-border'
                 }`}
               >
                 Week {week}
@@ -1110,13 +1110,13 @@ const TutorialTasks: React.FC = () => {
           <>
             {/* Translation Brief - Shown once at the top */}
             {tutorialWeek && tutorialWeek.translationBrief ? (
-          <div className="bg-white rounded-lg p-6 mb-8 border border-gray-200 shadow-sm">
+          <div className="bg-ui-panel rounded-lg p-6 mb-8 border border-ui-border shadow-sm">
             <div className="flex items-center justify-between mb-4">
               <div className="flex items-center space-x-3">
-                <div className="bg-indigo-600 rounded-lg p-2">
-                  <DocumentTextIcon className="h-5 w-5 text-white" />
+                <div className="bg-ui-neonBlue rounded-lg p-2">
+                  <DocumentTextIcon className="h-5 w-5 text-ui-panel" />
                 </div>
-                <h3 className="text-indigo-900 font-semibold text-xl">Translation Brief</h3>
+                <h3 className="text-ui-text font-semibold text-xl">Translation Brief</h3>
               </div>
               {JSON.parse(localStorage.getItem('user') || '{}').role === 'admin' && (
                 <div className="flex items-center space-x-2">
@@ -1125,7 +1125,7 @@ const TutorialTasks: React.FC = () => {
                       <button
                         onClick={saveBrief}
                         disabled={saving}
-                        className="bg-indigo-500 hover:bg-indigo-600 text-white px-3 py-1 rounded-md transition-colors duration-200 text-sm"
+                        className="bg-ui-neonBlue hover:bg-ui-neonBlue/90 text-white px-3 py-1 rounded-md transition-colors duration-200 text-sm"
                       >
                         {saving ? (
                           <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
@@ -1175,21 +1175,21 @@ const TutorialTasks: React.FC = () => {
               />
               </div>
             ) : (
-              <div className="text-gray-900 leading-relaxed text-lg font-smiley whitespace-pre-wrap">{renderFormatted(tutorialWeek.translationBrief || '')}</div>
+              <div className="text-ui-text leading-relaxed text-lg font-smiley whitespace-pre-wrap">{renderFormatted(tutorialWeek.translationBrief || '')}</div>
             )}
 
             {/* Group Google Doc (refined) */}
-            <div className="mt-6 bg-white rounded-xl border border-gray-200 shadow-sm">
+            <div className="mt-6 bg-ui-panel rounded-xl border border-ui-border shadow-sm">
               <div className="px-6 pt-6">
-                <h4 className="text-2xl font-bold text-gray-900">Group Google Doc</h4>
-                <p className="mt-2 text-gray-600">Open or share each group’s working document.</p>
+                <h4 className="text-2xl font-bold text-ui-text">Group Google Doc</h4>
+                <p className="mt-2 text-ui-text/70">Open or share each group’s working document.</p>
               </div>
               <div className="px-6 pb-4 pt-4 border-t border-gray-100">
               <GroupDocSection weekNumber={selectedWeek} />
               </div>
             </div>
-            <div className="mt-4 p-3 bg-indigo-50 rounded-lg">
-              <p className="text-indigo-900 text-sm">
+            <div className="mt-4 p-3 bg-ui-bg rounded-lg">
+              <p className="text-ui-text text-sm">
                 <strong>Note:</strong> Tutorial tasks are completed as group submissions. Each group should collaborate to create a single translation per task.
               </p>
             </div>
@@ -1197,17 +1197,17 @@ const TutorialTasks: React.FC = () => {
         ) : (
           // Show add brief button when no brief exists
           JSON.parse(localStorage.getItem('user') || '{}').role === 'admin' && (
-            <div className="bg-white rounded-lg p-6 mb-8 border border-gray-200 border-dashed shadow-sm">
+            <div className="bg-ui-panel rounded-lg p-6 mb-8 border border-ui-border border-dashed shadow-sm">
               <div className="flex items-center justify-between mb-4">
                               <div className="flex items-center space-x-3">
-                <div className="bg-indigo-100 rounded-lg p-2">
-                  <DocumentTextIcon className="h-5 w-5 text-indigo-900" />
+                <div className="bg-ui-bg rounded-lg p-2">
+                  <DocumentTextIcon className="h-5 w-5 text-ui-neonBlue" />
                 </div>
-                <h3 className="text-indigo-900 font-semibold text-xl">Translation Brief</h3>
+                <h3 className="text-ui-text font-semibold text-xl">Translation Brief</h3>
               </div>
                 <button
                   onClick={startAddingBrief}
-                  className="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium flex items-center space-x-2 shadow-sm"
+                  className="bg-ui-neonBlue hover:bg-ui-neonBlue/90 text-white px-6 py-3 rounded-lg font-medium flex items-center space-x-2 shadow-sm"
                 >
                   <PlusIcon className="h-5 w-5" />
                   <span className="font-medium">Add Brief</span>
@@ -1224,7 +1224,7 @@ const TutorialTasks: React.FC = () => {
                     id="tutorial-brief-input"
                     value={editForm.translationBrief}
                     onChange={(e) => setEditForm({ ...editForm, translationBrief: e.target.value })}
-                    className="w-full p-4 border border-gray-300 rounded-lg text-gray-900 leading-relaxed text-base bg-white focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+                    className="w-full p-4 border border-ui-border rounded-lg text-ui-text leading-relaxed text-base bg-ui-panel focus:ring-2 focus:ring-ui-neonBlue focus:border-ui-neonBlue"
                     rows={6}
                     placeholder="Enter translation brief..."
                   />
@@ -1232,7 +1232,7 @@ const TutorialTasks: React.FC = () => {
                     <button
                       onClick={saveBrief}
                       disabled={saving}
-                      className="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium flex items-center space-x-2 shadow-sm"
+                      className="bg-ui-neonBlue hover:bg-ui-neonBlue/90 text-white px-6 py-3 rounded-lg font-medium flex items-center space-x-2 shadow-sm"
                     >
                       {saving ? (
                         <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>

client/src/pages/WeeklyPractice.tsx

@@ -1410,15 +1410,15 @@ const WeeklyPractice: React.FC = () => {
 
 
   return (
-    <div className="min-h-screen bg-gray-50 py-8">
+    <div className="min-h-screen bg-ui-bg py-8">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         {/* Header */}
         <div className="mb-8">
           <div className="flex items-center mb-4">
-            <BookOpenIcon className="h-8 w-8 text-indigo-600 mr-3" />
-            <h1 className="text-3xl font-bold text-gray-900">Weekly Practice</h1>
+            <BookOpenIcon className="h-8 w-8 text-ui-neonBlue mr-3" />
+            <h1 className="text-3xl font-bold text-ui-text">Weekly Practice</h1>
           </div>
-          <p className="text-gray-600">
+          <p className="text-ui-text/70">
             Practice your translation skills with weekly examples and cultural elements.
           </p>
         </div>
@@ -1432,8 +1432,8 @@ const WeeklyPractice: React.FC = () => {
                 onClick={() => handleWeekChange(week)}
                 className={`px-4 py-2 rounded-lg font-medium whitespace-nowrap transition-all duration-200 ease-in-out ${
                   selectedWeek === week
-                    ? 'bg-indigo-600 text-white'
-                    : 'bg-white text-gray-700 hover:bg-gray-50 border border-gray-300'
+                    ? 'bg-ui-neonBlue text-white'
+                    : 'bg-ui-panel text-ui-text hover:bg-white border border-ui-border'
                 }`}
               >
                 Week {week}
@@ -1446,7 +1446,7 @@ const WeeklyPractice: React.FC = () => {
         {isWeekTransitioning && (
           <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-indigo-600"></div>
+              <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-ui-neonBlue"></div>
               <span className="text-gray-700 font-medium">Loading...</span>
             </div>
           </div>
@@ -1454,13 +1454,13 @@ const WeeklyPractice: React.FC = () => {
 
         {/* Translation Brief - Shown once at the top (standalone allowed) */}
         {!isWeekTransitioning && weeklyPracticeWeek && weeklyPracticeWeek.translationBrief ? (
-          <div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl p-8 mb-8 border border-blue-200">
+          <div className="bg-ui-panel rounded-xl p-8 mb-8 border border-ui-border">
             <div className="flex items-center justify-between mb-4">
               <div className="flex items-center space-x-2">
-              <div className="bg-blue-100 rounded-full p-2">
-                <BookOpenIcon className="h-5 w-5 text-blue-600" />
+              <div className="bg-ui-bg rounded-full p-2">
+                <BookOpenIcon className="h-5 w-5 text-ui-neonBlue" />
               </div>
-              <h3 className="text-blue-900 font-semibold text-xl">Translation Brief</h3>
+              <h3 className="text-ui-text font-semibold text-xl">Translation Brief</h3>
             </div>
               {JSON.parse(localStorage.getItem('user') || '{}').role === 'admin' && (
                 <div className="flex items-center space-x-2">
@@ -1488,7 +1488,7 @@ const WeeklyPractice: React.FC = () => {
                     <>
                       <button
                         onClick={startEditingBrief}
-                        className="bg-blue-100 hover:bg-blue-200 text-blue-700 px-3 py-1 rounded-lg transition-colors duration-200"
+                        className="bg-ui-bg hover:bg-white text-ui-text px-3 py-1 rounded-lg transition-colors duration-200"
                       >
                         <PencilIcon className="h-4 w-4" />
                       </button>
@@ -1520,7 +1520,7 @@ const WeeklyPractice: React.FC = () => {
                 />
               </div>
             ) : (
-              <div className="text-blue-800 leading-relaxed text-lg font-smiley whitespace-pre-wrap">{renderFormatted(weeklyPracticeWeek.translationBrief || '')}</div>
+              <div className="text-ui-text leading-relaxed text-lg font-smiley whitespace-pre-wrap">{renderFormatted(weeklyPracticeWeek.translationBrief || '')}</div>
             )}
           </div>
         ) : (