new pages and components for later / fixed routing

client/src/App.tsx

 
 import { Suspense, lazy } from 'react';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import { isLoggedIn } from 'adapters/api';
 
 const Home = lazy(() => import('pages/Home'));
 const Login = lazy(() => import('pages/Login'));
+const Register = lazy(() => import('pages/Register'));
+const Tasks = lazy(() => import('pages/Tasks'));
+const Navigation = lazy(() => import('components/ui/Navigation'));
 
 export default function App() {
     return (
         <Router>
             <Suspense fallback={false}>
+                {isLoggedIn() && <Navigation />}
                 <Switch>
-                    <Route path="/login" component={Login} />
-                    <Route path="/" component={Home} />
+                    {!isLoggedIn() && <Route path="/register" component={Register} />}
+                    {!isLoggedIn() && <Route exact path="/" component={Home} />}
+                    {!isLoggedIn() && <Route path="/" component={Login} />}
+                    <Route path="/" component={Tasks} />
                 </Switch>
             </Suspense>
         </Router>

client/src/adapters/api.ts

+export const isLoggedIn = (): boolean => false;

client/src/components/ui/Navigation/index.tsx

+import './navigation.scss';
+
+export default function Navigation() {
+    return (
+        <main>
+            <h1>Navigation</h1>
+        </main>
+    );
+}
\ No newline at end of file

client/src/index.scss

@@ -18,7 +18,7 @@ html {
 body {
     color: s.$body-color;
     position: relative;
-    background: linear-gradient(to left, #e2e2e2 0%, #e6e6e6 100%);
+    background: linear-gradient(to right, #fff 0%, #f2f2f2 100%);
 
     @include mx.breakpoint(xlarge) {
         padding: 5rem 0;

client/src/pages/Home/index.tsx

@@ -35,7 +35,7 @@ export default function Home() {
                                 <h1>ryoko</h1>
                                 <p>Are you feeling lost with your tasks? Maximize your productivity now with ryoko.</p>
                                 <div className="button-container">
-                                    <ButtonLink href="#intro">Get started</ButtonLink>
+                                    <ButtonLink href="/register" routing={true}>Get started</ButtonLink>
                                 </div>
                             </div>
                         </div>

client/src/pages/Register/index.tsx

+
+import './register.scss';
+
+export default function Register() {
+    return (
+        <div>
+            register
+        </div>
+    );
+}
\ No newline at end of file

client/src/pages/Tasks/index.tsx

+import './tasks.scss';
+
+export default function Tasks() {
+    return (
+        <main>
+            <h1>Tasks</h1>
+        </main>
+    );
+}
\ No newline at end of file

client/src/styles/settings.scss

@@ -19,7 +19,7 @@ $colors: (
 $linear-gradient: linear-gradient(to top, $primary, $secondary);
 $radial-gradient: radial-gradient(100% 115% at 0% 0%, $primary 0%, $secondary 100%);
 
-$body-color: #4B4B4B;
+$body-color: #3A5255;
 $body-font: 'Poppins', sans-serif;
 
 // Typography