@homefile/components-v2 2.25.4 → 2.25.5

package/dist/assets/locales/en/index.json

@@ -414,7 +414,7 @@
       }
     },
     "details": "Provide details about your home’s",
-    "homeMonitor": "Homie",
+    "homeMonitor": "Homie - Your Home Assistant",
     "HomieMessages": "Homie Messages ({{ count }})",
     "homeMonitoring": "I’m learning about your home…",
     "homeMonitoringAlerts": "I have {{ count }} new messages for you.",

package/dist/components/homeAssistant/HomeAssistantWrapper.js

@@ -1,24 +1,23 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { Box, GridItem, Image } from '@chakra-ui/react';
 import { ContainerHeader, TileTooltip, moveRightToLeftWithFade, moveRightToLeft, moveLeftToRightAirplane, WeatherTrees, } from '..';
 import { Airplane, Cloud1, Cloud2, Cloud3, IA } from '../../assets/images';
-import { getTimeOfDay, getTimeOfDaySeason, } from '../../utils';
 import { colors } from '../../theme/colors';
 export const HomeAssistantWrapper = ({ children, showAirplane, title, zIndex, }) => {
-    const [timeOfDay, setTimeOfDay] = useState(getTimeOfDay());
-    const timeOfDaySeason = getTimeOfDaySeason();
+    const [timeOfDay, setTimeOfDay] = useState('day');
+    const timeOfDaySeason = 'day-summer';
     const gradients = {
         day: colors.dayGradient,
         evening: colors.eveningGradient,
         morning: colors.morningGradient,
         night: colors.nightGradient,
     };
-    useEffect(() => {
-        const interval = setInterval(() => {
-            setTimeOfDay(getTimeOfDay());
-        }, 60000);
-        return () => clearInterval(interval);
-    }, []);
+    // useEffect(() => {
+    //   const interval = setInterval(() => {
+    //     setTimeOfDay(getTimeOfDay())
+    //   }, 60000)
+    //   return () => clearInterval(interval)
+    // }, [])
     return (_jsx(GridItem, { colSpan: [1, 2], zIndex: zIndex, children: _jsx(TileTooltip, { label: "homeAssistant", children: _jsxs(Box, { bgGradient: gradients[timeOfDay], boxShadow: "base", h: "full", position: "relative", overflow: "hidden", transition: "background 1s ease-in-out", children: [_jsx(ContainerHeader, { title: title, titleIcon: IA }), _jsx(_Fragment, { children: children }), _jsx(Image, { src: Cloud1, position: "absolute", w: "auto", h: "80px", top: "80px", animation: `${moveRightToLeftWithFade} 400s linear infinite` }), _jsx(Image, { src: Cloud2, position: "absolute", w: "auto", h: "112px", top: "150px", animation: `${moveRightToLeft} 200s linear infinite` }), _jsx(Image, { src: Cloud3, position: "absolute", w: "auto", h: "160px", top: "200px", animation: `${moveRightToLeft} 130s linear infinite` }), showAirplane && (_jsx(Image, { src: Airplane, position: "absolute", w: "auto", h: "40px", top: "85px", animation: `${moveLeftToRightAirplane} 500s cubic-bezier(1, 1, 1, 500) infinite` })), _jsx(WeatherTrees, { timeOfDaySeason: timeOfDaySeason, position: "absolute", bottom: "0", right: "2", w: "auto", h: "100px" })] }) }) }));
 };

package/dist/components/homeAssistant/HomeMonitorButton.js

