Merge pull request #27 from BUMETCS673/sean-dev

Create Style Files and Add Button Components(Save, Delete, Login...)

Author: prlara23Pro

code/frontend/src/App.tsx

@@ -1,13 +1,11 @@
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import Main from './pages/Main';
-import MyJobs from './pages/MyJobs';
 
 function App() {
   return (
     <BrowserRouter>
       <Routes>
-        <Route path="/" element={<Main />} />
-        <Route path="/my-jobs" element={<MyJobs />} />
+        <Route path="/myJobs" element={<div>My Jobs Page</div>} />
+        <Route path="/" element={<div>Main Page</div>} />
       </Routes>
     </BrowserRouter>
   );

code/frontend/src/assets/logo.png

@@ -0,0 +1,18 @@
+.apply-button {
+  padding: 0.75rem 1.5rem;
+  font-size: 1.1rem; 
+  font-weight: bold;
+  cursor: pointer; 
+  text-align: center;
+  
+  background-color: #ff4136;
+  color: white; 
+  border: none;
+  border-radius: 8px;
+
+  transition: background-color 0.2s ease;
+}
+
+.apply-button:hover {
+  background-color: #e02f23;
+}

code/frontend/src/components/buttons/.temGitPlaceholder

@@ -0,0 +1,16 @@
+import React from 'react';
+import './Apply.css';
+
+interface ApplyProps {
+  onClick: () => void;
+}
+
+const Apply: React.FC<ApplyProps> = ({ onClick }) => {
+  return (
+    <button className="apply-button" onClick={onClick}>
+      Apply
+    </button>
+  );
+};
+
+export default Apply;

code/frontend/src/components/buttons/Apply.css

@@ -0,0 +1,24 @@
+.delete-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  line-height: 1;
+  font-size: 1.5rem;
+  font-weight: normal;
+  cursor: pointer;
+  
+  background-color: white;
+  color: #ff4136;
+  border: 2px solid #ff4136;
+  border-radius: 8px;
+
+  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+}
+
+.delete-button:hover {
+  background-color: #ffeded;
+  color: #e02f23;
+  border-color: #e02f23;
+}

code/frontend/src/components/buttons/Apply.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import './DeleteButton.css';
+
+interface DeleteButtonProps {
+  onClick: () => void;
+}
+
+const DeleteButton: React.FC<DeleteButtonProps> = ({ onClick }) => {
+  return (
+    <button className="delete-button" onClick={onClick} aria-label="Delete item">
+      &times;
+    </button>
+  );
+};
+
+export default DeleteButton;

code/frontend/src/components/buttons/Delete.css

@@ -0,0 +1,15 @@
+.delete-all-button {
+  padding: 0.75rem 1.5rem;
+  border: none;
+  border-radius: 4px;
+  background-color: #dc3545;
+  color: black;
+  font-size: 1rem;
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.delete-all-button:hover {
+  background-color: #c82333;
+}

code/frontend/src/components/buttons/Delete.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import './DeleteAll.css';
+
+const DeleteAll: React.FC = () => {
+  const handleClick = () => {
+    if (window.confirm('Are you sure you want to delete all jobs? This action cannot be undone.')) {
+      alert('All jobs deleted.');
+    }
+  };
+
+  return (
+    <button className="delete-all-button" onClick={handleClick}>
+      Delete All
+    </button>
+  );
+};
+
+export default DeleteAll;

code/frontend/src/components/buttons/DeleteAll.css

@@ -0,0 +1,16 @@
+.filter-select {
+  padding: 0.5rem 1.2rem; 
+  font-size: 1.1rem;
+  font-family: serif;
+  text-align: center;
+  
+  color: black;
+  background-color: white;
+  border: 2px solid #D9534F;
+  border-radius: 15px;
+  cursor: pointer;
+
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}