Skip to content
This repository was archived by the owner on Mar 21, 2026. It is now read-only.

Commit d9da638

Browse files
johnlcosjohnlcos
committed
additional styling
1 parent 646a024 commit d9da638

8 files changed

Lines changed: 174 additions & 80 deletions

File tree

‎src/components/EditBoardModal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const EditBoardModal = ({
1212

1313
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
1414
const inputValue: string = e.target.value;
15-
setBoardName(inputValue.trim()); //edge case for whitespace
15+
setBoardName(inputValue); //edge case for whitespace
1616
};
1717

1818
const handleFormSubmit = async (e: React.FormEvent<HTMLFormElement>) => {

‎src/components/EditTaskModal.tsx‎

Lines changed: 64 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,9 @@ const EditTaskModal = ({
107107
<div className="modal">
108108
<form className="modal-form" onSubmit={handleFormSubmit}>
109109
<h2 className="modal-title">Edit Task</h2>
110-
<label htmlFor="taskname">Task Name: </label>
110+
<label htmlFor="taskname" className="modal-label">
111+
Task Name:{" "}
112+
</label>
111113
<input
112114
className="modal-input"
113115
name="taskname"
@@ -116,46 +118,69 @@ const EditTaskModal = ({
116118
onChange={handleInputChange}
117119
required
118120
/>
119-
<label htmlFor="modal-radio">Task Status: </label>
121+
<label htmlFor="modal-radio" className="modal-label">
122+
Task Status:{" "}
123+
</label>
120124
<div className="modal-radio">
121-
<input
122-
type="radio"
123-
name="status"
124-
id="backlog"
125-
value={"backlog"}
126-
onChange={handleInputChange}
127-
defaultChecked={task.status === "backlog"}
128-
/>
129-
<label htmlFor="backlog">Backlog</label>
130-
<input
131-
type="radio"
132-
name="status"
133-
id="in-progress"
134-
value={"inProgress"}
135-
onChange={handleInputChange}
136-
defaultChecked={task.status === "inProgress"}
137-
/>
138-
<label htmlFor="in-progress">In Progress</label>
139-
<input
140-
type="radio"
141-
name="status"
142-
id="in-review"
143-
value={"inReview"}
144-
onChange={handleInputChange}
145-
defaultChecked={task.status === "inReview"}
146-
/>
147-
<label htmlFor="in-review">In Review</label>
148-
<input
149-
type="radio"
150-
name="status"
151-
id="completed"
152-
value={"completed"}
153-
onChange={handleInputChange}
154-
defaultChecked={task.status === "completed"}
155-
/>
156-
<label htmlFor="completed">Completed</label>
125+
<div className="modal-radio-pair">
126+
<input
127+
type="radio"
128+
name="status"
129+
id="backlog"
130+
value={"backlog"}
131+
onChange={handleInputChange}
132+
defaultChecked={task.status === "backlog"}
133+
/>
134+
<label htmlFor="backlog" className="modal-option">
135+
Backlog
136+
</label>
137+
</div>
138+
139+
<div className="modal-radio-pair">
140+
<input
141+
type="radio"
142+
name="status"
143+
id="in-progress"
144+
value={"inProgress"}
145+
onChange={handleInputChange}
146+
defaultChecked={task.status === "inProgress"}
147+
/>
148+
<label htmlFor="in-progress" className="modal-option">
149+
In Progress
150+
</label>
151+
</div>
152+
153+
<div className="modal-radio-pair">
154+
<input
155+
type="radio"
156+
name="status"
157+
id="in-review"
158+
value={"inReview"}
159+
onChange={handleInputChange}
160+
defaultChecked={task.status === "inReview"}
161+
/>
162+
<label htmlFor="in-review" className="modal-option">
163+
In Review
164+
</label>
165+
</div>
166+
167+
<div className="modal-radio-pair">
168+
<input
169+
type="radio"
170+
name="status"
171+
id="completed"
172+
value={"completed"}
173+
onChange={handleInputChange}
174+
defaultChecked={task.status === "completed"}
175+
/>
176+
<label htmlFor="completed" className="modal-option">
177+
Completed
178+
</label>
179+
</div>
157180
</div>
158-
<label htmlFor="tasknotes">Task Notes: </label>
181+
<label htmlFor="tasknotes" className="modal-label">
182+
Task Notes:{" "}
183+
</label>
159184
<textarea
160185
className="modal-input text"
161186
name="tasknotes"

‎src/components/NewTaskModal.tsx‎

Lines changed: 58 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,9 @@ const NewTaskModal = ({
6464
<div className="modal">
6565
<form className="modal-form" onSubmit={handleFormSubmit}>
6666
<h2 className="modal-title">New Task</h2>
67-
<label htmlFor="taskname">Task Name: </label>
67+
<label htmlFor="taskname" className="modal-label">
68+
Task Name:{" "}
69+
</label>
6870
<input
6971
className="modal-input"
7072
name="taskname"
@@ -73,43 +75,63 @@ const NewTaskModal = ({
7375
onChange={handleInputChange}
7476
required
7577
/>
76-
<label htmlFor="modal-radio">Task Status: </label>
78+
<label htmlFor="modal-radio" className="modal-label">
79+
Task Status:{" "}
80+
</label>
7781
<div className="modal-radio">
78-
<input
79-
type="radio"
80-
name="status"
81-
id="backlog"
82-
value={"backlog"}
83-
onChange={handleInputChange}
84-
defaultChecked
85-
/>
86-
<label htmlFor="backlog">Backlog</label>
87-
<input
88-
type="radio"
89-
name="status"
90-
id="in-progress"
91-
value={"inProgress"}
92-
onChange={handleInputChange}
93-
/>
94-
<label htmlFor="in-progress">In Progress</label>
95-
<input
96-
type="radio"
97-
name="status"
98-
id="in-review"
99-
value={"inReview"}
100-
onChange={handleInputChange}
101-
/>
102-
<label htmlFor="in-review">In Review</label>
103-
<input
104-
type="radio"
105-
name="status"
106-
id="completed"
107-
value={"completed"}
108-
onChange={handleInputChange}
109-
/>
110-
<label htmlFor="completed">Completed</label>
82+
<div className="modal-radio-pair">
83+
<input
84+
type="radio"
85+
name="status"
86+
id="backlog"
87+
value={"backlog"}
88+
onChange={handleInputChange}
89+
defaultChecked
90+
/>
91+
<label htmlFor="backlog" className="modal-option">
92+
Backlog
93+
</label>
94+
</div>
95+
<div className="modal-radio-pair">
96+
<input
97+
type="radio"
98+
name="status"
99+
id="in-progress"
100+
value={"inProgress"}
101+
onChange={handleInputChange}
102+
/>
103+
<label htmlFor="in-progress" className="modal-option">
104+
In Progress
105+
</label>
106+
</div>
107+
<div className="modal-radio-pair">
108+
<input
109+
type="radio"
110+
name="status"
111+
id="in-review"
112+
value={"inReview"}
113+
onChange={handleInputChange}
114+
/>
115+
<label htmlFor="in-review" className="modal-option">
116+
In Review
117+
</label>
118+
</div>
119+
<div className="modal-radio-pair">
120+
<input
121+
type="radio"
122+
name="status"
123+
id="completed"
124+
value={"completed"}
125+
onChange={handleInputChange}
126+
/>
127+
<label htmlFor="completed" className="modal-option">
128+
Completed
129+
</label>
130+
</div>
111131
</div>
112-
<label htmlFor="tasknotes">Task Notes: </label>
132+
<label htmlFor="tasknotes" className="modal-label">
133+
Task Notes:{" "}
134+
</label>
113135
<textarea
114136
className="modal-input text"
115137
name="tasknotes"

‎src/scss/columnContainer.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,25 @@
1111
background-color: rgb(70, 70, 70);
1212
margin: 0px 10px;
1313
border-radius: 15px;
14+
box-shadow: 0 60px 30px -60px rgba(0, 0, 0, 0.45) inset,
15+
-60px 0 30px -60px rgba(0, 0, 0, 0.45) inset;
16+
17+
.column-title {
18+
font-size: 24px;
19+
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
20+
"Lucida Sans", Arial, sans-serif;
21+
}
1422

1523
.new-task-btn {
1624
width: 90%;
1725
padding: 10px;
1826
cursor: pointer;
27+
border-radius: 10px;
28+
border: none;
29+
font-size: 18px;
30+
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
31+
"Lucida Sans", Arial, sans-serif;
32+
box-shadow: 6.1px 12.2px 12.2px hsl(0deg 0% 0% / 0.31);
1933
}
2034
}
2135
}

‎src/scss/leftContainer.scss‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,11 @@
77
flex-direction: column;
88
justify-content: space-between;
99
text-align: center;
10-
h1 {
10+
11+
.heading {
1112
padding: 10px;
13+
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
14+
"Lucida Sans", Arial, sans-serif;
1215
}
1316
footer {
1417
margin-top: auto;

‎src/scss/mainContainer.scss‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,11 @@
1212
margin: 10px;
1313

1414
.edit-board-btn {
15-
padding: 5;
16-
height: fit-content;
15+
padding: 5px 10px;
16+
border: none;
17+
border-radius: 10px;
18+
background-color: lightgrey;
19+
cursor: pointer;
1720

1821
.edit-svg {
1922
width: 20px;
@@ -24,6 +27,9 @@
2427

2528
.board-title {
2629
margin: 0 auto;
30+
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
31+
"Lucida Sans", Arial, sans-serif;
32+
font-size: 32px;
2733
}
2834
}
2935
}

‎src/scss/modal.scss‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@
1717
padding: 30px;
1818
width: 35%;
1919
border-radius: 20px;
20+
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
21+
rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
2022

2123
.modal-form {
2224
display: flex;
@@ -43,6 +45,21 @@
4345
border-radius: 10px;
4446
}
4547

48+
.modal-radio {
49+
display: flex;
50+
justify-content: space-around;
51+
}
52+
53+
.modal-label {
54+
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
55+
"Lucida Sans", Arial, sans-serif;
56+
}
57+
58+
.modal-option {
59+
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
60+
"Lucida Sans", Arial, sans-serif;
61+
}
62+
4663
.text {
4764
height: 150px;
4865
}

‎src/scss/taskCard.scss‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,27 @@
11
.task-card {
22
background-color: #a0d308;
3-
padding: 5px;
3+
padding: 10px 5px 5px;
44
margin: 15px;
55
border-radius: 10px;
66
display: flex;
77
flex-direction: column;
88
gap: 10px;
9+
box-shadow: 6.1px 12.2px 12.2px hsl(0deg 0% 0% / 0.31);
910

1011
.task-name {
1112
color: black;
1213
margin: 0;
14+
font-size: 18px;
15+
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
16+
"Lucida Sans", Arial, sans-serif;
1317
}
1418

1519
.task-notes {
1620
color: black;
1721
margin: 0;
22+
font-size: 14px;
23+
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
24+
"Lucida Sans", Arial, sans-serif;
1825
}
1926

2027
.task-btns-container {

0 commit comments

Comments
 (0)