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

Commit b3c2828

Browse files
namos2502namos2502
committed
Major UI/UX update
1 parent d153b39 commit b3c2828

8 files changed

Lines changed: 175 additions & 53 deletions

File tree

‎src/components/CreateBoardModal.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ const CreateBoardModal = ({
1111
const [boardName, setBoardName] = useState<string>('');
1212

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

1718
const handleFormSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
@@ -39,6 +40,8 @@ const CreateBoardModal = ({
3940
}
4041
};
4142

43+
const isButtonDisabled: boolean = boardName === ''; //checking if boardName is empty? using trim in handle input
44+
4245
return createPortal(
4346
<div className='modal-overlay'>
4447
<div className='modal'>
@@ -53,7 +56,11 @@ const CreateBoardModal = ({
5356
required
5457
/>
5558
<div className='modal-btns'>
56-
<button className='modal-submit' type='submit'>
59+
<button
60+
className='modal-submit'
61+
type='submit'
62+
disabled={isButtonDisabled}
63+
>
5764
Save
5865
</button>
5966
<button

‎src/components/Settings.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
2+

‎src/containers/LeftContainer.tsx‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ const LeftContainer = ({ user, setCurrentBoard }: ContainerProps) => {
88
const [creatingBoard, setCreatingBoard] = useState<boolean>(false);
99
// creating state to store the list of board names
1010
const [boardList, setBoardList] = useState<BoardListItemState[]>([]);
11+
//state for selected board
12+
const [selectedBoard, setSelectedBoard] = useState<string | null>(null);
1113
// make a request for all board naames, return an array containing strings of the board names
1214
useEffect(() => {
1315
const fetchBoardList = async () => {
@@ -25,6 +27,7 @@ const LeftContainer = ({ user, setCurrentBoard }: ContainerProps) => {
2527
name: e.currentTarget.name,
2628
id: e.currentTarget.id,
2729
});
30+
setSelectedBoard(e.currentTarget.id);
2831
};
2932

3033
// function for creating a new board
@@ -34,28 +37,27 @@ const LeftContainer = ({ user, setCurrentBoard }: ContainerProps) => {
3437
};
3538

3639
// iterate through board names push buttons or components into array boardlist in state
37-
const boardSelectors = [];
38-
for (let i = 0; i < boardList.length; i++) {
39-
boardSelectors.push(
40-
<button
41-
className='board-selector'
42-
onClick={handleBoardSelect}
43-
name={boardList[i].name}
44-
id={boardList[i].id}
45-
key={i}
46-
>
47-
{boardList[i].name}
48-
</button>
49-
);
50-
}
40+
const boardSelectors = boardList.map((board, index) => (
41+
<button
42+
className={`board-selector ${
43+
selectedBoard === board.id ? 'selected' : ''
44+
}`}
45+
onClick={handleBoardSelect}
46+
name={board.name}
47+
id={board.id}
48+
key={index}
49+
>
50+
{board.name}
51+
</button>
52+
));
5153

5254
return (
5355
<div className='left-container'>
5456
<h1 className='heading'>Hello, {user.name}</h1>
57+
<button className='new-board-btn' onClick={handleCreateBoard}>
58+
Create New Board +
59+
</button>
5560
<div className='boards-info'>
56-
<button className='new-board-btn' onClick={handleCreateBoard}>
57-
Create New Board +
58-
</button>
5961
<div className='board-selectors'>{boardSelectors}</div>
6062
</div>
6163
{creatingBoard ? (
@@ -66,7 +68,7 @@ const LeftContainer = ({ user, setCurrentBoard }: ContainerProps) => {
6668
/>
6769
) : null}
6870
<footer>
69-
<button className='settings-btn'>Settings</button>
71+
<button className='setting-button'>Setting</button>
7072
</footer>
7173
</div>
7274
);

‎src/main.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ import './scss/app.scss';
77
ReactDOM.createRoot(document.getElementById('root')!).render(
88
<React.StrictMode>
99
<BrowserRouter>
10-
<App />
10+
<div className='app'>
11+
<App />
12+
</div>
1113
</BrowserRouter>
1214
</React.StrictMode>
1315
);

‎src/scss/app.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,10 @@ body {
1111
#root {
1212
height: 100%;
1313
}
14+
15+
.app {
16+
display: flex;
17+
justify-content: center;
18+
align-items: center;
19+
height: 100vh; // Optionally, you can set the height to the viewport height for vertical centering
20+
}

‎src/scss/authWrapper.scss‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
width: 300px;
33
padding: 20px;
44
font-weight: bold;
5-
font-size: medium;
5+
font-size: large;
66
font-family: monospace;
77
display: flex;
88
flex-direction: column; /* Align items vertically */
@@ -24,19 +24,32 @@
2424

2525
.auth-submit {
2626
align-self: center;
27-
background-color: #4caf50;
28-
color: #fff;
27+
background-color: #61db65;
28+
color: black;
2929
padding: 10px;
3030
border: 1px solid black;
3131
border-radius: 4px;
32+
width: 100px;
33+
cursor: pointer;
34+
transition: 0.3s ease-in-out;
35+
&:hover {
36+
color: white;
37+
background-color: #3b8a3e;
38+
}
3239
}
3340

3441
.auth-switch {
3542
align-self: center;
3643
margin-top: 10px;
37-
background-color: #2196f3;
38-
color: #fff;
44+
background-color: #2ea1ff;
45+
color: black;
3946
border: 1px solid black;
40-
padding: 8px;
47+
padding: 10px;
4148
border-radius: 4px;
49+
cursor: pointer;
50+
transition: 0.3s ease-in-out;
51+
&:hover {
52+
color: white;
53+
background-color: rgb(24, 97, 157);
54+
}
4255
}

‎src/scss/leftContainer.scss‎

Lines changed: 94 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,24 +6,29 @@
66
display: flex;
77
flex-direction: column;
88
justify-content: space-between;
9-
text-align: center; /* Center text horizontally */
9+
text-align: center;
1010
h1 {
1111
padding: 10px;
1212
}
1313
footer {
1414
margin-top: auto;
15-
height: fit-content;
15+
height: 60px;
1616
}
17-
.settings-btn {
18-
margin: 20px;
19-
border: 2px solid rgb(169, 166, 166);
20-
border-radius: 10px;
17+
.setting-button {
18+
border: none;
2119
background-color: rgb(22, 22, 22);
2220
color: white;
2321
font-size: x-large;
2422
padding: 10px;
23+
height: 100%;
24+
width: 100%;
25+
letter-spacing: 5px;
26+
transition: all 0.3s;
27+
2528
&:hover {
2629
background-color: rgb(54, 53, 53);
30+
letter-spacing: 15px;
31+
color: white(255, 255, 255, 0.7);
2732
}
2833
}
2934
}
@@ -32,6 +37,9 @@
3237
flex-direction: column;
3338
justify-content: space-between;
3439
align-items: center;
40+
max-height: 450px;
41+
overflow-y: auto;
42+
margin-top: 20px;
3543
}
3644
.board-selector {
3745
display: flex;
@@ -45,23 +53,91 @@
4553
font-weight: bold;
4654
font-size: large;
4755
width: 200px;
48-
margin: 10px;
56+
margin-top: 10px;
57+
margin-bottom: 10px;
58+
transition: all 0.2s ease-in-out;
59+
4960
&:hover {
50-
border: 2px solid rgb(195, 255, 14);
51-
}
52-
&:target {
53-
border: 2px solid rgb(195, 255, 14);
61+
border: 2px solid #c3ff0e;
5462
}
5563
}
64+
.selected {
65+
border: 2px solid #c3ff0e;
66+
transform: scale(1.1);
67+
text-transform: uppercase;
68+
box-shadow: 0 0 10px rgba(195, 255, 14, 0.5);
69+
}
70+
71+
//styling for Create board Button
5672
.new-board-btn {
5773
align-self: center;
58-
border: 2px solid rgb(22, 22, 22);
59-
border-radius: 10px;
60-
background-color: rgb(22, 22, 22);
61-
color: white;
6274
font-size: large;
63-
padding: 10px;
64-
&:hover {
65-
background-color: rgb(54, 53, 53);
75+
width: 220px;
76+
height: 50px;
77+
border: none;
78+
outline: none;
79+
color: #fff;
80+
background: rgb(15, 15, 15);
81+
cursor: pointer;
82+
position: relative;
83+
z-index: 0;
84+
border-radius: 5px;
85+
86+
&:before {
87+
content: '';
88+
background: linear-gradient(
89+
45deg,
90+
#ff0000,
91+
#ff7300,
92+
#fffb00,
93+
#48ff00,
94+
#00ffd5,
95+
#002bff,
96+
#7a00ff,
97+
#ff00c8,
98+
#ff0000
99+
);
100+
position: absolute;
101+
top: -2px;
102+
left: -2px;
103+
background-size: 400%;
104+
z-index: -1;
105+
filter: blur(5px);
106+
width: calc(100% + 4px);
107+
height: calc(100% + 4px);
108+
animation: glowing 20s linear infinite; //animation apply here
109+
opacity: 0;
110+
transition: opacity 0.4s ease-in-out;
111+
border-radius: 10px;
112+
}
113+
// &:hover {
114+
// background-color: rgb(54, 53, 53);
115+
// }
116+
&:after {
117+
z-index: -1;
118+
content: '';
119+
position: absolute;
120+
width: 100%;
121+
height: 100%;
122+
background: rgb(15, 15, 15);
123+
left: 0;
124+
top: 0;
125+
border-radius: 10px;
126+
}
127+
&:hover:before {
128+
opacity: 1;
129+
}
130+
}
131+
132+
//keyframe is for animated
133+
@keyframes glowing {
134+
0% {
135+
background-position: 0 0;
136+
}
137+
50% {
138+
background-position: 400% 0;
139+
}
140+
100% {
141+
background-position: 0 0;
66142
}
67143
}

‎src/scss/modal.scss‎

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@
2828
text-align: center;
2929
font-size: 32px;
3030
color: goldenrod;
31-
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
32-
"Lucida Sans", Arial, sans-serif;
31+
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
32+
'Lucida Sans', Arial, sans-serif;
3333
}
3434

3535
.modal-input {
@@ -38,8 +38,8 @@
3838
width: 100%;
3939
box-sizing: border-box;
4040
font-size: 18px;
41-
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
42-
"Lucida Sans", Arial, sans-serif;
41+
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
42+
'Lucida Sans', Arial, sans-serif;
4343
}
4444

4545
.modal-btns {
@@ -48,21 +48,34 @@
4848

4949
button {
5050
font-size: 18px;
51-
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
52-
"Lucida Sans", Arial, sans-serif;
51+
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
52+
'Lucida Sans', Arial, sans-serif;
5353
padding: 10px 20px;
5454
border: none;
55-
border-radius: 10px;
55+
border-radius: 5px;
5656
}
5757

5858
.modal-submit {
59-
background-color: #4caf50;
59+
background-color: #c3ff0e;
6060
width: 100px;
61+
cursor: pointer;
62+
transition: all 0.3s ease-in-out;
63+
&:disabled {
64+
background-color: gray;
65+
}
66+
&:hover {
67+
transform: scale(1.1);
68+
}
6169
}
6270

6371
.modal-cancel {
6472
background-color: goldenrod;
6573
width: 100px;
74+
cursor: pointer;
75+
transition: all 0.3s ease-in-out;
76+
&:hover {
77+
transform: scale(1.1);
78+
}
6679
}
6780
}
6881
}

0 commit comments

Comments
 (0)