Updated styling

Author: RowenTey

client/src/components/CodeEditor/CodeEditor.jsx

@@ -10,6 +10,7 @@ const languageCommentsMap = new Map([
   ["javascript", "// Paste/Enter your code here"],
   ["python", "# Paste/Enter your code here"],
   ["java", "// Paste/Enter your code here"],
+  ["c++", "// Paste/Enter your code here"],
   ["html", "<!-- Paste/Enter your code here -->"],
   ["css", "/* Paste/Enter your code here */"],
   ["ruby", "# Paste/Enter your code here"],
@@ -128,6 +129,18 @@ export default function CodeEditor({ defaultCode }) {
               label: "Python",
               action: () => handleDropdownClick("python"),
             },
+            {
+              label: "C++",
+              action: () => handleDropdownClick("c++"),
+            },
+            {
+              label: "Java",
+              action: () => handleDropdownClick("java"),
+            },
+            {
+              label: "Ruby",
+              action: () => handleDropdownClick("ruby"),
+            },
           ]}
         />
       </div>
@@ -146,7 +159,7 @@ export default function CodeEditor({ defaultCode }) {
         onValidate={handleEditorValidation}
       />
 
-      <QueryButtons handleClick={handleGenerate} containerWidth={"100%"} />
+      <QueryButtons handleClick={handleGenerate} />
     </>
   );
 }

client/src/components/Navbar/Navbar.jsx

@@ -88,7 +88,12 @@ export default function Navbar() {
                 },
               }}
             >
-              <MenuItem onClick={handleClose}>
+              <MenuItem
+                onClick={() => {
+                  handleClose();
+                  navigate("/profile");
+                }}
+              >
                 <Typography
                   sx={{
                     color: "var(--color-accent)",

client/src/components/PromptInput/PromptInput.jsx

@@ -130,7 +130,7 @@ export default function PromptInput() {
         <input type="file" hidden onChange={handleFileUpload} />
       </Button>
 
-      <QueryButtons handleClick={handleSubmit} containerWidth={"100%"} />
+      <QueryButtons handleClick={handleSubmit} />
     </div>
   );
 }

client/src/components/QueryButtons/QueryButtons.jsx

@@ -3,14 +3,14 @@ import Stack from "@mui/material/Stack";
 import { useState } from "react";
 import { useSelector } from "react-redux";
 
-export default function QueryButtons({ handleClick, containerWidth }) {
+export default function QueryButtons({ handleClick }) {
   const loading = useSelector((state) => state.loading);
 
   return (
     <Stack
+      width="100%"
       justifyContent="space-between"
       direction="row"
-      width={containerWidth}
       marginTop={2}
     >
       <Button
@@ -21,11 +21,7 @@ export default function QueryButtons({ handleClick, containerWidth }) {
         }}
         disabled={loading}
       >
-        Generate
-      </Button>
-
-      <Button variant="contained" color="error" disabled={!loading}>
-        Cancel
+        {loading ? "Loading..." : "Generate"}
       </Button>
     </Stack>
   );

client/src/index.css

@@ -1,25 +1,25 @@
 /* IBM Plex Mono */
-@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");
 
 /* Spectral */
-@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
 
 /* Roboto */
-@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
 
 :root {
-	--color-primary: #0f434c;
-	--color-secondary: #0c7489;
-	--color-tertiary: #119da4;
-	--color-accent: #d7d9ce;
-	--color-dark: #1c1c1c;
-
-	--color-test: #194f58;
+  --color-primary: #0f434c;
+  --color-secondary: #0c7489;
+  --color-tertiary: #119da4;
+  --color-accent: #d7d9ce;
+  --color-dark: #1c1c1c;
+  --color-test: #194f58;
+  --color-white: #fff;
 }
 
 body {
-	font-family: Arial, sans-serif;
-	background-color: var(--color-primary);
-	color: var(--color-accent);
-	margin: 0;
+  font-family: Arial, sans-serif;
+  background-color: var(--color-primary);
+  color: var(--color-accent);
+  margin: 0;
 }

client/src/pages/QueryPage.jsx

@@ -16,9 +16,7 @@ export default function QueryPage() {
     <>
       <Navbar />
       <div style={{ marginTop: "6rem" }}>
-        <h1 style={{ textAlign: "center" }}>Monaco Editor Example</h1>
-
-        <div style={{ textAlign: "center", marginTop: "1rem" }}>
+        <div style={{ textAlign: "center" }}>
           <Button variant="contained" color="info" onClick={toggleEditor}>
             Toggle Editor
           </Button>