Made FE more attractive

frontend/src/App.tsx

@@ -6,14 +6,42 @@ import ProblemAnswer from './components/ProblemAnswer';
 import Topics from './components/Topics';
 import { useState } from 'react';
 import { Problem } from './types/Problem';
+import './styles/global.css';
 
 const theme = createTheme({
   palette: {
+    mode: 'dark',
     primary: {
-      main: '#1976d2',
+      main: '#90caf9',
     },
     background: {
-      default: '#f5f5f5',
+      default: '#1a1a1a',
+      paper: '#242424',
+    },
+    text: {
+      primary: '#ffffff',
+      secondary: 'rgba(255, 255, 255, 0.7)',
+    },
+  },
+  components: {
+    MuiCssBaseline: {
+      styleOverrides: {
+        body: {
+          backgroundImage: `
+            linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px)
+          `,
+          backgroundSize: '20px 20px',
+          backgroundPosition: '-1px -1px',
+        },
+      },
+    },
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          backgroundImage: 'none',
+        },
+      },
     },
   },
 });
@@ -95,9 +123,19 @@ function App() {
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />
-      <Container maxWidth="md" sx={{ py: 4 }}>
+      <Container 
+        maxWidth="md" 
+        sx={{ 
+          py: 4,
+          '& .MuiPaper-root': {
+            backgroundColor: 'background.paper',
+            backdropFilter: 'blur(10px)',
+            borderRadius: 2,
+            boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+          },
+        }}
+      >
         <Header />
-        <DocumentInput />
         <Grid container spacing={2} sx={{ mb: 2 }}>
           <Grid item xs={12} md={4}>
             <Topics onTopicChange={handleTopicChange} />
@@ -106,6 +144,7 @@ function App() {
             <QuizGenerator onProblemsGenerated={handleProblemsGenerated} />
           </Grid>
         </Grid>
+        <DocumentInput />
 
         {problems.map((problem, index) => (
           <Box key={index} sx={{ mb: 4 }}>

frontend/src/components/DocumentInput.tsx

@@ -1,9 +1,11 @@
-import { TextField, Button, Box, Alert } from '@mui/material';
+import { TextField, Button, Box, Alert, Modal, Typography } from '@mui/material';
 import { useState } from 'react';
 
 function DocumentInput() {
   const [url, setUrl] = useState('');
   const [showSuccess, setShowSuccess] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [topicName, setTopicName] = useState('');
 
   const handleSubmit = async () => {
     try {
@@ -12,41 +14,103 @@ function DocumentInput() {
         headers: {
           'Content-Type': 'application/json',
         },
-        body: JSON.stringify({ url }),
+        body: JSON.stringify({ 
+          url,
+          topic: topicName 
+        }),
       });
       if (!response.ok) throw new Error('Network response was not ok');
       setShowSuccess(true);
+      setTopicName('');
+      setUrl('');
     } catch (error) {
       console.error('Error:', error);
     }
   };
 
-  const handleUrlChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setUrl(e.target.value);
-    if (showSuccess) {
-      setShowSuccess(false);
-    }
+  const handleModalConfirm = () => {
+    setIsModalOpen(false);
+    handleSubmit();
+  };
+
+  const handleModalClose = () => {
+    setIsModalOpen(false);
+    setTopicName('');
+    setUrl('');
+  };
+
+  const modalStyle = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: 400,
+    bgcolor: 'background.paper',
+    boxShadow: 24,
+    p: 4,
+    borderRadius: 2,
   };
 
+  const isFormValid = url.trim() && topicName.trim();
+
   return (
     <Box sx={{ mb: 4 }}>
-      <Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
-        <TextField
-          fullWidth
-          label="Source Documentation"
-          value={url}
-          onChange={handleUrlChange}
-        />
-        <Button variant="contained" onClick={handleSubmit}>
-          Scan
+      <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+        <Button 
+          variant="contained" 
+          onClick={() => setIsModalOpen(true)}
+          sx={{ width: '300px' }}
+        >
+          Add New Docs
         </Button>
       </Box>
+
       {showSuccess && (
         <Alert severity="success" sx={{ mt: 1 }}>
           Source documentation imported successfully!
         </Alert>
       )}
+
+      <Modal
+        open={isModalOpen}
+        onClose={handleModalClose}
+        aria-labelledby="topic-modal-title"
+      >
+        <Box sx={modalStyle}>
+          <Typography id="topic-modal-title" variant="h6" component="h2" sx={{ mb: 3 }}>
+            Add New Documentation
+          </Typography>
+          
+          <TextField
+            fullWidth
+            label="Source Documentation URL"
+            value={url}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setUrl(e.target.value)}
+            sx={{ mb: 2 }}
+          />
+          
+          <TextField
+            fullWidth
+            label="Topic Name"
+            value={topicName}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setTopicName(e.target.value)}
+            sx={{ mb: 3 }}
+          />
+          
+          <Box sx={{ display: 'flex', gap: 2, justifyContent: 'flex-end' }}>
+            <Button onClick={handleModalClose}>Cancel</Button>
+            <Button 
+              variant="contained" 
+              onClick={handleModalConfirm}
+              disabled={!isFormValid}
+            >
+              Confirm
+            </Button>
+          </Box>
+        </Box>
+      </Modal>
     </Box>
   );
 }
+
 export default DocumentInput;

frontend/src/styles/global.css

@@ -0,0 +1,28 @@
+body {
+  min-height: 100vh;
+  margin: 0;
+  padding: 0;
+}
+
+/* Add smooth transitions for theme changes */
+* {
+  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
+}
+
+/* Custom scrollbar for webkit browsers */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}