Make variable dialog more clear

Closes #73

src-web/components/TemplateVariableDialog.tsx

@@ -52,13 +52,16 @@ export function TemplateVariableDialog({ hide, onChange, initialTokens }: Props)
       <VStack space={2}>
         <Select
           name="variable"
-          label="Variable"
+          label="Select Variable"
           value={selectedVariableName}
           options={variables.map((v) => ({ label: v.name, value: v.name }))}
           onChange={setSelectedVariableName}
         />
       </VStack>
-      <InlineCode className="select-text cursor-text">{rendered.data}</InlineCode>
+      <VStack>
+        <div className="text-sm text-text-subtle">Render Preview</div>
+        <InlineCode className="select-text cursor-text">{rendered.data}</InlineCode>
+      </VStack>
       <Button color="primary" onClick={handleDone}>
         Done
       </Button>

src-web/components/core/Editor/Editor.tsx

@@ -188,7 +188,7 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
       dialog.show({
         size: 'dynamic',
         id: 'template-variable',
-        title: 'Configure Variable',
+        title: 'Change Variable',
         render: ({ hide }) => (
           <TemplateVariableDialog
             hide={hide}