Merge branch 'frontend-devel' of...

Merge branch 'frontend-devel' of https://gitlab.inf.unibz.it/Roland.Bernard/wie_202021_csbillero11 into frontend-devel

client/src/components/forms/ContactForm/contact-form.scss

+@use 'styles/mixins' as mx;
+
+.input-element {
+    width: 100%;
+    @include mx.breakpoint(medium) {
+        width: 50%;
+    }
+
+    &.textarea {
+        width: 100%;
+    }
+}
+
+.submit-button {
+    appearance: none;
+    border: none;
+    margin: 0.5rem;
+}
+
+.button-container {
+    display: flex;
+    width: 100%;
+    justify-content: flex-end;
+}
\ No newline at end of file

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

+import { FormEvent, useCallback, useState } from "react";
+import TextInput from 'components/ui/TextInput';
+import Button from 'components/ui/Button';
+import './contact-form.scss';
+
+interface Props {
+    onSubmit?: (firstname: string, lastname: string, email: string, subject: string, message: string) => void
+}
+
+export default function RegisterForm({ onSubmit }: Props) {
+    const [firstname, setFirstname] = useState<string>('');
+    const [lastname, setLastname] = useState<string>('');
+    const [email, setEmail] = useState<string>('');
+    const [subject, setSubject] = useState<string>('');
+    const [message, setMessage] = useState<string>('');
+
+    const handleSubmit = useCallback(async (e: FormEvent) => {
+        e.preventDefault();
+        onSubmit?.(firstname, lastname, email, subject, message);
+    }, [onSubmit, firstname, lastname, email, subject, message]);
+
+    return (
+        <form className="contact-form" onSubmit={handleSubmit}>
+            <TextInput
+                label="Firstname"
+                name="firstname"
+                onChange={setFirstname}
+            />
+            <TextInput
+                label="Lastname"
+                name="lastname"
+                onChange={setLastname}
+            />
+            <TextInput
+                label="Email"
+                name="email"
+                onChange={setEmail}
+            />
+            <TextInput
+                label="Subject"
+                name="subject"
+                onChange={setSubject}
+            />
+            <TextInput
+                label="Message"
+                name="message"
+                type="textarea"
+                onChange={setMessage}
+            />
+            <div className="button-container">
+                <Button type="submit" className="submit-button">
+                    Login
+            </Button>
+            </div>
+        </form>
+    );
+}
+

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

+import './task.scss';
+
+interface TaskInt {
+    name: string,
+    icon: string,
+    start: number,
+    end: number
+}
+
+interface Props {
+    task: TaskInt,
+    active?: boolean,
+}
+
+function formattedTime(date: Date) {
+    return date.getHours() + ':' + (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
+}
+
+export default function Task({ task, active }: Props) {
+    const start = new Date(task.start);
+    const end = new Date(task.end);
+
+
+
+    return (
+        <div className="task">
+            <div className="icon-container">
+                {task.icon}
+            </div>
+            <div className="text-container">
+                <h4>{task.name}</h4>
+                <div className="time">{formattedTime(start)} - {formattedTime(end)}</div>
+            </div>
+
+        </div>
+    )
+}
\ No newline at end of file

client/src/components/ui/Task/task.scss

+.task {
+    display: flex;
+    align-items: center;
+    padding: 15px 25px;
+    border-radius: 5px;
+    background: rgba(#fff, .5);
+
+    .icon-container {
+        font-size: 36px;
+        margin-right: 15px;
+    }
+
+    h4 {
+        margin-bottom: 0;
+    }
+
+    .time {
+        opacity: .75;
+        font-size: 12px;
+    }
+}
\ No newline at end of file

client/src/components/ui/TextInput/text-input.scss

@@ -29,18 +29,6 @@
             }
         }
 
