fix(remind-me): match modal aesthetic to existing dialogs

Replace raw CSS variables and Button presets with folds color/config
tokens and MenuItem components, matching the ForwardMessageDialog and
ScheduleMessageModal patterns exactly.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/features/room/message/RemindMeDialog.tsx

@@ -2,16 +2,18 @@ import React, { useMemo } from 'react';
 import FocusTrap from 'focus-trap-react';
 import {
   Box,
-  Button,
+  color,
+  config,
   Header,
   Icon,
   IconButton,
   Icons,
+  Line,
+  MenuItem,
   Overlay,
   OverlayBackdrop,
   OverlayCenter,
   Text,
-  config,
 } from 'folds';
 import { stopPropagation } from '../../../utils/keyboard';
 import { useReminders } from '../../../hooks/useReminders';
@@ -27,13 +29,12 @@ function getPresets(): Array<{ label: string; ms: number }> {
   const tomorrow = new Date();
   tomorrow.setDate(tomorrow.getDate() + 1);
   tomorrow.setHours(9, 0, 0, 0);
-  const tomorrowMs = tomorrow.getTime() - Date.now();
   const timeLabel = tomorrow.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
   return [
     { label: 'In 20 minutes', ms: 20 * 60_000 },
     { label: 'In 1 hour', ms: 60 * 60_000 },
     { label: 'In 3 hours', ms: 3 * 60 * 60_000 },
-    { label: `Tomorrow at ${timeLabel}`, ms: tomorrowMs },
+    { label: `Tomorrow at ${timeLabel}`, ms: tomorrow.getTime() - Date.now() },
   ];
 }
 
@@ -58,60 +59,60 @@ export function RemindMeDialog({ roomId, eventId, previewText, onClose }: Remind
         <FocusTrap
           focusTrapOptions={{
             initialFocus: false,
-            returnFocusOnDeactivate: false,
             onDeactivate: onClose,
             clickOutsideDeactivates: true,
             escapeDeactivates: stopPropagation,
           }}
         >
           <Box
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="remind-me-title"
             direction="Column"
             style={{
-              width: 300,
+              background: color.Surface.Container,
-              borderRadius: 12,
+              borderRadius: config.radii.R400,
-              background: 'var(--bg-surface)',
+              boxShadow: color.Other.Shadow,
-              border: '1px solid var(--bg-surface-border)',
+              width: '100vw',
+              maxWidth: 280,
               overflow: 'hidden',
             }}
           >
-            <Header variant="Surface" size="500">
+            <Header
+              variant="Surface"
+              size="500"
+              style={{
+                padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
+                borderBottomWidth: config.borderWidth.B300,
+              }}
+            >
               <Box grow="Yes" alignItems="Center" gap="200">
-                <Icon size="100" src={Icons.Clock} />
+                <Icon src={Icons.Clock} size="100" />
-                <Text size="H4">Remind Me</Text>
+                <Text id="remind-me-title" size="H4">
+                  Remind Me
+                </Text>
               </Box>
-              <IconButton size="300" onClick={onClose} aria-label="Close">
+              <IconButton size="300" radii="300" onClick={onClose} aria-label="Close">
                 <Icon src={Icons.Cross} />
               </IconButton>
             </Header>
             {previewText && (
-              <Box
+              <>
-                style={{
+                <Box style={{ padding: `${config.space.S200} ${config.space.S400}` }}>
-                  padding: `${config.space.S100} ${config.space.S400}`,
+                  <Text size="T200" priority="300" truncate>
-                  borderBottom: '1px solid var(--bg-surface-border)',
+                    {previewText}
-                }}
+                  </Text>
-              >
+                </Box>
-                <Text size="T200" priority="300" truncate>
+                <Line size="300" />
-                  {previewText}
+              </>
-                </Text>
-              </Box>
             )}
-            <Box
+            <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
-              direction="Column"
-              gap="100"
-              style={{ padding: `${config.space.S200} ${config.space.S200} ${config.space.S300}` }}
-            >
               {presets.map((p) => (
-                <Button
+                <MenuItem key={p.label} size="300" radii="300" onClick={() => handlePick(p.ms)}>
-                  key={p.label}
+                  <Text size="T300" truncate>
-                  variant="Secondary"
+                    {p.label}
-                  fill="Soft"
+                  </Text>
-                  size="300"
+                </MenuItem>
-                  radii="300"
-                  style={{ justifyContent: 'flex-start' }}
-                  onClick={() => handlePick(p.ms)}
-                >
-                  <Text size="B300">{p.label}</Text>
-                </Button>
               ))}
             </Box>
           </Box>