anima-ds-nucleus 1.0.17 → 1.0.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/anima-ds-nucleus.css +1 -1
- package/dist/anima-ds.cjs.js +111 -95
- package/dist/anima-ds.esm.js +3521 -2714
- package/package.json +1 -1
- package/src/components/DataDisplay/Card/CardTituloCorto.jsx +23 -2
- package/src/components/DataDisplay/Card/CardTituloCortoMasEstado.jsx +23 -2
- package/src/components/DataDisplay/Card/CardTituloLargo.jsx +23 -2
- package/src/components/DataDisplay/Card/CardTituloLargoMasEstado.jsx +23 -2
- package/src/components/Inputs/PasswordInput/PasswordInput.jsx +85 -0
- package/src/components/Layout/Header/HeaderConBuscador.stories.jsx +1 -0
- package/src/components/Layout/Header/HeaderCore.jsx +12 -12
- package/src/components/Layout/Header/HeaderGeneral.jsx +28 -2
- package/src/components/Layout/Header/HeaderPoint.jsx +3 -3
- package/src/components/Layout/NavPoint/NavPoint.jsx +36 -21
- package/src/components/Layout/SaludoConFechaDashboard/SaludoConFechaDashboard.jsx +0 -1
- package/src/components/Layout/Sidebar/SidebarCore.jsx +82 -30
- package/src/components/Views/ForgotPassword/ForgotPassword.jsx +341 -0
- package/src/components/Views/ForgotPassword/ForgotPassword.stories.jsx +186 -0
- package/src/components/Views/LoginForm/LoginForm.jsx +332 -43
- package/src/components/Views/LoginForm/LoginForm.stories.jsx +182 -4
- package/src/i18n/config.js +12 -0
- package/src/index.js +1 -0
package/package.json
CHANGED
|
@@ -39,14 +39,35 @@ export const CardTituloCorto = ({
|
|
|
39
39
|
>
|
|
40
40
|
<Typography
|
|
41
41
|
variant="body-md"
|
|
42
|
-
|
|
42
|
+
style={{
|
|
43
|
+
fontFamily: 'IBM Plex Sans',
|
|
44
|
+
fontWeight: 400,
|
|
45
|
+
fontStyle: 'normal',
|
|
46
|
+
fontSize: '20px',
|
|
47
|
+
lineHeight: '30px',
|
|
48
|
+
letterSpacing: '0%',
|
|
49
|
+
verticalAlign: 'middle',
|
|
50
|
+
color: '#223B40',
|
|
51
|
+
margin: 0
|
|
52
|
+
}}
|
|
43
53
|
>
|
|
44
54
|
{title}
|
|
45
55
|
</Typography>
|
|
46
56
|
</div>
|
|
47
57
|
</div>
|
|
48
58
|
{children && (
|
|
49
|
-
<div
|
|
59
|
+
<div
|
|
60
|
+
style={{
|
|
61
|
+
width: '379.5px',
|
|
62
|
+
height: '416px',
|
|
63
|
+
paddingRight: '24px',
|
|
64
|
+
paddingLeft: '24px',
|
|
65
|
+
gap: '16px',
|
|
66
|
+
opacity: 1,
|
|
67
|
+
display: 'flex',
|
|
68
|
+
flexDirection: 'column'
|
|
69
|
+
}}
|
|
70
|
+
>
|
|
50
71
|
{children}
|
|
51
72
|
</div>
|
|
52
73
|
)}
|
|
@@ -40,7 +40,17 @@ export const CardTituloCortoMasEstado = ({
|
|
|
40
40
|
>
|
|
41
41
|
<Typography
|
|
42
42
|
variant="body-md"
|
|
43
|
-
|
|
43
|
+
style={{
|
|
44
|
+
fontFamily: 'IBM Plex Sans',
|
|
45
|
+
fontWeight: 400,
|
|
46
|
+
fontStyle: 'normal',
|
|
47
|
+
fontSize: '20px',
|
|
48
|
+
lineHeight: '30px',
|
|
49
|
+
letterSpacing: '0%',
|
|
50
|
+
verticalAlign: 'middle',
|
|
51
|
+
color: '#223B40',
|
|
52
|
+
margin: 0
|
|
53
|
+
}}
|
|
44
54
|
>
|
|
45
55
|
{title}
|
|
46
56
|
</Typography>
|
|
@@ -64,7 +74,18 @@ export const CardTituloCortoMasEstado = ({
|
|
|
64
74
|
</span>
|
|
65
75
|
</div>
|
|
66
76
|
{children && (
|
|
67
|
-
<div
|
|
77
|
+
<div
|
|
78
|
+
style={{
|
|
79
|
+
width: '379.5px',
|
|
80
|
+
height: '416px',
|
|
81
|
+
paddingRight: '24px',
|
|
82
|
+
paddingLeft: '24px',
|
|
83
|
+
gap: '16px',
|
|
84
|
+
opacity: 1,
|
|
85
|
+
display: 'flex',
|
|
86
|
+
flexDirection: 'column'
|
|
87
|
+
}}
|
|
88
|
+
>
|
|
68
89
|
{children}
|
|
69
90
|
</div>
|
|
70
91
|
)}
|
|
@@ -39,14 +39,35 @@ export const CardTituloLargo = ({
|
|
|
39
39
|
>
|
|
40
40
|
<Typography
|
|
41
41
|
variant="body-md"
|
|
42
|
-
|
|
42
|
+
style={{
|
|
43
|
+
fontFamily: 'IBM Plex Sans',
|
|
44
|
+
fontWeight: 400,
|
|
45
|
+
fontStyle: 'normal',
|
|
46
|
+
fontSize: '20px',
|
|
47
|
+
lineHeight: '30px',
|
|
48
|
+
letterSpacing: '0%',
|
|
49
|
+
verticalAlign: 'middle',
|
|
50
|
+
color: '#223B40',
|
|
51
|
+
margin: 0
|
|
52
|
+
}}
|
|
43
53
|
>
|
|
44
54
|
{title}
|
|
45
55
|
</Typography>
|
|
46
56
|
</div>
|
|
47
57
|
</div>
|
|
48
58
|
{children && (
|
|
49
|
-
<div
|
|
59
|
+
<div
|
|
60
|
+
style={{
|
|
61
|
+
width: '379.5px',
|
|
62
|
+
height: '416px',
|
|
63
|
+
paddingRight: '24px',
|
|
64
|
+
paddingLeft: '24px',
|
|
65
|
+
gap: '16px',
|
|
66
|
+
opacity: 1,
|
|
67
|
+
display: 'flex',
|
|
68
|
+
flexDirection: 'column'
|
|
69
|
+
}}
|
|
70
|
+
>
|
|
50
71
|
{children}
|
|
51
72
|
</div>
|
|
52
73
|
)}
|
|
@@ -40,7 +40,17 @@ export const CardTituloLargoMasEstado = ({
|
|
|
40
40
|
>
|
|
41
41
|
<Typography
|
|
42
42
|
variant="body-md"
|
|
43
|
-
|
|
43
|
+
style={{
|
|
44
|
+
fontFamily: 'IBM Plex Sans',
|
|
45
|
+
fontWeight: 400,
|
|
46
|
+
fontStyle: 'normal',
|
|
47
|
+
fontSize: '20px',
|
|
48
|
+
lineHeight: '30px',
|
|
49
|
+
letterSpacing: '0%',
|
|
50
|
+
verticalAlign: 'middle',
|
|
51
|
+
color: '#223B40',
|
|
52
|
+
margin: 0
|
|
53
|
+
}}
|
|
44
54
|
>
|
|
45
55
|
{title}
|
|
46
56
|
</Typography>
|
|
@@ -64,7 +74,18 @@ export const CardTituloLargoMasEstado = ({
|
|
|
64
74
|
</span>
|
|
65
75
|
</div>
|
|
66
76
|
{children && (
|
|
67
|
-
<div
|
|
77
|
+
<div
|
|
78
|
+
style={{
|
|
79
|
+
width: '379.5px',
|
|
80
|
+
height: '416px',
|
|
81
|
+
paddingRight: '24px',
|
|
82
|
+
paddingLeft: '24px',
|
|
83
|
+
gap: '16px',
|
|
84
|
+
opacity: 1,
|
|
85
|
+
display: 'flex',
|
|
86
|
+
flexDirection: 'column'
|
|
87
|
+
}}
|
|
88
|
+
>
|
|
68
89
|
{children}
|
|
69
90
|
</div>
|
|
70
91
|
)}
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import { useState } from 'react';
|
|
2
|
+
import { Icon } from '../../Atoms/Icon/Icon';
|
|
3
|
+
|
|
4
|
+
export const PasswordInput = ({
|
|
5
|
+
label,
|
|
6
|
+
placeholder,
|
|
7
|
+
value,
|
|
8
|
+
onChange,
|
|
9
|
+
error,
|
|
10
|
+
required = false,
|
|
11
|
+
disabled = false,
|
|
12
|
+
variant,
|
|
13
|
+
className = '',
|
|
14
|
+
inputClassName = '',
|
|
15
|
+
labelClassName = '',
|
|
16
|
+
labelStyle,
|
|
17
|
+
...props
|
|
18
|
+
}) => {
|
|
19
|
+
const [showPassword, setShowPassword] = useState(false);
|
|
20
|
+
const isHexaLogin = variant === 'hexa-login';
|
|
21
|
+
|
|
22
|
+
const baseInputClasses = isHexaLogin
|
|
23
|
+
? 'w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm text-gray-900'
|
|
24
|
+
: 'w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed';
|
|
25
|
+
|
|
26
|
+
const resolvedInputClasses = `
|
|
27
|
+
${baseInputClasses}
|
|
28
|
+
${isHexaLogin ? '' : (error ? 'border-red-500' : 'border-gray-300')}
|
|
29
|
+
${inputClassName}
|
|
30
|
+
`.trim().replace(/\s+/g, ' ');
|
|
31
|
+
|
|
32
|
+
return (
|
|
33
|
+
<div className={`w-full ${className}`}>
|
|
34
|
+
{label && (
|
|
35
|
+
<label
|
|
36
|
+
className={labelClassName || 'block text-sm font-medium text-gray-700 mb-1'}
|
|
37
|
+
style={labelStyle}
|
|
38
|
+
>
|
|
39
|
+
{label}
|
|
40
|
+
{required && <span className="text-red-500 ml-1">*</span>}
|
|
41
|
+
</label>
|
|
42
|
+
)}
|
|
43
|
+
|
|
44
|
+
<div className="relative w-full">
|
|
45
|
+
<input
|
|
46
|
+
type={showPassword ? 'text' : 'password'}
|
|
47
|
+
placeholder={placeholder}
|
|
48
|
+
disabled={disabled}
|
|
49
|
+
value={value}
|
|
50
|
+
onChange={onChange}
|
|
51
|
+
className={resolvedInputClasses}
|
|
52
|
+
{...props}
|
|
53
|
+
/>
|
|
54
|
+
|
|
55
|
+
<button
|
|
56
|
+
type="button"
|
|
57
|
+
tabIndex={-1}
|
|
58
|
+
onClick={() => setShowPassword((prev) => !prev)}
|
|
59
|
+
className="absolute"
|
|
60
|
+
style={{
|
|
61
|
+
top: '50%',
|
|
62
|
+
transform: 'translateY(-50%)',
|
|
63
|
+
right: '0.75rem',
|
|
64
|
+
color: '#6b7280',
|
|
65
|
+
}}
|
|
66
|
+
aria-label={showPassword ? 'Ocultar contraseña' : 'Mostrar contraseña'}
|
|
67
|
+
>
|
|
68
|
+
<Icon
|
|
69
|
+
name={showPassword ? 'EyeSlashIcon' : 'EyeIcon'}
|
|
70
|
+
variant="24-outline"
|
|
71
|
+
size={18}
|
|
72
|
+
/>
|
|
73
|
+
</button>
|
|
74
|
+
</div>
|
|
75
|
+
|
|
76
|
+
{error && !isHexaLogin && (
|
|
77
|
+
<p className="mt-1 text-sm text-red-600">{error}</p>
|
|
78
|
+
)}
|
|
79
|
+
</div>
|
|
80
|
+
);
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
export default PasswordInput;
|
|
84
|
+
|
|
85
|
+
|
|
@@ -40,7 +40,7 @@ export const HeaderCore = ({
|
|
|
40
40
|
notificationDesktopButtonStyle,
|
|
41
41
|
notificationDesktopIconWrapperClassName = '',
|
|
42
42
|
notificationDesktopIconWrapperStyle,
|
|
43
|
-
notificationDesktopIconSize =
|
|
43
|
+
notificationDesktopIconSize = 24,
|
|
44
44
|
notificationDesktopIconStrokeWidth = 1.5,
|
|
45
45
|
notificationDesktopIconStyle,
|
|
46
46
|
notificationDesktopBadgeStyle,
|
|
@@ -48,7 +48,7 @@ export const HeaderCore = ({
|
|
|
48
48
|
notificationMobileButtonStyle,
|
|
49
49
|
notificationMobileIconWrapperClassName = '',
|
|
50
50
|
notificationMobileIconWrapperStyle,
|
|
51
|
-
notificationMobileIconSize =
|
|
51
|
+
notificationMobileIconSize = 24,
|
|
52
52
|
notificationMobileIconStrokeWidth = 1.5,
|
|
53
53
|
notificationMobileIconStyle,
|
|
54
54
|
showNotificationBadgeOnMobile = false,
|
|
@@ -286,11 +286,11 @@ export const HeaderCore = ({
|
|
|
286
286
|
strokeWidth={notificationDesktopIconStrokeWidth}
|
|
287
287
|
className={`color-gray-600 ${notificationIconClassName}`}
|
|
288
288
|
style={{
|
|
289
|
-
width: '
|
|
290
|
-
height: '
|
|
289
|
+
width: '24px',
|
|
290
|
+
height: '24px',
|
|
291
291
|
position: 'absolute',
|
|
292
|
-
top: '
|
|
293
|
-
left: '
|
|
292
|
+
top: '0px',
|
|
293
|
+
left: '0px',
|
|
294
294
|
opacity: 1,
|
|
295
295
|
transform: 'rotate(0deg)',
|
|
296
296
|
...(notificationIconStyle || {}),
|
|
@@ -310,7 +310,7 @@ export const HeaderCore = ({
|
|
|
310
310
|
paddingRight: '8px',
|
|
311
311
|
paddingBottom: '2px',
|
|
312
312
|
paddingLeft: '8px',
|
|
313
|
-
borderRadius: '
|
|
313
|
+
borderRadius: '16px',
|
|
314
314
|
opacity: 1,
|
|
315
315
|
transform: 'rotate(0deg)',
|
|
316
316
|
...(notificationBadgeStyle || {}),
|
|
@@ -448,11 +448,11 @@ export const HeaderCore = ({
|
|
|
448
448
|
strokeWidth={notificationMobileIconStrokeWidth}
|
|
449
449
|
className={`color-gray-600 ${notificationIconClassName}`}
|
|
450
450
|
style={{
|
|
451
|
-
width: '
|
|
452
|
-
height: '
|
|
451
|
+
width: '24px',
|
|
452
|
+
height: '24px',
|
|
453
453
|
position: 'absolute',
|
|
454
|
-
top: '
|
|
455
|
-
left: '
|
|
454
|
+
top: '0px',
|
|
455
|
+
left: '0px',
|
|
456
456
|
opacity: 1,
|
|
457
457
|
transform: 'rotate(0deg)',
|
|
458
458
|
...(notificationIconStyle || {}),
|
|
@@ -472,7 +472,7 @@ export const HeaderCore = ({
|
|
|
472
472
|
paddingRight: '8px',
|
|
473
473
|
paddingBottom: '2px',
|
|
474
474
|
paddingLeft: '8px',
|
|
475
|
-
borderRadius: '
|
|
475
|
+
borderRadius: '16px',
|
|
476
476
|
marginLeft: '6px',
|
|
477
477
|
opacity: 1,
|
|
478
478
|
transform: 'rotate(0deg)',
|
|
@@ -48,10 +48,36 @@ export const HeaderGeneral = ({
|
|
|
48
48
|
<div className="flex items-center gap-3">
|
|
49
49
|
<LogoHexa width={36} height={40} />
|
|
50
50
|
<div className="flex items-center" style={{ gap: '4px' }}>
|
|
51
|
-
<Typography
|
|
51
|
+
<Typography
|
|
52
|
+
variant="h5"
|
|
53
|
+
className="font-normal"
|
|
54
|
+
style={{
|
|
55
|
+
color: '#2D5C63',
|
|
56
|
+
margin: 0,
|
|
57
|
+
fontFamily: 'IBM Plex Sans',
|
|
58
|
+
fontWeight: 400,
|
|
59
|
+
fontStyle: 'normal',
|
|
60
|
+
fontSize: '20px',
|
|
61
|
+
lineHeight: '30px',
|
|
62
|
+
letterSpacing: '0px',
|
|
63
|
+
}}
|
|
64
|
+
>
|
|
52
65
|
{logoText}
|
|
53
66
|
</Typography>
|
|
54
|
-
<Typography
|
|
67
|
+
<Typography
|
|
68
|
+
variant="h5"
|
|
69
|
+
className="font-normal"
|
|
70
|
+
style={{
|
|
71
|
+
color: '#2D5C63',
|
|
72
|
+
margin: 0,
|
|
73
|
+
fontFamily: 'IBM Plex Sans',
|
|
74
|
+
fontWeight: 400,
|
|
75
|
+
fontStyle: 'normal',
|
|
76
|
+
fontSize: '20px',
|
|
77
|
+
lineHeight: '30px',
|
|
78
|
+
letterSpacing: '0px',
|
|
79
|
+
}}
|
|
80
|
+
>
|
|
55
81
|
{suiteText}
|
|
56
82
|
</Typography>
|
|
57
83
|
</div>
|
|
@@ -21,8 +21,8 @@ const FONT_SIZE_BASE = '14px';
|
|
|
21
21
|
const LINE_HEIGHT_BASE = '20px';
|
|
22
22
|
|
|
23
23
|
// Constantes de breakpoints
|
|
24
|
-
const BREAKPOINT_MOBILE_MAX = '
|
|
25
|
-
const BREAKPOINT_DESKTOP_MIN = '
|
|
24
|
+
const BREAKPOINT_MOBILE_MAX = '1024px';
|
|
25
|
+
const BREAKPOINT_DESKTOP_MIN = '1025px';
|
|
26
26
|
const BREAKPOINT_TABLET_MAX = '700px';
|
|
27
27
|
|
|
28
28
|
// Constantes de valores por defecto
|
|
@@ -127,7 +127,7 @@ export const HeaderPoint = ({
|
|
|
127
127
|
.header-actions-wrapper {
|
|
128
128
|
flex-shrink: 0;
|
|
129
129
|
}
|
|
130
|
-
/* Estilos para rango intermedio (
|
|
130
|
+
/* Estilos para rango intermedio (1025px - 700px) - No aplica con nuevo breakpoint */
|
|
131
131
|
@media (min-width: ${BREAKPOINT_DESKTOP_MIN}) and (max-width: ${BREAKPOINT_TABLET_MAX}) {
|
|
132
132
|
.header-desktop-layout {
|
|
133
133
|
gap: 0.5rem;
|
|
@@ -12,6 +12,10 @@ const NAV_HEIGHT = '80px'; // Altura fija para garantizar espacio para icono + l
|
|
|
12
12
|
const BORDER_RADIUS_TOP = '16px';
|
|
13
13
|
const SHADOW_COLOR = 'rgba(0, 0, 0, 0.1)';
|
|
14
14
|
|
|
15
|
+
// Constantes de breakpoints
|
|
16
|
+
const BREAKPOINT_MOBILE_MAX = '1024px';
|
|
17
|
+
const BREAKPOINT_DESKTOP_MIN = '1025px';
|
|
18
|
+
|
|
15
19
|
const DEFAULT_ITEMS = [
|
|
16
20
|
{ id: 'inicio', label: 'Inicio', icon: 'Squares2X2Icon' },
|
|
17
21
|
{ id: 'docs', label: 'Docs', icon: 'DocumentTextIcon' },
|
|
@@ -32,25 +36,14 @@ export const NavPoint = ({
|
|
|
32
36
|
}
|
|
33
37
|
};
|
|
34
38
|
|
|
35
|
-
const getBorderRadius = (isActive
|
|
39
|
+
const getBorderRadius = (isActive) => {
|
|
36
40
|
if (!isActive) return '0';
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
return '0';
|
|
41
|
+
// Redondear ambas esquinas superiores cuando la pestaña está activa
|
|
42
|
+
return `${BORDER_RADIUS_TOP} ${BORDER_RADIUS_TOP} 0 0`;
|
|
40
43
|
};
|
|
41
44
|
|
|
42
45
|
return (
|
|
43
|
-
|
|
44
|
-
className={`fixed bottom-0 left-0 right-0 z-50 md:hidden bg-white rounded-t-lg shadow-md nav-point ${className}`}
|
|
45
|
-
style={{
|
|
46
|
-
boxShadow: `0 -2px 8px ${SHADOW_COLOR}`,
|
|
47
|
-
borderRadius: `${BORDER_RADIUS_TOP} ${BORDER_RADIUS_TOP} 0 0`,
|
|
48
|
-
overflow: 'hidden',
|
|
49
|
-
minHeight: NAV_HEIGHT,
|
|
50
|
-
height: NAV_HEIGHT,
|
|
51
|
-
}}
|
|
52
|
-
{...props}
|
|
53
|
-
>
|
|
46
|
+
<>
|
|
54
47
|
<style>{`
|
|
55
48
|
.nav-point {
|
|
56
49
|
border-radius: ${BORDER_RADIUS_TOP} ${BORDER_RADIUS_TOP} 0 0 !important;
|
|
@@ -58,6 +51,18 @@ export const NavPoint = ({
|
|
|
58
51
|
min-height: ${NAV_HEIGHT} !important;
|
|
59
52
|
height: ${NAV_HEIGHT} !important;
|
|
60
53
|
}
|
|
54
|
+
/* Mostrar NavPoint de 0px a 1024px */
|
|
55
|
+
@media (max-width: ${BREAKPOINT_MOBILE_MAX}) {
|
|
56
|
+
.nav-point {
|
|
57
|
+
display: block !important;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
/* Ocultar NavPoint desde 1025px en adelante */
|
|
61
|
+
@media (min-width: ${BREAKPOINT_DESKTOP_MIN}) {
|
|
62
|
+
.nav-point {
|
|
63
|
+
display: none !important;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
61
66
|
.nav-point > div {
|
|
62
67
|
overflow: hidden;
|
|
63
68
|
height: 100%;
|
|
@@ -79,11 +84,20 @@ export const NavPoint = ({
|
|
|
79
84
|
text-align: center;
|
|
80
85
|
}
|
|
81
86
|
`}</style>
|
|
82
|
-
<
|
|
87
|
+
<nav
|
|
88
|
+
className={`fixed bottom-0 left-0 right-0 z-50 bg-white rounded-t-lg shadow-md nav-point ${className}`}
|
|
89
|
+
style={{
|
|
90
|
+
boxShadow: `0 -2px 8px ${SHADOW_COLOR}`,
|
|
91
|
+
borderRadius: `${BORDER_RADIUS_TOP} ${BORDER_RADIUS_TOP} 0 0`,
|
|
92
|
+
overflow: 'hidden',
|
|
93
|
+
minHeight: NAV_HEIGHT,
|
|
94
|
+
height: NAV_HEIGHT,
|
|
95
|
+
}}
|
|
96
|
+
{...props}
|
|
97
|
+
>
|
|
98
|
+
<div className="flex items-stretch h-full" style={{ overflow: 'hidden' }}>
|
|
83
99
|
{items.map((item, index) => {
|
|
84
100
|
const isActive = activeItem === item.id;
|
|
85
|
-
const isFirst = index === 0;
|
|
86
|
-
const isLast = index === items.length - 1;
|
|
87
101
|
|
|
88
102
|
return (
|
|
89
103
|
<button
|
|
@@ -92,7 +106,7 @@ export const NavPoint = ({
|
|
|
92
106
|
className="flex flex-col items-center justify-center px-4 py-3 transition-colors duration-200 cursor-pointer flex-1 relative nav-point-item"
|
|
93
107
|
style={{
|
|
94
108
|
backgroundColor: isActive ? BACKGROUND_COLOR_ACTIVE : 'transparent',
|
|
95
|
-
borderRadius: getBorderRadius(isActive
|
|
109
|
+
borderRadius: getBorderRadius(isActive),
|
|
96
110
|
}}
|
|
97
111
|
>
|
|
98
112
|
<Icon
|
|
@@ -117,8 +131,9 @@ export const NavPoint = ({
|
|
|
117
131
|
</button>
|
|
118
132
|
);
|
|
119
133
|
})}
|
|
120
|
-
|
|
121
|
-
|
|
134
|
+
</div>
|
|
135
|
+
</nav>
|
|
136
|
+
</>
|
|
122
137
|
);
|
|
123
138
|
};
|
|
124
139
|
|
|
@@ -170,7 +170,6 @@ export const SaludoConFechaDashboard = ({
|
|
|
170
170
|
// Responsive: ocupar el ancho disponible sin generar scroll horizontal,
|
|
171
171
|
// manteniendo el ancho Figma como máximo.
|
|
172
172
|
width: '100%',
|
|
173
|
-
maxWidth: '1250px',
|
|
174
173
|
minHeight: '74px',
|
|
175
174
|
gap: '24px',
|
|
176
175
|
opacity: 1,
|