Merge pull request #162 from JeevaRamanathan/fix/footer

refactor: adjust footer positioning for better alignment
DhanushNehru · Oct 25, 2024 · 2c70db8 · 2c70db8
2 parents d444cdd + 4371e01
commit 2c70db8
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 49 deletions.
diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -19,27 +19,27 @@ function App() {
     <div style={containerStyle}>
       <a href="https://github.com/DhanushNehru" target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none" }}>
         <IconButton text="DhanushNehru">
-          <FaGithub size={30} style={iconStyle} />
+          <FaGithub size={15} style={iconStyle} />
         </IconButton>
       </a>
       <a href="https://www.linkedin.com/in/dhanushnehru/" target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none" }}>
         <IconButton text="dhanushnehru" color="#316FF6">
-          <FaLinkedin size={30} style={iconStyle} />
+          <FaLinkedin size={15} style={iconStyle} />
         </IconButton>
       </a>
       <a href="https://www.instagram.com/dhanush_nehru/" target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none" }}>
         <IconButton text="dhanush_nehru" color="#d62976">
-          <GrInstagram size={30} style={iconStyle} />
+          <GrInstagram size={15} style={iconStyle} />
         </IconButton>
       </a>
       <a href="https://x.com/Dhanush_Nehru" target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none" }}>
         <IconButton text="Dhanush_Nehru" color="black">
-          <FaXTwitter size={30} style={iconStyle} />
+          <FaXTwitter size={15} style={iconStyle} />
         </IconButton>
       </a>
       <a href="https://www.youtube.com/@dhanushnehru" target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none" }}>
         <IconButton text="@dhanushnehru" color="#FF0000">
-          <IoLogoYoutube size={30} style={iconStyle} />
+          <IoLogoYoutube size={15} style={iconStyle} />
         </IconButton>
       </a>
     </div>

diff --git a/src/components/css/EditorComponent.css b/src/components/css/EditorComponent.css
@@ -42,7 +42,7 @@
     width: 100%;
     height: 50vh;
   }
-   .flex-container {
+  .flex-container {
     flex-direction: row;
     justify-content: space-between;
     gap: 0.6em;
@@ -111,3 +111,8 @@
     color: #fff;
   }
 }
