DEV-108 add timeline and minor fixes

corn-frontend/src/app/pages/boards/sidebar-button/sidebar-button.component.html

@@ -1,5 +1,5 @@
 <button (click)="click()" [class.bg-corn-primary-900]="selected" class="flex items-center justify-right py-2 space-x-2 w-full p-2 rounded-[4px]"
         mat-basic-button>
-    <ng-icon [name]="iconName"></ng-icon>
+    <ng-icon [class.text-black]="selected" [name]="iconName"></ng-icon>
     <span [class.text-black]="selected">{{ label }}</span>
 </button>

corn-frontend/src/app/pages/boards/timeline/timeline.component.html

@@ -1 +1,23 @@
-<h1>Timeline</h1>
+<div class="text-4xl font-thin p-5">Timeline</div>
+
+<div class="bg-dark-color-settings-main-background p-4 mr-[24px] rounded shadow font-light">
+    <div class="flex justify-between items-center mb-4">
+        <button class="flex items-center p-2 bg-corn-primary-500 text-black rounded hover:bg-corn-primary-600" (click)="prevMonth()">
+            <ng-icon name="matArrowBack"></ng-icon>
+        </button>
+        <h2 class="text-2xl">{{ currentMonth | date: 'MMMM yyyy' }}</h2>
+        <button class="flex items-center p-2 bg-corn-primary-500 text-black rounded hover:bg-corn-primary-600" (click)="nextMonth()">
+            <ng-icon name="matArrowForward"></ng-icon>
+        </button>
+    </div>
+    <div class="grid grid-cols-7 gap-2">
+        <div *ngFor="let day of days" class="text-center font-bold tracking-wider text-corn-primary-500">{{ day }}</div>
+    </div>
+    <div class="grid grid-cols-7 gap-1">
+        <ng-container *ngFor="let week of weeks">
+            <div *ngFor="let date of week.days">
+                <div class="text-center bg-dark-color-settings-grey-bg">{{ date.day }}</div>
+            </div>
+        </ng-container>
+    </div>
+</div>

corn-frontend/src/app/pages/boards/timeline/timeline.component.ts

@@ -1,10 +1,80 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { DatePipe, NgForOf } from "@angular/common";
+import { CommonModule } from '@angular/common';
+import { MatIcon} from "@angular/material/icon";
+import { NgIcon, provideIcons } from "@ng-icons/core";
+import { matArrowBack, matArrowForward } from "@ng-icons/material-icons/baseline";
+
+interface Week {
+    days: Day[]
+}
+
+interface Day {
+    day: number | undefined,
+    month: number
+}
 
 @Component({
     selector: 'app-timeline',
     standalone: true,
-    imports: [],
+    imports: [
+        DatePipe,
+        NgForOf,
+        CommonModule,
+        MatIcon,
+        NgIcon,
+    ],
     templateUrl: './timeline.component.html',
+    viewProviders: [provideIcons({
+        matArrowForward,
+        matArrowBack,
+    })]
 })
 export class TimelineComponent {
+    currentMonth: Date = new Date();
+    days: string[] = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+    weeks: Week[] = [];
+
+    constructor() { }
+
+    ngOnInit(): void {
+        this.generateCalendar();
 }
+    generateCalendar(): void {
+        const startDate = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth(), 1);
+        const endDate = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() + 1, 0);
+        const numDays = endDate.getDate();
+        const startDay = startDate.getDay();
+
+        let dateCounter = 1;
+        for (let i = 0; i < 6; i++) {
+            const week : Week = {
+                days: []
+            };
+            for (let j = 0; j < 7; j++) {
+                if ((i === 0 && j < startDay) || dateCounter > numDays) {
+                    week.days.push({ day: undefined, month: -1 });
+                } else {
+                    week.days.push({ day: dateCounter, month: this.currentMonth.getMonth() + 1 });
+                    dateCounter++;
+                }
+            }
+            this.weeks.push(week);
+        }
+    }
+
+    prevMonth(): void {
+        this.currentMonth = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() - 1);
+        this.resetCalendar();
+    }
+
+    nextMonth(): void {
+        this.currentMonth = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() + 1);
+        this.resetCalendar();
+    }
+
+    resetCalendar(): void {
+        this.weeks = [];
+        this.generateCalendar();
+    }
+}

corn-frontend/src/app/pages/home/home.component.html

@@ -6,13 +6,13 @@
 
     <span class="flex-auto"></span>
 
-    <button mat-fab extended class="flex items-center m-1.5 h-10 p-3.5 border-2 border-corn-primary-300 rounded-3xl
+    <button class="flex items-center m-1.5 h-10 p-3.5 border-2 border-corn-primary-300 rounded-3xl
     bg-dark-color-settings-container-background text-corn-primary-300 font-light" aria-label="Login" (click)="login()">
         <mat-icon class="mr-2">login</mat-icon>
         Login
     </button>
 
-    <button mat-fab extended class="flex items-center m-1.5 h-10 p-3.5 border-2 border-corn-primary-300 rounded-3xl
+    <button class="flex items-center m-1.5 h-10 p-3.5 border-2 border-corn-primary-300 rounded-3xl
     bg-corn-primary-300 text-dark-color-settings-container-background font-light" aria-label="Register" (click)="register()">
         <mat-icon class="mr-2">app_registration</mat-icon>
         Register

corn-frontend/tailwind.config.js

@@ -26,6 +26,7 @@ export const theme = {
                 'main-background': '#1f1f1e',
                 'container-background': '#292627',
                 'font': '#ffffff',
+                'grey-bg': '#303030',
             },
         },
         width: {