fix editor and layout css issues

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

.prettierrc

@@ -6,7 +6,6 @@
 	"quoteProps": "consistent",
 	"jsxSingleQuote": false,
 	"bracketSpacing": true,
-	"jsxBracketSameLine": true,
 	"arrowParens": "avoid",
 	"printWidth": 80
 }

src/App.tsx

@@ -12,7 +12,8 @@ function App() {
 					display: "flex",
 					flexDirection: "column",
 					height: "100%",
-				}}>
+				}}
+			>
 				<Routes>
 					<Route path="/" element={<Home />} />
 					<Route path="/:id" element={<Paste />} />

src/components/BottomBar.tsx

@@ -5,34 +5,43 @@ 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",
 				justifyContent: "space-between",
 				paddingInline: "15px",
 			}}
-			className="BottomBar">
+			className="BottomBar"
+		>
 			<a
 				style={{
 					color: "#D9F8C4",
 					cursor: "pointer",
 					textDecoration: "none",
+					fontSize: "1rem",
 				}}
-				href="/">
+				href="/"
+			>
 				<b>Okiba</b> v1.0
 			</a>
 			<ul
 				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 () => {
@@ -40,38 +49,48 @@ const BottomBar: FunctionComponent<propTypes> = props => {
 									await props.postCallback();
 								}
 							}}
-						style={linkStyle}>
-						<li style={listStyle}>save</li>
+							style={linkStyle}
+						>
+							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>
+						style={linkStyle}
+					>
+						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 = () => (
@@ -79,7 +98,8 @@ const Separator = () => (
 		style={{
 			fontSize: "1rem",
 			color: "#839496",
-		}}>
+		}}
+	>
 		•
 	</div>
 );

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

@@ -1,13 +1,15 @@
-@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&display=swap");
 
 * {
 	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 {

src/util/index.ts

@@ -1 +1 @@
-export const SERVER_URL = import.meta.env.VITE_SERVER_URL
+export const SERVER_URL = import.meta.env.VITE_SERVER_URL;

vite.config.ts

@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()]
-})
+	plugins: [react()],
+});