component

Author: spoons-and-mirrors

index.ts

@@ -58,63 +58,57 @@ const plugin: Plugin = (async (ctx) => {
         template: {
           type: "box",
           direction: "column",
-          border: ["top", "bottom", "left", "right"],
-          borderStyle: "rounded",
+          border: ["left"],
+          borderStyle: "heavy",
           borderColor: "accent",
-          bg: "#1a1a2e",
+          bg: "backgroundPanel",
           paddingX: 2,
-          paddingY: 1,
+          paddingY: 0,
+          minWidth: 60,
+          alignSelf: "center",
           gap: 1,
           children: [
             {
               type: "box",
               direction: "row",
               gap: 1,
               children: [
-                { type: "text", content: "📦", fg: "accent" },
                 {
                   type: "text",
-                  content: "DCP — Select files to prune",
-                  fg: "accent",
+                  content: "Select files to prune",
+                  fg: "text",
                   bold: true,
                 },
               ],
             },
-            {
-              type: "text",
-              content: "─────────────────────────────────",
-              fg: "textMuted",
-            },
             {
               type: "checklist",
               items: "{{items}}",
-              fg: "text",
-              fgChecked: "#2ecc71",
-              onToggle: "item-toggled",
-            },
-            {
-              type: "text",
-              content: "─────────────────────────────────",
               fg: "textMuted",
+              fgChecked: "text",
+              bgChecked: "backgroundElement",
+              borderColorChecked: "accent",
+              onToggle: "item-toggled",
             },
             {
               type: "box",
               direction: "row",
               gap: 2,
+              justifyContent: "flex-end",
               children: [
                 {
                   type: "confirm-button",
-                  label: "  ✓ Confirm Prune  ",
-                  fg: "#1a1a2e",
-                  bg: "#2ecc71",
-                  onConfirm: "confirm-prune",
+                  label: " Cancel ",
+                  fg: "textMuted",
+                  bg: "backgroundPanel",
+                  onConfirm: "cancel-prune",
                 },
                 {
                   type: "confirm-button",
-                  label: "  ✗ Cancel  ",
-                  fg: "text",
-                  bg: "#e94560",
-                  onConfirm: "cancel-prune",
+                  label: " Confirm ",
+                  fg: "background",
+                  bg: "accent",
+                  onConfirm: "confirm-prune",
                 },
               ],
             },