+
+.footer {
+  margin-bottom: 12px;
+  margin-top: -8px;
+}
diff --git a/src/pages/EditorComponent.js b/src/pages/EditorComponent.js
@@ -47,7 +47,7 @@ const StyledLayout = styled("div")(({ theme }) => ({
 const OutputLayout = styled("div")(({ theme }) => ({
   backgroundColor: theme.palette.background.paper,
   height: "50vh",
-  margin: "2rem 0",
+  margin: "1rem 0",
   border: `2px solid ${theme.palette.divider}`,
   borderRadius: "1rem",
   "@media (min-width: 1024px)": {
@@ -142,20 +142,23 @@ function EditorComponent() {
     setLoading(true);
     try {
       const encodedCode = btoa(codeToSubmit);
-      const response = await fetch(`${judge0SubmitUrl}?base64_encoded=true&wait=false&fields=*`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          "X-RapidAPI-Key": rapidApiKey,
-          "X-RapidAPI-Host": rapidApiHost,
-        },
-        body: JSON.stringify({
-          source_code: encodedCode,
-          language_id: languageDetails.ID,
-          stdin: "",
-          expected_output: "",
-        }),
-      });
+      const response = await fetch(
+        `${judge0SubmitUrl}?base64_encoded=true&wait=false&fields=*`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "X-RapidAPI-Key": rapidApiKey,
+            "X-RapidAPI-Host": rapidApiHost,
+          },
+          body: JSON.stringify({
+            source_code: encodedCode,
+            language_id: languageDetails.ID,
+            stdin: "",
+            expected_output: "",
+          }),
+        }
+      );
 
       if (!response.ok) {
         enqueueSnackbar(
@@ -169,13 +172,16 @@ function EditorComponent() {
       const submissionId = data["token"];
 
       setTimeout(() => {
-        fetch(`${judge0SubmitUrl}/${submissionId}?base64_encoded=true&fields=*`, {
-          method: "GET",
-          headers: {
-            "X-RapidAPI-Key": rapidApiKey,
-            "X-RapidAPI-Host": rapidApiHost,
-          },
-        })
+        fetch(
+          `${judge0SubmitUrl}/${submissionId}?base64_encoded=true&fields=*`,
+          {
+            method: "GET",
+            headers: {
+              "X-RapidAPI-Key": rapidApiKey,
+              "X-RapidAPI-Host": rapidApiHost,
+            },
+          }
+        )
           .then((response) => response.json())
           .then((data) => {
             if (!data.stdout) {
@@ -199,15 +205,18 @@ function EditorComponent() {
     }
   }, [enqueueSnackbar, languageDetails]);
 
-  const handleEditorDidMount = useCallback((editor, monaco) => {
-    console.log("Editor mounted"); // Debug log
-    editorRef.current = editor;
-    monacoRef.current = monaco;
-    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, () => {
-      console.log("Ctrl+Enter pressed in editor");
-      submitCode();
-    });
-  }, [submitCode]);
+  const handleEditorDidMount = useCallback(
+    (editor, monaco) => {
+      console.log("Editor mounted"); // Debug log
+      editorRef.current = editor;
+      monacoRef.current = monaco;
+      editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, () => {
+        console.log("Ctrl+Enter pressed in editor");
+        submitCode();
+      });
+    },
+    [submitCode]
+  );
 
   useEffect(() => {
     const handleKeyDown = (event) => {
@@ -259,7 +268,10 @@ function EditorComponent() {
           language={languageDetails.DEFAULT_LANGUAGE}
           options={{ minimap: { enabled: false } }}
         />
-        <div className="sidebar" style={{ display: "flex", flexDirection: "column" }}>
+        <div
+          className="sidebar"
+          style={{ display: "flex", flexDirection: "column" }}
+        >
           {getLanguageLogoById(languageDetails.ID)}
           <div style={{ fontWeight: "bold" }}>
             {languageDetails.LANGUAGE_NAME}
@@ -306,10 +318,7 @@ function EditorComponent() {
       </StyledLayout>
       <OutputLayout>
         {Array.isArray(output) &&
-          output.map((result, i) => (
-            <div key={i}>{result}</div>
-          ))}
-        <Footer />
+          output.map((result, i) => <div key={i}>{result}</div>)}
       </OutputLayout>
     </>
   );
@@ -326,8 +335,8 @@ function EditorComponent() {
     >
       <h2>Please sign in to use the Code Editor</h2>
       <GoogleSignIn />
-      <br/>
-      <GithubSignIn/>
+      <br />
+      <GithubSignIn />
     </div>
   );
 
@@ -364,14 +373,16 @@ function EditorComponent() {
                 fontSize: "1.5em",
               }}
             >
-              Custom Code Editor
+                Custom Code Editor
             </span>
           </div>
           <div className="flex-container">
             <div className="flex items-center space-x-2">
               {currentUser ? (
                 <>
-                  <WelcomeText>Welcome, {currentUser.displayName}</WelcomeText>
+                  <WelcomeText>
+                      Welcome, {currentUser.displayName}
+                  </WelcomeText>
                   <Avatar
                     src={currentUser.photoURL}
                     alt={currentUser.displayName}
@@ -383,15 +394,18 @@ function EditorComponent() {
                     }}
                   />
                   <div className="signout-container">
-                    <button onClick={handleSignOut} className="signout-button">
+                    <button
+                      onClick={handleSignOut}
+                      className="signout-button"
+                    >
                       <span>Logout</span>
                     </button>
                   </div>
                 </>
               ) : (
                 <>
                   <GoogleSignIn />
-                  <GithubSignIn/>
+                  <GithubSignIn />
                 </>
               )}
             </div>
@@ -403,8 +417,11 @@ function EditorComponent() {
       {currentUser
         ? renderAuthenticatedContent()
         : renderUnauthenticatedContent()}
+      <div className="footer">
+        <Footer />
+      </div>
     </div>
   );
 }
 
-export default EditorComponent;
+export default EditorComponent;