feat: Created styled components file. Darkmode/lightmode now works as expected. Created a commonComponents folder.

Author: AntTargett

public/index.html

@@ -8,11 +8,6 @@
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
     <meta name="theme-color" content="#000000" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/App.tsx

@@ -1,12 +1,10 @@
 import React, { Suspense, lazy } from "react";
-import {
-	Route,
-	Redirect,
-	Switch,
-	HashRouter as Router
-} from "react-router-dom";
+import { Route, Switch, HashRouter as Router } from "react-router-dom";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import { Flex } from "./util/commonComponents";
 const HomeContainer = lazy(() => import("./HomeContainer/HomeContainer"));
-// const ExampleRoute = lazy(() => import("./ExampleRoute/ExampleRoute"));
+const ExampleRoute = lazy(() => import("./ExampleRoute/ExampleRoute"));
+
 const App = () => {
 	return (
 		<Router>
@@ -16,19 +14,26 @@ const App = () => {
 					path="/"
 					render={WaitingComponent(HomeContainer)}
 				/>
-				{/* <Route
+				<Route
 					exact
 					path="/Example"
 					render={WaitingComponent(ExampleRoute)}
-				/> */}
+				/>
 			</Switch>
 		</Router>
 	);
 };
 
+//Function that wraps the component in a React Suspense component. Provides a fallback Loading screen
 function WaitingComponent(Component: any) {
 	return (props: any) => (
-		<Suspense fallback={<div> Loading</div>}>
+		<Suspense
+			fallback={
+				<Flex style={{justifyContent: "center"}}>
+					<CircularProgress />
+				</Flex>
+			}
+		>
 			<Component {...props} />
 		</Suspense>
 	);

src/index.tsx

@@ -1,11 +1,21 @@
-import React from "react"
-import ReactDOM from "react-dom"
-import App from "./App"
-import * as serviceWorker from "./serviceWorker"
-import "./index.css"
-ReactDOM.render(<App />, document.getElementById("root"))
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+import * as serviceWorker from "./serviceWorker";
+import "./index.css";
+import { ThemeProvider } from "./Theme/ThemeContext";
+import NoSsr from "@material-ui/core/NoSsr";
+
+ReactDOM.render(
+	<NoSsr>
+		<ThemeProvider>
+			<App />
+		</ThemeProvider>
+	</NoSsr>,
+	document.getElementById("root")
+);
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister()
+serviceWorker.unregister();

src/types.tsx

@@ -41,3 +41,14 @@ export type TableRowData = {
 export type DelayType = {
 	charIndex: number;
 };
+export type  themeHookType = {
+	darkmode: boolean;
+	hasThemeMounted: boolean;
+};
+export type themeType={
+	background: string;
+	body: string;
+}
+export type HomeContainerPropType = {
+	theme: themeType;
+};

src/util/commonComponents.tsx

@@ -0,0 +1,5 @@
+import styled from "@emotion/styled";
+
+export const Flex = styled.div`
+	display: flex;
+`;