basic task styling

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/index.scss

@@ -19,9 +19,6 @@ body {
     position: relative;
     background: linear-gradient(to right, #fff 0%, #f2f2f2 100%);
 
-    @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;
 
@@ -447,4 +451,4 @@
             }
         }
     }
-}
+}
\ No newline at end of file

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