Skip to content

Commit

Permalink
Merge pull request #2 from CanopyTax/updated-styling
Browse files Browse the repository at this point in the history
clean up form and layout
  • Loading branch information
rhys-childs authored Jul 23, 2024
2 parents 4772423 + 7d879c8 commit eb08ddc
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 33 deletions.
43 changes: 18 additions & 25 deletions src/App.css
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,18 @@ body {
padding: 0;
}

.App {
max-width: 600px;
.content {
padding: 20px;
max-width: 800px;
margin: 50px auto;
background: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}

.content {
padding: 20px;
}

form {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}

input {
Expand All @@ -38,6 +34,7 @@ button {
color: white;
border-radius: 4px;
cursor: pointer;
font-weight: 600;
}

button:hover {
Expand All @@ -51,11 +48,10 @@ ul {

li {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
background: #f9f9f9;
padding: 10px;
border: 1px solid #eee;
border: 1px solid #dddedf;
border-radius: 4px;
margin-bottom: 10px;
}
Expand All @@ -73,23 +69,20 @@ li span.completed {
.filter-buttons {
display: flex;
justify-content: center;
margin-bottom: 20px;
}

.filter-buttons button {
margin: 0 5px;
padding: 10px 20px;
border: none;
background-color: #007bff;
color: white;
border-radius: 4px;
cursor: pointer;
align-items: center;
gap: 10px;
}

.filter-buttons button:hover {
background-color: #0056b3;
.task-item {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}

.task-item button {
margin-right: 10px
.task-item-buttons {
display: flex;
gap: 10px;
margin-left: auto;
align-items: center;
}
25 changes: 22 additions & 3 deletions src/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,26 @@ import "./App.css";

function App() {
const [tasks, setTasks] = useState([
{ name: "created task 1", completed: false },
{ name: "edited task", completed: false },
{ name: "new cool task", completed: true },
{
name: "Complete TPS reports",
completed: false,
addedBy: { id: 1, name: "Kevin" },
},
{
name: "Reconcile Dunder Mifflin accounts",
completed: false,
addedBy: { id: 2, name: "Angela" },
},
{
name: "Review Peter's timesheet",
completed: true,
addedBy: { id: 1, name: "Oscar" },
},
{
name: "Party Planning Committee expense reports",
completed: false,
addedBy: { id: 2, name: "Angela" },
},
]);
const [filter, setFilter] = useState("all");

Expand All @@ -19,6 +36,8 @@ function App() {
<div className="App">
<div className="content">
<TaskForm setTasks={setTasks} />
</div>
<div className="content">
<FilterButtons setFilter={setFilter} />
<TaskList tasks={tasks} filter={filter} setTasks={setTasks} />
</div>
Expand Down
14 changes: 9 additions & 5 deletions src/components/TaskItem.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,15 @@ function TaskItem({ task, index, setTasks }) {

return (
<li className="task-item">
<span className={task.completed ? "completed" : ""}>{task.name}</span>
<button onClick={toggleCompletion}>
{task.completed ? "Undo" : "Complete"}
</button>
<button onClick={deleteTask}>Delete</button>
<div className="task-item-header">
<span className={task.completed ? "completed" : ""}>{task.name}</span>
</div>
<div className="task-item-buttons">
<button onClick={toggleCompletion}>
{task.completed ? "Undo" : "Complete"}
</button>
<button onClick={deleteTask}>Delete</button>
</div>
</li>
);
}
Expand Down

0 comments on commit eb08ddc

Please sign in to comment.