diff --git a/packages/react-components/src/Spinner-1.png b/packages/react-components/src/Spinner-1.png new file mode 100644 index 0000000000..e9e48c2303 Binary files /dev/null and b/packages/react-components/src/Spinner-1.png differ diff --git a/packages/react-components/src/Spinner-2.png b/packages/react-components/src/Spinner-2.png new file mode 100644 index 0000000000..e3e23c4886 Binary files /dev/null and b/packages/react-components/src/Spinner-2.png differ diff --git a/packages/react-components/src/Spinner.png b/packages/react-components/src/Spinner.png deleted file mode 100644 index 39c604feeb..0000000000 Binary files a/packages/react-components/src/Spinner.png and /dev/null differ diff --git a/packages/react-components/src/Spinner.tsx b/packages/react-components/src/Spinner.tsx index 29213654f7..14b0a7318e 100644 --- a/packages/react-components/src/Spinner.tsx +++ b/packages/react-components/src/Spinner.tsx @@ -6,7 +6,7 @@ import React from 'react'; import styled from 'styled-components'; import { useTranslation } from './translate'; -import spinnerSrc from './Spinner.png'; +import spinnerSrc from './Spinner-2.png'; interface Props { className?: string; @@ -16,21 +16,21 @@ interface Props { function Spinner ({ className = '', label, variant = 'app' }: Props): React.ReactElement | null { const { t } = useTranslation(); - const isApp = variant === 'app'; return ( -
+
- {isApp &&
{label || t('Retrieving data')}
} + {variant === 'app' &&
{label || t('Retrieving data')}
}
); } export default React.memo(styled(Spinner)` display: block; + line-height: 1; margin: 0 auto; text-align: center; @@ -39,14 +39,9 @@ export default React.memo(styled(Spinner)` opacity: 0.75; } - &.mini img { - height: 1.75rem; - width: 1.75rem; - } - .text { color: inherit !important; - margin: 0 auto 1.5rem auto; + margin: 0.25rem auto 1.5rem auto; opacity: 0.6; } `);