Styling

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>
   );

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)}