[UI > PluginCard] Some needed fixes

src/ui/settings/components/PluginCard.tsx

@@ -15,23 +15,27 @@ import copyText from "@utils/copyText";
 const colorModule = findByProps("SemanticColorsByThemeTable");
 const colorMap = (colorModule?.SemanticColor ?? constants.ThemeColorMap);
 
+// TODO: Replace with our eventual dialog API
+const Dialog = findByProps("show", "openLazy", "close");
+
 const { FormRow, FormSwitch } = Forms;
 const { TouchableOpacity, Image } = General;
 
+// TODO: These styles work weirdly. iOS has cramped text, Android with low DPI probably does too. Fix?
 const styles = stylesheet.createThemedStyleSheet({
     card: {
         backgroundColor: colorMap?.BACKGROUND_SECONDARY,
         borderRadius: 5,
-        margin: 10,
-        marginTop: 0,
+        marginHorizontal: 10,
+        marginBottom: 10,
     },
     header: {
+        padding: 0,
         backgroundColor: colorMap?.BACKGROUND_TERTIARY,
         borderTopLeftRadius: 5,
         borderTopRightRadius: 5,
     },
     actions: {
-        justifyContent: "flex-end",
         flexDirection: "row-reverse",
         alignItems: "center",
     },
@@ -51,6 +55,7 @@ export default function PluginCard({ plugin }: PluginCardProps) {
     const settings = getSettings(plugin.id);
     const navigation = NavigationNative.useNavigation();
     const [removed, setRemoved] = React.useState(false);
+
     // This is needed because of React™
     if (removed) return null;
 
@@ -58,10 +63,12 @@ export default function PluginCard({ plugin }: PluginCardProps) {
         <RN.View style={styles.card}>
             <FormRow
                 style={styles.header}
+                // TODO: Actually make use of user IDs
                 label={`${plugin.manifest.name} by ${plugin.manifest.authors.map(i => i.name).join(", ")}`}
                 leading={<FormRow.Icon source={getAssetIDByName(plugin.manifest.vendetta?.icon || "ic_application_command_24px")} />}
                 trailing={
                     <FormSwitch
+                        style={RN.Platform.OS === "android" && { marginVertical: -15 }}
                         value={plugin.enabled}
                         onValueChange={(v: boolean) => {
                             if (v) startPlugin(plugin.id); else stopPlugin(plugin.id);
@@ -74,10 +81,17 @@ export default function PluginCard({ plugin }: PluginCardProps) {
                 trailing={
                     <RN.View style={styles.actions}>
                         <TouchableOpacity
-                            onPress={() => {
-                                removePlugin(plugin.id);
-                                setRemoved(true);
-                            }}
+                            onPress={() => Dialog.show({
+                                title: "Wait!",
+                                body: `Are you sure you wish to delete ${plugin.manifest.name}?`,
+                                confirmText: "Delete",
+                                cancelText: "Cancel",
+                                confirmColor: "red",
+                                onConfirm: () => {
+                                    removePlugin(plugin.id);
+                                    setRemoved(true);
+                                }
+                            })}
                         >
                             <Image style={styles.icon} source={getAssetIDByName("ic_message_delete")} />
                         </TouchableOpacity>