@portnet/ui 3.1.3 → 3.1.4

package/dist/components/table/PuiModernTable.js

@@ -123,11 +123,12 @@ const DataColumn = (0, _styles.styled)(_material.Box)(() => ({
 
 // Label de colonne
 const ColumnLabel = (0, _styles.styled)(_material.Typography)(() => ({
-  fontSize: '11px',
+  fontSize: '12px',
   fontWeight: 600,
-  color: _apperance.palette.gray[500],
-  textTransform: 'uppercase',
-  letterSpacing: '0.5px'
+  color: "#293854",
+  // Couleur bleu marine pour les en-têtes
+  textTransform: 'none',
+  letterSpacing: '0.3px'
 }));
 
 // Valeur de colonne
@@ -148,12 +149,9 @@ const ActionsSection = (0, _styles.styled)(_material.Box)(() => ({
   transform: 'translateX(10px)',
   transition: 'all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)',
   position: 'relative',
-  // Afficher les actions uniquement au survol de la card parent directe
-  '&:hover': {
-    opacity: 1,
-    transform: 'translateX(0)',
-    transitionDelay: '0.1s' // Délai d'apparition pour un effet plus fluide
-  },
+  // Les actions restent toujours cachées, même au hover direct
+  // Elles ne s'affichent que via le hover de la card parent
+
   // Indicateur subtil d'actions disponibles (icône menu)
   '&::before': {
     content: '""',
@@ -174,9 +172,9 @@ const ActionsSection = (0, _styles.styled)(_material.Box)(() => ({
   },
   '@media (max-width: 768px)': {
     justifyContent: 'center',
-    opacity: 1,
-    // Toujours visible sur mobile
-    transform: 'translateX(0)',
+    opacity: 0,
+    // Reste caché même sur mobile
+    transform: 'translateX(10px)',
     '&::before': {
       display: 'none' // Pas d'indicateur sur mobile
     }
@@ -336,12 +334,16 @@ const PuiModernTable = _ref => {
       const config = actionConfig[action.type] || actionConfig.validate;
       const IconComponent = action.icon || config.icon;
       const isDisabled = (_action$disabled = action.disabled) === null || _action$disabled === void 0 ? void 0 : _action$disabled.call(action, item);
+
+      // Couleur unique basée sur le hover (couleur primaire avec transparence)
+      const hoverColor = "".concat(_apperance.palette.primary, "dd"); // Couleur du hover comme couleur unique
+
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiButton.default, {
         color: "primary",
         size: "small",
         startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
           sx: {
-            fontSize: '14px'
+            fontSize: '12px'
           }
         }),
         onClick: () => {
@@ -351,20 +353,21 @@ const PuiModernTable = _ref => {
         disabled: isDisabled,
         sx: {
           minWidth: 'auto',
-          padding: '6px 12px',
+          padding: '4px 8px',
           fontSize: '11px',
           fontWeight: 500,
-          backgroundColor: isDisabled ? _apperance.palette.gray[300] : action.bgColor || config.bgColor,
-          color: isDisabled ? _apperance.palette.gray[500] : action.textColor || config.textColor,
+          backgroundColor: isDisabled ? _apperance.palette.gray[300] : hoverColor,
+          color: isDisabled ? _apperance.palette.gray[500] : _apperance.palette.white,
           border: 'none',
-          borderRadius: '6px',
+          borderRadius: '4px',
           textTransform: 'none',
+          boxShadow: 'none',
           '&:hover': {
-            backgroundColor: isDisabled ? _apperance.palette.gray[300] : "".concat(action.bgColor || config.bgColor, "dd"),
-            transform: isDisabled ? 'none' : 'translateY(-1px)'
+            backgroundColor: isDisabled ? _apperance.palette.gray[300] : hoverColor,
+            transform: 'none'
           },
           '&:active': {
-            transform: isDisabled ? 'none' : 'translateY(0)'
+            transform: 'none'
           }
         },
         children: action.label || config.label
@@ -420,62 +423,41 @@ const PuiModernTable = _ref => {
           children: emptyMessage
         })
       }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [data.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(TableCard, {
+        children: [data.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(TableCard, {
           sx: {
-            backgroundColor: "".concat(_apperance.palette.primary, "05"),
-            borderColor: "".concat(_apperance.palette.primary, "20"),
+            backgroundColor: _apperance.palette.gray[50],
+            // Fond gris très clair comme dans l'image
+            borderColor: _apperance.palette.border.light,
             cursor: 'default',
+            // Pas d'effet de hover pour l'en-tête
             '&:hover': {
+              backgroundColor: _apperance.palette.gray[50],
+              // Garde le même fond au survol
+              borderColor: _apperance.palette.border.light,
               transform: 'none',
-              boxShadow: _apperance.palette.shadow.card,
-              borderColor: "".concat(_apperance.palette.primary, "20"),
-              backgroundColor: "".concat(_apperance.palette.primary, "05")
+              boxShadow: 'none'
             }
           },
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DataSection, {
-            children: columns.map(column => /*#__PURE__*/(0, _jsxRuntime.jsxs)(DataColumn, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DataSection, {
+            children: columns.map(column => /*#__PURE__*/(0, _jsxRuntime.jsx)(DataColumn, {
               style: {
                 flex: column.flex || 1
               },
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ColumnLabel, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
                 sx: {
                   fontSize: '12px',
-                  fontWeight: 700,
-                  color: _apperance.palette.primary,
-                  textTransform: 'uppercase',
-                  letterSpacing: '0.8px'
-                },
-                children: column.label
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ColumnValue, {
-                sx: {
-                  fontSize: '13px',
                   fontWeight: 600,
-                  color: _apperance.palette.gray[600],
-                  fontStyle: 'italic'
+                  color: "#029cfd !important",
+                  textTransform: 'none',
+                  letterSpacing: '0.3px',
+                  '& *': {
+                    color: "#2C3E5F  !important"
+                  }
                 },
-                children: "En-t\xEAte"
-              })]
+                children: column.label
+              })
             }, column.key))
-          }), actions.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionsSection, {
-            className: "actions-section",
-            sx: {
-              opacity: 0.6,
-              '&::before': {
-                backgroundColor: _apperance.palette.primary,
-                boxShadow: "\n                          0 6px 0 ".concat(_apperance.palette.primary, ",\n                          0 12px 0 ").concat(_apperance.palette.primary, "\n                        ")
-              }
-            },
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-              sx: {
-                fontSize: '11px',
-                fontWeight: 600,
-                color: _apperance.palette.primary,
-                textTransform: 'uppercase',
-                letterSpacing: '0.5px'
-              },
-              children: "Actions"
-            })
-          })]
+          })
         }), data.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(TableCard, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DataSection, {
             children: columns.map(column => /*#__PURE__*/(0, _jsxRuntime.jsx)(DataColumn, {

package/dist/config/apperance.js

@@ -6,36 +6,40 @@ Object.defineProperty(exports, "__esModule", {
 exports.palette = void 0;
 const palette = exports.palette = {
   inherit: "inherit",
-  // Couleurs principales extraites des maquettes
-  primary: "#1976D2",
-  // Bleu principal des maquettes
+  // Couleurs principales basées sur l'image "1 - Listing 1.png"
+  primary: "#007BFF",
+  // Bleu vif utilisé pour les éléments actifs
   secondary: "#F5F5F5",
   // Gris très clair pour les backgrounds
-  tertiary: "#757575",
+  tertiary: "#637381",
   // Gris moyen pour les textes secondaires
 
-  // Status colors des maquettes
-  error: "#F44336",
-  // Rouge des maquettes
-  warning: "#FF9800",
-  // Orange des maquettes
-  success: "#4CAF50",
-  // Vert des maquettes
-  info: "#2196F3",
-  // Bleu info des maquettes
+  // Status colors basées sur l'image
+  error: "#DC3545",
+  // Rouge "Expiré" de l'image
+  warning: "#FFC107",
+  // Orange "Renouveler" de l'image
+  success: "#28A745",
+  // Vert "Validé" de l'image
+  info: "#007BFF",
+  // Bleu "En cours" de l'image
 
-  // Colors neutres
+  // Colors neutres basées sur l'image
   white: "#FFFFFF",
-  dark: "#212121",
+  dark: "#212B36",
+  // Bleu très foncé de la barre d'en-tête
+  navy: "#293854",
+  // Bleu marine pour la navigation
   black: "#000000",
-  // Palette complète basée sur l'analyse des maquettes
-  accent: "#FF5722",
-  // Orange accent des maquettes
+  // Palette complète basée sur l'analyse de l'image
+  accent: "#007BFF",
+  // Bleu accent principal
   blue: {
     light: "#E3F2FD",
-    main: "#1976D2",
-    // Bleu principal 
-    dark: "#1565C0",
+    main: "#007BFF",
+    // Bleu principal de l'image
+    dark: "#293854",
+    // Bleu marine du header
     darker: "#0D47A1"
   },
   gray: {
@@ -43,19 +47,25 @@ const palette = exports.palette = {
     100: "#F5F5F5",
     200: "#EEEEEE",
     300: "#E0E0E0",
+    // Gris clair pour "Souscrit"
     400: "#BDBDBD",
     500: "#9E9E9E",
-    600: "#757575",
-    700: "#616161",
+    600: "#637381",
+    // Gris moyen pour les onglets inactifs
+    700: "#454F5B",
+    // Gris foncé pour le texte principal
     800: "#424242",
-    900: "#212121"
+    900: "#212B36" // Bleu très foncé
   },
   background: {
-    default: "#FAFAFA",
-    // Background principal des maquettes
+    default: "#FFFFFF",
+    // Fond principal blanc de l'image
     paper: "#FFFFFF",
+    // Cartes blanches
     card: "#FFFFFF",
-    sidebar: "#F5F5F5",
+    // Cartes du tableau
+    sidebar: "#FFFFFF",
+    // Barre latérale blanche
     required: "#FFF3E0",
     // Orange très clair
     error: "#FFEBEE",
@@ -67,11 +77,11 @@ const palette = exports.palette = {
     info: "#E3F2FD" // Bleu très clair
   },
   border: {
-    light: "#E0E0E0",
-    // Bordures claires des maquettes
+    light: "#DFE3E8",
+    // Bordures claires des cartes de l'image
     main: "#BDBDBD",
-    // Bordures moyennes des maquettes  
-    dark: "#757575" // Bordures foncées des maquettes
+    // Bordures moyennes
+    dark: "#454F5B" // Bordures foncées
   },
   shadow: {
     light: "0px 1px 3px rgba(0, 0, 0, 0.1)",
@@ -79,20 +89,20 @@ const palette = exports.palette = {
     strong: "0px 10px 25px rgba(0, 0, 0, 0.15)",
     card: "0px 2px 8px rgba(0, 0, 0, 0.08)"
   },
-  // Couleurs spécifiques des boutons d'actions des maquettes
+  // Couleurs spécifiques des boutons d'actions basées sur l'image
   actions: {
-    validate: "#4CAF50",
-    // Vert "Validé" des maquettes
-    expire: "#F44336",
-    // Rouge "Expiré" des maquettes  
-    renew: "#FF9800",
-    // Orange "Renouveler" des maquettes
-    download: "#2196F3",
-    // Bleu "Télécharger" des maquettes
-    processing: "#9C27B0",
-    // Violet "En cours" des maquettes
-    souscrit: "#607D8B",
-    // Gris bleu "Souscrit" des maquettes
-    default: "#757575" // Gris par défaut
+    validate: "#28A745",
+    // Vert "Validé" de l'image
+    expire: "#DC3545",
+    // Rouge "Expiré" de l'image  
+    renew: "#FFC107",
+    // Orange "Renouveler" de l'image
+    download: "#007BFF",
+    // Bleu "Télécharger" de l'image
+    processing: "#007BFF",
+    // Bleu "En cours" de l'image
+    souscrit: "#E0E0E0",
+    // Gris clair "Souscrit" de l'image
+    default: "#637381" // Gris moyen par défaut
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portnet/ui",
-  "version": "3.1.3",
+  "version": "3.1.4",
   "description": "Portnet UI",
   "keywords": [
     "react",