diff --git a/client/src/components/forms/ContactForm/contact-form.scss b/client/src/components/forms/ContactForm/contact-form.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3864c0424e11dcecb2b9ed213d3560500c37f53e
--- /dev/null
+++ b/client/src/components/forms/ContactForm/contact-form.scss
@@ -0,0 +1,24 @@
+@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
diff --git a/client/src/components/forms/ContactForm/index.tsx b/client/src/components/forms/ContactForm/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..bdcc4ffe14e6eb69ac8979578c4dc96f756984df
--- /dev/null
+++ b/client/src/components/forms/ContactForm/index.tsx
@@ -0,0 +1,58 @@
+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>
+ );
+}
+
diff --git a/client/src/components/ui/Task/index.tsx b/client/src/components/ui/Task/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1e79ab27c457ef72037d2e6ce1da602e2ef5e6f7
--- /dev/null
+++ b/client/src/components/ui/Task/index.tsx
@@ -0,0 +1,37 @@
+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
diff --git a/client/src/components/ui/Task/task.scss b/client/src/components/ui/Task/task.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ed71250b83faff8611e8932945a08d18ac203fba
--- /dev/null
+++ b/client/src/components/ui/Task/task.scss
@@ -0,0 +1,21 @@
+.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
diff --git a/client/src/components/ui/TextInput/text-input.scss b/client/src/components/ui/TextInput/text-input.scss
index cf4af9767f3792b3ade16fd7d6e867463dd8ae1b..d8eb4b1ca0f68ef7e5c1801045bd1bcd62e49c8c 100644
--- a/client/src/components/ui/TextInput/text-input.scss
+++ b/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;
diff --git a/client/src/index.scss b/client/src/index.scss
index f83ef1d28df6d2633069e9924e4a35ae6442c310..ddec6f0e42b4cee1729e313f9254c3c7aa5c91c4 100644
--- a/client/src/index.scss
+++ b/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
+}
diff --git a/client/src/pages/Home/home.scss b/client/src/pages/Home/home.scss
index 8d01b07c0989f2dc0e2a1141a60a1af0e99e82a9..63ce0928d3571be6ad7cb71542a04bfdd5b25318 100644
--- a/client/src/pages/Home/home.scss
+++ b/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
+}
diff --git a/client/src/pages/Home/index.tsx b/client/src/pages/Home/index.tsx
index 375e312d8941083c69d1ccf3fadb45488f0e7f20..8419ab7605589f8c7faf98937a12f4171fb66618 100644
--- a/client/src/pages/Home/index.tsx
+++ b/client/src/pages/Home/index.tsx
@@ -1,7 +1,6 @@
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>
diff --git a/client/src/pages/Tasks/index.tsx b/client/src/pages/Tasks/index.tsx
index 612654dfb26fa5807f82e14e2506e8a0b2b8dafd..9270a7592f68a96cce8691f04f64325e5542f7fc 100644
--- a/client/src/pages/Tasks/index.tsx
+++ b/client/src/pages/Tasks/index.tsx
@@ -1,4 +1,5 @@
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">
diff --git a/client/src/pages/Tasks/tasks.scss b/client/src/pages/Tasks/tasks.scss
index 494fdb800f57668e9eb79fd87c6c4f51521cccf1..401e675e070e0dd590d97602eb6df6616b3741ea 100644
--- a/client/src/pages/Tasks/tasks.scss
+++ b/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