diff --git a/src/components/BottomBar.tsx b/src/components/BottomBar.tsx index 01fdb98..3243985 100644 --- a/src/components/BottomBar.tsx +++ b/src/components/BottomBar.tsx @@ -5,8 +5,12 @@ const BottomBar: FunctionComponent = props => { return ( ); }; const linkStyle = { - color: "white", + color: "rgba(255, 255, 255, 0.774)", }; const listStyle = { marginInline: "10px", listStyle: "none", - fontSize: "2vh", + fontSize: "1rem", + height: "100%", }; const Separator = () => ( diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx index f5ad7d1..2bdf2e1 100644 --- a/src/components/Editor.tsx +++ b/src/components/Editor.tsx @@ -5,7 +5,6 @@ import Theme from "./EditorTheme"; const Editor: FunctionComponent = props => { return ( - // TODO: custom implementation? = props => { flex: 1, overflowY: "auto", fontFamily: "IBM Plex Mono", - fontSize: "1rem", + fontSize: "1.2rem", }} editable={props.editable} readOnly={props.readonly} diff --git a/src/components/EditorTheme.ts b/src/components/EditorTheme.ts index d75ba94..e889463 100644 --- a/src/components/EditorTheme.ts +++ b/src/components/EditorTheme.ts @@ -6,9 +6,8 @@ export default createTheme({ theme: "dark", settings: { background: "black", - // gutterBackground: "#0B0E14", - gutterBackground: "black", - gutterForeground: "#B8D7A3", + gutterBackground: "black", // line number background + gutterForeground: "gray", // line number foreground: "#c9d1d9", caret: "#c9d1d9", selection: "#003d73", diff --git a/src/index.css b/src/index.css index 7df53c0..3fcc76f 100644 --- a/src/index.css +++ b/src/index.css @@ -2,12 +2,14 @@ * { margin: 0; + padding: 0; + box-sizing: border-box; font-family: "IBM Plex Mono", monospace; } body { background: black; - color: white; + color: rgba(255, 255, 255, 0.774); } #root {