Mirror/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2025-02-07 13:59:06 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

frontend: fix breaking MUI-X v7 changes

Browse Source
This commit is contained in:
Reckless_Satoshi 2024-04-20 20:19:19 +01:00
parent 9ae50948dd
commit 471583733c
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
3 changed files with 37 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/package.json
View File

@ -55,7 +55,7 @@
"@mui/base": "^5.0.0-beta.7", "@mui/base": "^5.0.0-beta.7",
"@mui/icons-material": "^5.15.9", "@mui/icons-material": "^5.15.9",
"@mui/lab": "^5.0.0-alpha.136", "@mui/lab": "^5.0.0-alpha.136",
"@mui/material": "^5.15.9", "@mui/material": "^5.15.14",
"@mui/system": "^5.15.11", "@mui/system": "^5.15.11",
"@mui/x-data-grid": "^7.3.0", "@mui/x-data-grid": "^7.3.0",
"@mui/x-date-pickers": "^7.2.0", "@mui/x-date-pickers": "^7.2.0",

60
frontend/src/components/BookTable/index.tsx
View File

@ -24,6 +24,7 @@ import {
type GridPaginationModel, type GridPaginationModel,
type GridColDef, type GridColDef,
type GridValidRowModel, type GridValidRowModel,
GridSlotsComponent,
} from '@mui/x-data-grid'; } from '@mui/x-data-grid';
import currencyDict from '../../../static/assets/currencies.json'; import currencyDict from '../../../static/assets/currencies.json';
import { type PublicOrder } from '../../models'; import { type PublicOrder } from '../../models';
@ -204,12 +205,12 @@ const BookTable = ({
renderCell: (params: any) => { renderCell: (params: any) => {
return ( return (
<ListItemButton <ListItemButton
style={{ cursor: 'pointer', position: 'relative', left: '-1.3em' }} style={{ cursor: 'pointer' }}
onClick={() => { onClick={() => {
onOrderClicked(params.row.id, params.row.coordinatorShortAlias); onOrderClicked(params.row.id, params.row.coordinatorShortAlias);
}} }}
> >
<ListItemAvatar> <ListItemAvatar sx={{ position: 'relative', left: '-1.3em', bottom: '0.6em' }}>
<RobotAvatar <RobotAvatar
hashId={params.row.maker_hash_id} hashId={params.row.maker_hash_id}
style={{ width: '3.215em', height: '3.215em' }} style={{ width: '3.215em', height: '3.215em' }}
@ -221,7 +222,10 @@ const BookTable = ({
small={true} small={true}
/> />
</ListItemAvatar> </ListItemAvatar>
<ListItemText primary={params.row.maker_nick} /> <ListItemText
primary={params.row.maker_nick}
sx={{ position: 'relative', left: '-1.3em', bottom: '0.6em' }}
/>
</ListItemButton> </ListItemButton>
); );
}, },
@ -236,7 +240,7 @@ const BookTable = ({
renderCell: (params: any) => { renderCell: (params: any) => {
return ( return (
<div <div
style={{ position: 'relative', left: '-0.34em', cursor: 'pointer' }} style={{ position: 'relative', left: '-0.34em', cursor: 'pointer', bottom: '0.2em' }}
onClick={() => { onClick={() => {
onOrderClicked(params.row.id, params.row.coordinatorShortAlias); onOrderClicked(params.row.id, params.row.coordinatorShortAlias);
}} }}
@ -270,12 +274,12 @@ const BookTable = ({
renderCell: (params: any) => { renderCell: (params: any) => {
return ( return (
<ListItemButton <ListItemButton
style={{ cursor: 'pointer', position: 'relative', left: '-1.54em' }} style={{ cursor: 'pointer' }}
onClick={() => { onClick={() => {
onClickCoordinator(params.row.coordinatorShortAlias); onClickCoordinator(params.row.coordinatorShortAlias);
}} }}
> >
<ListItemAvatar> <ListItemAvatar sx={{ position: 'relative', left: '-1.54em', bottom: '0.4em' }}>
<RobotAvatar <RobotAvatar
shortAlias={params.row.coordinatorShortAlias} shortAlias={params.row.coordinatorShortAlias}
style={{ width: '3.215em', height: '3.215em' }} style={{ width: '3.215em', height: '3.215em' }}
@ -364,8 +368,9 @@ const BookTable = ({
}} }}
> >
{currencyCode} {currencyCode}
<div style={{ width: '0.3em' }} /> <div style={{ position: 'relative', left: '0.3em', bottom: '0.7em' }}>
<FlagWithProps code={currencyCode} /> <FlagWithProps code={currencyCode} />
</div>
</div> </div>
); );
}, },
@ -386,12 +391,14 @@ const BookTable = ({
onOrderClicked(params.row.id, params.row.coordinatorShortAlias); onOrderClicked(params.row.id, params.row.coordinatorShortAlias);
}} }}
> >
<PaymentStringAsIcons <div style={{ position: 'relative', top: '0.4em' }}>
othersText={t('Others')} <PaymentStringAsIcons
verbose={true} othersText={t('Others')}
size={1.7 * fontSize} verbose={true}
text={params.row.payment_method} size={1.7 * fontSize}
/> text={params.row.payment_method}
/>
</div>
</div> </div>
); );
}, },
@ -410,7 +417,8 @@ const BookTable = ({
<div <div
style={{ style={{
position: 'relative', position: 'relative',
left: '-4px', left: '-0.25em',
top: '0.3em',
cursor: 'pointer', cursor: 'pointer',
}} }}
onClick={() => { onClick={() => {
@ -545,7 +553,7 @@ const BookTable = ({
const minutes = Math.round((timeToExpiry - hours * (3600 * 1000)) / 60000); const minutes = Math.round((timeToExpiry - hours * (3600 * 1000)) / 60000);
return ( return (
<Box <Box
sx={{ position: 'relative', display: 'inline-flex', left: '0.3em' }} sx={{ position: 'relative', display: 'inline-flex', left: '0.3em', top: '0.5em' }}
onClick={() => { onClick={() => {
onOrderClicked(params.row.id, params.row.coordinatorShortAlias); onOrderClicked(params.row.id, params.row.coordinatorShortAlias);
}} }}
@ -880,19 +888,19 @@ const BookTable = ({
}; };
const gridComponents = useMemo(() => { const gridComponents = useMemo(() => {
const components: GridComponentProps = { const components: GridSlotsComponent = {
LoadingOverlay: LinearProgress, loadingOverlay: LinearProgress,
}; };
if (showNoResults) { if (showNoResults) {
components.NoResultsOverlay = NoResultsOverlay; components.noResultsOverlay = NoResultsOverlay;
components.NoRowsOverlay = NoResultsOverlay; components.noRowsOverlay = NoResultsOverlay;
} }
if (showFooter) { if (showFooter) {
components.Footer = Footer; components.footer = Footer;
} }
if (showControls) { if (showControls) {
components.Toolbar = BookControl; components.toolbar = BookControl;
} }
return components; return components;
}, [showNoResults, showFooter, showControls, fullscreen]); }, [showNoResults, showFooter, showControls, fullscreen]);
@ -930,8 +938,8 @@ const BookTable = ({
setColumnVisibilityModel(newColumnVisibilityModel); setColumnVisibilityModel(newColumnVisibilityModel);
}} }}
hideFooter={!showFooter} hideFooter={!showFooter}
components={gridComponents} slots={gridComponents}
componentsProps={{ slotProps={{
toolbar: { toolbar: {
width, width,
paymentMethod: paymentMethods, paymentMethod: paymentMethods,
@ -966,12 +974,12 @@ const BookTable = ({
loading={federation.loading} loading={federation.loading}
columns={columns} columns={columns}
hideFooter={!showFooter} hideFooter={!showFooter}
components={gridComponents} slots={gridComponents}
columnVisibilityModel={columnVisibilityModel} columnVisibilityModel={columnVisibilityModel}
onColumnVisibilityModelChange={(newColumnVisibilityModel) => { onColumnVisibilityModelChange={(newColumnVisibilityModel) => {
setColumnVisibilityModel(newColumnVisibilityModel); setColumnVisibilityModel(newColumnVisibilityModel);
}} }}
componentsProps={{ slotProps={{
toolbar: { toolbar: {
width, width,
paymentMethod: paymentMethods, paymentMethod: paymentMethods,

4
frontend/src/components/MakerForm/MakerForm.tsx
View File

@ -1028,7 +1028,7 @@ const MakerForm = ({
views={['hours', 'minutes']} views={['hours', 'minutes']}
inputFormat='HH:mm' inputFormat='HH:mm'
mask='__:__' mask='__:__'
componentsProps={{ slotProps={{
textField: { textField: {
InputProps: { InputProps: {
style: { style: {
@ -1061,7 +1061,7 @@ const MakerForm = ({
views={['hours', 'minutes']} views={['hours', 'minutes']}
inputFormat='HH:mm' inputFormat='HH:mm'
mask='__:__' mask='__:__'
componentsProps={{ slotProps={{
textField: { textField: {
InputProps: { InputProps: {
style: { style: {