tidy up rubbered state styling

Author: tariknz

src/app/storage/defaultDashboard.ts

@@ -65,8 +65,8 @@ export const defaultDashboard: DashboardLayout = {
       layout: {
         x: 1000,
         y: 1000,
-        width: 150,
-        height: 330,
+        width: 160,
+        height: 380,
       },
     },
     {

src/frontend/components/Weather/WeatherTrackRubbered/WeatherTrackRubbered.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
-import { Path } from '@phosphor-icons/react';
+import { PathIcon } from '@phosphor-icons/react';
+
 interface Props {
   trackRubbered: string | undefined;
 }
 
 export const WeatherTrackRubbered: React.FC<Props> = ({ trackRubbered }) => {
   return (
     <div className="bg-slate-800/70 p-2 rounded-sm">
-    <div className="flex flex-row items-center gap-6">
-      <span className="text-m text-gray-400 mr-1"><Path /></span>
-      <span className="text-sm">{trackRubbered ?? 'N/A'}</span>
+    <div className="flex flex-row items-center gap-2">
+      <span className="text-m text-gray-400 mr-1"><PathIcon /></span>
+      <span className="text-sm capitalize">{trackRubbered ?? 'N/A'}</span>
     </div>
     </div>
   );