feature: add dashboard redirect

web/src/App/Routes.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Router, Switch, Route } from 'react-router-dom';
 import * as H from 'history';
 
+import Dashboard from 'Dashboard';
 import Projects from 'Projects';
 import Project from 'Projects/Project';
 import Login from 'Auth';
@@ -13,6 +14,7 @@ type RoutesProps = {
 const Routes = ({ history }: RoutesProps) => (
   <Router history={history}>
     <Switch>
+      <Route exact path="/" component={Dashboard} />
       <Route exact path="/projects" component={Projects} />
       <Route exact path="/projects/:projectId" component={Project} />
       <Route exact path="/login" component={Login} />

web/src/App/index.tsx

@@ -4,9 +4,17 @@ import { setAccessToken } from 'shared/utils/accessToken';
 import NormalizeStyles from './NormalizeStyles';
 import BaseStyles from './BaseStyles';
 import Routes from './Routes';
+import Navbar from 'shared/components/Navbar';
+import GlobalTopNavbar from 'App/TopNavbar';
+import styled from 'styled-components';
 
 const history = createBrowserHistory();
 
+const MainContent = styled.div`
+  padding: 0 0 50px 80px;
+  background: #262c49;
+`;
+
 const App = () => {
   const [loading, setLoading] = useState(true);
 
@@ -29,7 +37,14 @@ const App = () => {
   }, []);
 
   if (loading) {
-    return <div>loading...</div>;
+    return (
+      <>
+        <Navbar />
+        <MainContent>
+          <GlobalTopNavbar />
+        </MainContent>
+      </>
+    );
   }
   return (
     <>

web/src/Dashboard/index.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Redirect } from 'react-router';
+
+const Dashboard: React.FC = () => {
+  return <Redirect to="/projects" />;
+};
+
+export default Dashboard;

web/src/Projects/Project/index.tsx

@@ -37,7 +37,7 @@ interface QuickCardEditorState {
 }
 
 const MainContent = styled.div`
-  padding: 0 0 50px 100px;
+  padding: 0 0 50px 80px;
   height: 100%;
   background: #262c49;
 `;
@@ -47,12 +47,21 @@ const Wrapper = styled.div`
   background-color: red;
 `;
 
+const TitleWrapper = styled.div`
+  margin-left: 38px;
+  margin-bottom: 15px;
+`;
+
 const Title = styled.span`
   text-align: center;
   font-size: 24px;
   color: #fff;
 `;
 
+const Board = styled.div`
+  margin-left: 36px;
+`;
+
 interface ProjectParams {
   projectId: string;
 }
@@ -187,14 +196,18 @@ const Project = () => {
         <Navbar />
         <MainContent>
           <TopNavbar />
-          <Title>{data.findProject.name}</Title>
-          <Lists
-            onQuickEditorOpen={onQuickEditorOpen}
-            onCardCreate={onCardCreate}
-            {...listsData}
-            onCardDrop={onCardDrop}
-            onListDrop={onListDrop}
-          />
+          <TitleWrapper>
+            <Title>{data.findProject.name}</Title>
+          </TitleWrapper>
+          <Board>
+            <Lists
+              onQuickEditorOpen={onQuickEditorOpen}
+              onCardCreate={onCardCreate}
+              {...listsData}
+              onCardDrop={onCardDrop}
+              onListDrop={onListDrop}
+            />
+          </Board>
         </MainContent>
         {quickCardEditor.isOpen && (
           <QuickCardEditor

web/src/Projects/index.tsx

@@ -28,7 +28,14 @@ const Projects = () => {
   const { loading, data } = useGetProjectsQuery();
   console.log(loading, data);
   if (loading) {
-    return <Wrapper>Loading</Wrapper>;
+    return (
+      <>
+        <Navbar />
+        <MainContent>
+          <TopNavbar />
+        </MainContent>
+      </>
+    );
   }
   if (data) {
     const { teams } = data.organizations[0];