Skip to content

Fix styling, css baseline, spacing #39

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
iboshkov wants to merge 2 commits into
base: development
Choose a base branch
from
Open

Fix styling, css baseline, spacing #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8656d16
Fix styling, css baseline, spacing
iboshkov Apr 2, 2024
e47267e
Accentuate code blocks, remove select language label
iboshkov Apr 2, 2024
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
5 changes: 1 addition & 4 deletions client/src/components/CodeEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Comment on lines -32 to -34
Copy link
Contributor

@vergjor vergjor May 28, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

the paddings need to be re-added since they are needed for the code editor to have rounded corners and for the code to not be that close to the editor borders, as in the design (excluding the marginLeft). marginLeft can be moved to the parent component (Paper) so that both the "Select a language" label and the editor can be aligned

}}
>
<Editor
Expand Down
16 changes: 3 additions & 13 deletions client/src/components/LanguageSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = {
Expand All @@ -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}
Expand Down
4 changes: 2 additions & 2 deletions client/src/components/PageLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@ const PageLayout = ({
<Grid item xs={3} sx={{ borderLeft: 1, borderColor: 'divider', height: '100vh' }}>
{rightGridChildren}
</Grid>
</Grid>
);
</Grid>
);
}

export default PageLayout;
9 changes: 5 additions & 4 deletions client/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
code {
background: #121212;
color: white;
border-radius: 2px;
padding: 2px 4px;
}
4 changes: 2 additions & 2 deletions client/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,20 @@ import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
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}>
<React.StrictMode>
<ThemeProvider theme={themeOptions}>
<CssBaseline />
<App />
</ThemeProvider>
</React.StrictMode>
Expand Down
2 changes: 1 addition & 1 deletion client/src/pages/Compete/CodeEditorPane.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion client/src/pages/Compete/CompeteTabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)" />
Expand Down
67 changes: 33 additions & 34 deletions client/src/pages/Compete/Problem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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>
Expand All @@ -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>
Expand Down
17 changes: 17 additions & 0 deletions client/src/theme/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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',
Expand Down