Get server console page rendering (mostly) correctly

Author: DaneEveritt

resources/scripts/components/App.tsx

@@ -12,7 +12,6 @@ import ProgressBar from '@/components/elements/ProgressBar';
 import NotFound from '@/components/screens/NotFound';
 import tw from 'twin.macro';
 import GlobalStylesheet from '@/assets/css/GlobalStylesheet';
-import TransitionRouter from '@/TransitionRouter';
 
 interface ExtendedWindow extends Window {
     SiteConfiguration?: SiteSettings;

resources/scripts/components/NavigationBar.tsx

@@ -7,6 +7,7 @@ import { ApplicationStore } from '@/state';
 import SearchContainer from '@/components/dashboard/search/SearchContainer';
 import tw from 'twin.macro';
 import styled from 'styled-components/macro';
+// @ts-ignore
 import * as config from '@/../../tailwind.config.js';
 
 const Navigation = styled.div`

resources/scripts/components/NetworkErrorMessage.tsx

@@ -39,6 +39,7 @@ export default ({ server }: { server: Server }) => {
 
     useEffect(() => {
         getStats().then(() => {
+            // @ts-ignore
             interval.current = setInterval(() => getStats(), 20000);
         });
 
@@ -79,7 +80,7 @@ export default ({ server }: { server: Server }) => {
             <div css={tw`w-1/3 flex items-baseline relative`}>
                 {!stats ?
                     !statsError ?
-                        <SpinnerOverlay size={'small'} visible={true} backgroundOpacity={0.25}/>
+                        <SpinnerOverlay size={'small'} visible backgroundOpacity={0.25}/>
                         :
                         server.isInstalling ?
                             <div css={tw`flex-1 text-center`}>

resources/scripts/components/ServerOverviewContainer.tsx

@@ -3,10 +3,10 @@ import ContentContainer from '@/components/elements/ContentContainer';
 import { CSSTransition } from 'react-transition-group';
 import tw from 'twin.macro';
 
-const PageContentBlock: React.FC = ({ children }) => (
+const PageContentBlock: React.FC<{ className?: string }> = ({ children, className }) => (
     <CSSTransition timeout={250} classNames={'fade'} appear in>
         <>
-            <ContentContainer css={tw`my-10`}>
+            <ContentContainer css={tw`my-10`} className={className}>
                 {children}
             </ContentContainer>
             <ContentContainer css={tw`mb-4`}>

resources/scripts/components/dashboard/ServerRow.tsx

@@ -0,0 +1,31 @@
+import styled from 'styled-components/macro';
+import tw from 'twin.macro';
+// @ts-ignore
+import config from '../../../../tailwind.config';
+
+const SubNavigation = styled.div`
+    ${tw`w-full bg-neutral-700 shadow`};
+    
+    & > div {
+        ${tw`flex items-center text-sm mx-auto px-2`};
+        max-width: 1200px;
+        
+        & > a, & > div {
+            ${tw`inline-block py-3 px-4 text-neutral-300 no-underline transition-all duration-150`};
+            
+            &:not(:first-of-type) {
+                ${tw`ml-2`};
+            }
+            
+            &:active, &:hover {
+                ${tw`text-neutral-100`};
+            }
+            
+            &:active, &:hover, &.active {
+                box-shadow: inset 0 -2px ${config.theme.colors.cyan['500']};
+            }
+        }
+    }
+`;
+
+export default SubNavigation;

resources/scripts/components/elements/PageContentBlock.tsx

@@ -1,10 +1,11 @@
 import React, { Suspense } from 'react';
 import Spinner from '@/components/elements/Spinner';
+import tw from 'twin.macro';
 
 const SuspenseSpinner = ({ children }: { children?: React.ReactNode }) => (
     <Suspense
         fallback={
-            <div className={'mx-4 w-3/4 mr-4 flex items-center justify-center'}>
+            <div css={tw`mx-4 w-3/4 mr-4 flex items-center justify-center`}>
                 <Spinner centered/>
             </div>
         }

resources/scripts/components/elements/SubNavigation.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import tw from 'twin.macro';
 
 interface Props {
     icon?: IconProp;
@@ -10,17 +11,17 @@ interface Props {
 }
 
 const TitledGreyBox = ({ icon, title, children, className }: Props) => (
-    <div className={`rounded shadow-md bg-neutral-700 ${className}`}>
-        <div className={'bg-neutral-900 rounded-t p-3 border-b border-black'}>
+    <div css={tw`rounded shadow-md bg-neutral-700`} className={className}>
+        <div css={tw`bg-neutral-900 rounded-t p-3 border-b border-black`}>
             {typeof title === 'string' ?
-                <p className={'text-sm uppercase'}>
-                    {icon && <FontAwesomeIcon icon={icon} className={'mr-2 text-neutral-300'}/>}{title}
+                <p css={tw`text-sm uppercase`}>
+                    {icon && <FontAwesomeIcon icon={icon} css={tw`mr-2 text-neutral-300`}/>}{title}
                 </p>
                 :
                 title
             }
         </div>
-        <div className={'p-3'}>
+        <div css={tw`p-3`}>
             {children}
         </div>
     </div>

resources/scripts/components/elements/SuspenseSpinner.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import PageContentBlock from '@/components/elements/PageContentBlock';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faArrowLeft } from '@fortawesome/free-solid-svg-icons/faArrowLeft';
-import { faSyncAlt } from '@fortawesome/free-solid-svg-icons/faSyncAlt';
+import { faArrowLeft, faSyncAlt } from '@fortawesome/free-solid-svg-icons';
 import classNames from 'classnames';
-import styled from 'styled-components/macro';
+import styled, { keyframes } from 'styled-components/macro';
 import tw from 'twin.macro';
 
 interface BaseProps {
@@ -27,17 +26,15 @@ interface PropsWithBack extends BaseProps {
 
 type Props = PropsWithBack | PropsWithRetry;
 
+const spin = keyframes`
+    to { transform: rotate(360deg) }
+`;
+
 const ActionButton = styled.button`
     ${tw`rounded-full w-8 h-8 flex items-center justify-center`};
 
     &.hover\\:spin:hover {
-        animation: spin 2s linear infinite;
-    }
-
-    @keyframes spin {
-        to {
-            transform: rotate(360deg);
-        }
+        animation: ${spin} 2s linear infinite;
     }
 `;