Theme analytics and Moonlight

src-web/components/BinaryFileEditor.tsx

@@ -62,17 +62,17 @@ export function BinaryFileEditor({
             <InlineCode>{mimeType}</InlineCode> for current request?
           </div>
           <HStack space={1.5} justifyContent="center">
+            <Button size="sm" variant="border" onClick={() => ignoreContentType.set(true)}>
+              Ignore
+            </Button>
             <Button
               variant="solid"
-              color="secondary"
+              color="primary"
               size="sm"
               onClick={() => onChangeContentType(mimeType)}
             >
               Set Header
             </Button>
-            <Button size="sm" variant="border" onClick={() => ignoreContentType.set(true)}>
-              Ignore
-            </Button>
           </HStack>
         </Banner>
       )}

src-web/components/Settings/Settings.tsx

@@ -24,7 +24,7 @@ export const Settings = () => {
     <>
       <div
         data-tauri-drag-region
-        className="h-[27px] bg-background-highlight-secondary flex items-center justify-center border-b border-background-highlight"
+        className="x-theme-appHeader h-[27px] bg-background text-fg-subtle flex items-center justify-center border-b border-background-highlight text-sm font-semibold"
       >
         Settings
       </div>

src-web/components/Settings/SettingsAppearance.tsx

@@ -5,6 +5,7 @@ import { useResolvedTheme } from '../../hooks/useResolvedTheme';
 import { useSettings } from '../../hooks/useSettings';
 import { useThemes } from '../../hooks/useThemes';
 import { useUpdateSettings } from '../../hooks/useUpdateSettings';
+import { trackEvent } from '../../lib/analytics';
 import { clamp } from '../../lib/clamp';
 import { isThemeDark } from '../../lib/theme/window';
 import type { ButtonProps } from '../core/Button';
@@ -112,6 +113,7 @@ export function SettingsAppearance() {
         size="sm"
         value={settings.appearance}
         onChange={(appearance) => {
+          trackEvent('appearance', 'update', { appearance });
           updateSettings.mutateAsync({ appearance });
         }}
         options={[
@@ -130,7 +132,10 @@ export function SettingsAppearance() {
             size="sm"
             value={activeTheme.light.id}
             options={lightThemes}
-            onChange={(themeLight) => updateSettings.mutateAsync({ ...settings, themeLight })}
+            onChange={(themeLight) => {
+              trackEvent('theme', 'update', { theme: themeLight, appearance: 'light' });
+              updateSettings.mutateAsync({ ...settings, themeLight });
+            }}
           />
         )}
         {(settings.appearance === 'system' || settings.appearance === 'dark') && (
@@ -142,7 +147,10 @@ export function SettingsAppearance() {
             size="sm"
             value={activeTheme.dark.id}
             options={darkThemes}
-            onChange={(themeDark) => updateSettings.mutateAsync({ ...settings, themeDark })}
+            onChange={(themeDark) => {
+              trackEvent('theme', 'update', { theme: themeDark, appearance: 'dark' });
+              updateSettings.mutateAsync({ ...settings, themeDark });
+            }}
           />
         )}
       </HStack>

src-web/components/core/Select.tsx

@@ -60,7 +60,7 @@ export function Select<T extends string>({
         className={classNames(
           'w-full rounded-md text-fg text-sm font-mono',
           'pl-2',
-          'bg-background-highlight-secondary border',
+          'border',
           focused ? 'border-border-focus' : 'border-background-highlight',
           size === 'xs' && 'h-xs',
           size === 'sm' && 'h-sm',