Get spinners back in working order

resources/scripts/components/elements/Spinner.tsx

@@ -1,31 +1,48 @@
 import React from 'react';
-import classNames from 'classnames';
+import styled, { css, keyframes } from 'styled-components/macro';
+import tw from 'twin.macro';
 
-export type SpinnerSize = 'large' | 'normal' | 'tiny';
+export type SpinnerSize = 'small' | 'base' | 'large';
 
 interface Props {
     size?: SpinnerSize;
     centered?: boolean;
-    className?: string;
+    isBlue?: boolean;
 }
 
-const Spinner = ({ size, centered, className }: Props) => (
+const spin = keyframes`
+    to { transform: rotate(360deg); }
+`;
+
+// noinspection CssOverwrittenProperties
+const SpinnerComponent = styled.div<Props>`
+    ${tw`w-8 h-8`};
+    border-width: 3px;
+    border-radius: 50%;
+    animation: ${spin} 1s cubic-bezier(0.55, 0.25, 0.25, 0.70) infinite;
+    
+    ${props => props.size === 'small' ? tw`w-4 h-4 border-2` : (props.size === 'large' ? css`
+        ${tw`w-16 h-16`};
+        border-width: 6px;
+    ` : null)};
+    
+    border-color: ${props => !props.isBlue ? 'rgba(255, 255, 255, 0.2)' : 'hsla(212, 92%, 43%, 0.2)'};
+    border-top-color: ${props => !props.isBlue ? 'rgb(255, 255, 255)' : 'hsl(212, 92%, 43%)'};
+`;
+
+const Spinner = ({ centered, ...props }: Props) => (
     centered ?
-        <div className={classNames(`flex justify-center ${className}`, { 'm-20': size === 'large', 'm-6': size !== 'large' })}>
-            <div
-                className={classNames('spinner-circle spinner-white', {
-                    'spinner-lg': size === 'large',
-                    'spinner-sm': size === 'tiny',
-                })}
-            />
+        <div
+            css={[
+                tw`flex justify-center`,
+                props.size === 'large' ? tw`m-20` : tw`m-6`,
+            ]}
+        >
+            <SpinnerComponent {...props}/>
         </div>
         :
-        <div
-            className={classNames(`spinner-circle spinner-white ${className}`, {
-                'spinner-lg': size === 'large',
-                'spinner-sm': size === 'tiny',
-            })}
-        />
+        <SpinnerComponent {...props}/>
 );
+Spinner.DisplayName = 'Spinner';
 
 export default Spinner;