-        &:before {
-            content: ' ';
-            position: absolute;
-            left: 2px;
-            top: 5px;
-            width: 100%;
-            height: 100%;
-            background: rgba(255, 255, 255, 0.05);
-            border-radius: 15px;
-            filter: blur(5px);
-        }
-
         label {
             font-size: 16px;
             position: absolute;

client/src/index.scss

@@ -17,11 +17,8 @@ html {
 body {
     color: s.$body-color;
     position: relative;
-    background: linear-gradient(to right, #fff 0%, #f2f2f2 100%);
+    background: #fff;
 
-    @include mx.breakpoint(xlarge) {
-        padding: 5rem 0;
-    }
 }
 
 a {
@@ -102,8 +99,9 @@ h2 {
 }
 
 h3 {
-    font-size: fn.toRem(20);
+    font-size: fn.toRem(18);
     margin-bottom: fn.toRem(12);
+    font-weight: s.$weight-semi-bold;
 
     @include mx.breakpoint(large) {
         font-size: fn.toRem(24);
@@ -162,4 +160,4 @@ h4 {
             background: s.$accent;
         }
     }
-}
+}
\ No newline at end of file

client/src/pages/Home/home.scss

@@ -6,6 +6,10 @@
 .landing-page {
     //General
 
+    @include mx.breakpoint(xlarge) {
+        padding: 5rem 0;
+    }
+
     section {
         margin-bottom: 70px;
 
@@ -395,27 +399,6 @@
             margin-left: auto;
             margin-right: auto;
 
-            .input-element {
-                @include mx.breakpoint(medium) {
-                    width: 50%;
-                }
-
-                &.textarea {
-                    width: 100%;
-                }
-            }
-
-            .submit-button {
-                appearance: none;
-                border: none;
-                margin: 0.5rem;
-            }
-
-            .button-container {
-                display: flex;
-                width: 100%;
-                justify-content: flex-end;
-            }
         }
     }
 
@@ -447,4 +430,4 @@
             }
         }
     }
-}
+}
\ No newline at end of file

client/src/pages/Home/index.tsx

 import Project from 'components/ui/Project';
 import ButtonLink from 'components/ui/ButtonLink';
-import Button from 'components/ui/Button';
-//import TextInput from 'components/ui/TextInput';
+import ContactForm from 'components/forms/ContactForm';
 import Page from 'components/ui/Page';
 import './home.scss';
 
@@ -149,16 +148,7 @@ export default function Home() {
                         Do you still have a question? Just contact us directly and we will be glad
                         to help you resolve the issue.
                     </p>
-                    <form className="contact-form" action="mailto:dplanoetscher@unibz.it" method="GET">
-                        {/*                        <TextInput label="Fistname" name="firstname" />
-                        <TextInput label="Lastname" name="lastname" />
-                        <TextInput label="Email" name="email" />
-                        <TextInput label="Subject" name="subject" />
-    <TextInput label="Message" name="message" type="textarea" />*/}
-                        <div className="button-container">
-                            <Button type="submit">Send</Button>
-                        </div>
-                    </form>
+                    <ContactForm />
                 </div>
             </section>
             <footer>

client/src/pages/Tasks/index.tsx

 import Page from 'components/ui/Page';
+import Task from 'components/ui/Task';
 import './tasks.scss';
 
 export default function Tasks() {
@@ -10,6 +11,24 @@ export default function Tasks() {
                         <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="hour-container">
+                            <h3>09:00</h3>
+                            <Task task={{
+                                 name: 'Create API Routes',
+                                 icon: '🌎',
+                                 start: 1619074800000,
+                                 end: 1619076600000
+                                 }} />
+                            <Task task={{
+                                 name: 'Create API Routes',
+                                 icon: '🌎',
+                                 start: 1619074800000,
+                                 end: 1619076600000
+                                 }} />
+                        </div>
+                    </section>
                 </main>
             </Page>
             <div className="background-container">

client/src/pages/Tasks/tasks.scss

@@ -4,6 +4,14 @@
 
 .tasks-page {
     .intro-section {
-       font-size: fn.toRem(18); 
+        font-size: fn.toRem(18);
+    }
+
+    .tasks-container {
+        margin-top: 50px;
+
+        .task {
+            margin-bottom: 30px;
+        }
     }
 }
\ No newline at end of file