refactor: extract settings styles and improve badge/button UI

packages/app/src/desktop/components/desktop-permissions-section.tsx

@@ -1,8 +1,10 @@
-import { View, Text, Pressable } from "react-native";
+import { View, Text } from "react-native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { RotateCw } from "lucide-react-native";
+import { Button } from "@/components/ui/button";
 import { DesktopPermissionRow } from "@/desktop/components/desktop-permission-row";
 import { useDesktopPermissions } from "@/desktop/permissions/use-desktop-permissions";
+import { settingsStyles } from "@/styles/settings";
 
 export function DesktopPermissionsSection() {
   const { theme } = useUnistyles();
@@ -22,26 +24,23 @@ export function DesktopPermissionsSection() {
   const isBusy = isRefreshing || requestingPermission !== null;
 
   return (
-    <View style={styles.section}>
+    <View style={settingsStyles.section}>
       <View style={styles.permissionSectionHeader}>
-        <Text style={styles.sectionTitle}>Desktop Permissions</Text>
-        <Pressable
-          style={({ pressed }) => [
-            styles.permissionRefreshButton,
-            isBusy && styles.permissionRefreshButtonDisabled,
-            pressed && { opacity: 0.85 },
-          ]}
+        <Text style={settingsStyles.sectionTitle}>Desktop Permissions</Text>
+        <Button
+          variant="ghost"
+          size="sm"
+          leftIcon={<RotateCw size={theme.iconSize.md} color={theme.colors.foregroundMuted} />}
           onPress={() => {
             void refreshPermissions();
           }}
           disabled={isBusy}
-          accessibilityRole="button"
           accessibilityLabel="Refresh desktop permissions"
         >
-          <RotateCw size={theme.iconSize.md} color={theme.colors.foregroundMuted} />
-        </Pressable>
+          {isRefreshing ? "Refreshing..." : "Refresh"}
+        </Button>
       </View>
-      <View style={styles.audioCard}>
+      <View style={settingsStyles.card}>
         <DesktopPermissionRow
           title="Notifications"
           status={snapshot?.notifications ?? null}
@@ -65,16 +64,6 @@ export function DesktopPermissionsSection() {
 }
 
 const styles = StyleSheet.create((theme) => ({
-  section: {
-    marginBottom: theme.spacing[6],
-  },
-  sectionTitle: {
-    color: theme.colors.foregroundMuted,
-    fontSize: theme.fontSize.xs,
-    fontWeight: theme.fontWeight.normal,
-    marginBottom: 0,
-    marginLeft: theme.spacing[1],
-  },
   permissionSectionHeader: {
     flexDirection: "row",
     alignItems: "center",
@@ -82,24 +71,4 @@ const styles = StyleSheet.create((theme) => ({
     gap: theme.spacing[2],
     marginBottom: theme.spacing[3],
   },
-  permissionRefreshButton: {
-    width: 34,
-    height: 34,
-    borderRadius: theme.borderRadius.md,
-    borderWidth: 1,
-    borderColor: theme.colors.border,
-    backgroundColor: theme.colors.surface2,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  permissionRefreshButtonDisabled: {
-    opacity: theme.opacity[50],
-  },
-  audioCard: {
-    backgroundColor: theme.colors.surface2,
-    borderRadius: theme.borderRadius.lg,
-    borderWidth: 1,
-    borderColor: theme.colors.border,
-    overflow: "hidden",
-  },
 }));