UI - fixed Sign In button

lattice/src/App.tsx

@@ -1,11 +1,11 @@
 import { BrowserRouter, Route, Switch } from "react-router-dom";
 import { MuiThemeProvider } from "@material-ui/core/styles";
 
-import Main from "Main";
-import Signin from "App/AuthFlow/Signin";
 import { useAuth } from "services/useAuth";
 import PrivateRoute from "shared/PrivateRoute/PrivateRoute";
 import { lightTheme } from "theme/";
+import Main from "Main";
+import Signin from "App/AuthFlow/Signin";
 
 const App = () => {
   const auth = useAuth();
@@ -13,8 +13,10 @@ const App = () => {
   return (
     <BrowserRouter>
       {auth.isLoading ? (
+        // Loading, retreiving auth status
         <div></div>
       ) : (
+        // Loading done, display app based on auth status
         <MuiThemeProvider theme={lightTheme}>
           {auth.isAuthOn ? (
             // Auth is on, hide the routes with PrivateRoute

lattice/src/App/AuthFlow/SignInButton.tsx

@@ -1,17 +1,19 @@
-import React from 'react';
-import { Button } from '@material-ui/core';
+import React from "react";
+import { Button } from "@material-ui/core";
 
 interface Props {
   children?: React.ReactNode;
 }
 
 const SignInButton: React.FC<Props> = ({ children }) => {
+  const signinOnClick = (e) => {
+    window.location.href = "/login";
+  };
+
   return (
-    <a href="/login">
-      <Button variant="contained" color="primary" size="large" fullWidth>
-        Sign in
-      </Button>
-    </a>
+    <Button variant="contained" color="primary" size="large" onClick={signinOnClick} fullWidth>
+      Sign in
+    </Button>
   );
 };
 

lattice/src/App/AuthFlow/SignOutButton.tsx

@@ -11,9 +11,9 @@ const SignOutButton: React.FC<Props> = ({ children }) => {
   };
 
   return (
-      <Button variant="contained" color="secondary" onClick={signoutOnClick}>
-        Sign out
-      </Button>
+    <Button variant="contained" color="secondary" onClick={signoutOnClick}>
+      Sign out
+    </Button>
   );
 };
 

lattice/src/Main.tsx

@@ -1,16 +1,16 @@
+import { useEffect, useState } from "react";
+import { Route, Switch } from "react-router-dom";
+import CssBaseline from "@material-ui/core/CssBaseline";
+import { MuiThemeProvider } from "@material-ui/core/styles";
+
+import { Header } from "shared/Header";
+import { Nav } from "shared/Nav";
+import { darkTheme, lightTheme } from "theme/";
 import { Home } from "App/Home";
 import { MoleculaTablesContainer } from "App/MoleculaTables";
 import { NotFound } from "App/NotFound";
 import { QueryContainer } from "App/Query";
 import { QueryBuilderContainer } from "App/QueryBuilder";
-import { useEffect, useState } from "react";
-import { Route, Switch } from "react-router-dom";
-import { Header } from "shared/Header";
-import { Nav } from "shared/Nav";
-import { darkTheme, lightTheme } from "theme/";
-
-import CssBaseline from "@material-ui/core/CssBaseline";
-import { MuiThemeProvider } from "@material-ui/core/styles";
 
 import css from "./App.module.scss";
 

lattice/src/index.tsx

@@ -1,11 +1,10 @@
-import './index.scss';
-
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { ProvideAuth } from 'services/useAuth';
 
-import App from './App';
 import * as serviceWorker from './serviceWorker';
+import './index.scss';
+import App from './App';
 
 ReactDOM.render(
   <React.StrictMode>

lattice/src/shared/PrivateRoute/PrivateRoute.tsx

@@ -1,4 +1,5 @@
 import { Redirect, Route } from 'react-router-dom';
+
 import { useAuth } from 'services/useAuth';
 
 function PrivateRoute({ component: Component, ...rest }) {