more color fixes

This commit is contained in:
2025-04-27 20:28:18 +03:00
parent eb457f91af
commit e280295c15
30 changed files with 759 additions and 998 deletions

View File

@@ -1,7 +1,19 @@
import React from 'react'
import './customloader.css'
import React from 'react';
import './customloader.css';
import { Box, useTheme } from '@mui/material';
export const CustomLoader = () => {
const theme = useTheme();
return (
<div className="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
)
}
<Box
sx={{
'--text-primary': theme.palette.text.primary,
}}
className="lds-ellipsis"
>
<div></div>
<div></div>
<div></div>
<div></div>
</Box>
);
};

View File

@@ -1,28 +1,29 @@
import React, { useState, useEffect, useRef } from 'react'
import { useInView } from 'react-intersection-observer'
import CircularProgress from '@mui/material/CircularProgress'
import React, { useState, useEffect, useRef } from 'react';
import { useInView } from 'react-intersection-observer';
import CircularProgress from '@mui/material/CircularProgress';
import { useTheme } from '@mui/material';
interface Props {
onLoadMore: () => Promise<void>
onLoadMore: () => Promise<void>;
}
const LazyLoad: React.FC<Props> = ({ onLoadMore }) => {
const [isFetching, setIsFetching] = useState<boolean>(false)
const firstLoad = useRef(false)
const [isFetching, setIsFetching] = useState<boolean>(false);
const theme = useTheme();
const firstLoad = useRef(false);
const [ref, inView] = useInView({
threshold: 0.7
})
threshold: 0.7,
});
useEffect(() => {
if (inView) {
setIsFetching(true)
setIsFetching(true);
onLoadMore().finally(() => {
setIsFetching(false)
firstLoad.current = true
})
setIsFetching(false);
firstLoad.current = true;
});
}
}, [inView])
}, [inView]);
return (
<div
@@ -30,18 +31,22 @@ const LazyLoad: React.FC<Props> = ({ onLoadMore }) => {
style={{
display: 'flex',
justifyContent: 'center',
minHeight: '25px'
minHeight: '25px',
}}
>
<div
style={{
visibility: isFetching ? 'visible' : 'hidden'
visibility: isFetching ? 'visible' : 'hidden',
}}
>
<CircularProgress />
<CircularProgress
sx={{
color: theme.palette.text.primary,
}}
/>
</div>
</div>
)
}
);
};
export default LazyLoad
export default LazyLoad;

View File

@@ -1,5 +1,5 @@
.lds-ellipsis {
color: white;
color: var(--text-primary);
}
.lds-ellipsis,
.lds-ellipsis div {