Skip to content

Added toggle button #96

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Added toggle button #96

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .eslintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@
"react/prop-types": "off",
"react/react-in-jsx-scope": "off",
"indent": ["error", 2],
"linebreak-style": ["error", "unix"],
// "linebreak-style": ["error", "unix"],
"linebreak-style": ["error", "windows"],
Comment on lines +16 to +17
Copy link

Copilot AI Jul 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changing the linebreak-style from 'unix' to 'windows' affects the entire team's development environment. This change should be coordinated with the team and may not be appropriate for a theme toggle feature.

Suggested change
// "linebreak-style": ["error", "unix"],
"linebreak-style": ["error", "windows"],
"linebreak-style": ["error", "unix"],

Copilot uses AI. Check for mistakes.
"quotes": ["error", "double"],
"no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],
"import/order": ["error", { "groups": [["builtin", "external", "internal"]] }],
Expand Down
8 changes: 4 additions & 4 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
"notistack": "^3.0.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-icons": "^5.2.1",
"react-icons": "^5.3.0",
"react-router-dom": "^6.23.1",
"react-scripts": "5.0.1",
"styled-components": "^6.1.11"
Expand Down
28 changes: 23 additions & 5 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,40 @@
// App.js

Check failure on line 1 in src/App.js

View workflow job for this annotation

GitHub Actions / Performs linting on the application 

Expected linebreaks to be 'CRLF' but found 'LF'
import { useState } from "react";

Check failure on line 2 in src/App.js

View workflow job for this annotation

GitHub Actions / Performs linting on the application 

Expected linebreaks to be 'CRLF' but found 'LF'
import { BrowserRouter, Routes, Route } from "react-router-dom";

Check failure on line 3 in src/App.js

View workflow job for this annotation

GitHub Actions / Performs linting on the application 

Expected linebreaks to be 'CRLF' but found 'LF'
import { ThemeProvider } from "@mui/material";

Check failure on line 4 in src/App.js

View workflow job for this annotation

GitHub Actions / Performs linting on the application 

Expected linebreaks to be 'CRLF' but found 'LF'
import EditorComponent from "./pages/EditorComponent";

Check failure on line 5 in src/App.js

View workflow job for this annotation

GitHub Actions / Performs linting on the application 

Expected linebreaks to be 'CRLF' but found 'LF'
import theme from "./theme";
import { lightTheme, darkTheme } from "./theme";

Check failure on line 6 in src/App.js

View workflow job for this annotation

GitHub Actions / Performs linting on the application 

Expected linebreaks to be 'CRLF' but found 'LF'
import SnackbarProvider from "./components/js/SnackbarProvider";

Check failure on line 7 in src/App.js

View workflow job for this annotation

GitHub Actions / Performs linting on the application 

Expected linebreaks to be 'CRLF' but found 'LF'

Check failure on line 8 in src/App.js

View workflow job for this annotation

GitHub Actions / Performs linting on the application 

