From 275598016512c4a276dd6ba1407b5fcf1774c3f4 Mon Sep 17 00:00:00 2001
From: "d.klimov" <d.klimov@arenadata.io>
Date: Wed, 22 Jul 2026 23:25:21 +0300
Subject: [PATCH] =?UTF-8?q?design:=20=D0=BA=D1=80=D0=B0=D1=81=D0=B8=D0=B2?=
 =?UTF-8?q?=D1=8B=D0=B5=20=D0=BF=D1=83=D1=81=D1=82=D1=8B=D0=B5=20=D1=81?=
 =?UTF-8?q?=D0=BE=D1=81=D1=82=D0=BE=D1=8F=D0=BD=D0=B8=D1=8F=20=D1=82=D0=B0?=
 =?UTF-8?q?=D0=B9=D0=BC=D0=B5=D1=80=D0=BE=D0=B2/Spotify,=20=D0=B0=D0=BA?=
 =?UTF-8?q?=D1=86=D0=B5=D0=BD=D1=82=D0=BD=D1=8B=D0=B9=20=D0=BF=D1=80=D0=BE?=
 =?UTF-8?q?=D0=B3=D0=BD=D0=BE=D0=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- таймеры: светящаяся градиентная иконка + голосовая подсказка вместо серого текста
- Spotify: зелёный музыкальный орб + подсказка
- прогноз: ячейка «сейчас» — яркий градиентный акцент с тенью
---
 app/page.tsx                   | 12 ++++++++----
 components/SpotifyWidget.tsx   | 17 ++++++++++++++++-
 components/TimerHomeWidget.tsx | 27 +++++++++++++++++++++------
 3 files changed, 45 insertions(+), 11 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 191c94d..ee75622 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -603,11 +603,15 @@ function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: S
                 <button
                   onClick={() => setSelectedDay(day)}
                   style={{
-                    flex: 1, padding: '12px 8px', borderRadius: 14,
-                    minHeight: 92,
-                    background: isToday ? 'var(--surface-2)' : 'transparent',
+                    flex: 1, padding: '12px 8px', borderRadius: 16,
+                    minHeight: 96,
+                    background: isToday
+                      ? 'linear-gradient(160deg, rgba(109,94,252,0.32), rgba(46,230,246,0.12))'
+                      : 'transparent',
+                    border: isToday ? '1px solid rgba(160,168,255,0.32)' : '1px solid transparent',
+                    boxShadow: isToday ? '0 6px 18px -8px rgba(109,94,252,0.5)' : 'none',
                     display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
-                    transition: 'background 0.2s ease',
+                    transition: 'background 0.2s ease, transform 0.2s ease',
                   }}
                 >
                   <div style={{
diff --git a/components/SpotifyWidget.tsx b/components/SpotifyWidget.tsx
index ef8e9fe..9f8aa0d 100644
--- a/components/SpotifyWidget.tsx
+++ b/components/SpotifyWidget.tsx
@@ -89,7 +89,22 @@ export default function SpotifyWidget() {
       {loading ? (
         <div style={{ fontSize: 13, color: 'var(--text-tertiary)', textAlign: 'center', padding: '8px 0' }}>Загрузка...</div>
       ) : !state?.track ? (
-        <div style={{ fontSize: 13, color: 'var(--text-tertiary)', textAlign: 'center', padding: '8px 0' }}>Ничего не играет</div>
+        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 12, padding: '18px 0' }}>
+          <div style={{ position: 'relative', width: 78, height: 78, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <div style={{
+              position: 'absolute', inset: 0, borderRadius: '50%',
+              background: 'radial-gradient(circle, rgba(30,215,96,0.38), transparent 70%)', filter: 'blur(7px)',
+            }} />
+            <div style={{
+              position: 'absolute', inset: 12, borderRadius: '50%',
+              background: 'linear-gradient(135deg, rgba(30,215,96,0.24), rgba(30,215,96,0.08))',
+              border: '1px solid rgba(30,215,96,0.32)',
+            }} />
+            <Music size={32} color="#1ED760" style={{ position: 'relative' }} />
+          </div>
+          <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--text-primary)' }}>Ничего не играет</div>
+          <div style={{ fontSize: 12, color: 'var(--text-secondary)', textAlign: 'center' }}>Скажи «Эй, космо, включи что-нибудь»</div>
+        </div>
       ) : (
         <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
           <div style={{
diff --git a/components/TimerHomeWidget.tsx b/components/TimerHomeWidget.tsx
index bd225fb..9dca953 100644
--- a/components/TimerHomeWidget.tsx
+++ b/components/TimerHomeWidget.tsx
@@ -143,15 +143,30 @@ export default function TimerHomeWidget() {
             style={{
               flex: 1, display: 'flex', flexDirection: 'column',
               alignItems: 'center', justifyContent: 'center',
-              padding: '28px 0 20px', gap: 10,
-              color: 'var(--text-tertiary)',
+              padding: '24px 0', gap: 16,
+              color: 'var(--text-secondary)',
               background: 'transparent', border: 'none', cursor: 'pointer',
             }}
           >
-            <AlarmClock size={30} style={{ opacity: 0.4 }} />
-            <div style={{ fontSize: 13 }}>Нет активных таймеров</div>
-            <div style={{ fontSize: 11, opacity: 0.7, textAlign: 'center', lineHeight: 1.5 }}>
-              Скажи «поставь таймер на 5 минут»<br />или нажми +
+            <div style={{ position: 'relative', width: 92, height: 92, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+              <div style={{
+                position: 'absolute', inset: 0, borderRadius: '50%',
+                background: 'radial-gradient(circle, rgba(139,120,252,0.4), transparent 70%)', filter: 'blur(8px)',
+              }} />
+              <div style={{
+                position: 'absolute', inset: 14, borderRadius: '50%',
+                background: 'linear-gradient(135deg, rgba(109,94,252,0.28), rgba(46,230,246,0.16))',
+                border: '1px solid rgba(160,168,255,0.32)',
+              }} />
+              <AlarmClock size={36} color="#a5b0ff" style={{ position: 'relative' }} />
+            </div>
+            <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--text-primary)' }}>Нет активных таймеров</div>
+            <div style={{
+              fontSize: 12, color: 'var(--text-secondary)', textAlign: 'center', lineHeight: 1.7,
+              padding: '10px 16px', borderRadius: 12,
+              background: 'rgba(255,255,255,0.04)', border: '1px solid var(--border-subtle)',
+            }}>
+              Скажи «Эй, космо, поставь таймер на 5 минут»<br />или нажми <span style={{ color: 'var(--accent)', fontWeight: 800 }}>+</span>
             </div>
           </button>
         ) : (