Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor: Reformat Organizations & User Management to Material Card Design - #1364 #1437

Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions frontend/src/assets/locales/en/admin.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@
"usersNotFound": "No users found",
"activitiesNotFound": "No user activities found",
"newUserBtn": "New user",
"userDetails": "User details",
"editBtn": "Edit",
"userColLabels": {
"userName": "User name",
"role": "Role(s)",
Expand Down
4 changes: 3 additions & 1 deletion frontend/src/assets/locales/en/organization.json
Original file line number Diff line number Diff line change
Expand Up @@ -45,5 +45,7 @@
"editOrgTitle": "Edit organization",
"toUpdateMsg": " to update address information.",
"selectOrgLabel": "Select an Organization",
"complianceUnitBalance": "Compliance Unit Balance"
"complianceUnitBalance": "Compliance Unit Balance",
"editBtn": "Edit",
"orgDetails": "Organization details"
}
39 changes: 34 additions & 5 deletions frontend/src/components/BCWidgetCard/BCWidgetCard.jsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,28 @@
import PropTypes from 'prop-types'

// @mui material components
import { Card, CardContent, Divider } from '@mui/material'
import BCBox from '@/components/BCBox'
import BCTypography from '@/components/BCTypography'
import { useNavigate } from 'react-router-dom'
import EditIcon from '@mui/icons-material/Edit'
import BCButton from '@/components/BCButton'

function BCWidgetCard({
color = 'nav',
title = 'Title',
content,
style,
disableHover = false
disableHover = false,
editButtonText = null,
editButtonRoute = null
}) {
const navigate = useNavigate()

const handleButtonClick = () => {
if (editButtonRoute) {
navigate(editButtonRoute)
}
}

return (
<Card
sx={{
Expand All @@ -28,7 +39,7 @@ function BCWidgetCard({
coloredShadow={color}
borderRadius="md"
display="flex"
justifyContent="left"
justifyContent="space-between"
alignItems="center"
px={2}
py={1}
Expand All @@ -39,6 +50,22 @@ function BCWidgetCard({
<BCTypography variant="subtitle2" fontWeight="light" color="inherit">
{title}
</BCTypography>
{editButtonRoute && (
<BCButton
variant="outlined"
size="small"
color="primay"
onClick={handleButtonClick}
startIcon={<EditIcon sx={{ width: '17px', height: '17px' }} />}
sx={{
'&:hover': {
backgroundColor: 'rgba(255, 255, 255, 0.1)'
}
}}
>
{editButtonText}
</BCButton>
)}
</BCBox>
</BCBox>
<Divider
Expand Down Expand Up @@ -67,7 +94,9 @@ BCWidgetCard.propTypes = {
title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
content: PropTypes.node.isRequired,
disableHover: PropTypes.bool,
subHeader: PropTypes.node
subHeader: PropTypes.node,
editButtonText: PropTypes.string,
editButtonRoute: PropTypes.string
}

export default BCWidgetCard
Loading
Loading