bugfixes and started task page

client/public/index.html

@@ -14,7 +14,7 @@
     <meta name="name" content="ryoko | plan your projects like a journey">
     <meta property="og:title" content="Try planning your next project with ryoko!">
     <link rel="preconnect" href="https://fonts.gstatic.com">
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet"> 
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet"> 
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet"> 
     <title>ryoko | plan your projects like a journey</title>

client/src/components/forms/LoginForm/index.tsx

@@ -10,10 +10,10 @@ interface Props {
 export default function RegisterForm({ onSubmit }: Props) {
     const [username, setUsername] = useState<string>('');
     const [password, setPassword] = useState<string>('');
-    
+
     const handleSubmit = useCallback(async (e: FormEvent) => {
         e.preventDefault();
-            onSubmit?.(username, password);
+        onSubmit?.(username, password);
     }, [onSubmit, password, username]);
 
     return (

client/src/components/ui/Header/header.scss

@@ -2,6 +2,6 @@
     display: flex;
     justify-content: space-between;
     img {
-        padding: 35px;
+        padding: 35px 30px 20px 30px;
     }
 }
\ No newline at end of file

client/src/index.scss

@@ -53,6 +53,7 @@ h6 {
 h1 {
     font-size: fn.toRem(36);
     margin-bottom: fn.toRem(20);
+    font-weight: s.$weight-xbold;
 
     &.underlined {
         position: relative;
@@ -61,16 +62,17 @@ h1 {
         &:after {
             content: ' ';
             position: absolute;
-            right: -10px;
-            bottom: 10px;
+            right: -7px;
+            bottom: 5px;
             width: 90px;
             background: rgba(s.$accent, .5);
-            height: 16px;
+            height: 20px;
             z-index: -1;
 
             @include mx.breakpoint(large) {
                 height: 24px;
                 width: 120px;
+                bottom: 10px;
             }
 
         }
@@ -130,16 +132,22 @@ h4 {
     overflow: hidden;
 
     .bubble {
-        width: 400px;
-        height: 400px;
+        width: 300px;
+        height: 300px;
         position: absolute;
-        filter: blur(200px);
-        opacity: 0.75;
-
+        filter: blur(150px);
+        opacity: 0.5;
+
+        @include mx.breakpoint(medium) {
+            width: 400px;
+            height: 400px;
+            filter: blur(300px);
+            opacity: 0.6;
+        }
+        
         @include mx.breakpoint(large) {
             width: 500px;
             height: 500px;
-            filter: blur(200px);
         }
 
         &.secondary {

client/src/pages/Home/index.tsx

@@ -11,7 +11,7 @@ import ImageDaniel from 'images/daniel-planoetscher.jpg';
 
 export default function Home() {
     return (<>
-        <Page header={false}>
+        <Page className="landing-page" header={false}>
             <section className="hero-section" id="hero">
                 <div className="hero-container">
                     <header>

client/src/pages/Tasks/index.tsx

@@ -3,12 +3,20 @@ import './tasks.scss';
 
 export default function Tasks() {
     return (
-        <Page className="tasks-page">
-            <main className="content-container">
-                <h1>Tasks</h1>
-                <p>Hey Daniel, you have <strong>10</strong> Tasks for today.</p>
-            </main>
-        </Page>
+        <>
+            <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>
+                </main>
+            </Page>
+            <div className="background-container">
+                <div className="bubble primary" style={{ top: '-20%', right: '-20%' }}></div>
+                <div className="bubble accent" style={{ bottom: '-20%', left: '-20%' }}></div>
+            </div>
+        </>
     );
 }
 

client/src/pages/Tasks/tasks.scss

+@use 'styles/settings'as s;
+@use 'styles/mixins'as mx;
+@use 'styles/functions'as fn;
+
+.tasks-page {
+    .intro-section {
+       font-size: fn.toRem(18); 
+    }
+}
\ No newline at end of file

client/src/styles/settings.scss

@@ -30,6 +30,7 @@ $weight-regular: 400;
 $weight-medium: 500;
 $weight-semi-bold: 600;
 $weight-bold: 700;
+$weight-xbold: 800;
 
 // Breakpoints
 $breakpoints: (