From d7e07f5e11e7446092197fb824787d5b750d5263 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Tue, 23 Jan 2024 15:50:53 +0100
Subject: [PATCH] Styling

---
 src/components/main/routes/Dashboard.tsx | 7 +++++--
 src/components/ui/DatePicker.tsx         | 2 +-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/main/routes/Dashboard.tsx b/src/components/main/routes/Dashboard.tsx
index 0af5a51..4be2917 100644
--- a/src/components/main/routes/Dashboard.tsx
+++ b/src/components/main/routes/Dashboard.tsx
@@ -63,8 +63,11 @@ export const Dashboard = function ({ state, updateCache }) {
   }, [dateTime]);
 
   return (
-    <div>
-      <ForecastDatePicker dateTime={dateTime} onChange={setDateTime} />
+    <div className="flex p-5 bg-white border border-solid border-slate-300 rounded-lg space-y-5">
+      <div>
+        <h1 className="text-lg font-medium mb-2">Forecast</h1>
+        <ForecastDatePicker dateTime={dateTime} onChange={setDateTime} />
+      </div>
       {data ? <WeatherChart data={data} /> : "Loading..."}
     </div>
   );
diff --git a/src/components/ui/DatePicker.tsx b/src/components/ui/DatePicker.tsx
index a848622..d860df5 100644
--- a/src/components/ui/DatePicker.tsx
+++ b/src/components/ui/DatePicker.tsx
@@ -26,7 +26,7 @@ export const ForecastDatePicker = function ({
   console.log(dateTime);
   return (
     <label>
-      Forecast date (min. of 14 days in advance)
+      Forecast date (min. of 14 days in advance) <br />
       <input
         type="date"
         value={formatDate(dateTime)}