diff --git a/public/favicon.svg b/public/favicon.svg index 3caf057..dddf9f8 100644 --- a/public/favicon.svg +++ b/public/favicon.svg @@ -2,7 +2,7 @@ - + diff --git a/src/assets/style/navbarStyles.css b/src/assets/style/navbarStyles.css index dea1992..078a711 100644 --- a/src/assets/style/navbarStyles.css +++ b/src/assets/style/navbarStyles.css @@ -11,7 +11,7 @@ top: 0px; width: 100%; z-index: 9999; - border-bottom: 3px solid #0C489E; + border-bottom: 3px solid #0c489e; min-height: 77px; } @@ -112,7 +112,7 @@ #navbar div li a:hover, #navbar div li button.navTrigger:hover{ - color: #0C489E; + color: #1565C0; } #navbar div li a:hover::after, @@ -122,7 +122,7 @@ content: ""; width: 80%; height: 3px; - background:#0C489E; + background:#1565C0; position: absolute; bottom: -5px; left: 20px; @@ -166,7 +166,7 @@ #navbar a:focus-visible, #navbar button.navTrigger:focus-visible{ - outline: 3px solid #0C489E; + outline: 3px solid #0c489e; outline-offset: 2px; border-radius: 10px; } @@ -234,7 +234,7 @@ text-decoration: none; font-size: 1.1rem; font-weight: 600; - color: #0C489E; + color: #0c489e; transition: 0.3s ease-in-out; text-align: center; } @@ -242,7 +242,7 @@ text-decoration: none; font-size: 1.1rem; font-weight: 600; - color: #0C489E; + color: #0c489e; transition: 0.3s ease-in-out; text-align: center; } @@ -284,7 +284,7 @@ transition: 0.3s ease-in-out; } #sidebar li a:hover{ - color: #0C489E; + color: #0c489e; } #sidebar div li ul{ background: white; @@ -344,12 +344,12 @@ /* Hover / focus */ #sidebar li > a:hover, #sidebar li > button.navTrigger:hover{ - color: #0C489E; + color: #0c489e; } #sidebar li > a:focus-visible, #sidebar li > button.navTrigger:focus-visible{ - outline: 3px solid #0C489E; + outline: 3px solid #0c489e; outline-offset: 2px; border-radius: 10px; } diff --git a/src/assets/style/styles.css b/src/assets/style/styles.css index a675de2..17f9cc6 100644 --- a/src/assets/style/styles.css +++ b/src/assets/style/styles.css @@ -72,7 +72,7 @@ a:active { [role="link"], [tabindex]:not([tabindex="-1"]) ):focus-visible { - outline: 3px solid #0C489E; + outline: 3px solid #0c489e; outline-offset: 2px; border-radius: 4px; } @@ -95,9 +95,9 @@ a:active { /* ===== MUI DataGrid keyboard focus (WCAG 2.4.7 / 2.4.11) ===== */ .MuiDataGrid-columnHeader:focus-visible, .MuiDataGrid-cell:focus-visible { - outline: 3px solid #0C489E; + outline: 3px solid #0c489e; outline-offset: -2px; - box-shadow: 0 0 0 3px rgba(12, 72, 158, 0.25); + box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.25); } /* Contained buttons only */ @@ -122,7 +122,7 @@ a:active { /* ===== Outlined button focus ===== */ .MuiButton-outlined:focus-visible { - outline: 3px solid #0C489E; + outline: 3px solid #0c489e; outline-offset: 2px; } diff --git a/src/components/AdminLogo/index.js b/src/components/AdminLogo/index.js index 4fa7a84..e0b8052 100644 --- a/src/components/AdminLogo/index.js +++ b/src/components/AdminLogo/index.js @@ -34,7 +34,7 @@ const LogoSection = ({ sx, to }) => { ...sx, /* ✅ WCAG 2.4.7 focus indicator */ '&:focus-visible': { - outline: '3px solid #0C489E', + outline: '3px solid #0c489e', outlineOffset: '2px', borderRadius: '6px' } @@ -42,7 +42,7 @@ const LogoSection = ({ sx, to }) => { > - PNSPS + PNSPS diff --git a/src/components/FileDeleteButton.js b/src/components/FileDeleteButton.js new file mode 100644 index 0000000..21c4f50 --- /dev/null +++ b/src/components/FileDeleteButton.js @@ -0,0 +1,27 @@ +import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline'; +import { IconButton } from '@mui/material'; +import { useIntl } from 'react-intl'; +import { handleActionKeyDown } from 'utils/CommonFunction'; + +export default function FileDeleteButton({ onDelete, icon: IconComponent = RemoveCircleOutlineIcon, color = 'error' }) { + const intl = useIntl(); + const label = intl.formatMessage({ id: 'ariaDeleteFile' }); + + const handleDelete = (event) => { + onDelete(event); + }; + + return ( + handleActionKeyDown(event, handleDelete)} + > + + + ); +} diff --git a/src/components/FileList.js b/src/components/FileList.js index 412649f..48f9156 100644 --- a/src/components/FileList.js +++ b/src/components/FileList.js @@ -11,6 +11,8 @@ import { FiDataGrid } from './FiDataGrid'; import {useTheme} from "@emotion/react"; import {useMediaQuery} from "@mui/material"; import {useIntl} from "react-intl"; +import { createDeleteFileColumn } from 'utils/fileListColumns'; +import { CONTAINED_PRIMARY_BLUE } from "themes/colorConst"; // ==============================|| EVENT TABLE ||============================== // export default function FileList({ refType, refId, allowDelete, sx, dateHideable,lang, ...props }) { @@ -94,11 +96,10 @@ export default function FileList({ refType, refId, allowDelete, sx, dateHideable return [ } + icon={} label="Download" className="textPrimary" onClick={onDownloadClick(params.id, params.row.skey, params.row.filename)} - color="primary" disabled={onDownload} />] }, @@ -143,11 +144,10 @@ export default function FileList({ refType, refId, allowDelete, sx, dateHideable return [ } + icon={} label="Download" className="textPrimary" onClick={onDownloadClick(params.id, params.row.skey, params.row.filename)} - color="primary" disabled={onDownload} />] }, @@ -175,24 +175,10 @@ export default function FileList({ refType, refId, allowDelete, sx, dateHideable if (allowDelete) { - columns.push({ - field: 'actions', - type: 'actions', - headerName: 'Delete', - width: 100, - cellClassName: 'actions', - getActions: (params) => { - return [ - } - label="Delete" - className="textPrimary" - onClick={onDeleteClick(params.id, params.row.skey, params.row.filename)} - color="primary" - />] - }, - }); + columns.push(createDeleteFileColumn( + (id, row) => onDeleteClick(id, row.skey, row.filename), + { icon: Icon.Delete, color: 'primary', width: 100 } + )); } return ( diff --git a/src/components/MobileLogo/index.js b/src/components/MobileLogo/index.js index da2ff62..8732c4a 100644 --- a/src/components/MobileLogo/index.js +++ b/src/components/MobileLogo/index.js @@ -30,7 +30,7 @@ const LogoSection = ({ sx, to }) => { /* WCAG 2.4.7 – visible keyboard focus */ '&:focus-visible': { - outline: '3px solid #0C489E', + outline: '3px solid #0c489e', outlineOffset: '2px', borderRadius: '6px' } diff --git a/src/components/RegisterStepIcon.js b/src/components/RegisterStepIcon.js new file mode 100644 index 0000000..e143959 --- /dev/null +++ b/src/components/RegisterStepIcon.js @@ -0,0 +1,55 @@ +import { Box, useTheme } from '@mui/material'; + +/** Darker green for completed register steps (matches PAY button hover). */ +export const REGISTER_STEP_COMPLETED_COLOR = '#488F52'; + +export const registerStepStyle = { + width: { lg: '40%', md: '70%', xs: '100%' }, + boxShadow: 1, + backgroundColor: '#FFFFFF', + padding: 2, + '& .MuiStepLabel-label': { color: '#424242' }, + '& .MuiStepConnector-line': { borderColor: '#9E9E9E' }, + '& .MuiStepConnector-root.Mui-completed .MuiStepConnector-line': { + borderColor: REGISTER_STEP_COMPLETED_COLOR, + }, + '& .MuiStepConnector-root.Mui-active .MuiStepConnector-line': { + borderColor: 'warning.main', + }, +}; + +const RegisterStepIcon = ({ active, completed, className, icon }) => { + const theme = useTheme(); + let circleColor = '#757575'; + let textColor = '#FFFFFF'; + + if (completed) { + circleColor = REGISTER_STEP_COMPLETED_COLOR; + } else if (active) { + circleColor = theme.palette.warning.main; + textColor = '#1A1A1A'; + } + + return ( + + {icon} + + ); +}; + +export default RegisterStepIcon; diff --git a/src/components/iAmSmartButton.js b/src/components/iAmSmartButton.js index 3ae9e0c..532ac25 100644 --- a/src/components/iAmSmartButton.js +++ b/src/components/iAmSmartButton.js @@ -25,7 +25,7 @@ export function IAmSmartButton({ label, onClickFun, fullWidth }) { return ( diff --git a/src/index.js b/src/index.js index 44843b0..67e5d9f 100644 --- a/src/index.js +++ b/src/index.js @@ -58,7 +58,10 @@ root.render( - + diff --git a/src/layout/MainLayout/Header/HeaderContent/LocaleSelector.js b/src/layout/MainLayout/Header/HeaderContent/LocaleSelector.js index 66d0b68..3d3aba6 100644 --- a/src/layout/MainLayout/Header/HeaderContent/LocaleSelector.js +++ b/src/layout/MainLayout/Header/HeaderContent/LocaleSelector.js @@ -64,7 +64,8 @@ const LocaleSelector = () => { }} aria-label={intl.formatMessage({id: 'openLanguage'})} ref={anchorRef} - aria-controls={open ? 'profile-grow' : undefined} + aria-controls={open ? 'locale-selector-menu' : undefined} + aria-expanded={open} aria-haspopup="true" onClick={handleToggle} > @@ -103,6 +104,7 @@ const LocaleSelector = () => { > diff --git a/src/layout/MainLayout/Header/HeaderContent/Notification.js b/src/layout/MainLayout/Header/HeaderContent/Notification.js index a300a0b..3348002 100644 --- a/src/layout/MainLayout/Header/HeaderContent/Notification.js +++ b/src/layout/MainLayout/Header/HeaderContent/Notification.js @@ -77,7 +77,7 @@ const Notification = () => { /* ✅ WCAG 2.4.7 focus indicator */ '&:focus-visible': { - outline: '3px solid #0C489E', + outline: '3px solid #0c489e', outlineOffset: '2px', borderRadius: '6px' } diff --git a/src/layout/MainLayout/Header/index.js b/src/layout/MainLayout/Header/index.js index 335cc59..c2755ef 100644 --- a/src/layout/MainLayout/Header/index.js +++ b/src/layout/MainLayout/Header/index.js @@ -775,7 +775,7 @@ function Header(props) { - + PNSPS @@ -794,7 +794,7 @@ function Header(props) { - + PNSPS @@ -826,13 +826,13 @@ function Header(props) { onClick={handleDrawerToggle} sx={{ mr: 2, display: { md: "none" } }} > - + - + PNSPS @@ -848,7 +848,7 @@ function Header(props) { - + @@ -863,14 +863,14 @@ function Header(props) { onClick={handleDrawerToggle} sx={{ mr: 2, display: { md: "none" } }} > - + - + @@ -946,14 +946,14 @@ function Header(props) { onClick={handleDrawerToggle} sx={{ mr: 2, display: { md: "none" } }} > - + - + diff --git a/src/layout/MainLayout/index.js b/src/layout/MainLayout/index.js index d5999b8..de5ca80 100644 --- a/src/layout/MainLayout/index.js +++ b/src/layout/MainLayout/index.js @@ -67,7 +67,7 @@ const MainLayout = () => { {/* */} - +