added dynamic background

client/src/App.tsx

 
 import { Suspense, lazy } from 'react';
-import { BrowserRouter as Router, Switch, Route,  } from 'react-router-dom';
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 
-import LoginRoute from 'components/helpers/LoginRoute'; 
-import AppWrapper from 'pages/AppWrapper'; 
+import LoginRoute from 'components/helpers/LoginRoute';
+import AppWrapper from 'pages/AppWrapper';
 
 const Home = lazy(() => import('pages/Home'));
 const Login = lazy(() => import('pages/Login'));

client/src/components/navigation/Header/index.tsx

 import './header.scss';
 import hamburger from 'images/svg/hamburger.svg';
-import profile from 'images/svg/profile.svg';
 import Navigation from 'components/navigation/Navigation';
 import Sidebar from 'components/navigation/Sidebar';
 import { ReactNode, useState } from 'react';

client/src/components/ui/DynamicBackground/background.scss

+@use 'styles/settings.scss' as s;
+@use 'styles/mixins.scss' as mx;
+
+.background-container {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    left: 0;
+    top: 0;
+    z-index: -1;
+    overflow: hidden;
+
+    .bubble {
+        width: 400px;
+        height: 400px;
+        position: absolute;
+        filter: blur(200px);
+        opacity: 0.9;
+
+        @include mx.breakpoint(medium) {
+            width: 400px;
+            height: 400px;
+            filter: blur(400px);
+        }
+
+        @include mx.breakpoint(large) {
+            width: 600px;
+            height: 600px;
+        }
+
+        &.secondary {
+            background: s.$secondary;
+        }
+
+        &.primary {
+            background: s.$primary;
+        }
+
+    }
+}

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

+import { useState, useEffect } from 'react';
+import './background.scss';
+
+function getWindowHeight(): number {    
+    return document.body.offsetHeight;
+}
+
+export default function DynamicBackground() {
+    const [height, setHeight] = useState(0);
+    useEffect(() => {
+        setHeight(getWindowHeight());
+    }, [])
+
+    let bubbles = [];
+    let secondary = true;
+
+    for (let i = 0; i <= height; i += 700) {
+        let lr = secondary ? { right: '-5%' } : { left: '-5%' };
+        bubbles.push(
+            <div
+                className={'bubble ' + (secondary ? 'secondary' : 'primary')}
+                key={i}
+                style={{ ...lr, top: (i - 200) + 'px' }}>
+            </div>
+        )
+        secondary = !secondary;
+    }
+
+    return (
+        <div className="background-container">
+            {bubbles}
+        </div>
+    )
+}
\ No newline at end of file

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

 
 import { ReactNode } from 'react';
+import DynamicBackground from 'components/ui/DynamicBackground';
 
 import './page.scss';
 
@@ -9,10 +10,11 @@ interface Props {
 }
 
 export default function Page({ children, className }: Props) {
-    return (
+    return (<>
         <main className={'page-container ' + (className ?? '')}>
             {children}
         </main>
-    );
+        <DynamicBackground />
+    </>);
 }
 

client/src/index.scss

@@ -123,41 +123,3 @@ h4 {
     }
 }
 
-
-.background-container {
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    left: 0;
-    top: 0;
-    z-index: -1;
-    overflow: hidden;
-
-    .bubble {
-        width: 400px;
-        height: 400px;
-        position: absolute;
-        filter: blur(200px);
-        opacity: 0.9;
-
-        @include mx.breakpoint(medium) {
-            width: 400px;
-            height: 400px;
-            filter: blur(400px);
-        }
-
-        @include mx.breakpoint(large) {
-            width: 600px;
-            height: 600px;
-        }
-
-        &.secondary {
-            background: s.$secondary;
-        }
-
-        &.primary {
-            background: s.$primary;
-        }
-
-    }
-}

client/src/pages/AppWrapper.tsx

@@ -12,8 +12,9 @@ const TeamsEdit = lazy(() => import('pages/Teams/TeamsEdit'));
 const Teams = lazy(() => import('pages/Teams'));
 const Settings = lazy(() => import('pages/Settings'));
 