@@ -7,7 +7,7 @@ export const HomeMonitorButton = ({ alertCount = 0, currentStep, onStepClick, st
     const iconAltText = getIconAltText(step.icon);
     const alert = status === 'alert';
     const ok = status === 'ok';
-    return (_jsx(Box, Object.assign({ position: "relative", id: buttonId, zIndex: "2", boxShadow: "lg" }, setStyles(status), { children: _jsxs(Box, { position: "relative", bg: "neutral.white", borderRadius: "lg", zIndex: "2", children: [_jsx(Box, { bg: alert ? 'error.2' : 'green.1', boxSize: "10px", borderRadius: "full", position: "absolute", top: "6px", left: "6px", zIndex: "8" }), _jsxs(Stack, { position: "relative", zIndex: "2", as: "button", spacing: "2", border: "1px solid transparent", align: "center", h: "96px", w: "100%", p: "base", onClick: () => onStepClick(currentStep), filter: ok ? 'grayscale(1) opacity(0.6)' : '', children: [_jsxs(Center, { h: "60%", marginTop: "2", children: [!alert && (_jsx(Image, { src: step.icon, alt: iconAltText, w: "auto", h: "28px" })), alert && (_jsx(Center, { boxSize: "32px", bg: "error.2", borderRadius: "full", color: "neutral.white", lineHeight: "1", fontWeight: "bold", children: alertCount }))] }), _jsx(Center, { h: "40%", children: _jsx(Text, { fontSize: "xs", textTransform: "uppercase", textAlign: "center", lineHeight: "14px", children: step.title }) })] })] }) })));
+    return (_jsx(Box, Object.assign({ position: "relative", id: buttonId, zIndex: "2", boxShadow: "lg" }, setStyles(status), { children: _jsxs(Box, { position: "relative", bg: "neutral.white", borderRadius: "lg", zIndex: "2", children: [_jsx(Box, { bg: alert ? 'error.2' : 'green.1', boxSize: "10px", borderRadius: "full", position: "absolute", top: "10px", left: "8px", zIndex: "8" }), _jsxs(Stack, { position: "relative", zIndex: "2", as: "button", spacing: "7px", border: "1px solid transparent", align: "center", justify: "center", w: "100%", p: "base", pt: "20px", onClick: () => onStepClick(currentStep), filter: ok ? 'grayscale(1) opacity(0.6)' : '', children: [!alert && (_jsx(Box, { boxSize: "36px", children: _jsx(Image, { src: step.icon, alt: iconAltText, w: "100%", h: "100%", fit: "contain" }) })), alert && (_jsx(Center, { boxSize: "32px", bg: "error.2", borderRadius: "full", color: "neutral.white", lineHeight: "1", fontWeight: "bold", children: alertCount })), _jsx(Center, { h: "28px", children: _jsx(Text, { fontSize: "14px", textTransform: "uppercase", textAlign: "center", lineHeight: "14px", fontFamily: "secondary", children: step.title }) })] })] }) })));
 };
 const alertGradient = keyframes `
   0% {

package/dist/components/homeAssistant/HomeMonitorSteps.js

@@ -10,7 +10,7 @@ export const HomeMonitorSteps = ({ alerts = [], menuItems = [], onStepClick, })
     const handleStepClick = (step) => onStepClick(step);
     return (_jsx(Flex, { gap: "base", justify: "center", children: homeAssistantSteps.map((step, index) => {
             var _a;
-            return (_jsx(Box, { position: "relative", flex: "1", children: _jsxs(Fragment, { children: [_jsx(HomeMonitorButton, { alertCount: (_a = alerts.find((alert) => alert.step === index + 1)) === null || _a === void 0 ? void 0 : _a.count, currentStep: index + 1, onStepClick: handleStepClick, status: getStatus(index + 1, alerts), step: step }), _jsx(Box, { position: "absolute", top: "-2px", right: "4px", zIndex: "1400", children: _jsx(IconMenu, { zIndex: "2", icon: _jsx(MoreHorizontal, { size: 26 }), itemForm: index + 1, menuItems: menuItems, disabled: isDisabled, onClick: () => setSelectedId(`homeMonitorButton-${index + 1}`) }) })] }) }, step === null || step === void 0 ? void 0 : step.title));
+            return (_jsx(Box, { position: "relative", flex: "1", children: _jsxs(Fragment, { children: [_jsx(HomeMonitorButton, { alertCount: (_a = alerts.find((alert) => alert.step === index + 1)) === null || _a === void 0 ? void 0 : _a.count, currentStep: index + 1, onStepClick: handleStepClick, status: getStatus(index + 1, alerts), step: step }), _jsx(Box, { position: "absolute", top: "2px", right: "6px", zIndex: "1400", children: _jsx(IconMenu, { zIndex: "2", icon: _jsx(MoreHorizontal, { size: 26 }), itemForm: index + 1, menuItems: menuItems, disabled: isDisabled, onClick: () => setSelectedId(`homeMonitorButton-${index + 1}`) }) })] }) }, step === null || step === void 0 ? void 0 : step.title));
         }) }));
 };
 const getStatus = (index, alerts) => {

package/dist/components/homeAssistant/monitorAlerts/WeatherWidget.js

@@ -14,13 +14,14 @@ const weatherIconMap = {
     tsra: LuCloudLightning,
     snow: LuSnowflake,
 };
+const BORDER_COLOR = '#BCD1D8';
 export const WeatherWidget = ({ current, details, forecast, header, loading = false, }) => {
     if (loading) {
-        return (_jsxs(Stack, { spacing: "base", p: "4", zIndex: "2", children: [_jsxs(Flex, { justify: "space-between", align: "center", children: [_jsx(SkeletonBox, { height: "12px", borderRadius: "md", width: "30%" }), _jsx(SkeletonBox, { height: "12px", borderRadius: "md", width: "30%" })] }), _jsxs(Stack, { align: "end", children: [_jsxs(Flex, { justify: "end", align: "start", gap: "base", mt: "4", children: [_jsx(SkeletonBox, { height: "50px", borderRadius: "md", width: "50px" }), _jsx(SkeletonBox, { height: "30px", width: "30px", borderRadius: "full" })] }), _jsx(SkeletonBox, { height: "12px", borderRadius: "md", width: "20%" })] }), _jsx(Divider, { borderColor: "gray.2", borderStyle: "dashed" }), _jsxs(Flex, { justify: "space-between", mt: "4", children: [_jsxs(Stack, { children: [_jsx(SkeletonBox, { height: "8px", borderRadius: "md", width: "70px" }), _jsx(SkeletonBox, { height: "8px", borderRadius: "md", width: "70px" })] }), _jsxs(Stack, { align: "end", children: [_jsx(SkeletonBox, { height: "8px", borderRadius: "md", width: "70px" }), _jsx(SkeletonBox, { height: "8px", borderRadius: "md", width: "70px" })] })] }), _jsx(Flex, { justify: "space-between", mt: "4", gap: "1", children: Array(5)
+        return (_jsxs(Stack, { spacing: "base", zIndex: "2", children: [_jsxs(Flex, { justify: "space-between", align: "center", children: [_jsx(SkeletonBox, { height: "12px", borderRadius: "md", width: "30%" }), _jsx(SkeletonBox, { height: "12px", borderRadius: "md", width: "30%" })] }), _jsxs(Stack, { align: "end", children: [_jsxs(Flex, { justify: "end", align: "start", gap: "base", mt: "4", children: [_jsx(SkeletonBox, { height: "50px", borderRadius: "md", width: "50px" }), _jsx(SkeletonBox, { height: "30px", width: "30px", borderRadius: "full" })] }), _jsx(SkeletonBox, { height: "12px", borderRadius: "md", width: "20%" })] }), _jsx(Divider, { borderColor: "gray.2", borderStyle: "dashed" }), _jsxs(Flex, { justify: "space-between", mt: "4", children: [_jsxs(Stack, { children: [_jsx(SkeletonBox, { height: "8px", borderRadius: "md", width: "70px" }), _jsx(SkeletonBox, { height: "8px", borderRadius: "md", width: "70px" })] }), _jsxs(Stack, { align: "end", children: [_jsx(SkeletonBox, { height: "8px", borderRadius: "md", width: "70px" }), _jsx(SkeletonBox, { height: "8px", borderRadius: "md", width: "70px" })] })] }), _jsx(Flex, { justify: "space-between", mt: "4", gap: "1", children: Array(5)
                         .fill(0)
                         .map((_, idx) => (_jsxs(VStack, { gap: "1", width: "46px", border: "1px solid", borderColor: "gray.2", py: "2", px: "1", children: [_jsx(SkeletonBox, { height: "6px", borderRadius: "md", width: "60%" }), _jsx(Divider, { borderColor: "gray.2", borderStyle: "solid", my: "0.5" }), _jsx(SkeletonBox, { height: "18px", width: "18px", borderRadius: "full" }), _jsx(SkeletonBox, { height: "8px", borderRadius: "md", width: "70%" }), _jsx(SkeletonBox, { height: "6px", borderRadius: "md", width: "70%" })] }, idx))) })] }));
     }
-    return (_jsxs(Stack, { spacing: "base", p: "4", zIndex: "2", children: [header && (_jsxs(Flex, { justify: "space-between", align: "center", children: [header.date && (_jsx(Text, { fontSize: "sm", fontFamily: "secondary", textTransform: "uppercase", children: header.date })), header.location && (_jsx(Text, { fontSize: "sm", fontFamily: "secondary", textTransform: "uppercase", children: header.location }))] })), current && (_jsxs(Stack, { spacing: "0", align: "end", children: [_jsxs(HStack, { align: "start", spacing: "2", children: [current.temp != null && (_jsxs(Text, { fontSize: "6xl", fontWeight: "medium", lineHeight: 1, color: "gray.4", children: [current.temp, "\u00B0"] })), getWeatherIcon(current.icon, 50)] }), _jsxs(Text, { fontSize: "md", children: [_jsxs(Box, { as: "span", color: "gray.2", children: ["H", ' '] }), current.high, "\u00B0", ' ', _jsxs(Box, { as: "span", color: "gray.2", children: ["L", ' '] }), current.low, "\u00B0"] })] })), _jsx(Divider, { borderColor: "gray.2", borderStyle: "dashed" }), details && (_jsxs(Flex, { justify: "space-between", children: [_jsxs(VStack, { spacing: "0", align: "start", children: [_jsx(WeatherDetailText, { children: "Precipitation" }), details.humidity != null && (_jsx(WeatherDetailText, { children: "Humidity" })), _jsx(WeatherDetailText, { children: "Wind" })] }), _jsxs(VStack, { spacing: "0", align: "start", children: [details.precipitation != null && (_jsxs(WeatherDetailText, { children: [details.precipitation, "%"] })), details.humidity != null && (_jsxs(WeatherDetailText, { children: [details.humidity, "%"] })), details.wind && (_jsx(WeatherDetailText, { children: details.wind }))] })] })), forecast && (_jsx(Flex, { justify: "space-between", gap: "1", children: forecast.map((f) => (_jsxs(VStack, { spacing: "0", border: "1px solid", borderColor: "gray.2", borderRadius: "sm", children: [_jsx(Text, { fontFamily: "secondary", textTransform: "uppercase", fontSize: "xxs", color: "gray.2", children: f.day }), _jsx(Divider, { borderColor: "gray.2" }), _jsxs(Stack, { spacing: "0", py: "1", px: "2", align: "center", children: [getWeatherIcon(f.icon, 16, colors.gray[3]), _jsxs(Text, { fontSize: "sm", fontWeight: "medium", mb: "-1", children: [f.high, "\u00B0"] }), _jsxs(WeatherDetailText, { children: ["L ", f.low, "\u00B0"] })] })] }, f.day))) }))] }));
+    return (_jsxs(Stack, { spacing: "base", zIndex: "2", children: [header && (_jsxs(Flex, { justify: "space-between", align: "center", children: [header.date && (_jsx(Text, { fontSize: "sm", fontFamily: "secondary", textTransform: "uppercase", children: header.date })), header.location && (_jsx(Text, { fontSize: "sm", fontFamily: "secondary", textTransform: "uppercase", children: header.location }))] })), current && (_jsxs(Stack, { spacing: "0", align: "end", children: [_jsxs(HStack, { align: "start", spacing: "2", children: [current.temp != null && (_jsxs(Text, { fontSize: "6xl", lineHeight: 1, color: "gray.4", children: [current.temp, "\u00B0"] })), getWeatherIcon(current.icon, 42)] }), _jsxs(Text, { fontSize: "md", children: [_jsxs(Box, { as: "span", color: "gray.2", children: ["H", ' '] }), current.high, "\u00B0", ' ', _jsxs(Box, { as: "span", color: "gray.2", children: ["L", ' '] }), current.low, "\u00B0"] })] })), _jsx(Divider, { borderColor: BORDER_COLOR, borderStyle: "dashed" }), details && (_jsxs(Flex, { justify: "space-between", children: [_jsxs(VStack, { spacing: "0", align: "start", children: [_jsx(WeatherDetailText, { children: "Precipitation" }), details.humidity != null && (_jsx(WeatherDetailText, { children: "Humidity" })), _jsx(WeatherDetailText, { children: "Wind" })] }), _jsxs(VStack, { spacing: "0", align: "start", children: [details.precipitation != null && (_jsxs(WeatherDetailText, { children: [details.precipitation, "%"] })), details.humidity != null && (_jsxs(WeatherDetailText, { children: [details.humidity, "%"] })), details.wind && (_jsx(WeatherDetailText, { children: details.wind }))] })] })), forecast && (_jsx(Flex, { justify: "space-between", gap: "1", children: forecast.map((f) => (_jsxs(VStack, { spacing: "0", border: "1px solid", borderColor: BORDER_COLOR, borderRadius: "sm", children: [_jsx(Text, { fontFamily: "secondary", textTransform: "uppercase", fontSize: "xxs", color: "gray.2", alignSelf: "start", ml: "0.5", children: f.day }), _jsx(Divider, { borderColor: BORDER_COLOR }), _jsxs(Stack, { spacing: "0", py: "1", px: "2", align: "center", children: [getWeatherIcon(f.icon, 16, colors.gray[3]), _jsxs(Text, { fontSize: "sm", mb: "-1", children: [f.high, "\u00B0"] }), _jsxs(WeatherDetailText, { children: ["L ", f.low, "\u00B0"] })] })] }, f.day))) }))] }));
 };
 const WeatherDetailText = ({ children }) => (_jsx(Text, { fontFamily: "secondary", textTransform: "uppercase", fontSize: "xs", lineHeight: "1.2", children: children }));
 const getWeatherIcon = (iconUrl, size = 48, color = colors.gray[4]) => {

package/dist/utils/Weather.utils.js

@@ -5,9 +5,7 @@ export function mapForecastToWidget(periods, location) {
         return {};
     // --- HEADER DATE ---
     const todayDate = parseISO(periods[0].startTime);
-    const headerDate = format(todayDate, 'EEEE, MMMM do')
-        .toUpperCase()
-        .replace(',', '');
+    const headerDate = format(todayDate, 'EEE MMMM do');
     // --- CURRENT CONDITIONS ---
     const day0 = (_a = periods.find((p) => p.isDaytime)) !== null && _a !== void 0 ? _a : periods[0];
     const night0 = (_c = (_b = periods.find((p) => !p.isDaytime &&

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "2.25.4",
+  "version": "2.25.5",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",

package/src/assets/locales/en/index.json

@@ -414,7 +414,7 @@
       }
     },
     "details": "Provide details about your home’s",
-    "homeMonitor": "Homie",
+    "homeMonitor": "Homie - Your Home Assistant",
     "HomieMessages": "Homie Messages ({{ count }})",
     "homeMonitoring": "I’m learning about your home…",
     "homeMonitoringAlerts": "I have {{ count }} new messages for you.",

package/src/components/homeAssistant/HomeAssistantWrapper.tsx

@@ -27,8 +27,8 @@ export const HomeAssistantWrapper = ({
   title: string
   zIndex?: string
 }>) => {
-  const [timeOfDay, setTimeOfDay] = useState<TimeOfDay>(getTimeOfDay())
-  const timeOfDaySeason = getTimeOfDaySeason()
+  const [timeOfDay, setTimeOfDay] = useState<TimeOfDay>('day')
+  const timeOfDaySeason = 'day-summer'
   const gradients: Record<TimeOfDay, string> = {
     day: colors.dayGradient,
     evening: colors.eveningGradient,
@@ -36,13 +36,13 @@ export const HomeAssistantWrapper = ({
     night: colors.nightGradient,
   }
 
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setTimeOfDay(getTimeOfDay())
-    }, 60000)
+  // useEffect(() => {
+  //   const interval = setInterval(() => {
+  //     setTimeOfDay(getTimeOfDay())
+  //   }, 60000)
 
-    return () => clearInterval(interval)
-  }, [])
+  //   return () => clearInterval(interval)
+  // }, [])
 
   return (
     <GridItem colSpan={[1, 2]} zIndex={zIndex}>

package/src/components/homeAssistant/HomeMonitorButton.tsx

@@ -29,8 +29,8 @@ export const HomeMonitorButton = ({
           boxSize="10px"
           borderRadius="full"
           position="absolute"
-          top="6px"
-          left="6px"
+          top="10px"
+          left="8px"
           zIndex="8"
         />
 
@@ -38,38 +38,47 @@ export const HomeMonitorButton = ({
           position="relative"
           zIndex="2"
           as="button"
-          spacing="2"
+          spacing="7px"
           border="1px solid transparent"
           align="center"
-          h="96px"
+          justify="center"
           w="100%"
           p="base"
+          pt="20px"
           onClick={() => onStepClick(currentStep)}
           filter={ok ? 'grayscale(1) opacity(0.6)' : ''}
         >
-          <Center h="60%" marginTop="2">
-            {!alert && (
-              <Image src={step.icon} alt={iconAltText} w="auto" h="28px" />
-            )}
-            {alert && (
-              <Center
-                boxSize="32px"
-                bg="error.2"
-                borderRadius="full"
-                color="neutral.white"
-                lineHeight="1"
-                fontWeight="bold"
-              >
-                {alertCount}
-              </Center>
-            )}
-          </Center>
-          <Center h="40%">
+          {!alert && (
+            <Box boxSize="36px">
+              <Image
+                src={step.icon}
+                alt={iconAltText}
+                w="100%"
+                h="100%"
+                fit="contain"
+              />
+            </Box>
+          )}
+          {alert && (
+            <Center
+              boxSize="32px"
+              bg="error.2"
+              borderRadius="full"
+              color="neutral.white"
+              lineHeight="1"
+              fontWeight="bold"
+            >
+              {alertCount}
+            </Center>
+          )}
+
+          <Center h="28px">
             <Text
-              fontSize="xs"
+              fontSize="14px"
               textTransform="uppercase"
               textAlign="center"
               lineHeight="14px"
+              fontFamily="secondary"
             >
               {step.title}
             </Text>

package/src/components/homeAssistant/HomeMonitorSteps.tsx

@@ -29,7 +29,7 @@ export const HomeMonitorSteps = ({
               status={getStatus(index + 1, alerts)}
               step={step}
             />
-            <Box position="absolute" top="-2px" right="4px" zIndex="1400">
+            <Box position="absolute" top="2px" right="6px" zIndex="1400">
               <IconMenu
                 zIndex="2"
                 icon={<MoreHorizontal size={26} />}

package/src/components/homeAssistant/monitorAlerts/WeatherWidget.tsx

@@ -36,6 +36,8 @@ const weatherIconMap: Record<
   snow: LuSnowflake,
 }
 
+const BORDER_COLOR = '#BCD1D8'
+
 export const WeatherWidget = ({
   current,
   details,
@@ -45,7 +47,7 @@ export const WeatherWidget = ({
 }: WeatherWidgetI & { loading?: boolean }) => {
   if (loading) {
     return (
-      <Stack spacing="base" p="4" zIndex="2">
+      <Stack spacing="base" zIndex="2">
         {/* Header skeleton */}
         <Flex justify="space-between" align="center">
           <SkeletonBox height="12px" borderRadius="md" width="30%" />
@@ -99,7 +101,7 @@ export const WeatherWidget = ({
   }
 
   return (
-    <Stack spacing="base" p="4" zIndex="2">
+    <Stack spacing="base" zIndex="2">
       {/* Header */}
       {header && (
         <Flex justify="space-between" align="center">
@@ -129,16 +131,11 @@ export const WeatherWidget = ({
         <Stack spacing="0" align="end">
           <HStack align="start" spacing="2">
             {current.temp != null && (
-              <Text
-                fontSize="6xl"
-                fontWeight="medium"
-                lineHeight={1}
-                color="gray.4"
-              >
+              <Text fontSize="6xl" lineHeight={1} color="gray.4">
                 {current.temp}°
               </Text>
             )}
-            {getWeatherIcon(current.icon, 50)}
+            {getWeatherIcon(current.icon, 42)}
           </HStack>
           <Text fontSize="md">
             <Box as="span" color="gray.2">
@@ -153,7 +150,7 @@ export const WeatherWidget = ({
         </Stack>
       )}
 
-      <Divider borderColor="gray.2" borderStyle="dashed" />
+      <Divider borderColor={BORDER_COLOR} borderStyle="dashed" />
 
       {/* Details */}
       {details && (
@@ -187,7 +184,7 @@ export const WeatherWidget = ({
               key={f.day}
               spacing="0"
               border="1px solid"
-              borderColor="gray.2"
+              borderColor={BORDER_COLOR}
               borderRadius="sm"
             >
               <Text
@@ -195,13 +192,15 @@ export const WeatherWidget = ({
                 textTransform="uppercase"
                 fontSize="xxs"
                 color="gray.2"
+                alignSelf="start"
+                ml="0.5"
               >
                 {f.day}
               </Text>
-              <Divider borderColor="gray.2" />
+              <Divider borderColor={BORDER_COLOR} />
               <Stack spacing="0" py="1" px="2" align="center">
                 {getWeatherIcon(f.icon, 16, colors.gray[3])}
-                <Text fontSize="sm" fontWeight="medium" mb="-1">
+                <Text fontSize="sm" mb="-1">
                   {f.high}°
                 </Text>
                 <WeatherDetailText>L {f.low}°</WeatherDetailText>

package/src/utils/Weather.utils.ts

@@ -9,9 +9,7 @@ export function mapForecastToWidget(
 
   // --- HEADER DATE ---
   const todayDate = parseISO(periods[0].startTime)
-  const headerDate = format(todayDate, 'EEEE, MMMM do')
-    .toUpperCase()
-    .replace(',', '')
+  const headerDate = format(todayDate, 'EEE MMMM do')
 
   // --- CURRENT CONDITIONS ---
   const day0 = periods.find((p) => p.isDaytime) ?? periods[0]