fix editor and layout css issues

Signed-off-by: alok8bb <alok8bb@gmail.com>

src/components/BottomBar.tsx

@@ -5,8 +5,12 @@ const BottomBar: FunctionComponent<propTypes> = props => {
 	return (
 		<footer
 			style={{
-				height: "5vh",
-				minHeight: "30px",
+				height: "2rem",
+				minHeight: "1rem",
+				position: "relative",
+				left: "0",
+				bottom: "0",
+				width: "100%",
 				background: "#0B0E14",
 				display: "flex",
 				alignItems: "center",
@@ -20,6 +24,7 @@ const BottomBar: FunctionComponent<propTypes> = props => {
 					color: "#D9F8C4",
 					cursor: "pointer",
 					textDecoration: "none",
+					fontSize: "1rem",
 				}}
 				href="/"
 			>
@@ -29,13 +34,14 @@ const BottomBar: FunctionComponent<propTypes> = props => {
 				className="controls"
 				style={{
 					display: "flex",
-					marginBottom: "2px",
 					alignItems: "center",
+					marginBottom: "2px",
 				}}
 			>
 				{/* make component of these links some day */}
 
 				{props.isNewPaste ? (
+					<li style={listStyle}>
 						<a
 							href="#"
 							onClick={async () => {
@@ -45,38 +51,46 @@ const BottomBar: FunctionComponent<propTypes> = props => {
 							}}
 							style={linkStyle}
 						>
-						<li style={listStyle}>save</li>
+							save
 						</a>
+					</li>
 				) : (
+					<li style={listStyle}>
 						<a href={`/raw/${useParams().id}`} style={linkStyle}>
-						<li style={listStyle}>raw</li>
+							raw
 						</a>
+					</li>
 				)}
 				<Separator />
+				<li style={listStyle}>
 					<a href={"/"} style={linkStyle}>
-					<li style={listStyle}>new</li>
+						new
 					</a>
+				</li>
 				<Separator />
+				<li style={listStyle}>
 					<a
 						href={"https://github.com/okiba-org/"}
 						target="_blank"
 						style={linkStyle}
 					>
-					<li style={listStyle}>source</li>
+						source
 					</a>
+				</li>
 			</ul>
 		</footer>
 	);
 };
 
 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 = () => (

src/components/Editor.tsx

@@ -5,7 +5,6 @@ import Theme from "./EditorTheme";
 
 const Editor: FunctionComponent<propTypes> = props => {
 	return (
-		// TODO: custom implementation?
 		<CodeMirror
 			className="editor"
 			autoFocus={true}
@@ -19,7 +18,7 @@ const Editor: FunctionComponent<propTypes> = props => {
 				flex: 1,
 				overflowY: "auto",
 				fontFamily: "IBM Plex Mono",
-				fontSize: "1rem",
+				fontSize: "1.2rem",
 			}}
 			editable={props.editable}
 			readOnly={props.readonly}

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",

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 {