Misc CSS and transition fixes

Author: DaneEveritt

resources/scripts/TransitionRouter.tsx

@@ -10,7 +10,7 @@ export default ({ children }: Props) => (
     <Route
         render={({ location }) => (
             <TransitionGroup className={'route-transition-group'}>
-                <CSSTransition key={location.key} timeout={250} classNames={'fade'}>
+                <CSSTransition key={location.key} timeout={250} in={true} appear={true} classNames={'fade'}>
                     <section>
                         {children}
                         <div className={'mx-auto w-full'} style={{ maxWidth: '1200px' }}>

resources/scripts/routers/ServerRouter.tsx

@@ -8,6 +8,8 @@ import WebsocketHandler from '@/components/server/WebsocketHandler';
 import { ServerContext } from '@/state/server';
 import { Provider } from 'react-redux';
 import DatabasesContainer from '@/components/server/databases/DatabasesContainer';
+import FileManagerContainer from '@/components/server/files/FileManagerContainer';
+import { CSSTransition } from 'react-transition-group';
 
 const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>) => {
     const server = ServerContext.useStoreState(state => state.server.data);
@@ -23,16 +25,18 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
     return (
         <React.Fragment>
             <NavigationBar/>
-            <div id={'sub-navigation'}>
-                <div className={'mx-auto'} style={{ maxWidth: '1200px' }}>
-                    <div className={'items'}>
-                        <NavLink to={`${match.url}`} exact>Console</NavLink>
-                        <NavLink to={`${match.url}/files`}>File Manager</NavLink>
-                        <NavLink to={`${match.url}/databases`}>Databases</NavLink>
-                        <NavLink to={`${match.url}/users`}>User Management</NavLink>
+            <CSSTransition timeout={250} classNames={'fade'} appear={true} in={true}>
+                <div id={'sub-navigation'}>
+                    <div className={'mx-auto'} style={{ maxWidth: '1200px' }}>
+                        <div className={'items'}>
+                            <NavLink to={`${match.url}`} exact>Console</NavLink>
+                            <NavLink to={`${match.url}/files`}>File Manager</NavLink>
+                            <NavLink to={`${match.url}/databases`}>Databases</NavLink>
+                            <NavLink to={`${match.url}/users`}>User Management</NavLink>
+                        </div>
                     </div>
                 </div>
-            </div>
+            </CSSTransition>
             <Provider store={ServerContext.useStore()}>
                 <TransitionRouter>
                     <div className={'w-full mx-auto'} style={{ maxWidth: '1200px' }}>
@@ -45,6 +49,7 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
                                 <WebsocketHandler/>
                                 <Switch location={location}>
                                     <Route path={`${match.path}`} component={ServerConsole} exact/>
+                                    <Route path={`${match.path}/files`} component={FileManagerContainer} exact/>
                                     <Route path={`${match.path}/databases`} component={DatabasesContainer}/>
                                 </Switch>
                             </React.Fragment>

resources/scripts/state/flashes.ts

@@ -4,6 +4,7 @@ import { FlashMessageType } from '@/components/MessageBox';
 export interface FlashStore {
     items: FlashMessage[];
     addFlash: Action<FlashStore, FlashMessage>;
+    addError: Action<FlashStore, { message: string; key?: string }>;
     clearFlashes: Action<FlashStore, string | void>;
 }
 
@@ -20,6 +21,9 @@ const flashes: FlashStore = {
     addFlash: action((state, payload) => {
         state.items.push(payload);
     }),
+    addError: action((state, payload) => {
+        state.items.push({ type: 'error', title: 'Error', ...payload });
+    }),
     clearFlashes: action((state, payload) => {
         state.items = payload ? state.items.filter(flashes => flashes.key !== payload) : [];
     }),

resources/styles/components/animations.css

@@ -1,9 +1,9 @@
 /*! purgecss start ignore */
-.fade-enter {
+.fade-enter, .fade-appear {
   @apply .opacity-0;
 }
 
-.fade-enter-active {
+.fade-enter-active, .fade-appear-active {
   @apply .opacity-100;
   transition: opacity 250ms;
 }

resources/styles/components/spinners.css

@@ -74,12 +74,14 @@
   }
 
   &.spinner-blue {
-    border: 3px solid hsla(212, 92%, 43%, 0.2);
+    border-style: solid;
+    border-color: hsla(212, 92%, 43%, 0.2);
     border-top-color: hsl(212, 92%, 43%);
   }
 
   &.spinner-white {
-    border: 3px solid rgba(255, 255, 255, 0.2);
+    border-style: solid;
+    border-color: rgba(255, 255, 255, 0.2);
     border-top-color: rgb(255, 255, 255);
   }
 }