2.2.5

Fix UI issues

assets/js/components/DayTabs.js

@@ -63,6 +63,19 @@ function weatherGradient(r, g, b) {
   return `linear-gradient(135deg, ${light} 0%, ${mid} 60%, ${dark} 100%)`;
 }
 
+// Active-tab variant: a more solid (less pastelised) version of the weather
+// colour, drawn as a radial gradient whose strong colour sits at the outer
+// edge and softens toward a lighter centre — so the hue reads as radiating
+// inward from the outside of the tab.
+function weatherGradientActive(r, g, b) {
+  const blend   = (c) => Math.round(c + (255 - c) * 0.42);
+  const [mr, mg, mb] = [blend(r), blend(g), blend(b)];
+  const lighten = (c) => Math.min(255, Math.round(c + (255 - c) * 0.38));
+  const center  = `rgb(${lighten(mr)},${lighten(mg)},${lighten(mb)})`;
+  const edge    = `rgb(${mr},${mg},${mb})`;
+  return `radial-gradient(circle at 50% 50%, ${center} 0%, ${center} 28%, ${edge} 100%)`;
+}
+
 export function DayTabs({
   days,
   selectedDay, setSelectedDay,
@@ -328,6 +341,7 @@ export function DayTabs({
                               : modalCloudCat === 'wispy'             ? [200, 180, 130]
                               :                                         [220, 190,  50];
           const wBg  = weatherGradient(wR, wG, wB);
+          const wBgActive = weatherGradientActive(wR, wG, wB);
           const wText = '#2a1d10';
 
           return html`
@@ -347,7 +361,7 @@ export function DayTabs({
                 ? `${band.label} · SunScope Extra unlocks day ${i + 1}`
                 : `${band.label} · day ${i + 1} of 14`}
               style=${{
-                background: wBg,
+                background: isActive ? wBgActive : wBg,
                 color: wText,
                 border: '1px solid #c9b08a',
                 opacity: locked ? 0.5 : 1,
@@ -361,7 +375,7 @@ export function DayTabs({
                 bottom: 0,
                 left: 0,
                 right: 0,
-                height: isActive ? '5px' : '4px',
+                height: isActive ? '8px' : '7px',
                 background: band.bg,
                 borderTop: '1px solid #c9b08a',
                 borderRadius: '0 0 2px 2px',
@@ -387,6 +401,7 @@ export function DayTabs({
                   marginTop: '2px',
                   letterSpacing: 0,
                   textTransform: 'none',
+                  textShadow: '0 0 14px rgba(255,255,255,0.85), 0 0 11px rgba(255,255,255,0.7), 0 0 8px rgba(255,255,255,0.6), 0 0 5px rgba(255,255,255,0.5)',
                 }}>
                   <span style=${{ color: '#c0622a', fontWeight: 600 }}>${dayHi}°</span>
                   <span style=${{ opacity: 0.5 }}> / </span>

assets/js/hooks/useAppState.js

@@ -339,17 +339,17 @@ export function useAppState() {
   const activityValue = activeProfile === 'outdoors' && activityVariantKeys.includes(outdoorsVariant)
     ? outdoorsVariant
     : 'off';
-  const activityLabel = activityOptions.find((o) => o.value === activityValue)?.label;
+  const activityLabel = activityOptions.find((o) => o.value === activityValue)?.name;
   const placeValue    = activeProfile === 'outdoors' && placeVariantKeys.includes(outdoorsVariant)
     ? outdoorsVariant
     : 'off';
-  const placeLabel    = placeOptions.find((o) => o.value === placeValue)?.label;
+  const placeLabel    = placeOptions.find((o) => o.value === placeValue)?.name;
   const workValue     = activeProfile === 'farming'
     ? 'farming'
     : activeProfile === 'outdoors' && workVariantKeys.includes(outdoorsVariant)
       ? outdoorsVariant
       : 'off';
-  const workLabel     = workOptions.find((o) => o.value === workValue)?.label;
+  const workLabel     = workOptions.find((o) => o.value === workValue)?.name;
 
   // ── 6. TABLE REFS ────────────────────────────────────────────────────
   const headStickyRef = useRef(null);