From 8656d16f147f4978b4159a6215f69c6efe80091b Mon Sep 17 00:00:00 2001
From: Ilija Boshkov <ilija@codechem.com>
Date: Tue, 2 Apr 2024 22:54:01 +0200
Subject: [PATCH 1/2] Fix styling, css baseline, spacing

---
 client/src/components/CodeEditor.tsx        |  5 +-
 client/src/components/PageLayout.tsx        |  4 +-
 client/src/index.css                        |  5 --
 client/src/index.tsx                        |  3 +-
 client/src/pages/Compete/CodeEditorPane.tsx |  2 +-
 client/src/pages/Compete/CompeteTabs.tsx    |  2 +-
 client/src/pages/Compete/Problem.tsx        | 67 ++++++++++-----------
 client/src/theme/index.ts                   | 17 ++++++
 8 files changed, 57 insertions(+), 48 deletions(-)
 delete mode 100644 client/src/index.css

diff --git a/client/src/components/CodeEditor.tsx b/client/src/components/CodeEditor.tsx
index ecea274..30fe273 100644
--- a/client/src/components/CodeEditor.tsx
+++ b/client/src/components/CodeEditor.tsx
@@ -22,16 +22,13 @@ const CodeEditor = ({ language, code, readOnly }: Props) => {
   return (
     <Box
       sx={{
-        backgroundColor: "#282A36",
+        backgroundColor: "editor.background",
         width: "inherit",
         height: '100%',
         border: 1,
         borderColor: "divider",
         borderRadius: "12px",
         justifyItems: "flex-end",
-        marginLeft: 2,
-        paddingTop: 2,
-        paddingBottom: 2,
       }}
     >
         <Editor
diff --git a/client/src/components/PageLayout.tsx b/client/src/components/PageLayout.tsx
index 74d53b4..53e1968 100644
--- a/client/src/components/PageLayout.tsx
+++ b/client/src/components/PageLayout.tsx
@@ -18,8 +18,8 @@ const PageLayout = ({
       <Grid item xs={3} sx={{ borderLeft: 1, borderColor: 'divider', height: '100vh' }}>
         {rightGridChildren}
       </Grid>
-  </Grid>
-);
+    </Grid>
+  );
 }
 
 export default PageLayout;
diff --git a/client/src/index.css b/client/src/index.css
deleted file mode 100644
index 45f760e..0000000
--- a/client/src/index.css
+++ /dev/null
@@ -1,5 +0,0 @@
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
\ No newline at end of file
diff --git a/client/src/index.tsx b/client/src/index.tsx
index caf4d34..01be356 100644
--- a/client/src/index.tsx
+++ b/client/src/index.tsx
@@ -7,7 +7,7 @@ import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
 import React from "react";
 import themeOptions from "./theme/index.ts";
 import { GQL_URL } from "./config.ts";
-import './index.css';
+import CssBaseline from '@mui/material/CssBaseline';
 
 const client = new ApolloClient({
   uri: GQL_URL,
@@ -21,6 +21,7 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
     <Provider store={store}>
       <React.StrictMode>
         <ThemeProvider theme={themeOptions}>
+          <CssBaseline />
           <App />
         </ThemeProvider>
       </React.StrictMode>
diff --git a/client/src/pages/Compete/CodeEditorPane.tsx b/client/src/pages/Compete/CodeEditorPane.tsx
index da3a06d..6d5e900 100644
--- a/client/src/pages/Compete/CodeEditorPane.tsx
+++ b/client/src/pages/Compete/CodeEditorPane.tsx
@@ -17,7 +17,7 @@ const CodeEditorPane = () => (
       language="typescript"
       code={[
         "const message: string = 'Hello, World!';",
-        "console.log(messxage);",
+        "console.log(message);",
       ]}
     />
     <Grid container justifyContent="flex-end">
diff --git a/client/src/pages/Compete/CompeteTabs.tsx b/client/src/pages/Compete/CompeteTabs.tsx
index 96d0c3a..4945d89 100644
--- a/client/src/pages/Compete/CompeteTabs.tsx
+++ b/client/src/pages/Compete/CompeteTabs.tsx
@@ -10,7 +10,7 @@ const CompeteTabs = () => {
   };
 
   return (
-    <Box sx={{ margin: 5 }}>
+    <Box sx={{ margin: 2 }}>
       <Tabs value={value} onChange={handleChange} aria-label="basic tabs example" sx={{ width: "100%" }}>
         <Tab label="Problem" />
         <Tab label="Submissions (0)" />
diff --git a/client/src/pages/Compete/Problem.tsx b/client/src/pages/Compete/Problem.tsx
index defba7d..a8605ad 100644
--- a/client/src/pages/Compete/Problem.tsx
+++ b/client/src/pages/Compete/Problem.tsx
@@ -9,18 +9,18 @@ import { useState } from "react";
 import Paper from "../../components/Paper";
 import CodeEditorPane from "./CodeEditorPane";
 import { useGetProblemBySlug } from "../../data/useGetProblem";
-import Markdown from "react-markdown";
 import SampleTestCases from "./SampleTestCases";
 import {
   KeyboardDoubleArrowLeft,
   KeyboardDoubleArrowRight,
 } from "@mui/icons-material";
+import Markdown from "react-markdown";
 
 const ProblemPane = () => {
   const { problem } = useGetProblemBySlug();
-  
+
   const [isExpanded, setIsExpanded] = useState(false);
-  const editorPaneSize = isExpanded ? 9 : 5;
+  const editorPaneSize = isExpanded ? 8 : 6;
   const descriptionPaneSize = 12 - editorPaneSize;
 
   const tooltipMessage = isExpanded ? "Minimize code editor" : "Maximize code editor";
@@ -30,10 +30,23 @@ const ProblemPane = () => {
     setIsExpanded(!isExpanded);
   };
 
+  const resizeButton = (<Tooltip title={tooltipMessage} key={isExpanded ? "true" : "false"}>
+    <IconButton onClick={handleResize}>
+      {isExpanded ? (
+        <KeyboardDoubleArrowRight />
+      ) : (
+        <KeyboardDoubleArrowLeft />
+      )}
+    </IconButton>
+  </Tooltip>);
+
   return (
-    <Grid container spacing={2}>
+    <Grid container spacing={4} sx={{
+      position: "relative",
+      height: "76vh",
+    }}>
       <Grid item xs={descriptionPaneSize} height="inherit">
-        <Paper height={"75vh"}>
+        <Paper >
           <Box>
             <Typography>
               <Markdown>{problem?.description}</Markdown>
@@ -42,35 +55,21 @@ const ProblemPane = () => {
           </Box>
         </Paper>
       </Grid>
-      <Grid item xs={editorPaneSize} height="inherit">
-        <Paper height={"75vh"} width={`100%`} 
-          sx={{
-            paddingLeft: 0,
-          }}
-        >
-          <Grid
-            container
-            sx={{
-              justifyContent: "center",
-              alignItems: "center",
-              height: "100%",
-            }}
-          >
-            <Grid item xs={1}>
-              <Tooltip title={tooltipMessage} key={isExpanded ? "true" : "false"}>
-                <IconButton onClick={handleResize}>
-                  {isExpanded ? (
-                    <KeyboardDoubleArrowRight />
-                  ) : (
-                    <KeyboardDoubleArrowLeft />
-                  )}
-                </IconButton>
-              </Tooltip>
-            </Grid>
-            <Grid item xs={11} sx={{height: '100%'}}>
-              <CodeEditorPane />
-            </Grid>
-          </Grid>
+      <Grid item xs={editorPaneSize} height="inherit" sx={{
+        position: "relative",
+      }}>
+        <Box sx={{
+          position: "absolute",
+          left: -3,
+          height: '100%',
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+        }}>
+          {resizeButton}
+        </Box>
+        <Paper>
+          <CodeEditorPane />
         </Paper>
       </Grid>
     </Grid>
diff --git a/client/src/theme/index.ts b/client/src/theme/index.ts
index 4d34c45..9aaf3e7 100644
--- a/client/src/theme/index.ts
+++ b/client/src/theme/index.ts
@@ -1,8 +1,25 @@
 import { ThemeOptions, createTheme } from '@mui/material/styles';
 
+declare module '@mui/material/styles' {
+  interface Palette {
+    editor: {
+      background: string,
+    }
+  }
+
+  interface PaletteOptions {
+    editor?: {
+      background: string,
+    }
+  }
+}
+
 const themeOptions: ThemeOptions = createTheme({
   palette: {
     mode: 'dark',
+    editor: { 
+      background: '#282A36',
+    },
     primary: {
       main: '#FFC948',
       dark: '#b38d32',

From e47267e7f22abbc05e7aa08778b57c2d828a4585 Mon Sep 17 00:00:00 2001
From: Ilija Boshkov <ilija@codechem.com>
Date: Tue, 2 Apr 2024 23:01:23 +0200
Subject: [PATCH 2/2] Accentuate code blocks, remove select language label

---
 client/src/components/LanguageSelect.tsx | 16 +++-------------
 client/src/index.css                     |  6 ++++++
 client/src/index.tsx                     |  3 +--
 3 files changed, 10 insertions(+), 15 deletions(-)
 create mode 100644 client/src/index.css

diff --git a/client/src/components/LanguageSelect.tsx b/client/src/components/LanguageSelect.tsx
index fcc6cb3..c4e3428 100644
--- a/client/src/components/LanguageSelect.tsx
+++ b/client/src/components/LanguageSelect.tsx
@@ -1,4 +1,4 @@
-import { Box, FormControl, MenuItem, Select, SelectChangeEvent, Tooltip, Typography } from "@mui/material";
+import { Box, FormControl, MenuItem, Select, SelectChangeEvent, Tooltip } from "@mui/material";
 import { useState } from 'react';
 
 type Props = {
@@ -17,21 +17,11 @@ const LanguageSelect = ({ languages }: Props) => {
     <Box sx={{
       display: "flex",
       flexDirection: "row",
-      justifyContent: "space-between",
+      justifyContent: "flex-end",
       alignItems: "center",
     }}>
-      <Typography
-        color="typography.subtitle2"
-        variant="subtitle2"
-        align="left"
-        sx={{
-          marginLeft: 2,
-        }}
-      >
-        SELECT LANGUAGE:
-      </Typography>
       <FormControl sx={{ width: "150px" }} size="small">
-        <Tooltip title={currentLanguage} key={currentLanguage}>
+        <Tooltip title={currentLanguage} placement="right" key={currentLanguage}>
           <Select
             value={currentLanguage}
             onChange={handleLanguageChange}
diff --git a/client/src/index.css b/client/src/index.css
new file mode 100644
index 0000000..adb055e
--- /dev/null
+++ b/client/src/index.css
@@ -0,0 +1,6 @@
+code {
+  background: #121212;
+  color: white;
+  border-radius: 2px;
+  padding: 2px 4px;
+}
\ No newline at end of file
diff --git a/client/src/index.tsx b/client/src/index.tsx
index 01be356..a1c133a 100644
--- a/client/src/index.tsx
+++ b/client/src/index.tsx
@@ -8,14 +8,13 @@ import React from "react";
 import themeOptions from "./theme/index.ts";
 import { GQL_URL } from "./config.ts";
 import CssBaseline from '@mui/material/CssBaseline';
+import './index.css';
 
 const client = new ApolloClient({
   uri: GQL_URL,
   cache: new InMemoryCache(),
 });
 
-console.log(GQL_URL);
-
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <ApolloProvider client={client}>
     <Provider store={store}>