2 files changed, 56 insertions, 6 deletions

diff --git a/subprojects/frontend/src/theme/ThemeProvider.tsx b/subprojects/frontend/src/theme/ThemeProvider.tsx
index 78146f25..18310147 100644
--- a/subprojects/frontend/src/theme/ThemeProvider.tsx
+++ b/subprojects/frontend/src/theme/ThemeProvider.tsx
@@ -75,13 +75,15 @@ function createResponsiveTheme(
     ...options,
     typography: {
       fontFamily:
-        '"Inter Variable", "Inter", "Roboto", "Helvetica", "Arial", sans-serif',
-      fontWeightMedium: 600,
+        '"Open Sans Variable", "Open Sans", "Roboto", "Helvetica", "Arial", sans-serif',
+      fontWeightMedium: 500,
       fontWeightEditorNormal: 400,
       fontWeightEditorBold: 700,
       button: {
-        // 24px line height for 14px button text to fix browser rounding errors.
-        lineHeight: 1.714286,
+        fontWeight: 600,
+        fontVariationSettings: '"wdth" 87.5',
+        fontSize: '1rem',
+        lineHeight: 1.5,
       },
       editor: {
         fontFamily:
@@ -151,7 +153,7 @@ function createResponsiveTheme(
               }, {}),
             },
           },
-          sizeSmall: { fontSize: '0.75rem' },
+          sizeSmall: { fontSize: '0.875rem', lineHeight: '1.75' },
           sizeLarge: { fontSize: '1rem' },
           text: { '&.rounded': { padding: '6px 14px' } },
           textSizeSmall: { '&.rounded': { padding: '4px 8px' } },
@@ -287,7 +289,7 @@ const darkTheme = (() => {
           secondary: secondaryText,
           disabled: '#5c6370',
         },
-        divider: alpha(secondaryText, 0.24),
+        divider: alpha(primaryText, 0.24),
         outer: {
           background: darkBackground,
           border: '#181a1f',
diff --git a/subprojects/frontend/src/theme/ThemeStore.ts b/subprojects/frontend/src/theme/ThemeStore.ts
index 7c657449..12449b94 100644
--- a/subprojects/frontend/src/theme/ThemeStore.ts
+++ b/subprojects/frontend/src/theme/ThemeStore.ts
@@ -12,11 +12,19 @@ export enum ThemePreference {
   PreferDark,
 }
 
+export type SelectedPane = 'code' | 'graph' | 'table';
+
 export default class ThemeStore {
   preference = ThemePreference.System;
 
   systemDarkMode: boolean;
 
+  showCode = true;
+
+  showGraph = true;
+
+  showTable = false;
+
   constructor() {
     const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
     this.systemDarkMode = mediaQuery.matches;
@@ -48,4 +56,44 @@ export default class ThemeStore {
         : ThemePreference.PreferDark;
     }
   }
+
+  toggleCode(): void {
+    if (!this.showGraph && !this.showTable) {
+      return;
+    }
+    this.showCode = !this.showCode;
+  }
+
+  toggleGraph(): void {
+    if (!this.showCode && !this.showTable) {
+      return;
+    }
+    this.showGraph = !this.showGraph;
+  }
+
+  toggleTable(): void {
+    if (!this.showCode && !this.showGraph) {
+      return;
+    }
+    this.showTable = !this.showTable;
+  }
+
+  get selectedPane(): SelectedPane {
+    if (this.showCode) {
+      return 'code';
+    }
+    if (this.showGraph) {
+      return 'graph';
+    }
+    if (this.showTable) {
+      return 'table';
+    }
+    return 'code';
+  }
+
+  setSelectedPane(pane: SelectedPane, keepCode = true): void {
+    this.showCode = pane === 'code' || (keepCode && this.showCode);
+    this.showGraph = pane === 'graph';
+    this.showTable = pane === 'table';
+  }
 }