added button icons and other styles

frontend/package-lock.json

@@ -11,6 +11,7 @@
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.5",
         "@fortawesome/fontawesome-free": "^6.5.2",
+        "@mui/icons-material": "^5.16.1",
         "@mui/material": "^5.16.1",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
@@ -3576,6 +3577,31 @@
         "url": "https://opencollective.com/mui-org"
       }
     },
+    "node_modules/@mui/icons-material": {
+      "version": "5.16.1",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.16.1.tgz",
+      "integrity": "sha512-ogQPweYba4+5XZykilwxn2/oS78uwoQ0BVBpOhhCJo0ooZsqTTsalhzP2qD/RdGqMQ8xyXPz1sYM2djTruVVVA==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@mui/material": "^5.0.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/material": {
       "version": "5.16.1",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.16.1.tgz",
@@ -21086,6 +21112,14 @@
       "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.1.tgz",
       "integrity": "sha512-62Jq7ACYi/55Kjkh/nVfEL3F3ytTYTsdB8MGJ9iI+eRQv+Aoem5CPUAzQihUo25qqh1VkVu9/jQn3dFbyrXHgw=="
     },
+    "@mui/icons-material": {
+      "version": "5.16.1",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.16.1.tgz",
+      "integrity": "sha512-ogQPweYba4+5XZykilwxn2/oS78uwoQ0BVBpOhhCJo0ooZsqTTsalhzP2qD/RdGqMQ8xyXPz1sYM2djTruVVVA==",
+      "requires": {
+        "@babel/runtime": "^7.23.9"
+      }
+    },
     "@mui/material": {
       "version": "5.16.1",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.16.1.tgz",

frontend/package.json

@@ -6,6 +6,7 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@fortawesome/fontawesome-free": "^6.5.2",
+    "@mui/icons-material": "^5.16.1",
     "@mui/material": "^5.16.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",

frontend/src/App.js

@@ -7,12 +7,19 @@ import FacultyDashboard from './pages/FacultyDashboard';
 import ManageStudents from './pages/ManageStudents';
 import Courses from './pages/Courses';
 import CourseDetails from './pages/CourseDetails';
-import FacultySidebar from './components/FacultySidebar';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 
 
+
+const theme = createTheme({
+
+});
+
+
 function App() {
   return (
+    <ThemeProvider theme={theme}>
     <BrowserRouter>
     <Routes>
       <Route path="/" element={<LoginPage />} />
@@ -25,6 +32,7 @@ function App() {
       <Route path="/Courses" element={<Courses />} />
     </Routes>
     </BrowserRouter>
+  </ThemeProvider>
   );
 }
 

frontend/src/components/FacultySidebar.js

-// src/frontend/components/Sidebar.js
 import React from 'react';
 import { Button } from 'react-bootstrap';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import '@fortawesome/fontawesome-free/css/all.min.css';
 import '/home/sangwonlee/project_cresendo/frontend/src/styles/Sidebar.css';
 import AutoStoriesOutlinedIcon from '@mui/icons-material/AutoStoriesOutlined';
+import PeopleIcon from '@mui/icons-material/People';
+import SettingsIcon from '@mui/icons-material/Settings';
+import LogoutIcon from '@mui/icons-material/Logout';
 
 const FacultySidebar = ({ isOpen, toggleSidebar, handleLogout, user, handleClickManageStudents, handleClickCourses }) => (
     <div style={{
@@ -33,17 +35,22 @@ const FacultySidebar = ({ isOpen, toggleSidebar, handleLogout, user, handleClick
                         <p>{user ? (user.role === 'student' ? 'Faculty' : 'Student') : 'Loading...'}</p>
                     </div>
                     <div style={{ marginTop: '2rem', textAlign: 'center' }}>
-                        <Button onClick={handleClickCourses} className="custom-button mb-4">
+                        <Button onClick={handleClickCourses} className="custom-button mb-4 button-spacing">
+                        <AutoStoriesOutlinedIcon className="icon"/>
                             Courses</Button>
-                        <Button onClick={handleClickManageStudents} className="custom-button mb-4">Manage Students</Button>
-                        <Button variant="light" className="custom-button mb-4">Settings</Button>
+                        <Button onClick={handleClickManageStudents} className="custom-button mb-4">
+                        <PeopleIcon className="icon"/>
+                            Manage Students</Button>
+                        <Button variant="light" className="custom-button mb-4">
+                        <SettingsIcon className="icon"/>
+                            Settings</Button>
+                        <Button onClick={handleLogout} className="custom-button mb-4">
+                            <LogoutIcon className="icon"/>
+                    Sign Out</Button>
                     </div>
                 </>
             )}
         </div>
-        <div style={{ textAlign: 'center' }}>
-            <Button onClick={handleLogout} className="custom-button mb-4">Sign Out</Button>
-        </div>
     </div>
 );
 

frontend/src/index.js

 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
-import { ThemeProvider, createTheme } from '@mui/material/styles';
-import CssBaseline from '@mui/material/CssBaseline';
 import reportWebVitals from './reportWebVitals';
 import "bootstrap/dist/css/bootstrap.min.css";
 import "bootstrap/dist/js/bootstrap.bundle.min";
@@ -10,8 +8,6 @@ import '/home/sangwonlee/project_cresendo/frontend/src/styles/Sidebar.css';
 
 
 
-
-
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>

frontend/src/pages/CourseDetails.js

@@ -9,7 +9,6 @@ import '@fortawesome/fontawesome-free/css/all.min.css';
 import FacultySidebar from '../components/FacultySidebar';
 import '/home/sangwonlee/project_cresendo/frontend/src/styles/Sidebar.css';
 
-
 const MainContent = ({ children, isSidebarOpen }) => (
     <div style={{
         marginLeft: isSidebarOpen ? '250px' : '80px',

frontend/src/pages/Courses.js

@@ -8,6 +8,7 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 import '@fortawesome/fontawesome-free/css/all.min.css';
 import '/home/sangwonlee/project_cresendo/frontend/src/styles/courseDetails.css';
 import FacultySidebar from '../components/FacultySidebar';
+import '/home/sangwonlee/project_cresendo/frontend/src/styles/courses.css'
 
 
 const Container = ({ children }) => (
@@ -102,8 +103,8 @@ const Courses = () => {
           if (response.status === 200) {
             toast.success('Course deleted successfully!');
             setCourses(courses.filter(course => course._id !== selectedCourseId));
-            setShowDeleteModal(false); 
-            setSelectedCourseId(null); // 추가
+            setShowDeleteModal(false);
+            setSelectedCourseId(null);
           }
         } catch (error) {
           toast.error('Failed to delete course');
@@ -175,12 +176,12 @@ const Courses = () => {
 
     return (
         <div>
-          <ToastContainer />
+          <ToastContainer/>
           <Container>
             <FacultySidebar isOpen={isSidebarOpen} toggleSidebar={toggleSidebar} handleLogout={handleLogout} user={user} handleClickDashboard={handleClickDashboard} handleClickManageStudents={handleClickManageStudents} />
             <MainContent isSidebarOpen={isSidebarOpen}>
               <h1>Courses</h1>
-              <div style={{ textAlign: 'center', marginTop: '50px' }}>
+              <div style={{textAlign: 'center', marginTop: '50px'}}>
                 <Row>
                   <Col>
                     <div className="d-flex flex-column align-items-center">
@@ -208,7 +209,10 @@ const Courses = () => {
                     </div>
                   </Col>
                   <Col>
-                    <Button variant="primary" onClick={() => {setShowModal(true); setSelectedCourseId(null); setCourseName(''); setTerm(''); setCrn('');}}>Create New Course</Button>
+                    <Button variant="primary" onClick={() => 
+                      {setShowModal(true); setSelectedCourseId(null); setCourseName(''); setTerm(''); setCrn('');}} 
+                      className='create-course-button'>
+                      Create New Course</Button>
                   </Col>
                 </Row>
                 <Modal show={showModal} onHide={() => setShowModal(false)}>

frontend/src/styles/Sidebar.css

@@ -18,4 +18,5 @@
 
 .custom-button .icon {
     margin-right: 10px; 
-}
\ No newline at end of file
+}
+

frontend/src/styles/courses.css

+.create-course-button {
+    background-color: transparent;
+    color: black;
+    border: 2px solid black;
+    padding: 10px 10px;
+    border-radius: 5px;
+    font-size: 16px; 
+    cursor: pointer; 
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s; 
+    display: flex; 
+    align-items: center;
+    box-shadow: none;
+}
+
+.create-course-button:hover {
+    background-color: black;
+    color: white; 
+    border-color: black;
+}
\ No newline at end of file