From 9a69d11d5886520a3e99b89d255c1a5315656f0b Mon Sep 17 00:00:00 2001
From: Sidney Gomes <sidney.gomes1989@gmail.com>
Date: Tue, 21 Jul 2026 17:59:06 -0300
Subject: [PATCH] fix: padronizacao dos botoes salvar do admin, encapsulamento
 em <span> e adicao de ErrorBoundary contra tela branca

---
 src/Root.tsx                           |  9 ++--
 src/components/AdminContentManager.tsx | 22 ++++++----
 src/components/AdminDashboard.tsx      |  2 +-
 src/components/ErrorBoundary.tsx       | 60 ++++++++++++++++++++++++++
 4 files changed, 80 insertions(+), 13 deletions(-)
 create mode 100644 src/components/ErrorBoundary.tsx

diff --git a/src/Root.tsx b/src/Root.tsx
index 7bffd1c..a725cdc 100644
--- a/src/Root.tsx
+++ b/src/Root.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import App from './App.tsx';
 import AdminApp from './AdminApp.tsx';
+import { ErrorBoundary } from './components/ErrorBoundary.tsx';
 
 export default function Root() {
   const [simulatedDomain] = useState<'student' | 'admin'>(() => {
@@ -33,8 +34,10 @@ export default function Root() {
   }, [isAdmin]);
 
   return (
-    <div className="relative min-h-screen">
-      {isAdmin ? <AdminApp /> : <App />}
-    </div>
+    <ErrorBoundary>
+      <div className="relative min-h-screen">
+        {isAdmin ? <AdminApp /> : <App />}
+      </div>
+    </ErrorBoundary>
   );
 }
diff --git a/src/components/AdminContentManager.tsx b/src/components/AdminContentManager.tsx
index ef07b79..5642c29 100644
--- a/src/components/AdminContentManager.tsx
+++ b/src/components/AdminContentManager.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { 
   GraduationCap, Plus, Edit, Trash2, FolderPlus, FilePlus, ChevronRight, 
-  ArrowLeft, Film, Youtube, RefreshCw, Layers, CheckCircle
+  ArrowLeft, Film, Youtube, RefreshCw, Layers, CheckCircle, CheckCircle2
 } from 'lucide-react';
 
 interface Lesson {
@@ -510,9 +510,10 @@ export default function AdminContentManager({ token }: AdminContentManagerProps)
             <div className="md:col-span-2 flex justify-end">
               <button
                 type="submit"
-                className="glass-btn-primary text-white text-xs font-bold px-6 py-3 rounded-lg cursor-pointer"
+                className="glass-btn-primary text-white font-extrabold text-xs md:text-sm py-3 px-6 rounded-xl shadow-lg hover:scale-105 transition-all flex items-center gap-2 cursor-pointer"
               >
-                {editingCourse ? 'Salvar Alterações' : 'Criar Curso'}
+                <CheckCircle2 size={18} />
+                <span>{editingCourse ? 'Salvar Alterações' : 'Criar Curso'}</span>
               </button>
             </div>
           </form>
@@ -579,8 +580,9 @@ export default function AdminContentManager({ token }: AdminContentManagerProps)
                   />
                 </div>
                 <div className="flex space-x-2">
-                  <button type="submit" className="glass-btn-primary text-white text-xs font-bold px-4 py-2.5 rounded-lg">
-                    Salvar
+                  <button type="submit" className="glass-btn-primary text-white font-extrabold text-xs py-2.5 px-6 rounded-xl shadow-lg hover:scale-105 transition-all flex items-center gap-2 cursor-pointer">
+                    <CheckCircle2 size={16} />
+                    <span>Salvar Módulo</span>
                   </button>
                   <button type="button" onClick={() => setShowModuleForm(false)} className="text-xs text-zinc-500 px-2">
                     Cancelar
@@ -667,8 +669,9 @@ export default function AdminContentManager({ token }: AdminContentManagerProps)
                 </div>
 
                 <div className="md:col-span-3 flex justify-end">
-                  <button type="submit" className="glass-btn-primary text-white font-bold text-xs px-6 py-2.5 rounded-lg">
-                    {editingLesson ? 'Salvar Aula' : 'Criar Aula'}
+                  <button type="submit" className="glass-btn-primary text-white font-extrabold text-xs md:text-sm py-3 px-6 rounded-xl shadow-lg hover:scale-105 transition-all flex items-center gap-2 cursor-pointer">
+                    <CheckCircle2 size={18} />
+                    <span>{editingLesson ? 'Salvar Aula' : 'Criar Aula'}</span>
                   </button>
                 </div>
               </form>
@@ -922,8 +925,9 @@ export default function AdminContentManager({ token }: AdminContentManagerProps)
               <button onClick={() => setShowActivityModal(false)} className="px-4 py-2 text-sm text-zinc-400 hover:text-white">
                 Cancelar
               </button>
-              <button onClick={handleSaveActivity} className="glass-btn-primary px-6 py-2 rounded-lg text-sm font-bold text-white">
-                Salvar Atividade
+              <button onClick={handleSaveActivity} className="glass-btn-primary text-white font-extrabold text-xs md:text-sm py-3 px-6 rounded-xl shadow-lg hover:scale-105 transition-all flex items-center gap-2 cursor-pointer">
+                <CheckCircle2 size={18} />
+                <span>Salvar Atividade</span>
               </button>
             </div>
           </div>
diff --git a/src/components/AdminDashboard.tsx b/src/components/AdminDashboard.tsx
index 571cbd8..1bbe0b0 100644
--- a/src/components/AdminDashboard.tsx
+++ b/src/components/AdminDashboard.tsx
@@ -924,7 +924,7 @@ export default function AdminDashboard({ token }: AdminDashboardProps) {
                   ) : (
                     <CheckCircle2 size={18} />
                   )}
-                  {isSavingSettings ? 'Salvando...' : 'Salvar Configurações'}
+                  <span>{isSavingSettings ? 'Salvando...' : 'Salvar Configurações'}</span>
                 </button>
               </div>
             </form>
diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx
new file mode 100644
index 0000000..e34b874
--- /dev/null
+++ b/src/components/ErrorBoundary.tsx
@@ -0,0 +1,60 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+import { RefreshCw, AlertTriangle } from 'lucide-react';
+
+interface Props {
+  children: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false,
+    error: null
+  };
+
+  public static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('Uncaught error caught by ErrorBoundary:', error, errorInfo);
+  }
+
+  private handleReload = () => {
+    this.setState({ hasError: false, error: null });
+    window.location.reload();
+  };
+
+  public render() {
+    if (this.state.hasError) {
+      return (
+        <div className="min-h-screen bg-black text-white flex items-center justify-center p-6 text-center">
+          <div className="max-w-md glass-card p-8 rounded-2xl border border-white/10 space-y-6 shadow-2xl animate-fade-in">
+            <div className="bg-[#E50914]/10 text-[#E50914] p-4 rounded-full inline-block">
+              <AlertTriangle size={36} />
+            </div>
+            <div className="space-y-2">
+              <h2 className="text-xl font-black text-white">Recarregando Interface</h2>
+              <p className="text-xs text-zinc-400">
+                Uma alteração de estrutura foi detectada pelo navegador. Clique no botão abaixo para restaurar a página.
+              </p>
+            </div>
+            <button
+              onClick={this.handleReload}
+              className="w-full glass-btn-primary text-white font-extrabold text-sm py-3 rounded-xl shadow-lg hover:scale-105 transition-all flex items-center justify-center gap-2 cursor-pointer"
+            >
+              <RefreshCw size={18} />
+              <span>Restaurar Página</span>
+            </button>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}