wording and layout tweaks (#125)v0.11.8

* wording and layout tweaks

* red in remove button

* reorganize frontend components

* fix ld preload permissions issue for decky 3.1.10

* bump ver

1 files changed, 23 insertions, 0 deletions

diff --git a/src/components/InstructionCard.tsx b/src/components/InstructionCard.tsx
new file mode 100644
index 0000000..fdf6755
--- /dev/null
+++ b/src/components/InstructionCard.tsx
@@ -0,0 +1,23 @@
+import { PanelSectionRow } from "@decky/ui";
+import { MESSAGES, STYLES } from "../utils/constants";
+
+interface InstructionCardProps {
+  pathExists: boolean | null;
+}
+
+export function InstructionCard({ pathExists }: InstructionCardProps) {
+  if (pathExists !== true) return null;
+
+  return (
+    <PanelSectionRow>
+      <div style={STYLES.instructionCard}>
+        <div style={{ fontWeight: 'bold', marginBottom: '8px', color: 'var(--decky-accent-text)' }}>
+          {MESSAGES.instructionTitle}
+        </div>
+        <div style={{ whiteSpace: 'pre-line' }}>
+          {MESSAGES.instructionText}
+        </div>
+      </div>
+    </PanelSectionRow>
+  );
+}