Browse Source

Adjust spinner (smaller, real-size)

Jaco Greeff 4 years ago
parent
commit
3f797e7210

BIN
packages/react-components/src/Spinner.png


+ 4 - 7
packages/react-components/src/Spinner.tsx

@@ -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 === 'push' ? '' : ' ui--highlight--bg'}`}
+        className={variant === 'push' ? '' : 'ui--highlight--bg'}
         src={spinnerSrc as unknown as string}
       />
       {isApp && <div className='text'>{label || t('Retrieving data')}</div>}
@@ -34,15 +34,12 @@ export default React.memo(styled(Spinner)`
   margin: 0 auto;
   text-align: center;
 
-  .ui--Spinner--img {
-    border-radius: 2.5rem;
-    height: 2.5rem;
+  img {
+    border-radius: 10rem;
     opacity: 0.75;
-    width: 2.5rem;
   }
 
-  &.mini .ui--Spinner--img {
-    border-radius: 1.75rem;
+  &.mini img {
     height: 1.75rem;
     width: 1.75rem;
   }