+
 export default function AppWrapper() {
-    return (<>
+    return (
         <Header>
             <Suspense fallback={false}>
                 <ProtectedRoute path="/tasks/:uuid" component={TaskDetail} />
@@ -25,10 +26,6 @@ export default function AppWrapper() {
                 <ProtectedRoute path="/settings" component={Settings} />
             </Suspense>
         </Header>
-        <div className="background-container">
-            <div className="bubble primary" style={{ top: '-20%', right: '-20%' }}></div>
-            <div className="bubble secondary" style={{ bottom: '-20%', left: '20%' }}></div>
-        </div>
-    </>);
+        );
 }
 

client/src/pages/Home/index.tsx

@@ -9,7 +9,7 @@ import ImageRoland from 'images/roland-bernard.jpg';
 import ImageDaniel from 'images/daniel-planoetscher.jpg';
 
 export default function Home() {
-    return (<>
+    return (
         <Page className="landing-page">
             <section className="hero-section" id="hero">
                 <div className="hero-container">
@@ -170,15 +170,6 @@ export default function Home() {
                 </div>
             </footer>
         </Page>
-        <div className="background-container">
-            <div className="bubble secondary" style={{ top: '0', right: '0' }}></div>
-            <div className="bubble primary" style={{ top: '20%', left: '0' }}></div>
-            <div className="bubble secondary" style={{ top: '32%', right: '5%' }}></div>
-            <div className="bubble primary" style={{ top: '50%', right: '20%' }}></div>
-            <div className="bubble secondary" style={{ top: '65%', left: '-15%' }}></div>
-            <div className="bubble secondary" style={{ bottom: '5%', left: '10%' }}></div>
-            <div className="bubble primary" style={{ bottom: '0%', right: '0%' }}></div>
-        </div>
-    </>);
+    );
 }
 

client/src/pages/Login/index.tsx

@@ -26,10 +26,6 @@ export default function Login() {
                     <Link to="/register" className="link">You don't have an account?</Link>
                 </div>
             </Page>
-            <div className="background-container">
-                <div className="bubble primary" style={{ top: '0', right: '0' }}></div>
-                <div className="bubble secondary" style={{ bottom: '-20%', left: '-20%' }}></div>
-            </div>
         </div>
     );
 }

client/src/pages/Register/index.tsx

@@ -28,10 +28,6 @@ export default function Register() {
                     <Link className="link" to="/login">You already have an account?</Link>
                 </div>
             </Page>
-            <div className="background-container">
-                <div className="bubble primary" style={{ top: '-10%', right: '-20%' }}></div>
-                <div className="bubble secondary" style={{ bottom: '-20%', left: '-20%' }}></div>
-            </div>
         </div>
     );
 }

client/src/pages/Tasks/index.tsx

@@ -4,40 +4,38 @@ import './tasks.scss';
 
 export default function Tasks() {
     return (
-        <>
-            <Page className="tasks-page">
-                <main className="content-container">
-                    <section className="intro-section">
-                        <h1 className="underlined">Tasks</h1>
-                        <p>Hey Daniel, you have <strong>10 tasks</strong> for today.</p>
-                    </section>
-                    <section className="tasks-container">
-                        <h2>Today</h2>
-                        <div className="task-group">
-                            <h3>09:00</h3>
-                            <div className="tasks-list">
-                                <Task task={{
-                                    uuid: 'asdf',
-                                    name: 'Create API Routes',
-                                    icon: '🌎',
-                                    start: 1619074800000,
-                                    end: 1619076600000,
-                                    description: 'Create the API routes and implement them into the FrontEnd, by adding them into the controls.'
-                                }} />
-                                <Task task={{
-                                    uuid: 'asdfds',
-                                    name: 'Create API Routes',
-                                    icon: '🌎',
-                                    start: 1619074800000,
-                                    end: 1619076600000,
-                                    description: 'Create the API routes and implement them into the FrontEnd, by adding them into the controls.'
-                                }} />
-                            </div>
+        <Page className="tasks-page">
+            <main className="content-container">
+                <section className="intro-section">
+                    <h1 className="underlined">Tasks</h1>
+                    <p>Hey Daniel, you have <strong>10 tasks</strong> for today.</p>
+                </section>
+                <section className="tasks-container">
+                    <h2>Today</h2>
+                    <div className="task-group">
+                        <h3>09:00</h3>
+                        <div className="tasks-list">
+                            <Task task={{
+                                uuid: 'asdf',
+                                name: 'Create API Routes',
+                                icon: '🌎',
+                                start: 1619074800000,
+                                end: 1619076600000,
+                                description: 'Create the API routes and implement them into the FrontEnd, by adding them into the controls.'
+                            }} />
+                            <Task task={{
+                                uuid: 'asdfds',
+                                name: 'Create API Routes',
+                                icon: '🌎',
+                                start: 1619074800000,
+                                end: 1619076600000,
+                                description: 'Create the API routes and implement them into the FrontEnd, by adding them into the controls.'
+                            }} />
                         </div>
-                    </section>
-                </main>
-            </Page>
-        </>
+                    </div>
+                </section>
+            </main>
+        </Page>
     );
 }