redoing changes

Author: robicano22

app/components/Splash.jsx

@@ -0,0 +1,16 @@
+import React, { useEffect } from 'react';
+
+
+const Splash = (props) => {
+  const { toggleSplash } = props;
+  useEffect(() => { setTimeout(() => toggleSplash(false), 3000); });
+
+  return (
+    <div id="splash">
+      <img alt="Chronos Logo" src="app/assets//icons/icon.png" id="splashLogo" />
+      <span id="splashText">chronos</span>
+    </div>
+  );
+};
+
+export default Splash;

app/index.css

@@ -1,13 +1,17 @@
 body {
   background-color: #333;
   background: rgb(25,0,36);
-background: linear-gradient(135deg, rgba(25,0,36,1) 0%, rgb(68, 68, 68) 0%, rgb(29, 29, 29) 100%);
+  background: linear-gradient(135deg, rgba(25,0,36,1) 0%, rgb(68, 68, 68) 0%, rgb(29, 29, 29) 100%);
 }
 
 img {
   margin-bottom: -75px;
 }
 
+#splash {
+  
+}
+
 .header {
   color: white;
   height: 50px;

app/index.js

@@ -1,12 +1,16 @@
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
 import ReactDOM from 'react-dom';
 import SetupContext from './context/SetupContext.js';
 import './index.css';
-import AddService from './components/AddService.jsx'
+import AddService from './components/AddService.jsx';
 import ServiceDashboard from './components/ServicesDashboard.jsx';
+import Splash from './components/Splash.jsx';
 
 const App = () => {
+  const [splash, toggleSplash] = useState(true);
   const chronosSetup = useContext(SetupContext);
+
+  if (splash) return <Splash toggleSplash={toggleSplash} />;
   return chronosSetup.setupRequired ? <AddService /> : <ServiceDashboard />;
 };