Use theme colors in TreeBrowser

toaq · May 6, 2024 · 069e99c · 069e99c
1 parent 46a7ca0
commit 069e99c
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 21 deletions.
diff --git a/src/web/Main.tsx b/src/web/Main.tsx
@@ -85,7 +85,7 @@ export function Main(props: MainProps) {
 	const treeImg = useRef<HTMLImageElement>(null);
 	const [meaningCompact, setMeaningCompact] = useState(false);
 
-	const [treeFormat, setTreeFormat] = useState<TreeFormat>('png-latex');
+	const [treeFormat, setTreeFormat] = useState<TreeFormat>('react');
 	useEffect(() => {
 		if (props.mode) generate(props.mode);
 		else if (latestMode) generate(latestMode);
@@ -288,13 +288,14 @@ export function Main(props: MainProps) {
 						<label>
 							Tree format:
 							<select
+								value={treeFormat}
 								onChange={e => setTreeFormat(e.target.value as TreeFormat)}
 							>
+								<option value="react">React</option>
 								<option value="png-latex">Image (LaTeX)</option>
 								<option value="png-text">Image (plain text)</option>
 								<option value="textual">Text art</option>
 								<option value="json">JSON</option>
-								<option value="react">React</option>
 							</select>
 						</label>
 					</div>

diff --git a/src/web/TreeBrowser.css b/src/web/TreeBrowser.css
@@ -15,10 +15,6 @@
 	height: 7em;
 }
 
-.tree-node-contents:hover {
-	background: #f0000010;
-}
-
 .tree-children {
 	display: flex;
 	flex-direction: row;
@@ -31,20 +27,10 @@
 }
 
 .tree-formula {
-	color: red;
 	font-size: 7px;
 }
 
-.tree-word {
-	color: #0066ff;
-}
-
 .tree-roof {
-	background: #eeeeff;
 	cursor: pointer;
 	padding: 0.5em;
 }
-
-.tree-roof:hover {
-	background: #e2e2ff;
-}
diff --git a/src/web/TreeBrowser.tsx b/src/web/TreeBrowser.tsx
@@ -8,10 +8,18 @@ import { MathJax } from 'better-react-mathjax';
 import { CompactExpr, compact } from '../semantics/compact';
 import { Theme } from '../tree/theme';
 
-export function Denotation(props: { denotation: Expr; compact: boolean }) {
+export function Denotation(props: {
+	denotation: Expr;
+	compact: boolean;
+	theme: Theme;
+}) {
 	const expr = props.compact ? compact(props.denotation) : props.denotation;
 	return (
-		<MathJax className="tree-formula" hideUntilTypeset="every">
+		<MathJax
+			className="tree-formula"
+			hideUntilTypeset="every"
+			style={{ color: props.theme.denotationColor }}
+		>
 			{'$$\\LARGE ' + toLatex(expr) + '$$'}
 		</MathJax>
 	);
@@ -21,8 +29,9 @@ export function Node(props: {
 	tree: Tree | DTree;
 	expanded: boolean;
 	compactDenotations: boolean;
+	theme: Theme;
 }) {
-	const { tree, compactDenotations } = props;
+	const { tree, compactDenotations, theme } = props;
 	return (
 		<div className="tree-node">
 			<div className="tree-node-contents">
@@ -31,11 +40,12 @@ export function Node(props: {
 					<Denotation
 						denotation={tree.denotation}
 						compact={compactDenotations}
+						theme={theme}
 					/>
 				)}
 				{'word' in tree && (
 					<>
-						<div className="tree-word">
+						<div className="tree-word" style={{ color: theme.wordColor }}>
 							{tree.word.covert ? tree.word.value : tree.word.text}
 						</div>
 						{tree.word.covert ? undefined : (
@@ -89,6 +99,7 @@ export function TreeBrowser(props: {
 					tree={tree}
 					expanded={expanded}
 					compactDenotations={compactDenotations}
+					theme={theme}
 				/>
 			</div>
 			{expanded ? (
@@ -110,7 +121,7 @@ export function TreeBrowser(props: {
 						preserveAspectRatio="none"
 						viewBox="0 0 50 10"
 					>
-						<path d="M25 0 L50 8 L0 8 Z" fill="none" stroke="black" />
+						<path d="M25 0 L50 8 L0 8 Z" fill="none" stroke={theme.textColor} />
 					</svg>
 					<div className="tree-word">{treeText(tree) || '(expand)'}</div>
 				</div>