refactor: Fixup some repl/code editor styles

preactjs · Apr 27, 2024 · 4b65af0 · 4b65af0
1 parent ce08c54
commit 4b65af0
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 2 deletions.
diff --git a/src/components/code-editor/code-mirror.css b/src/components/code-editor/code-mirror.css
@@ -58,7 +58,7 @@
 	}
 
 	.CodeMirror-linenumber {
-		color: #4b5363;
+		color: #8b93a3;
 	}
 
 	.CodeMirror-cursor {

diff --git a/src/components/controllers/repl/index.jsx b/src/components/controllers/repl/index.jsx
@@ -248,6 +248,7 @@ export class Repl extends Component {
 			<ReplWrapper loading={!!loading}>
 				<header class={style.toolbar}>
 					<label>
+						Examples:{' '}
 						<select value={exampleSlug} onChange={this.loadExample}>
 							<option value="" disabled>
 								Select Example...

diff --git a/src/components/controllers/repl/runner.jsx b/src/components/controllers/repl/runner.jsx
@@ -183,6 +183,7 @@ export default class Runner extends Component {
 				class={style.runner + ' ' + (props.class || '')}
 				style={props.style}
 				ref={this.frame}
+				title="REPL Result"
 			/>
 		);
 	}

diff --git a/src/components/controllers/repl/style.module.css b/src/components/controllers/repl/style.module.css
@@ -43,7 +43,8 @@
 			font-size: 100%;
 			outline: none;
 			cursor: pointer;
-			&:hover {
+			&:hover,
+			&:focus {
 				background: linear-gradient(to bottom, #404650, #323640);
 				background-color: #424854;
 				color: #d5dce8;