Skip to content

Commit c7bc896

Browse files
bchou9bchou9
committed
UI tweaks for better use of space
1 parent 007a02f commit c7bc896

4 files changed

Lines changed: 89 additions & 41 deletions

File tree

‎frontend/src/components/Toolbar.js‎

Lines changed: 35 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ import ContentPasteIcon from "@mui/icons-material/ContentPaste";
1313
import SettingsIcon from "@mui/icons-material/Settings";
1414
import DownloadIcon from "@mui/icons-material/Download";
1515
import UploadIcon from "@mui/icons-material/Upload";
16+
import BrushIcon from "@mui/icons-material/Brush";
17+
import PaletteIcon from "@mui/icons-material/Palette";
18+
import StarIcon from "@mui/icons-material/Star";
1619
import DrawModeMenu from "../lib/drawModeMenu";
1720
import ShapeMenu from "../lib/shapeMenu";
1821
import BrushPanel from "./BrushEditor/BrushPanel";
@@ -21,9 +24,10 @@ import StampPanel from "./Stamps/StampPanel";
2124

2225
const actionButtonSX = {
2326
borderRadius: 1,
24-
width: 50,
27+
width: 40,
2528
height: 32,
2629
padding: 0,
30+
minWidth: 40,
2731
"& .MuiTouchRipple-root": {
2832
borderRadius: 1,
2933
},
@@ -89,9 +93,30 @@ const Toolbar = ({
8993
return (
9094
<div className="Canvas-toolbar">
9195
<div className="Canvas-tools">
92-
<button onClick={(e) => handleOpen(e, "brush")}>Brushes</button>
93-
<button onClick={(e) => handleOpen(e, "mixer")}>Mixer</button>
94-
<button onClick={(e) => handleOpen(e, "stamp")}>Stamps</button>
96+
<Tooltip title="Brushes">
97+
<IconButton
98+
onClick={(e) => handleOpen(e, "brush")}
99+
sx={actionButtonSX}
100+
>
101+
<BrushIcon />
102+
</IconButton>
103+
</Tooltip>
104+
<Tooltip title="Mixer">
105+
<IconButton
106+
onClick={(e) => handleOpen(e, "mixer")}
107+
sx={actionButtonSX}
108+
>
109+
<PaletteIcon />
110+
</IconButton>
111+
</Tooltip>
112+
<Tooltip title="Stamps">
113+
<IconButton
114+
onClick={(e) => handleOpen(e, "stamp")}
115+
sx={actionButtonSX}
116+
>
117+
<StarIcon />
118+
</IconButton>
119+
</Tooltip>
95120

96121
<Popover
97122
open={Boolean(anchorEl)}
@@ -170,9 +195,13 @@ const Toolbar = ({
170195
max={20}
171196
disabled={controlsDisabled}
172197
sx={{
173-
height: 150,
198+
height: 100,
174199
"& .MuiSlider-track": { color: "#007bff" },
175-
"& .MuiSlider-thumb": { backgroundColor: "#007bff" },
200+
"& .MuiSlider-thumb": {
201+
backgroundColor: "#007bff",
202+
width: 14,
203+
height: 14,
204+
},
176205
"& .MuiSlider-rail": { color: "#ccc" },
177206
}}
178207
/>

‎frontend/src/lib/drawModeMenu.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
ListItemText,
88
Tooltip
99
} from '@mui/material';
10-
import BrushIcon from '@mui/icons-material/Brush';
10+
import CreateIcon from '@mui/icons-material/Create';
1111
import EraserIcon from '@mui/icons-material/Delete';
1212
import ShapeIcon from '@mui/icons-material/ShapeLine';
1313
import PanToolIcon from '@mui/icons-material/PanTool';
@@ -27,7 +27,7 @@ export default function DrawModeMenu({
2727
const open = Boolean(anchorEl);
2828

2929
const modes = {
30-
freehand: { icon: <BrushIcon />, label: 'Freehand' },
30+
freehand: { icon: <CreateIcon />, label: 'Freehand' },
3131
eraser: { icon: <EraserIcon />, label: 'Eraser' },
3232
shape: { icon: <ShapeIcon />, label: 'Shape' },
3333
select: { icon: <PanToolIcon />, label: 'Select' },
@@ -68,9 +68,10 @@ export default function DrawModeMenu({
6868
onClick={handleClick}
6969
sx={{
7070
borderRadius: 1,
71-
width: 50,
71+
width: 40,
7272
height: 32,
7373
padding: 0,
74+
minWidth: 40,
7475
'& .MuiTouchRipple-root': {
7576
borderRadius: 1,
7677
},

‎frontend/src/pages/Room.jsx‎

Lines changed: 28 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -261,7 +261,7 @@ export default function Room({ auth }) {
261261
top: 20,
262262
right: 0,
263263
bottom: 20,
264-
width: showUserList ? 240 : 20,
264+
width: showUserList ? 150 : 20,
265265
transition: 'width 0.3s ease',
266266
pointerEvents: 'none',
267267
}}
@@ -276,8 +276,8 @@ export default function Room({ auth }) {
276276
left: 0,
277277
top: '50%',
278278
transform: 'translateY(-50%)',
279-
width: 20,
280-
height: 60,
279+
width: 16,
280+
height: 50,
281281
display: 'flex',
282282
alignItems: 'center',
283283
justifyContent: 'center',
@@ -305,7 +305,7 @@ export default function Room({ auth }) {
305305
height: '100%',
306306
display: 'flex',
307307
flexDirection: 'column',
308-
borderRadius: '20px 0 0 20px',
308+
borderRadius: '12px 0 0 12px',
309309
overflow: 'hidden',
310310
background: '#25D8C5',
311311
pointerEvents: 'all',
@@ -314,7 +314,7 @@ export default function Room({ auth }) {
314314
{/* Fixed Header */}
315315
<Box
316316
sx={{
317-
height: 70,
317+
height: 42,
318318
backgroundImage: `
319319
linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
320320
url('/toolbar/toolbar-bg.jpeg')
@@ -327,6 +327,7 @@ export default function Room({ auth }) {
327327
justifyContent: 'center',
328328
color: 'white',
329329
fontWeight: 'bold',
330+
fontSize: '0.9rem',
330331
fontFamily: 'Comic Sans MS, cursive',
331332
flexShrink: 0,
332333
}}
@@ -340,22 +341,29 @@ export default function Room({ auth }) {
340341
flexGrow: 1,
341342
overflowY: 'auto',
342343
backdropFilter: 'blur(4px)',
343-
padding: 1,
344+
padding: 0.5,
344345
}}
345346
>
346-
<List dense>
347+
<List dense sx={{ py: 0 }}>
347348
{userList && userList.map((group, index) => {
348349
// group is expected to be { periodStart, users: [...] }
349350
if (group && group.periodStart !== undefined) {
350351
const label = formatDateMs(group.periodStart);
351352
const expanded = expandedGroups.includes(group.periodStart);
352353
return (
353354
<div key={group.periodStart}>
354-
<ListItem disablePadding>
355-
<ListItemButton onClick={() => toggleGroup(group.periodStart)}>
355+
<ListItem disablePadding sx={{ py: 0 }}>
356+
<ListItemButton
357+
onClick={() => toggleGroup(group.periodStart)}
358+
sx={{ py: 0.5, minHeight: 32 }}
359+
>
356360
<ListItemText
357361
primary={label}
358-
primaryTypographyProps={{ color: '#17635a', fontWeight: 'bold' }}
362+
primaryTypographyProps={{
363+
color: '#17635a',
364+
fontWeight: 'bold',
365+
fontSize: '0.8rem'
366+
}}
359367
/>
360368
</ListItemButton>
361369
</ListItem>
@@ -366,11 +374,13 @@ export default function Room({ auth }) {
366374
(typeof selectedUser === 'object' && selectedUser.user === user && selectedUser.periodStart === group.periodStart)
367375
);
368376
return (
369-
<ListItem key={`${group.periodStart}-${uidx}`} disablePadding sx={{ pl: 2 }}>
377+
<ListItem key={`${group.periodStart}-${uidx}`} disablePadding sx={{ pl: 1, py: 0 }}>
370378
<ListItemButton
371379
onClick={() => setSelectedUser(isSelected ? "" : { user: user, periodStart: group.periodStart })}
372380
selected={Boolean(isSelected)}
373381
sx={{
382+
py: 0.5,
383+
minHeight: 32,
374384
borderRadius: 1,
375385
'&.Mui-selected': {
376386
backgroundColor: theme.palette.action.hover,
@@ -380,12 +390,12 @@ export default function Room({ auth }) {
380390
}
381391
}}
382392
>
383-
<Avatar sx={{ bgcolor: theme.palette.primary.light, mr: 2 }}>
393+
<Avatar sx={{ bgcolor: theme.palette.primary.light, mr: 1, width: 28, height: 28, fontSize: '0.9rem' }}>
384394
{username.charAt(0).toUpperCase()}
385395
</Avatar>
386396
<ListItemText
387397
primary={username}
388-
primaryTypographyProps={{ color: '#17635a' }}
398+
primaryTypographyProps={{ color: '#17635a', fontSize: '0.8rem' }}
389399
/>
390400
</ListItemButton>
391401
</ListItem>
@@ -398,11 +408,13 @@ export default function Room({ auth }) {
398408
const username = (user || '').split("|")[0];
399409
const isSelected = selectedUser === user;
400410
return (
401-
<ListItem key={index} disablePadding>
411+
<ListItem key={index} disablePadding sx={{ py: 0 }}>
402412
<ListItemButton
403413
onClick={() => setSelectedUser(isSelected ? "" : user)}
404414
selected={Boolean(isSelected)}
405415
sx={{
416+
py: 0.5,
417+
minHeight: 32,
406418
borderRadius: 1,
407419
'&.Mui-selected': {
408420
backgroundColor: theme.palette.action.hover,
@@ -412,12 +424,12 @@ export default function Room({ auth }) {
412424
}
413425
}}
414426
>
415-
<Avatar sx={{ bgcolor: theme.palette.primary.light, mr: 2 }}>
427+
<Avatar sx={{ bgcolor: theme.palette.primary.light, mr: 1, width: 28, height: 28, fontSize: '0.9rem' }}>
416428
{username.charAt(0).toUpperCase()}
417429
</Avatar>
418430
<ListItemText
419431
primary={username}
420-
primaryTypographyProps={{ color: '#17635a' }}
432+
primaryTypographyProps={{ color: '#17635a', fontSize: '0.8rem' }}
421433
/>
422434
</ListItemButton>
423435
</ListItem>

‎frontend/src/styles/Canvas.css‎

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -24,22 +24,22 @@
2424

2525
background-color: #25D8C5;
2626
background-Color: 'rgba(0, 0, 0, 0.3)';
27-
padding: 10px;
28-
border-radius: 0 20px 20px 0;
27+
padding: 6px;
28+
border-radius: 0 12px 12px 0;
2929
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
3030
backdrop-filter: blur(10px);
3131
border-right: 1px solid rgba(200, 200, 200, 0.3);
3232

3333
display: flex;
3434
flex-direction: column;
3535
align-items: center;
36-
gap: 12px;
36+
gap: 4px;
3737

3838
min-width: 40px;
3939
max-width: 48px;
4040
max-height: 60vh;
4141
overflow-y: auto;
42-
width: 80px;
42+
width: 52px;
4343
height: 100vh;
4444

4545
scrollbar-width: thin;
@@ -89,7 +89,7 @@
8989
.Canvas-label-group {
9090
display: flex;
9191
align-items: center;
92-
gap: 8px;
92+
gap: 4px;
9393
}
9494

9595
.Canvas-label {
@@ -103,16 +103,16 @@
103103
border: 2px solid #007bff;
104104
outline: none;
105105
cursor: pointer;
106-
height: 40px;
107-
width: 40px;
106+
height: 28px;
107+
width: 28px;
108108
border-radius: 50%;
109109
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
110110
background-color: transparent;
111111
transition: transform 0.2s ease, box-shadow 0.2s ease;
112112
}
113113

114114
.Canvas-input-color:hover {
115-
transform: scale(1.1);
115+
transform: scale(1.08);
116116
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
117117
}
118118

@@ -151,9 +151,9 @@
151151
}
152152

153153
.Canvas-color-display {
154-
width: 40px;
155-
height: 40px;
156-
border-radius: 8px;
154+
width: 28px;
155+
height: 28px;
156+
border-radius: 6px;
157157
cursor: pointer;
158158
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
159159
border: 2px solid #ddd;
@@ -263,10 +263,11 @@ body {
263263
background: transparent;
264264
border: none;
265265
color: #333;
266-
margin: 5px 0;
266+
margin: 2px 0;
267267
font-weight: 500;
268268
cursor: pointer;
269269
transition: all 0.2s ease;
270+
font-size: 0.85rem;
270271
}
271272

272273
.Canvas-toolbar button:hover {
@@ -278,7 +279,7 @@ body {
278279
display: flex;
279280
flex-direction: column;
280281
align-items: center;
281-
margin: 8px 0;
282+
margin: 2px 0;
282283
}
283284

284285
.Canvas-color-display {
@@ -297,17 +298,22 @@ body {
297298
.Canvas-tools {
298299
display: flex;
299300
flex-direction: column;
300-
gap: 6px;
301-
margin-bottom: 10px;
301+
gap: 2px;
302+
margin-bottom: 4px;
302303
}
303304

304305
.Canvas-tools button {
305-
width: 60px;
306+
width: 40px;
307+
height: 32px;
308+
padding: 4px;
306309
border-radius: 6px;
307310
border: 1px solid rgba(150, 150, 150, 0.2);
308311
background: rgba(255, 255, 255, 0.8);
309312
cursor: pointer;
310313
transition: all 0.2s ease;
314+
display: flex;
315+
align-items: center;
316+
justify-content: center;
311317
}
312318

313319
.Canvas-tools button:hover {

0 commit comments

Comments
 (0)