Rsr2425 commited on
Commit
ec3efc6
·
1 Parent(s): 86a183e

Made FE more attractive

Browse files
frontend/src/App.tsx CHANGED
@@ -6,14 +6,42 @@ import ProblemAnswer from './components/ProblemAnswer';
6
  import Topics from './components/Topics';
7
  import { useState } from 'react';
8
  import { Problem } from './types/Problem';
 
9
 
10
  const theme = createTheme({
11
  palette: {
 
12
  primary: {
13
- main: '#1976d2',
14
  },
15
  background: {
16
- default: '#f5f5f5',
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
17
  },
18
  },
19
  });
@@ -95,9 +123,19 @@ function App() {
95
  return (
96
  <ThemeProvider theme={theme}>
97
  <CssBaseline />
98
- <Container maxWidth="md" sx={{ py: 4 }}>
 
 
 
 
 
 
 
 
 
 
 
99
  <Header />
100
- <DocumentInput />
101
  <Grid container spacing={2} sx={{ mb: 2 }}>
102
  <Grid item xs={12} md={4}>
103
  <Topics onTopicChange={handleTopicChange} />
@@ -106,6 +144,7 @@ function App() {
106
  <QuizGenerator onProblemsGenerated={handleProblemsGenerated} />
107
  </Grid>
108
  </Grid>
 
109
 
110
  {problems.map((problem, index) => (
111
  <Box key={index} sx={{ mb: 4 }}>
 
6
  import Topics from './components/Topics';
7
  import { useState } from 'react';
8
  import { Problem } from './types/Problem';
9
+ import './styles/global.css';
10
 
11
  const theme = createTheme({
12
  palette: {
13
+ mode: 'dark',
14
  primary: {
15
+ main: '#90caf9',
16
  },
17
  background: {
18
+ default: '#1a1a1a',
19
+ paper: '#242424',
20
+ },
21
+ text: {
22
+ primary: '#ffffff',
23
+ secondary: 'rgba(255, 255, 255, 0.7)',
24
+ },
25
+ },
26
+ components: {
27
+ MuiCssBaseline: {
28
+ styleOverrides: {
29
+ body: {
30
+ backgroundImage: `
31
+ linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
32
+ linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px)
33
+ `,
34
+ backgroundSize: '20px 20px',
35
+ backgroundPosition: '-1px -1px',
36
+ },
37
+ },
38
+ },
39
+ MuiPaper: {
40
+ styleOverrides: {
41
+ root: {
42
+ backgroundImage: 'none',
43
+ },
44
+ },
45
  },
46
  },
47
  });
 
123
  return (
124
  <ThemeProvider theme={theme}>
125
  <CssBaseline />
126
+ <Container
127
+ maxWidth="md"
128
+ sx={{
129
+ py: 4,
130
+ '& .MuiPaper-root': {
131
+ backgroundColor: 'background.paper',
132
+ backdropFilter: 'blur(10px)',
133
+ borderRadius: 2,
134
+ boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
135
+ },
136
+ }}
137
+ >
138
  <Header />
 
139
  <Grid container spacing={2} sx={{ mb: 2 }}>
140
  <Grid item xs={12} md={4}>
141
  <Topics onTopicChange={handleTopicChange} />
 
144
  <QuizGenerator onProblemsGenerated={handleProblemsGenerated} />
145
  </Grid>
146
  </Grid>
147
+ <DocumentInput />
148
 
149
  {problems.map((problem, index) => (
150
  <Box key={index} sx={{ mb: 4 }}>
frontend/src/components/DocumentInput.tsx CHANGED
@@ -1,9 +1,11 @@
1
- import { TextField, Button, Box, Alert } from '@mui/material';
2
  import { useState } from 'react';
3
 
4
  function DocumentInput() {
5
  const [url, setUrl] = useState('');
6
  const [showSuccess, setShowSuccess] = useState(false);
 
 
7
 
8
  const handleSubmit = async () => {
9
  try {
@@ -12,41 +14,103 @@ function DocumentInput() {
12
  headers: {
13
  'Content-Type': 'application/json',
14
  },
15
- body: JSON.stringify({ url }),
 
 
 
16
  });
17
  if (!response.ok) throw new Error('Network response was not ok');
18
  setShowSuccess(true);
 
 
19
  } catch (error) {
20
  console.error('Error:', error);
21
  }
22
  };
23
 
24
- const handleUrlChange = (e: React.ChangeEvent<HTMLInputElement>) => {
25
- setUrl(e.target.value);
26
- if (showSuccess) {
27
- setShowSuccess(false);
28
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
29
  };
30
 
 
 
31
  return (
32
  <Box sx={{ mb: 4 }}>
33
- <Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
34
- <TextField
35
- fullWidth
36
- label="Source Documentation"
37
- value={url}
38
- onChange={handleUrlChange}
39
- />
40
- <Button variant="contained" onClick={handleSubmit}>
41
- Scan
42
  </Button>
43
  </Box>
 
44
  {showSuccess && (
45
  <Alert severity="success" sx={{ mt: 1 }}>
46
  Source documentation imported successfully!
47
  </Alert>
48
  )}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
49
  </Box>
50
  );
51
  }
 
52
  export default DocumentInput;
 
1
+ import { TextField, Button, Box, Alert, Modal, Typography } from '@mui/material';
2
  import { useState } from 'react';
3
 
4
  function DocumentInput() {
5
  const [url, setUrl] = useState('');
6
  const [showSuccess, setShowSuccess] = useState(false);
7
+ const [isModalOpen, setIsModalOpen] = useState(false);
8
+ const [topicName, setTopicName] = useState('');
9
 
10
  const handleSubmit = async () => {
11
  try {
 
14
  headers: {
15
  'Content-Type': 'application/json',
16
  },
17
+ body: JSON.stringify({
18
+ url,
19
+ topic: topicName
20
+ }),
21
  });
22
  if (!response.ok) throw new Error('Network response was not ok');
23
  setShowSuccess(true);
24
+ setTopicName('');
25
+ setUrl('');
26
  } catch (error) {
27
  console.error('Error:', error);
28
  }
29
  };
30
 
31
+ const handleModalConfirm = () => {
32
+ setIsModalOpen(false);
33
+ handleSubmit();
34
+ };
35
+
36
+ const handleModalClose = () => {
37
+ setIsModalOpen(false);
38
+ setTopicName('');
39
+ setUrl('');
40
+ };
41
+
42
+ const modalStyle = {
43
+ position: 'absolute',
44
+ top: '50%',
45
+ left: '50%',
46
+ transform: 'translate(-50%, -50%)',
47
+ width: 400,
48
+ bgcolor: 'background.paper',
49
+ boxShadow: 24,
50
+ p: 4,
51
+ borderRadius: 2,
52
  };
53
 
54
+ const isFormValid = url.trim() && topicName.trim();
55
+
56
  return (
57
  <Box sx={{ mb: 4 }}>
58
+ <Box sx={{ display: 'flex', justifyContent: 'center' }}>
59
+ <Button
60
+ variant="contained"
61
+ onClick={() => setIsModalOpen(true)}
62
+ sx={{ width: '300px' }}
63
+ >
64
+ Add New Docs
 
 
65
  </Button>
66
  </Box>
67
+
68
  {showSuccess && (
69
  <Alert severity="success" sx={{ mt: 1 }}>
70
  Source documentation imported successfully!
71
  </Alert>
72
  )}
73
+
74
+ <Modal
75
+ open={isModalOpen}
76
+ onClose={handleModalClose}
77
+ aria-labelledby="topic-modal-title"
78
+ >
79
+ <Box sx={modalStyle}>
80
+ <Typography id="topic-modal-title" variant="h6" component="h2" sx={{ mb: 3 }}>
81
+ Add New Documentation
82
+ </Typography>
83
+
84
+ <TextField
85
+ fullWidth
86
+ label="Source Documentation URL"
87
+ value={url}
88
+ onChange={(e: React.ChangeEvent<HTMLInputElement>) => setUrl(e.target.value)}
89
+ sx={{ mb: 2 }}
90
+ />
91
+
92
+ <TextField
93
+ fullWidth
94
+ label="Topic Name"
95
+ value={topicName}
96
+ onChange={(e: React.ChangeEvent<HTMLInputElement>) => setTopicName(e.target.value)}
97
+ sx={{ mb: 3 }}
98
+ />
99
+
100
+ <Box sx={{ display: 'flex', gap: 2, justifyContent: 'flex-end' }}>
101
+ <Button onClick={handleModalClose}>Cancel</Button>
102
+ <Button
103
+ variant="contained"
104
+ onClick={handleModalConfirm}
105
+ disabled={!isFormValid}
106
+ >
107
+ Confirm
108
+ </Button>
109
+ </Box>
110
+ </Box>
111
+ </Modal>
112
  </Box>
113
  );
114
  }
115
+
116
  export default DocumentInput;
frontend/src/styles/global.css ADDED
@@ -0,0 +1,28 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ body {
2
+ min-height: 100vh;
3
+ margin: 0;
4
+ padding: 0;
5
+ }
6
+
7
+ /* Add smooth transitions for theme changes */
8
+ * {
9
+ transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
10
+ }
11
+
12
+ /* Custom scrollbar for webkit browsers */
13
+ ::-webkit-scrollbar {
14
+ width: 8px;
15
+ }
16
+
17
+ ::-webkit-scrollbar-track {
18
+ background: rgba(255, 255, 255, 0.1);
19
+ }
20
+
21
+ ::-webkit-scrollbar-thumb {
22
+ background: rgba(255, 255, 255, 0.2);
23
+ border-radius: 4px;
24
+ }
25
+
26
+ ::-webkit-scrollbar-thumb:hover {
27
+ background: rgba(255, 255, 255, 0.3);
28
+ }