Update files

packages/app/src/components/headers/header-toggle-button.tsx

@@ -45,7 +45,7 @@ export function HeaderToggleButton({
       <TooltipContent testID={tooltipTestID} side={tooltipSide} align="center" offset={8}>
         <View style={styles.tooltipRow}>
           <Text style={styles.tooltipText}>{tooltipLabel}</Text>
-          <Shortcut keys={tooltipKeys} style={styles.shortcut} textStyle={styles.shortcutText} />
+          <Shortcut keys={tooltipKeys} style={styles.shortcut} />
         </View>
       </TooltipContent>
     </Tooltip>
@@ -73,7 +73,4 @@ const styles = StyleSheet.create((theme) => ({
     backgroundColor: theme.colors.surface3,
     borderColor: theme.colors.borderAccent,
   },
-  shortcutText: {
-    color: theme.colors.popoverForeground,
-  },
 }));

packages/app/src/components/message.tsx

@@ -327,8 +327,8 @@ const expandableBadgeStylesheet = StyleSheet.create((theme) => ({
   pressable: {
     borderRadius: theme.borderRadius.lg,
     borderWidth: theme.borderWidth[1],
-    borderColor: theme.colors.borderAccent,
-    backgroundColor: theme.colors.surface2,
+    borderColor: theme.colors.border,
+    backgroundColor: theme.colors.surface1,
     paddingHorizontal: theme.spacing[2],
     paddingVertical: theme.spacing[1],
   },
@@ -350,6 +350,7 @@ const expandableBadgeStylesheet = StyleSheet.create((theme) => ({
   },
   label: {
     color: theme.colors.foreground,
+    opacity: 0.88,
     fontSize: theme.fontSize.base,
     fontWeight: theme.fontWeight.normal,
     flexShrink: 0,
@@ -373,7 +374,7 @@ const expandableBadgeStylesheet = StyleSheet.create((theme) => ({
     borderBottomRightRadius: theme.borderRadius.lg,
     borderWidth: theme.borderWidth[1],
     borderTopWidth: 0,
-    borderColor: theme.colors.borderAccent,
+    borderColor: theme.colors.border,
     backgroundColor: theme.colors.surface1,
     padding: 0,
     gap: 0,
@@ -986,32 +987,34 @@ const ExpandableBadge = memo(function ExpandableBadge({
           isExpanded && expandableBadgeStylesheet.pressableExpanded,
         ]}
       >
-        <View style={expandableBadgeStylesheet.headerRow}>
-          <View style={expandableBadgeStylesheet.iconBadge}>{iconNode}</View>
-          <Text style={expandableBadgeStylesheet.label} numberOfLines={1}>
-            {label}
-          </Text>
-          {secondaryLabel ? (
-            <Text
-              style={expandableBadgeStylesheet.secondaryLabel}
-              numberOfLines={1}
-            >
-              {secondaryLabel}
+        {({ hovered }) => (
+          <View style={expandableBadgeStylesheet.headerRow}>
+            <View style={expandableBadgeStylesheet.iconBadge}>{iconNode}</View>
+            <Text style={expandableBadgeStylesheet.label} numberOfLines={1}>
+              {label}
             </Text>
-          ) : (
-            <View style={expandableBadgeStylesheet.spacer} />
-          )}
-          {hasDetails ? (
-            <ChevronRight
-              size={14}
-              color={theme.colors.foregroundMuted}
-              style={[
-                expandableBadgeStylesheet.chevron,
-                { transform: [{ rotate: isExpanded ? "90deg" : "0deg" }] },
-              ]}
-            />
-          ) : null}
-        </View>
+            {secondaryLabel ? (
+              <Text
+                style={expandableBadgeStylesheet.secondaryLabel}
+                numberOfLines={1}
+              >
+                {secondaryLabel}
+              </Text>
+            ) : (
+              <View style={expandableBadgeStylesheet.spacer} />
+            )}
+            {hasDetails && hovered ? (
+              <ChevronRight
+                size={14}
+                color={theme.colors.foregroundMuted}
+                style={[
+                  expandableBadgeStylesheet.chevron,
+                  { transform: [{ rotate: isExpanded ? "90deg" : "0deg" }] },
+                ]}
+              />
+            ) : null}
+          </View>
+        )}
       </Pressable>
       {detailContent ? (
         <View style={expandableBadgeStylesheet.detailWrapper}>

packages/app/src/components/ui/shortcut.tsx

@@ -24,14 +24,14 @@ const styles = StyleSheet.create((theme) => ({
   root: {
     paddingHorizontal: theme.spacing[1],
     paddingVertical: 2,
-    borderRadius: theme.borderRadius.sm,
+    borderRadius: theme.borderRadius.md,
     backgroundColor: theme.colors.surface2,
     borderWidth: theme.borderWidth[1],
     borderColor: theme.colors.borderAccent,
   },
   text: {
     fontSize: theme.fontSize.xs,
-    fontWeight: theme.fontWeight.medium,
-    color: theme.colors.foreground,
+    fontWeight: theme.fontWeight.normal,
+    color: theme.colors.foregroundMuted,
   },
 }));

packages/app/src/components/ui/tooltip.tsx

@@ -463,7 +463,7 @@ const styles = StyleSheet.create((theme) => ({
   content: {
     paddingVertical: theme.spacing[1],
     paddingHorizontal: theme.spacing[2],
-    borderRadius: theme.borderRadius.md,
+    borderRadius: theme.borderRadius.lg,
     backgroundColor: theme.colors.popover,
     borderWidth: theme.borderWidth[1],
     borderColor: theme.colors.border,