diff --git a/src/components/design-system/WelcomePanel.tsx b/src/components/design-system/WelcomePanel.tsx index cecf59a..8f83ebc 100644 --- a/src/components/design-system/WelcomePanel.tsx +++ b/src/components/design-system/WelcomePanel.tsx @@ -8,12 +8,14 @@ export function WelcomePanel({ date, timezone, children, + compact = false, }: { name: string; avatarUrl: string | null; date?: string; timezone: string; children: ReactNode; + compact?: boolean; }) { const [failedAvatar, setFailedAvatar] = useState(null); // The API date already belongs to the account's timezone. Keep its date parts @@ -21,7 +23,7 @@ export function WelcomePanel({ const day = date ? new Date(`${date}T12:00:00Z`) : null; return ( -
+
@@ -41,14 +43,16 @@ export function WelcomePanel({

YOUR DAILY CHECK-IN

-

+

Welcome back, {name}.

-

Make time for today.

+ {!compact &&

Make time for today.

} {children}
- {day && date ? ( + {compact && date ? ( + + ) : day && date ? (
-
- {today.habits.map((habit) => ( +
+ + +
+ {habitView === "today" && today.due === 0 &&

You’re all set for today. Choose All habits to view or edit your routines.

} +
+ {today.habits.filter(habit => habitView === "all" || habit.due).map((habit) => ( {habit.method === "count" ? ( .ds-habit-chart + .ds-habit-chart { border-top: 1px solid var(--ds-rule); } +.ds-habit-list .ds-habit-chart-progress { margin: 12px 0 8px !important; gap: 12px; } +.ds-habit-history-toggle { display: inline-flex; align-items: center; gap: 8px; } +.ds-habit-history-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } +.ds-habit-history-panel { margin-top: 16px; } +.ds-counter { flex-wrap: wrap; max-width: 100%; } +.ds-counter-input { box-sizing: border-box; width: 7ch; min-width: 56px; min-height: 44px; padding: 8px; border: 1px solid var(--ds-control-border); background: var(--ds-paper); color: var(--ds-ink); text-align: center; font: inherit; font-variant-numeric: tabular-nums; border-radius: 0; } +.ds-counter .ds-button.ds-counter-save { width: auto; padding: 8px 12px; @apply type-small; font-weight: 500; } +.ds-counter-error { flex-basis: 100%; @apply type-small; } +.ds-habit-starters { margin-bottom: 16px; } +.ds-habit-starter-options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } +.ds-color-swatches--compact { flex-wrap: wrap; } +@media (max-width: 700px) { + .ds-welcome-panel--compact { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 20px; } + .ds-welcome-panel--compact .ds-welcome-calendar { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--ds-rule); text-align: left; } + .ds-welcome-panel--compact .ds-welcome-timezone { justify-content: flex-start; } + .ds-habit-list .ds-habit-chart-heading { align-items: flex-start; } +}