From 175e6fa602b5a2de0a24e54f05c6d190990e8672 Mon Sep 17 00:00:00 2001
From: Tim Stirrat <tim.stirrat@gmail.com>
Date: Sun, 1 Sep 2024 20:48:33 +1000
Subject: [PATCH] Add warning about replacing active WAV slot

---
 src/components/SendSysex.tsx  | 8 ++++++++
 src/components/Typography.tsx | 7 +++++++
 2 files changed, 15 insertions(+)
 create mode 100644 src/components/Typography.tsx

diff --git a/src/components/SendSysex.tsx b/src/components/SendSysex.tsx
index 4a17457..b43258d 100644
--- a/src/components/SendSysex.tsx
+++ b/src/components/SendSysex.tsx
@@ -10,6 +10,7 @@ import { Field } from "./Field";
 import { Card } from "primereact/card";
 import { SysexPreview } from "./SysexPreview";
 import { SysexDownloadButton } from "./SysexDownloadButton";
+import { Text } from "./Typography";
 
 export const SendSysex: React.FC<{ readonly waveform: Waveform }> = ({
   waveform,
@@ -77,6 +78,13 @@ export const SendSysex: React.FC<{ readonly waveform: Waveform }> = ({
           <SysexDownloadButton waveform={waveform} />
           <SysexPreview waveform={waveform} />
         </Flex>
+
+        <Text secondary>
+          <em>
+            Note: This currently sends to the ACTIVE mGB WAV slot
+            <br /> (TODO: allow sending to specific slots)
+          </em>
+        </Text>
       </Flex>
     </Card>
   );
diff --git a/src/components/Typography.tsx b/src/components/Typography.tsx
new file mode 100644
index 0000000..4250278
--- /dev/null
+++ b/src/components/Typography.tsx
@@ -0,0 +1,7 @@
+import styled from "@emotion/styled";
+
+export const Text = styled.p<{ secondary?: boolean; italic?: boolean }>(
+  ({ secondary }) => ({
+    color: secondary ? `var(--text-color-secondary)` : `var(--text-color)`,
+  })
+);