refactor(ui): unify low-level controls and expand design system

src/app/gif-mood/new/page.tsx

@@ -9,6 +9,7 @@ import {
   CardDescription,
   CardContent,
   Button,
+  DateInput,
   Input,
 } from '@/components/ui';
 import { createGifMoodSession } from '@/actions/gif-mood';
@@ -78,20 +79,14 @@ export default function NewGifMoodPage() {
               required
             />
 
-            <div>
-              <label htmlFor="date" className="block text-sm font-medium text-foreground mb-1">
-                Date
-              </label>
-              <input
-                id="date"
-                name="date"
-                type="date"
-                value={selectedDate}
-                onChange={(e) => setSelectedDate(e.target.value)}
-                required
-                className="w-full rounded-lg border border-border bg-input px-3 py-2 text-foreground outline-none focus:border-primary focus:ring-2 focus:ring-primary/20"
-              />
-            </div>
+            <DateInput
+              id="date"
+              name="date"
+              label="Date"
+              value={selectedDate}
+              onChange={(e) => setSelectedDate(e.target.value)}
+              required
+            />
 
             <div className="rounded-lg border border-border bg-card-hover p-4">
               <h3 className="font-medium text-foreground mb-2">Comment ça marche ?</h3>