fix: Reduce clock size by 10% and remove circular border

- Reduced clock from 112px (w-28) to 96px (w-24) - 10% smaller
- Removed circular border (border-2 border-text-muted/20)
- Adjusted all clock elements proportionally:
  - Hour markers: transform origin 46px (from 52px)
  - Hour hand: h-9 (from h-10)
  - Minute hand: h-11 (from h-12)
  - Second hand: h-12 (from h-14)
- Cleaner, minimalist appearance
- Better fit in 160x140px widget tile
This commit is contained in:
spencrmartin
2026-01-13 10:50:19 -05:00
parent 41e8869097
commit e4f2fd7100
@@ -190,17 +190,14 @@ export const CondensedNavigation: React.FC<CondensedNavigationProps> = ({
return (
<div className="w-full h-full flex items-center justify-center">
<div className="relative w-28 h-28">
{/* Clock face */}
<div className="absolute inset-0 rounded-full border-2 border-text-muted/20" />
<div className="relative w-24 h-24">
{/* Hour markers */}
{[...Array(12)].map((_, i) => (
<div
key={i}
className="absolute w-1 h-3 bg-text-muted/40 top-2 left-1/2 -translate-x-1/2"
style={{
transformOrigin: '50% 52px',
transformOrigin: '50% 46px',
transform: `translateX(-50%) rotate(${i * 30}deg)`,
}}
/>
@@ -208,7 +205,7 @@ export const CondensedNavigation: React.FC<CondensedNavigationProps> = ({
{/* Hour hand */}
<div
className="absolute w-1.5 h-10 bg-text-default rounded-full top-1/2 left-1/2 -translate-x-1/2 origin-bottom transition-transform duration-1000 ease-linear"
className="absolute w-1.5 h-9 bg-text-default rounded-full top-1/2 left-1/2 -translate-x-1/2 origin-bottom transition-transform duration-1000 ease-linear"
style={{
transform: `translateX(-50%) translateY(-100%) rotate(${hourAngle}deg)`,
}}
@@ -216,7 +213,7 @@ export const CondensedNavigation: React.FC<CondensedNavigationProps> = ({
{/* Minute hand */}
<div
className="absolute w-1 h-12 bg-text-default rounded-full top-1/2 left-1/2 -translate-x-1/2 origin-bottom transition-transform duration-1000 ease-linear"
className="absolute w-1 h-11 bg-text-default rounded-full top-1/2 left-1/2 -translate-x-1/2 origin-bottom transition-transform duration-1000 ease-linear"
style={{
transform: `translateX(-50%) translateY(-100%) rotate(${minuteAngle}deg)`,
}}
@@ -224,7 +221,7 @@ export const CondensedNavigation: React.FC<CondensedNavigationProps> = ({
{/* Second hand */}
<div
className="absolute w-0.5 h-14 bg-red-500 rounded-full top-1/2 left-1/2 -translate-x-1/2 origin-bottom transition-transform duration-1000 ease-linear"
className="absolute w-0.5 h-12 bg-red-500 rounded-full top-1/2 left-1/2 -translate-x-1/2 origin-bottom transition-transform duration-1000 ease-linear"
style={{
transform: `translateX(-50%) translateY(-100%) rotate(${secondAngle}deg)`,
}}