Expected linebreaks to be 'CRLF' but found 'LF'
function App() {

Check failure on line 9 in src/App.js

View workflow job for this annotation

GitHub Actions / Performs linting on the application 

Expected linebreaks to be 'CRLF' but found 'LF'
const [darkMode, setDarkMode] = useState(false);

Check failure on line 10 in src/App.js

View workflow job for this annotation

GitHub Actions / Performs linting on the application 

Expected linebreaks to be 'CRLF' but found 'LF'

const toggleTheme = () => {
setDarkMode((prevMode) => !prevMode);
Comment on lines +10 to +13
Copy link

Copilot AI Jul 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The theme preference should be persisted in localStorage to maintain user preference across sessions, as mentioned in the PR description. Consider initializing the state from localStorage and updating it when the theme changes.

Suggested change
const [darkMode, setDarkMode] = useState(false);
const toggleTheme = () => {
setDarkMode((prevMode) => !prevMode);
const [darkMode, setDarkMode] = useState(() => {
const savedTheme = localStorage.getItem("darkMode");
return savedTheme === "true" ? true : false;
});
const toggleTheme = () => {
setDarkMode((prevMode) => {
const newMode = !prevMode;
localStorage.setItem("darkMode", newMode);
return newMode;
});

Copilot uses AI. Check for mistakes.
};

return (
<ThemeProvider theme={theme}>
<ThemeProvider theme={darkMode ? darkTheme : lightTheme}>
<SnackbarProvider>
<BrowserRouter>
<Routes>
<Route path="/" element={<EditorComponent />} />
<Route path="/editor" element={<EditorComponent />} />
<Route
path="/"
element={
<EditorComponent darkMode={darkMode} toggleTheme={toggleTheme} />
}
/>
<Route
path="/editor"
element={
<EditorComponent darkMode={darkMode} toggleTheme={toggleTheme} />
}
/>
</Routes>
</BrowserRouter>
</SnackbarProvider>
</ThemeProvider>
);
}

export default App
export default App;
6 changes: 3 additions & 3 deletions src/components/css/EditorComponent.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@
margin-left: 0.5rem;
margin-right: 0.5rem;
padding: 0.5rem;
border: 3px solid rgba(0, 0, 0, 0.096);
border-radius: 1rem;
transition: background-color 0.3s ease;
}

.sidebar {
Expand All @@ -32,15 +32,15 @@
}

.output {
background-color: #d8dbcc;
height: 22.3vh;
Copy link

Copilot AI Jul 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nitpick] The magic number '22.3vh' should be replaced with a named constant or CSS variable to improve maintainability and make the layout intention clearer.

Suggested change
height: 22.3vh;
height: var(--output-height);

Copilot uses AI. Check for mistakes.
overflow-y: auto;
padding: 1rem;
margin: 0.5rem;
border: 3px solid rgba(0, 0, 0, 0.096);
border-radius: 1rem;
transition: background-color 0.3s ease;
}

