From 09b8dda4697ce5126438defa94502802c23074e2 Mon Sep 17 00:00:00 2001
From: szecket <daniel.szecket@slint.dev>
Date: Wed, 30 Apr 2025 15:13:05 -0400
Subject: [PATCH] figma-inspector: added some UX to the revamped dialog

---
 tools/figma-inspector/src/main.tsx | 59 +++++++++++++++++++++---------
 1 file changed, 41 insertions(+), 18 deletions(-)

diff --git a/tools/figma-inspector/src/main.tsx b/tools/figma-inspector/src/main.tsx
index 889acc4f72d..c8d8ad5096e 100644
--- a/tools/figma-inspector/src/main.tsx
+++ b/tools/figma-inspector/src/main.tsx
@@ -6,7 +6,7 @@ import { getColorTheme, subscribeColorTheme } from "./utils/bolt-utils";
 import CodeSnippet from "./components/snippet/CodeSnippet";
 import { ExportType, useInspectorStore } from "./utils/store";
 import DialogFrame from "./components/DialogFrame.js";
-import { Button, Checkbox, DropdownMenu, Text } from "figma-kit";
+import { Text, Button, Checkbox, DropdownMenu } from "figma-kit";
 import "./main.css";
 
 export const App = () => {
@@ -102,40 +102,63 @@ export const App = () => {
                     />
                 </DialogFrame.Content>
                 <DialogFrame.Footer>
-                    <div className="border border-secondary  border-[var(--figma-color-bg-brand)]">
-                        <Text className="text-[var(--figma-color-bg-brand)]">
-                            Welcome to Figma
-                        </Text>
-                    </div>
+                    <Checkbox.Root>
+                        <Checkbox.Input
+                            checked={useVariables}
+                            onChange={(e) => setUseVariables(e.target.checked)}
+                        />
+                        <Checkbox.Label>Use Figma Variables</Checkbox.Label>
+                    </Checkbox.Root>
+
                     <DropdownMenu.Root>
                         <DropdownMenu.Trigger asChild>
-                            <Button>Export</Button>
+                            <Button
+                                variant={
+                                    exportsAreCurrent ? "secondary" : "primary"
+                                }
+                                style={{
+                                    visibility: useVariables
+                                        ? "visible"
+                                        : "hidden",
+                                }}
+                            >
+                                Export
+                            </Button>
                         </DropdownMenu.Trigger>
-                        <DropdownMenu.Content style={{}}>
+                        <DropdownMenu.Content>
                             <DropdownMenu.Item
                                 onClick={() =>
                                     exportFiles(ExportType.SeparateFiles)
                                 }
                             >
-                                Separate Files…
+                                Separate Files Per Collection…
                             </DropdownMenu.Item>
                             <DropdownMenu.Item
                                 onClick={() =>
                                     exportFiles(ExportType.SingleFile)
                                 }
                             >
-                                Single File…
+                                Single Design-Tokens File…
                             </DropdownMenu.Item>
                         </DropdownMenu.Content>
                     </DropdownMenu.Root>
-
-                    <Checkbox.Root>
-                        <Checkbox.Input
-                            checked={useVariables}
-                            onChange={(e) => setUseVariables(e.target.checked)}
-                        />
-                        <Checkbox.Label>Use Figma Variables</Checkbox.Label>
-                    </Checkbox.Root>
+                    <Text
+                        style={{
+                            color: exportsAreCurrent
+                                ? "var(--figma-color-text-disabled)"
+                                : "var(--figma-color-text-primary",
+                        }}
+                    >
+                        {useVariables ? (
+                            exportsAreCurrent ? (
+                                <em>Exports are current</em>
+                            ) : (
+                                "Either variables have changed or no export found"
+                            )
+                        ) : (
+                            ""
+                        )}
+                    </Text>
                 </DialogFrame.Footer>
             </DialogFrame>
         </>