neptune/ghost-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adjust spinner sizing

Browse Source
This commit is contained in:
Jaco Greeff 2020-07-22 08:29:15 +02:00
parent c63eafefb8
commit ae5c65b0a0
1 changed files with 8 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/react-components/src/Spinner.tsx
View File

@ -21,7 +21,7 @@ function Spinner ({ className = '', label, variant = 'app' }: Props): React.Reac
return (
<div className={`${className} ui--Spinner ${variant}`}>
<img
className={`ui--Spinner--img${variant === 'app' ? ' ui--highlight--bg' : ''}`}
className={`ui--Spinner--img${variant === 'push' ? '' : ' ui--highlight--bg'}`}
src={spinnerSrc as unknown as string}
/>
{isApp && <div className='text'>{label || t('Retrieving data')}</div>}
@ -37,9 +37,16 @@ export default React.memo(styled(Spinner)`
.ui--Spinner--img {
border-radius: 2.5rem;
height: 2.5rem;
opacity: 0.75;
width: 2.5rem;
}
&.mini .ui--Spinner--img {
border-radius: 1.75rem;
height: 1.75rem;
width: 1.75rem;
}
.text {
color: inherit !important;
margin: 0 auto 1.5rem auto;