Upload folder using huggingface_hub

client/src/pages/WeeklyPractice.tsx

@@ -1432,7 +1432,7 @@ 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-ui-neonBlue text-white'
+                    ? 'bg-ui-neonPink text-white'  // differentiate from Tutorial (blue)
                     : 'bg-ui-panel text-ui-text hover:bg-white border border-ui-border'
                 }`}
               >
@@ -1445,9 +1445,9 @@ const WeeklyPractice: React.FC = () => {
         {/* Week Transition Loading Spinner */}
         {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="bg-ui-panel rounded-lg shadow-lg p-4 flex items-center space-x-3 border border-ui-border">
               <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>
+              <span className="text-ui-text font-medium">Loading...</span>
             </div>
           </div>
         )}
@@ -1506,15 +1506,15 @@ const WeeklyPractice: React.FC = () => {
             {editingBrief[selectedWeek] ? (
               <div>
                 <div className="flex items-center justify-end space-x-2 mb-2">
-                  <button onClick={() => applyInlineFormat('weekly-brief-input', editForm.translationBrief, v => setEditForm({ ...editForm, translationBrief: v }), '**')} className="px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded">B</button>
-                  <button onClick={() => applyInlineFormat('weekly-brief-input', editForm.translationBrief, v => setEditForm({ ...editForm, translationBrief: v }), '*')} className="px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded italic">I</button>
-                  <button onClick={() => applyLinkFormat('weekly-brief-input', editForm.translationBrief || '', v => setEditForm({ ...editForm, translationBrief: v }))} className="px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded">Link</button>
+                  <button onClick={() => applyInlineFormat('weekly-brief-input', editForm.translationBrief, v => setEditForm({ ...editForm, translationBrief: v }), '**')} className="px-2 py-1 text-xs bg-ui-bg text-ui-text rounded">B</button>
+                  <button onClick={() => applyInlineFormat('weekly-brief-input', editForm.translationBrief, v => setEditForm({ ...editForm, translationBrief: v }), '*')} className="px-2 py-1 text-xs bg-ui-bg text-ui-text rounded italic">I</button>
+                  <button onClick={() => applyLinkFormat('weekly-brief-input', editForm.translationBrief || '', v => setEditForm({ ...editForm, translationBrief: v }))} className="px-2 py-1 text-xs bg-ui-bg text-ui-text rounded">Link</button>
                 </div>
                 <textarea
                   id="weekly-brief-input"
                   value={editForm.translationBrief}
                   onChange={(e) => setEditForm({ ...editForm, translationBrief: e.target.value })}
-                  className="w-full p-4 border border-blue-300 rounded-lg text-blue-800 leading-relaxed text-lg bg-white"
+                  className="w-full p-4 border border-ui-border rounded-lg text-ui-text leading-relaxed text-lg bg-white"
                   rows={6}
                   placeholder="Enter translation brief..."
                 />
@@ -1526,17 +1526,17 @@ const WeeklyPractice: React.FC = () => {
         ) : (
           // Show add brief button when no brief exists
           JSON.parse(localStorage.getItem('user') || '{}').role === 'admin' && (
-            <div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl p-8 mb-8 border border-blue-200 border-dashed">
+            <div className="bg-ui-panel rounded-xl p-8 mb-8 border border-ui-border border-dashed">
               <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>
                 <button
                   onClick={startAddingBrief}
-                  className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors duration-200 flex items-center space-x-2"
+                  className="bg-ui-neonBlue hover:bg-ui-neonBlue/90 text-white px-4 py-2 rounded-lg transition-colors duration-200 flex items-center space-x-2"
                 >
                   <PlusIcon className="h-4 w-4" />
                   <span>Add Translation Brief</span>
@@ -1545,14 +1545,14 @@ const WeeklyPractice: React.FC = () => {
               {editingBrief[selectedWeek] && (
                 <div className="space-y-4">
                   <div className="flex items-center justify-end space-x-2">
-                    <button onClick={() => applyInlineFormat('weekly-brief-input', editForm.translationBrief, v => setEditForm({ ...editForm, translationBrief: v }), '**')} className="px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded">B</button>
-                    <button onClick={() => applyInlineFormat('weekly-brief-input', editForm.translationBrief, v => setEditForm({ ...editForm, translationBrief: v }), '*')} className="px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded italic">I</button>
-                    <button onClick={() => applyLinkFormat('weekly-brief-input', editForm.translationBrief || '', v => setEditForm({ ...editForm, translationBrief: v }))} className="px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded">Link</button>
+                    <button onClick={() => applyInlineFormat('weekly-brief-input', editForm.translationBrief, v => setEditForm({ ...editForm, translationBrief: v }), '**')} className="px-2 py-1 text-xs bg-ui-bg text-ui-text rounded">B</button>
+                    <button onClick={() => applyInlineFormat('weekly-brief-input', editForm.translationBrief, v => setEditForm({ ...editForm, translationBrief: v }), '*')} className="px-2 py-1 text-xs bg-ui-bg text-ui-text rounded italic">I</button>
+                    <button onClick={() => applyLinkFormat('weekly-brief-input', editForm.translationBrief || '', v => setEditForm({ ...editForm, translationBrief: v }))} className="px-2 py-1 text-xs bg-ui-bg text-ui-text rounded">Link</button>
                   </div>
                   <textarea
                     value={editForm.translationBrief}
                     onChange={(e) => setEditForm({ ...editForm, translationBrief: e.target.value })}
-                    className="w-full p-4 border border-blue-300 rounded-lg text-blue-800 leading-relaxed text-lg bg-white"
+                    className="w-full p-4 border border-ui-border rounded-lg text-ui-text leading-relaxed text-lg bg-white"
                     rows={6}
                     placeholder="Enter translation brief..."
                   />