From c70f5780091d2c0670287e748c6497b057a7939e Mon Sep 17 00:00:00 2001
From: admtracksteel <admtracksteel@gmail.com>
Date: Tue, 23 Jun 2026 00:28:34 +0000
Subject: [PATCH] Deploy Inicial do SteelCheck com Docker Build Automatizado

---
 components/ReportDisplay.tsx | 54 ++++++++++++++++++------------------
 services/pdfService.ts       |  9 ++++++
 2 files changed, 36 insertions(+), 27 deletions(-)

diff --git a/components/ReportDisplay.tsx b/components/ReportDisplay.tsx
index 8a9ba9a..f97be7b 100644
--- a/components/ReportDisplay.tsx
+++ b/components/ReportDisplay.tsx
@@ -9,12 +9,12 @@ const statusClass = (status: 'OK' | 'FALHA' | 'CONFORME' | 'NÃO CONFORME') => {
   switch (status) {
     case 'OK':
     case 'CONFORME':
-      return 'text-emerald-600 bg-emerald-50 dark:bg-emerald-900/30 dark:text-emerald-400 border border-emerald-200 dark:border-emerald-800';
+      return 'text-emerald-700 bg-emerald-50 dark:bg-emerald-900/30 dark:text-emerald-400';
     case 'FALHA':
     case 'NÃO CONFORME':
-      return 'text-red-600 bg-red-50 dark:bg-red-900/30 dark:text-red-400 border border-red-200 dark:border-red-800';
+      return 'text-rose-700 bg-rose-50 dark:bg-rose-900/30 dark:text-rose-400';
     default:
-      return 'text-slate-600 bg-slate-50 dark:bg-slate-800/50 dark:text-slate-400 border border-slate-200 dark:border-slate-700';
+      return 'text-slate-600 bg-slate-50 dark:bg-slate-800/50 dark:text-slate-400';
   }
 };
 