/* Responsive layout */
@media (min-width: 768px) {
.layout {
flex-direction: row;
Expand Down
12 changes: 12 additions & 0 deletions src/components/css/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,15 @@ body {
margin: 0;
font-family: 'Poppins';
}

/* Light Mode */
.light-mode {
Copy link

Copilot AI Jul 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The CSS classes 'light-mode' and 'dark-mode' are defined but never applied to any elements in the codebase. Consider removing these unused styles or implementing their usage.

Copilot uses AI. Check for mistakes.
background-color: #f9f9f9;
color: #333;
}

/* Dark Mode */
.dark-mode {
background-color: #333;
color: #f9f9f9;
}
22 changes: 20 additions & 2 deletions src/components/js/LanguageSelect.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import Autocomplete from "@mui/material/Autocomplete";
import TextField from "@mui/material/TextField";
import { LANGUAGES } from "../../constants/constants";

function LanguageSelect({ handleLanguageChange, defaultLanguage }) {
function LanguageSelect({ handleLanguageChange, defaultLanguage, darkMode }) {
return (
<Autocomplete
size="small"
Expand All @@ -18,7 +18,25 @@ function LanguageSelect({ handleLanguageChange, defaultLanguage }) {
{...params}
label="Select Language"
variant="outlined"
sx={{ width: 150 }}
sx={{
width: 150,
backgroundColor: darkMode ? "#333" : "#fff", // Background changes with dark mode
color: darkMode ? "#fff" : "#000", // Text color changes
"& .MuiOutlinedInput-root": {
"& fieldset": {
borderColor: darkMode ? "#555" : "#ccc", // Border color for dark mode
},
"&:hover fieldset": {
borderColor: darkMode ? "#aaa" : "#1976d2", // Hover state
},
"&.Mui-focused fieldset": {
borderColor: darkMode ? "#bbb" : "#1976d2", // Focus state
},
},
"& .MuiInputLabel-root": {
color: darkMode ? "#bbb" : "#000", // Label color in dark mode
},
}}
/>
)}
/>
Expand Down
35 changes: 24 additions & 11 deletions src/pages/EditorComponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
// EditorComponent.js
import React, { useState, useRef, useEffect } from "react";
import { FaPlay } from "react-icons/fa";
import { FaPlay, FaSun, FaMoon } from "react-icons/fa"; // Import icons
import Editor from "@monaco-editor/react";
import "../components/css/EditorComponent.css";
import "@fortawesome/fontawesome-free/css/all.css";
import { useSnackbar } from "notistack";
import { Button, CircularProgress, styled } from "@mui/material";
import { Button, CircularProgress, styled, IconButton } from "@mui/material";
import Stars from "../components/js/Stars";
import {
LANGUAGES,
Expand All @@ -21,7 +22,7 @@ const StyledButton = styled(Button)({
gap: "0.5rem",
});

function EditorComponent() {
function EditorComponent({ darkMode, toggleTheme }) {
const [code, setCode] = useState(null);
const [output, setOutput] = useState([]);
const [currentLanguage, setCurrentLanguage] = useState(
Expand Down Expand Up @@ -108,7 +109,7 @@ function EditorComponent() {
setOutput(data.message);
return;
}
const formatedData = data.stdout.split("\n")
const formatedData = data.stdout.split("\n");
setOutput(formatedData);
})
.catch((error) => {
Expand All @@ -131,19 +132,31 @@ function EditorComponent() {

return (
<div className="editor-container">
<div style={{ height: "auto", margin: "0.5rem", paddingLeft:"0.5rem", paddingRight: "0.5rem", border: "3px solid rgba(0, 0, 0, 0.096)", borderRadius: "1rem" }}>
<div
style={{
height: "auto",
margin: "0.5rem",
paddingLeft: "0.5rem",
paddingRight: "0.5rem",
border: "3px solid rgba(0, 0, 0, 0.096)",
borderRadius: "1rem",
}}
>
<div style={styles.flex}>
{getLanguageLogoById(languageDetails.LANGUAGE_ID)}
<div style={{ fontWeight: "bold" }}>
{languageDetails.LANGUAGE_NAME}
</div>
<Stars />
<IconButton onClick={toggleTheme} color="inherit">
{darkMode ? <FaSun size={20} /> : <FaMoon size={20} />}
</IconButton>
</div>
</div>
<div className="layout">
<Editor
className="editor"
theme="vs-dark"
theme={darkMode ? "vs-dark" : "light"}
onMount={handleEditorDidMount}
value={code}
onChange={setCode}
Expand All @@ -154,6 +167,7 @@ function EditorComponent() {
<LanguageSelect
handleLanguageChange={handleLanguageChange}
defaultLanguage={languageDetails}
darkMode={darkMode}
/>
</div>
<StyledButton
Expand All @@ -171,11 +185,10 @@ function EditorComponent() {
</div>
</div>
<div className="output">
{
output && output.map((result, i)=>{
return <div key={i}>{result}</div>
})
}
{output &&
output.map((result, i) => {
return <div key={i}>{result}</div>;
})}
</div>
</div>
);
Expand Down
42 changes: 37 additions & 5 deletions src/theme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,54 @@
// theme.js
import { createTheme } from "@mui/material/styles";

const theme = createTheme({
export const lightTheme = createTheme({
palette: {
mode: "light",
primary: {
main: "#1976d2",
},
secondary: {
main: "#dc004e",
},
background: {
default: "#fff",
paper: "#f5f5f5",
},
text: {
primary: "#000",
secondary: "#555",
},
},
typography: {
h1: {
fontSize: "2rem",
},
fontFamily: [
"Poppins",
],
fontFamily: ["Poppins"],
},
});

export default theme;
export const darkTheme = createTheme({
palette: {
mode: "dark",
primary: {
main: "#90caf9",
},
secondary: {
main: "#f48fb1",
},
background: {
default: "#121212",
paper: "#1e1e1e",
},
text: {
primary: "#fff",
secondary: "#aaa",
},
},
typography: {
h1: {
fontSize: "2rem",
},
fontFamily: ["Poppins"],
},
});