Merge branch 'develop' into feature/react-admin

resources/scripts/components/elements/Field.tsx

@@ -17,7 +17,7 @@ const Field = forwardRef<HTMLInputElement, Props>(({ id, name, light = false, la
     <FormikField innerRef={ref} name={name} validate={validate}>
         {
             ({ field, form: { errors, touched } }: FieldProps) => (
-                <>
+                <div>
                     {label &&
                     <Label htmlFor={id} isLight={light}>{label}</Label>
                     }
@@ -35,7 +35,7 @@ const Field = forwardRef<HTMLInputElement, Props>(({ id, name, light = false, la
                         :
                         description ? <p className={'input-help'}>{description}</p> : null
                     }
-                </>
+                </div>
             )
         }
     </FormikField>

resources/scripts/components/elements/PageContentBlock.tsx

@@ -28,7 +28,7 @@ const PageContentBlock: React.FC<PageContentBlockProps> = ({ title, showFlashKey
                 </ContentContainer>
                 <ContentContainer css={tw`mb-4`}>
                     <p css={tw`text-center text-neutral-500 text-xs`}>
-                        &copy; 2015 - 2020&nbsp;
+                        &copy; 2015 - {(new Date()).getFullYear()}&nbsp;
                         <a
                             rel={'noopener nofollow noreferrer'}
                             href={'https://pterodactyl.io'}

resources/scripts/components/elements/Spinner.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import styled, { css, keyframes } from 'styled-components/macro';
 import tw from 'twin.macro';
 
@@ -10,6 +10,11 @@ interface Props {
     isBlue?: boolean;
 }
 
+interface Spinner extends React.FC<Props> {
+    Size: Record<'SMALL' | 'BASE' | 'LARGE', SpinnerSize>;
+    Suspense: React.FC<Props>;
+}
+
 const spin = keyframes`
     to { transform: rotate(360deg); }
 `;
@@ -30,7 +35,7 @@ const SpinnerComponent = styled.div<Props>`
     border-top-color: ${props => !props.isBlue ? 'rgb(255, 255, 255)' : 'hsl(212, 92%, 43%)'};
 `;
 
-const Spinner = ({ centered, ...props }: Props) => (
+const Spinner: Spinner = ({ centered, ...props }) => (
     centered ?
         <div
             css={[
@@ -43,12 +48,19 @@ const Spinner = ({ centered, ...props }: Props) => (
         :
         <SpinnerComponent {...props}/>
 );
-Spinner.DisplayName = 'Spinner';
+Spinner.displayName = 'Spinner';
 
 Spinner.Size = {
-    SMALL: 'small' as SpinnerSize,
-    BASE: 'base' as SpinnerSize,
-    LARGE: 'large' as SpinnerSize,
+    SMALL: 'small',
+    BASE: 'base',
+    LARGE: 'large',
 };
 
+Spinner.Suspense = ({ children, centered = true, size = Spinner.Size.LARGE, ...props }) => (
+    <Suspense fallback={<Spinner centered={centered} size={size} {...props}/>}>
+        {children}
+    </Suspense>
+);
+Spinner.Suspense.displayName = 'Spinner.Suspense';
+
 export default Spinner;

resources/scripts/components/elements/SuspenseSpinner.tsx

@@ -1,10 +0,0 @@
-import React, { Suspense } from 'react';
-import Spinner from '@/components/elements/Spinner';
-
-const SuspenseSpinner: React.FC = ({ children }) => (
-    <Suspense fallback={<Spinner size={'large'} centered/>}>
-        {children}
-    </Suspense>
-);
-
-export default SuspenseSpinner;