@@ -123,15 +123,15 @@ export const ReportDisplay: React.FC<ReportDisplayProps> = ({ report }) => {
               <span className="w-1.5 h-1.5 bg-slate-400 dark:bg-slate-500 rounded-full"></span>
               2. Propriedades Mecânicas
             </h3>
-            <div className="flex-grow border border-slate-100 dark:border-slate-800 rounded-xl overflow-hidden bg-white dark:bg-slate-900 shadow-sm flex flex-col justify-between">
+            <div className="flex-grow border border-slate-100 dark:border-slate-800/60 rounded-2xl overflow-hidden bg-white dark:bg-slate-900 shadow-[0_2px_10px_-3px_rgba(6,81,237,0.05)] flex flex-col justify-between">
               <div className="overflow-hidden">
                 <table className="w-full table-fixed text-left border-collapse text-xs">
                   <thead>
-                    <tr className="bg-slate-50 dark:bg-slate-800/50 border-b border-slate-100 dark:border-slate-800 text-[9px] text-slate-400 dark:text-slate-500 font-bold uppercase tracking-wider">
-                      <th className="py-2.5 px-2 w-[35%] truncate">Propriedade</th>
-                      <th className="py-2.5 px-1 w-[25%] truncate">Certif.</th>
-                      <th className="py-2.5 px-1 w-[15%] text-center truncate">% Rel.</th>
-                      <th className="py-2.5 px-1 w-[25%] text-right truncate">Status</th>
+                    <tr className="bg-slate-50/80 dark:bg-slate-800/40 border-b border-slate-50 dark:border-slate-800/60 text-[9px] text-slate-500 dark:text-slate-400 font-bold uppercase tracking-wider">
+                      <th className="py-3 px-3 w-[35%] truncate">Propriedade</th>
+                      <th className="py-3 px-1 w-[25%] truncate">Certificado</th>
+                      <th className="py-3 px-1 w-[15%] text-center truncate">% Rel.</th>
+                      <th className="py-3 px-3 w-[25%] text-right truncate">Status</th>
                     </tr>
                   </thead>
                   <tbody className="divide-y divide-slate-50 dark:divide-slate-800/50">
@@ -140,17 +140,17 @@ export const ReportDisplay: React.FC<ReportDisplayProps> = ({ report }) => {
                       const diffColor = isPositive ? 'text-emerald-600 dark:text-emerald-400' : 'text-rose-600 dark:text-rose-400';
                       return (
                         <tr key={i}>
-                          <td className="py-2.5 px-2 truncate">
-                            <span className="font-medium text-[10px] block text-slate-800 dark:text-slate-200" title={item.property}>{item.property}</span>
+                          <td className="py-3 px-3 truncate">
+                            <span className="font-semibold text-[11px] block text-slate-700 dark:text-slate-300" title={item.property}>{item.property}</span>
                           </td>
-                          <td className="py-2.5 px-1 font-mono font-bold text-[10px] text-slate-700 dark:text-slate-300 truncate" title={item.certificate}>{item.certificate}</td>
-                          <td className="py-2.5 px-1 text-center truncate">
+                          <td className="py-3 px-1 font-mono font-bold text-[11px] text-slate-900 dark:text-slate-100 truncate" title={item.certificate}>{item.certificate}</td>
+                          <td className="py-3 px-1 text-center truncate">
                             {item.differencePercentage ? (
-                              <span className={`text-[9px] font-bold ${diffColor}`}>{item.differencePercentage}</span>
+                              <span className={`text-[10px] font-bold ${diffColor}`}>{item.differencePercentage}</span>
                             ) : <span className="text-slate-300 dark:text-slate-600">-</span>}
                           </td>
-                          <td className="py-2.5 px-1 text-right">
-                            <span className={`inline-flex items-center gap-1 text-[9px] font-bold px-1.5 py-0.5 rounded ${statusClass(item.status)}`}>
+                          <td className="py-3 px-3 text-right">
+                            <span className={`inline-flex items-center gap-1 text-[10px] font-bold px-2 py-1 rounded-md ${statusClass(item.status)}`}>
                               {statusIcon(item.status)} {item.status}
                             </span>
                           </td>
@@ -177,25 +177,25 @@ export const ReportDisplay: React.FC<ReportDisplayProps> = ({ report }) => {
               <span className="w-1.5 h-1.5 bg-slate-400 dark:bg-slate-500 rounded-full"></span>
               3. Composição Química (%)
             </h3>
-            <div className="flex-grow border border-slate-100 dark:border-slate-800 rounded-xl overflow-hidden bg-white dark:bg-slate-900 shadow-sm flex flex-col justify-start">
+            <div className="flex-grow border border-slate-100 dark:border-slate-800/60 rounded-2xl overflow-hidden bg-white dark:bg-slate-900 shadow-[0_2px_10px_-3px_rgba(6,81,237,0.05)] flex flex-col justify-start">
               <div className="overflow-hidden">
                 <table className="w-full table-fixed text-left border-collapse text-xs">
                   <thead>
-                    <tr className="bg-slate-50 dark:bg-slate-800/50 border-b border-slate-100 dark:border-slate-800 text-[9px] text-slate-400 dark:text-slate-500 font-bold uppercase tracking-wider">
-                      <th className="py-2 px-2 w-[15%] truncate">Elem.</th>
-                      <th className="py-2 px-1 w-[40%] truncate">Norma Referência</th>
-                      <th className="py-2 px-1 w-[25%] truncate">Certificado</th>
-                      <th className="py-2 px-1 w-[20%] text-right truncate">Status</th>
+                    <tr className="bg-slate-50/80 dark:bg-slate-800/40 border-b border-slate-50 dark:border-slate-800/60 text-[9px] text-slate-500 dark:text-slate-400 font-bold uppercase tracking-wider">
+                      <th className="py-3 px-3 w-[15%] truncate">Elem.</th>
+                      <th className="py-3 px-1 w-[40%] truncate">Norma de Referência</th>
+                      <th className="py-3 px-1 w-[25%] truncate">Valor Certificado</th>
+                      <th className="py-3 px-3 w-[20%] text-right truncate">Status</th>
                     </tr>
                   </thead>
                   <tbody className="divide-y divide-slate-50 dark:divide-slate-800/50 font-mono">
                     {compliance.chemical.map((item, i) => (
                       <tr key={i}>
-                        <td className="py-2 px-2 font-sans font-medium text-[10px] text-slate-800 dark:text-slate-200 truncate" title={item.element}>{item.element}</td>
-                        <td className="py-2 px-1 text-slate-400 dark:text-slate-500 text-[9px] leading-tight truncate" title={item.norm}>{item.norm}</td>
-                        <td className="py-2 px-1 font-bold text-[10px] text-slate-700 dark:text-slate-300 truncate" title={item.certificate}>{item.certificate}</td>
-                        <td className="py-2 px-1 text-right">
-                          <span className={`inline-flex items-center text-[9px] font-bold px-1.5 py-0.5 rounded ${statusClass(item.status)}`}>
+                        <td className="py-3 px-3 font-sans font-semibold text-[11px] text-slate-700 dark:text-slate-300 truncate" title={item.element}>{item.element}</td>
+                        <td className="py-3 px-1 text-slate-500 dark:text-slate-400 text-[10px] leading-tight truncate" title={item.norm}>{item.norm}</td>
+                        <td className="py-3 px-1 font-bold text-[11px] text-slate-900 dark:text-slate-100 truncate" title={item.certificate}>{item.certificate}</td>
+                        <td className="py-3 px-3 text-right">
+                          <span className={`inline-flex items-center text-[10px] font-bold px-2 py-1 rounded-md ${statusClass(item.status)}`}>
                             {item.status}
                           </span>
                         </td>
diff --git a/services/pdfService.ts b/services/pdfService.ts
index 377a510..7925c42 100644
--- a/services/pdfService.ts
+++ b/services/pdfService.ts
@@ -16,6 +16,11 @@ export const exportAsPdf = async (elementId: string, fileName: string, action: '
   }
 
   try {
+    const isDark = document.documentElement.classList.contains('dark');
+    if (isDark) {
+      document.documentElement.classList.remove('dark');
+    }
+
     const pdf = new jsPDF({
       orientation: 'portrait',
       unit: 'mm',
@@ -44,6 +49,10 @@ export const exportAsPdf = async (elementId: string, fileName: string, action: '
       pdf.addImage(imgData, 'JPEG', 0, 0, pdfWidth, pdfHeight);
     }
 
+    if (isDark) {
+      document.documentElement.classList.add('dark');
+    }
+
     if (action === 'download') {
       pdf.save(`${fileName}.pdf`);
     } else {