-
- {showText &&
{__('Loading ...')}
}
+
+
+
+ {showText && (
+
+ {__('Loading ...')}
+
+ )}
+
)
}
-const getStyles = (tokens) => {
- return {
- container: {
- backgroundColor: tokens.BackgroundColor.Container,
- height: '100%',
- display: 'flex',
- flexDirection: 'column',
- justifyContent: 'center',
- alignItems: 'center',
- },
- text: {
- color: '#999',
- fontSize: tokens.FontSize.Tiny,
- fontWeight: tokens.FontWeight.SemiBold,
- textAlign: 'center',
- marginTop: '16px',
- },
- }
-}
-
LoadingSpinner.propTypes = {
showText: PropTypes.bool,
size: PropTypes.number,
diff --git a/src/components/LoadingSpinner.module.css b/src/components/LoadingSpinner.module.css
new file mode 100644
index 0000000000..7d4427f339
--- /dev/null
+++ b/src/components/LoadingSpinner.module.css
@@ -0,0 +1,12 @@
+.container {
+ background-color: var(--mui-palette-background-paper);
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+.text {
+ text-align: center;
+}
diff --git a/src/views/connecting/progress/ProgressBar.tsx b/src/views/connecting/progress/ProgressBar.tsx
index a96da7f76a..309d013fd5 100644
--- a/src/views/connecting/progress/ProgressBar.tsx
+++ b/src/views/connecting/progress/ProgressBar.tsx
@@ -1,6 +1,6 @@
import React from 'react'
import { useTokens } from '@kyper/tokenprovider'
-import { Spinner } from '@kyper/progressindicators'
+import CircularProgress from '@mui/material/CircularProgress'
import { ProgressLine } from 'src/views/connecting/progress/ProgressLine'
import { ProgressCheckMark } from 'src/views/connecting/progress/ProgressCheckMark'
@@ -33,7 +33,7 @@ export const ProgressBar = ({
if (jobSchedule.isInitialized === false) {
return (
-
+
)
}
diff --git a/src/views/connecting/progress/ProgressCircle.js b/src/views/connecting/progress/ProgressCircle.js
index 4f4efcf378..e96bd17f33 100644
--- a/src/views/connecting/progress/ProgressCircle.js
+++ b/src/views/connecting/progress/ProgressCircle.js
@@ -1,7 +1,7 @@
import React from 'react'
import PropTypes from 'prop-types'
import { useTokens } from '@kyper/tokenprovider'
-import { Spinner } from '@kyper/progressindicators'
+import CircularProgress from '@mui/material/CircularProgress'
import { JOB_STATUSES } from 'src/const/consts'
@@ -29,7 +29,7 @@ export const ProgressCircle = (props) => {
if (isActive) {
circleContent = (
-
+
)
} else if (isDone) {
diff --git a/src/views/microdeposits/Verifying-test.tsx b/src/views/microdeposits/Verifying-test.tsx
index c22d4150d6..79dadecd1c 100644
--- a/src/views/microdeposits/Verifying-test.tsx
+++ b/src/views/microdeposits/Verifying-test.tsx
@@ -104,7 +104,7 @@ describe('Verifying', () => {
expect(screen.getByTestId('checking-amounts-paragraph')).toHaveTextContent(
'Checking microdeposit amounts.',
)
- expect(document.querySelector('[data-ui-test="kyper-spinner"]')).toBeInTheDocument()
+ expect(screen.getByRole('progressbar')).toBeInTheDocument()
})
})
diff --git a/typings/kyper.d.ts b/typings/kyper.d.ts
index 17ced3616f..dcb19a4cf8 100644
--- a/typings/kyper.d.ts
+++ b/typings/kyper.d.ts
@@ -10,6 +10,5 @@ declare module '@kyper/icon/Dollar'
declare module '@kyper/icon/Growth'
declare module '@kyper/icon/Image'
declare module '@kyper/icon/Health'
-declare module '@kyper/progressindicators'
declare module '@kyper/hooks'
declare module '@kyper/icon/CheckmarkFilled'