From ca22cdf46d05fdd33cb7d547c6becd781b38bd9a Mon Sep 17 00:00:00 2001
From: Omar Oughriss <omaroughriss8@gmail.com>
Date: Mon, 20 Oct 2025 12:29:33 +0200
Subject: [PATCH] Remplace inline styles

---
 components/4nk/AuthModal.tsx | 37 +++++-------------------------------
 components/4nk/Iframe.tsx    |  8 +-------
 lib/4nk/Loader.tsx           | 14 +++-----------
 tailwind.config.js           | 12 +++++++++++-
 4 files changed, 20 insertions(+), 51 deletions(-)

diff --git a/components/4nk/AuthModal.tsx b/components/4nk/AuthModal.tsx
index e79c47b..0ecad3d 100644
--- a/components/4nk/AuthModal.tsx
+++ b/components/4nk/AuthModal.tsx
@@ -57,18 +57,9 @@ function AuthModal({ isOpen, onConnect, onClose, iframeUrl }: AuthModalProps) {
 >
   {/* Loader affiché tant que l'iframe n'est pas prête */}
   {!isIframeReady && !authSuccess && (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        height: "400px",
-        gap: 16,
-      }}
-    >
+    <div className="flex flex-col items-center justify-center h-96 gap-4">
       <Loader width={40} />
-      <div style={{ fontWeight: 600, fontSize: 18 }}>
+      <div className="font-semibold text-lg">
         Chargement de l'authentification...
       </div>
     </div>
@@ -76,18 +67,8 @@ function AuthModal({ isOpen, onConnect, onClose, iframeUrl }: AuthModalProps) {
 
   {/* Message de succès */}
   {authSuccess && (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        height: "400px",
-        gap: 20,
-        animation: "fadeInSuccess 0.4s ease-out",
-      }}
-    >
-      <div style={{ fontWeight: 600, fontSize: 18, color: "#43a047" }}>
+    <div className="flex flex-col items-center justify-center h-96 gap-5 animate-fade-in">
+      <div className="font-semibold text-lg text-green-600">
         ✅ Authentification réussie !
       </div>
     </div>
@@ -95,15 +76,7 @@ function AuthModal({ isOpen, onConnect, onClose, iframeUrl }: AuthModalProps) {
 
   {/* Iframe affichée uniquement si dispo */}
   {!authSuccess && (
-    <div
-      style={{
-        display: showIframe ? "flex" : "none",
-        justifyContent: "center",
-        alignItems: "center",
-        width: "100%",
-        minHeight: "400px",
-      }}
-    >
+    <div className={`${showIframe ? 'flex' : 'hidden'} justify-center items-center w-full min-h-96`}>
       <Iframe iframeUrl={iframeUrl} showIframe={showIframe} />
     </div>
   )}
diff --git a/components/4nk/Iframe.tsx b/components/4nk/Iframe.tsx
index edcfb07..4187bb1 100644
--- a/components/4nk/Iframe.tsx
+++ b/components/4nk/Iframe.tsx
@@ -17,13 +17,7 @@ function Iframe({ iframeUrl, showIframe = false }: { iframeUrl: string; showIfra
     <iframe
       ref={iframeRef}
       src={iframeUrl}
-      style={{
-        display: showIframe ? 'block' : 'none',
-        width: '400px',
-        height: '400px',
-        border: 'none',
-        overflow: 'hidden'
-      }}
+      className={`${showIframe ? 'block' : 'hidden'} w-96 h-96 border-none overflow-hidden`}
     />
   );
 }
diff --git a/lib/4nk/Loader.tsx b/lib/4nk/Loader.tsx
index 10b347a..de32bcb 100644
--- a/lib/4nk/Loader.tsx
+++ b/lib/4nk/Loader.tsx
@@ -2,19 +2,11 @@ import { memo } from 'react';
 
 function Loader({ width = 40 }: { width?: number }) {
   return (
-    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: width }}>
+    <div className="flex items-center justify-center" style={{ width }}>
       <div
-        className='loader'
-        style={{
-          width,
-          height: width,
-          border: '4px solid #eee',
-          borderTop: '4px solid #333',
-          borderRadius: '50%',
-          animation: 'spin 1s linear infinite',
-        }}
+        className="animate-spin rounded-full border-4 border-gray-200 border-t-gray-800"
+        style={{ width, height: width }}
       />
-      <style>{`@keyframes spin { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);} }`}</style>
     </div>
   );
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 09cee67..3ac0240 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,7 +6,17 @@ module.exports = {
       './components/**/*.{js,ts,jsx,tsx}' // tous les composants
     ],
     theme: {
-      extend: {},
+      extend: {
+        animation: {
+          'fade-in': 'fadeIn 0.4s ease-out',
+        },
+        keyframes: {
+          fadeIn: {
+            '0%': { opacity: '0', transform: 'translateY(10px)' },
+            '100%': { opacity: '1', transform: 'translateY(0)' },
+          }
+        }
+      },
     },
     plugins: [],
   }