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

Adjust spinner (#3248)

Browse Source 
* Adjust spinner

* Sizing

* Update

* Smaller

* Yet smaller

* Smaller ball
This commit is contained in:
Jaco Greeff 2020-07-22 08:13:17 +02:00 committed by GitHub
parent 5366bb8a68
commit e076fe9182
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
packages/react-components/src/Spinner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

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

@ -6,7 +6,7 @@ import React from 'react';
import styled from 'styled-components';
import { useTranslation } from './translate';
import Icon from './Icon';
import spinnerSrc from './Spinner.png';
interface Props {
className?: string;
@ -20,11 +20,9 @@ function Spinner ({ className = '', label, variant = 'app' }: Props): React.Reac
return (
<div className={`${className} ui--Spinner ${variant}`}>
<Icon
className='ui--highlight--color'
icon='spinner'
isSpinning
size={isApp ? '2x' : '1x'}
<img
className={`ui--Spinner--img${variant === 'app' ? ' ui--highlight--bg' : ''}`}
src={spinnerSrc as unknown as string}
/>
{isApp && <div className='text'>{label || t('Retrieving data')}</div>}
</div>
@ -36,9 +34,10 @@ export default React.memo(styled(Spinner)`
margin: 0 auto;
text-align: center;
.ui--Icon {
margin-bottom: 0.5rem;
opacity: 0.75;
.ui--Spinner--img {
border-radius: 2.5rem;
height: 2.5rem;
width: 2.5rem;
}
.text {