Styling

src/components/main/Root.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useContext } from "react";
 import { LineChart, Line, CartesianGrid, XAxis, YAxis } from "recharts";
 import { format, addDays } from "date-fns";
 import { Dashboard } from "@/components/main/routes/Dashboard";
+import { Options } from "@/components/main/routes/Options";
 import {
   loadStorageOrDefault,
   persistStorage,
@@ -62,7 +63,7 @@ const Navigation = function ({ router }) {
 
 const Base = function ({ children }) {
   return (
-    <div className="flex flex-col grow items-center justify-center h-full w-full bg-muted">
+    <div className="flex flex-col grow items-center justify-center h-full w-full bg-muted p-5">
       <Navigation />
       {children}
     </div>
@@ -92,8 +93,8 @@ const App: React.FC = () => {
     {
       ...routes.options,
       element: (
-        <Base id="Dashboard">
-          <div>Hello world!</div>,
+        <Base id="Options">
+          <Options state={state} updateState={updateState} />
         </Base>
       ),
     },

src/components/main/routes/Dashboard.tsx

@@ -72,7 +72,10 @@ export const Dashboard = function ({ state, updateState }) {
   }, [state.dataCache, dateTime]);
 
   return (
-    <div className="flex p-5 bg-white border border-solid border-slate-300 rounded-lg space-y-5">
+    <div
+      className="flex p-5 bg-white border border-solid border-slate-300 rounded-lg space-y-5 w-full h-full"
+      style={{ maxWidth: "810px", maxHeight: "470px" }}
+    >
       <div>
         <h1 className="text-lg font-medium mb-2">Forecast</h1>
         <ForecastDatePicker dateTime={dateTime} onChange={setDateTime} />

src/components/ui/DatePicker.tsx

@@ -24,7 +24,7 @@ export const ForecastDatePicker = function ({
   onChange,
 }) {
   return (
-    <label>
+    <label className="font-medium">
       Forecast date (min. of 14 days in advance) <br />
       <input
         type="date"