24 hour format

discord_verificiation/playtime-frontend/components/RecurringWindowChart.tsx

@@ -3,6 +3,7 @@
 import { useState } from 'react';
 import Link from 'next/link';
 import PlayerTimelineChart from './PlayerTimelineChart';
+import TimeInput24 from './TimeInput24';
 import { formatMinutes, countryCodeToFlag } from '@/lib/steam';
 
 interface RecurringPoint {
@@ -181,22 +182,12 @@ export default function RecurringWindowChart() {
         </div>
 
         <label className="flex flex-col text-xs text-ink-muted gap-1">
-          From
-          <input
-            type="time"
-            value={startTime}
-            onChange={(e) => setStartTime(e.target.value)}
-            className="bg-base border border-base-border rounded px-2 py-1 text-ink text-sm font-mono"
-          />
+          From <span className="text-ink-faint">(24h)</span>
+          <TimeInput24 value={startTime} onChange={setStartTime} />
         </label>
         <label className="flex flex-col text-xs text-ink-muted gap-1">
-          Until
-          <input
-            type="time"
-            value={endTime}
-            onChange={(e) => setEndTime(e.target.value)}
-            className="bg-base border border-base-border rounded px-2 py-1 text-ink text-sm font-mono"
-          />
+          Until <span className="text-ink-faint">(24h)</span>
+          <TimeInput24 value={endTime} onChange={setEndTime} />
         </label>
         <label className="flex flex-col text-xs text-ink-muted gap-1">
           Since