Improve review comment UI

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

@@ -1,9 +1,26 @@
-import { useMemo, type ReactElement } from "react";
+import React, { useMemo, type ReactElement } from "react";
 import { Text, View, type StyleProp, type TextStyle, type ViewStyle } from "react-native";
 import { StyleSheet } from "react-native-unistyles";
 import { formatShortcut, type ShortcutKey } from "@/utils/format-shortcut";
 import { getShortcutOs } from "@/utils/shortcut-platform";
 
+function colorWithOpacity(color: string, opacity: number): string {
+  const hex = color.trim();
+  if (/^#[0-9a-fA-F]{3}$/.test(hex)) {
+    const r = Number.parseInt(hex[1] + hex[1], 16);
+    const g = Number.parseInt(hex[2] + hex[2], 16);
+    const b = Number.parseInt(hex[3] + hex[3], 16);
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+  }
+  if (/^#[0-9a-fA-F]{6}$/.test(hex)) {
+    const r = Number.parseInt(hex.slice(1, 3), 16);
+    const g = Number.parseInt(hex.slice(3, 5), 16);
+    const b = Number.parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+  }
+  return `rgba(255, 255, 255, ${opacity})`;
+}
+
 export function Shortcut({
   keys,
   chord,
@@ -53,9 +70,8 @@ const styles = StyleSheet.create((theme) => ({
     paddingHorizontal: theme.spacing[1],
     paddingVertical: 2,
     borderRadius: theme.borderRadius.md,
-    backgroundColor: theme.colors.surface2,
-    borderWidth: theme.borderWidth[1],
-    borderColor: theme.colors.borderAccent,
+    backgroundColor: colorWithOpacity(theme.colors.foreground, 0.05),
+    borderWidth: 0,
   },
   sequence: {
     flexDirection: "row",
@@ -66,6 +82,6 @@ const styles = StyleSheet.create((theme) => ({
   text: {
     fontSize: theme.fontSize.xs,
     fontWeight: theme.fontWeight.normal,
-    color: theme.colors.foregroundMuted,
+    color: colorWithOpacity(theme.colors.foreground, 0.6),
   },
 }));