fix: tint unread mail and draw the mail search, subject, quick reply and thread buttons like the webmail

src/components/SidebarDrawer.tsx

@@ -1459,10 +1459,9 @@ function makeStyles(c: ThemePalette) {
     color: c.text,
   },
   rowLabelAccount: {
-    ...typography.caption,
-    fontWeight: '600',
-    textTransform: 'uppercase',
-    letterSpacing: 0.5,
+    fontSize: 13,
+    lineHeight: 18,
+    fontWeight: '500',
     color: c.textSecondary,
   },
   counts: {

src/components/email/QuickReplyBox.tsx

@@ -155,7 +155,7 @@ export function QuickReplyBox({ email, jmapAccountId, onMoreOptions, onSent, onF
         onFocus={onFocus}
         onBlur={onBlur}
         placeholder={t('email_viewer.quick_reply_placeholder', 'Write a quick reply...')}
-        placeholderTextColor={c.textMuted}
+        placeholderTextColor={c.mutedForeground}
         style={styles.input}
         multiline
         editable={!sending}
@@ -189,7 +189,7 @@ function makeStyles(c: ThemePalette) {
       borderWidth: 1,
       borderColor: c.border,
       borderRadius: radius.md,
-      backgroundColor: c.surface,
+      backgroundColor: c.background,
       padding: spacing.sm,
       gap: spacing.sm,
     },
@@ -211,10 +211,10 @@ function makeStyles(c: ThemePalette) {
       gap: spacing.xs,
       backgroundColor: c.primary,
       paddingHorizontal: spacing.md,
-      paddingVertical: 6,
-      borderRadius: radius.full,
+      minHeight: 36,
+      borderRadius: radius.sm,
     },
     sendDisabled: { opacity: 0.5 },
-    sendText: { ...typography.caption, color: c.primaryForeground, fontWeight: '600' },
+    sendText: { ...typography.bodyMedium, color: c.primaryForeground },
   });
 }

src/components/email/ThreadMessageCard.tsx

@@ -74,16 +74,16 @@ export function ThreadMessageCard({
       <MessageContent {...content} compact={false} onToggleStar={bare ? undefined : onToggleStar} />
       {!bare && (
         <View style={[styles.actions, !replyable && styles.actionsDisabled]}>
-          <Pressable style={styles.actionBtn} onPress={reply('reply')} hitSlop={9}>
-            <Reply size={16} color={c.textSecondary} />
+          <Pressable style={styles.actionBtn} onPress={reply('reply')} hitSlop={6}>
+            <Reply size={16} color={c.text} />
             <Text style={styles.actionLabel}>{t('email_viewer.reply', 'Reply')}</Text>
           </Pressable>
-          <Pressable style={styles.actionBtn} onPress={reply('replyAll')} hitSlop={9}>
-            <ReplyAll size={16} color={c.textSecondary} />
+          <Pressable style={styles.actionBtn} onPress={reply('replyAll')} hitSlop={6}>
+            <ReplyAll size={16} color={c.text} />
             <Text style={styles.actionLabel}>{t('email_viewer.reply_all', 'Reply All')}</Text>
           </Pressable>
-          <Pressable style={styles.actionBtn} onPress={reply('forward')} hitSlop={9}>
-            <Forward size={16} color={c.textSecondary} />
+          <Pressable style={styles.actionBtn} onPress={reply('forward')} hitSlop={6}>
+            <Forward size={16} color={c.text} />
             <Text style={styles.actionLabel}>{t('email_viewer.forward', 'Forward')}</Text>
           </Pressable>
         </View>
@@ -159,13 +159,14 @@ function makeStyles(c: ThemePalette) {
       flexDirection: 'row',
       alignItems: 'center',
       gap: spacing.xs,
+      // Webmail thread card: outline buttons, h-9, rounded-md.
       paddingHorizontal: spacing.md,
-      paddingVertical: 6,
-      borderRadius: radius.full,
+      minHeight: 36,
+      borderRadius: radius.sm,
       borderWidth: 1,
       borderColor: c.border,
-      backgroundColor: c.surface,
+      backgroundColor: 'transparent',
     },
-    actionLabel: { ...typography.caption, color: c.textSecondary },
+    actionLabel: { ...typography.bodyMedium, color: c.text },
   });
 }