Skip to content

Commit 8eb9e56

Browse files
yuxuanleongyuxuanleong
committed
Update UI
1 parent ed4f532 commit 8eb9e56

File tree

5 files changed

+64
-26
lines changed

5 files changed

+64
-26
lines changed

‎Frontend/src/components/collab/Chat.jsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,16 +21,18 @@ const Chat = ({ currentUser, messages, sendMessage }) => {
2121
}, [messages]);
2222

2323
return (
24-
<Accordion defaultActiveKey="0" className='mt-3' onSelect={(eventKey) => setIsAccordionOpen(eventKey === "0")}>
24+
<Accordion defaultActiveKey="0" className='mt-3' onSelect={(eventKey) => setIsAccordionOpen(eventKey === "0")} style={{ height: '100%' }}>
2525
<Accordion.Item eventKey="0">
2626
<Accordion.Header>
2727
Chat
2828
</Accordion.Header>
29-
<Accordion.Body>
29+
<Accordion.Body style={{ display: 'flex', flexDirection: 'column'}}>
3030
<div
3131
ref={chatContainerRef}
3232
style={{
33-
maxHeight: '300px',
33+
minHeight: '33vh',
34+
maxHeight: '33vh',
35+
flex: 1,
3436
overflowY: 'auto',
3537
marginBottom: '1rem',
3638
}}
@@ -68,19 +70,20 @@ const Chat = ({ currentUser, messages, sendMessage }) => {
6870
</ListGroup>
6971
</div>
7072
{isAccordionOpen && ( // Only show message input when accordion is open
71-
<Form onSubmit={(e) => { e.preventDefault(); handleSend(); }}>
72-
<Form.Group controlId="messageInput">
73+
<Form onSubmit={(e) => { e.preventDefault(); handleSend(); }} style={{ display: 'flex', alignItems: 'center' }}>
74+
<Form.Group controlId="messageInput" style={{ flex: 1, marginRight: '10px' }}> {/* Makes input take available space */}
7375
<Form.Control
7476
type="text"
7577
placeholder="Type a message..."
7678
value={text}
7779
onChange={(e) => setText(e.target.value)}
7880
/>
7981
</Form.Group>
80-
<Button variant="primary" type="submit" className="mt-2">
82+
<Button variant="primary" type="submit">
8183
Send
8284
</Button>
8385
</Form>
86+
8487
)}
8588
</Accordion.Body>
8689
</Accordion.Item>

‎Frontend/src/components/collab/CodeSpace.jsx‎

Lines changed: 43 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,29 +5,58 @@ import { Container, Stack, Spinner } from 'react-bootstrap'
55
const CodeSpace = ({ handleEditorChange, loading, code, language, output, isError }) => {
66
return (
77

8-
<Stack gap={3} className='h-100'>
8+
<Stack gap={3} className='h-100' style={{ height: '100vh' }}>
9+
{/* Editor Section (60% of viewport) */}
10+
<div style={{ borderRadius: '0.5rem', overflow: 'hidden', height: '60vh' }}>
911
<Editor
10-
height='400px'
12+
height="100%" // Make the editor fill the container
1113
defaultLanguage="python"
1214
language={language}
1315
value={code}
1416
onChange={handleEditorChange}
15-
theme='vs-dark'
17+
theme="vs-dark"
18+
options={{
19+
fontSize: 14 // Set font size here, adjust as needed
20+
}}
1621
/>
17-
<Container style={{ height: '225px', border: '1px solid #ccc', borderRadius: '0.5rem', padding: '1rem', backgroundColor: '#f8f9fa', padding: '20px'}}>
18-
<h4>Output</h4>
19-
{loading ? (
20-
<div className="d-flex justify-content-center align-items-center" style={{ height: '100%' }}>
22+
</div>
23+
24+
{/* Output Section (40% of viewport) */}
25+
<Container
26+
style={{
27+
height: '30vh', // Occupies 40% of viewport height
28+
border: '1px solid #ccc',
29+
borderRadius: '0.5rem',
30+
padding: '1rem',
31+
backgroundColor: '#f8f9fa',
32+
}}
33+
>
34+
<p>Output</p>
35+
{loading ? (
36+
<div className="d-flex justify-content-center align-items-center" style={{ height: '100%' }}>
2137
<Spinner animation="border" variant="primary" />
2238
<span className="ms-1">Running...</span>
23-
</div>
24-
): (
25-
<div style={{ height: '150px', maxHeight: '150px', overflowY: 'auto', fontFamily: 'monospace', whiteSpace: 'pre-wrap', border: '1px solid rgba(0, 0, 0, 0.2)', borderRadius: '0.5rem'}}>
39+
</div>
40+
) : (
41+
<div
42+
style={{
43+
height: '90%',
44+
overflowY: 'auto',
45+
fontFamily: 'monospace',
46+
whiteSpace: 'pre-wrap',
47+
border: '1px solid rgba(0, 0, 0, 0.2)',
48+
borderRadius: '0.5rem',
49+
paddingLeft: '5px',
50+
paddingLeft: '10px',
51+
fontSize: '16'
52+
}}
53+
>
2654
<p style={{ color: isError ? 'red' : '#212529' }}>{output}</p>
27-
</div>
28-
)}
29-
</Container>
30-
</Stack>
55+
</div>
56+
)}
57+
</Container>
58+
</Stack>
59+
3160

3261
)
3362
}

‎Frontend/src/components/collab/CollabNavigationBar.jsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,12 @@ const CollabNavigationBar = ({ handleExit, users, handleCodeRun, setLanguage, la
2626

2727
{/* Run Code and Exit Buttons in Center */}
2828
<Nav className='mx-auto'>
29-
<Button onClick={handleCodeRun}>Run Code</Button>
29+
<Button
30+
onClick={handleCodeRun}
31+
style={{ backgroundColor: '#28a745', color: '#fff', border: 'none' }}
32+
>
33+
Run Code
34+
</Button>
3035
<Button variant="danger" className="ms-2" onClick={handleExit}>Exit</Button>
3136
</Nav>
3237

‎Frontend/src/components/collab/CollaborationSpace.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -266,15 +266,15 @@ const CollaborationSpace = () => {
266266
<CollabNavigationBar handleExit={handleExit} handleCodeRun={handleCodeRun} users={users} setLanguage={setLanguage} language={language} userLangChange={handleLanguageChange}/>
267267
<Container fluid style={{ marginTop: '10px', height: 'calc(100vh - 60px)', display: 'flex', overflow: 'hidden' }}>
268268
<Row style={{ flexGrow: 1, width: '100%', height: '100%', overflow: 'hidden' }}>
269-
<Col md={6} style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
269+
<Col md={6} style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden', marginTop: '5px'}}>
270270
<CodeSpace handleEditorChange={handleEditorChange} loading={outputLoading} code={code} language={language} output={output} isError={isError}/>
271271
</Col>
272272
<Col md={6} style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
273-
<div style={{ flex: '60%', display: 'flex', overflow: 'hidden', width:'100%' }}>
273+
<div style={{ flex: 2, display: 'flex', overflow: 'hidden', width:'100%', minHeight:'0vh', marginTop:'5px'}}>
274274
<QuestionDisplay question={question} style={{width:'100%'}}/>
275275
</div>
276276

277-
<div style={{ flex: '40%', height:'100%', marginBottom: '20px' }}>
277+
<div style={{ flex: 2, height:'100%', marginBottom: '38px', maxHeight:'50vh'}}>
278278
<Chat currentUser={userId} messages={messages} sendMessage={sendMessage}/>
279279
</div>
280280

‎Frontend/src/components/collab/QuestionDisplay.jsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,10 @@ const QuestionDisplay = ({ question }) => {
1313

1414
return (
1515
<Card style={{ width: '100%' }}>
16-
<Card.Header>{question ? `${question.title} (${question.complexity})` : "Loading..."}</Card.Header>
16+
<Card.Header>{question ? <strong>{question.title} ({question.complexity})</strong> : "Loading..."}</Card.Header>
1717
<Card.Body style={{ textAlign: 'left' }}>
18-
<p>{question ? question.category.join(", ") : "Loading question description..."}</p>
18+
<p>{question ? "Category: " + question.category.join(", ") : "Loading question description..."}</p>
19+
<p> Description:</p>
1920
<p>{question ? question.description : "Loading question description..."}</p>
2021
</Card.Body>
2122
</Card>

0 commit comments

Comments
 (0)