Skip to content

Commit ac20ff5

Browse files
Leo7DengLeo7Deng
committed
Update dashboard UI and hover
1 parent 840575e commit ac20ff5

4 files changed

Lines changed: 101 additions & 106 deletions

File tree

‎backend/middleware/middleware.go‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ func AddCorsHeaders(handler http.HandlerFunc) http.HandlerFunc {
1313
if r.Header.Get("Origin") == "http://localhost:3000" {
1414
w.Header().Set("Access-Control-Allow-Origin", "http://localhost:3000")
1515
}
16-
if r.Header.Get("Origin") == "https://chatapp.leo7deng.com" {
17-
w.Header().Set("Access-Control-Allow-Origin", "https://chatapp.leo7deng.com")
16+
if r.Header.Get("Origin") == "https://leo7deng.github.io" {
17+
w.Header().Set("Access-Control-Allow-Origin", "https://leo7deng.github.io")
1818
}
1919
w.Header().Set("Access-Control-Allow-Credentials", "true")
2020
w.Header().Set("Access-Control-Allow-Methods", "POST, OPTIONS, DELETE, GET")

‎frontend/app/components/Dashboard.css‎

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@
8282
}
8383

8484
.sidebar {
85-
width: 8vh;
85+
width: 4rem;
8686
z-index: 10;
8787
border-right: 1px solid hsl(0, 0%, 87%);
8888
}
@@ -124,4 +124,38 @@
124124
.spinner {
125125
color: rgb(0, 0, 0);
126126
fill: rgb(255, 255, 255);
127+
}
128+
129+
.left-column {
130+
display: flex;
131+
flex-direction: column;
132+
align-items: center;
133+
gap: 0.2rem;
134+
}
135+
136+
.button-size {
137+
width: 2.5rem;
138+
height: 2.5rem;
139+
min-height: 2.5rem;
140+
color: hsl(0, 0%, 40%);
141+
border-radius: 0.25rem;
142+
display: flex;
143+
justify-content: center;
144+
align-items: center;
145+
position: relative;
146+
}
147+
148+
.button-size:hover {
149+
background: hsl(0, 0%, 94%);
150+
color: hsl(0, 0%, 15%);
151+
}
152+
153+
.circles {
154+
background-color: hsl(0, 0%, 97%);
155+
}
156+
157+
.selected-circle {
158+
background-color: hsl(221, 83%, 83%);
159+
color: hsl(0, 0%, 0%);
160+
pointer-events: none;
127161
}

‎frontend/app/components/Dashboard.tsx‎

Lines changed: 63 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -357,49 +357,14 @@ export default function Dashboard() {
357357
</span>
358358
</div>
359359

360-
<div className="border-t" style={{ borderColor: 'hsl(0, 0%, 87%)' }}>
360+
<div>
361361
<div className="px-2">
362-
<div className="py-2">
363-
<a
364-
className="t group relative flex justify-center rounded px-2 py-1.5 text-gray-500 hover:bg-gray-50 hover:text-gray-700"
365-
>
366-
<svg
367-
xmlns="http://www.w3.org/2000/svg"
368-
className="size-5 opacity-75"
369-
fill="none"
370-
viewBox="0 0 24 24"
371-
stroke="currentColor"
372-
strokeWidth="2"
373-
>
374-
<path
375-
strokeLinecap="round"
376-
strokeLinejoin="round"
377-
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
378-
/>
379-
<path
380-
strokeLinecap="round"
381-
strokeLinejoin="round"
382-
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
383-
/>
384-
</svg>
385-
386-
<span
387-
className="invisible absolute start-full top-1/2 ms-4 -translate-y-1/2 rounded bg-gray-900 px-2 py-1.5 text-xs font-medium text-white group-hover:visible whitespace-nowrap"
388-
>
389-
General
390-
</span>
391-
</a>
392-
</div>
393-
394-
<ul className="space-y-1 border-t pt-4" style={{ borderColor: 'hsl(0, 0%, 87%)' }}>
362+
<ul className="left-column space-y-1 border-t pt-4" style={{ borderColor: 'hsl(0, 0%, 87%)' }}>
395363
{circles.map((circle) => (
396364
<li key={circle.id} className="flex justify-center">
397365
<button onClick={() => setSelectedCircleID(circle.id)} className="w-full">
398366
<a
399-
className={`group relative flex justify-center rounded px-2 py-1.5 ${selectedCircleID === circle.id
400-
? "bg-blue-100 text-gray-700"
401-
: "text-gray-500 hover:bg-gray-50 hover:text-gray-700"
402-
}`}
367+
className={`circles button-size group ${selectedCircleID === circle.id ? "selected-circle" : ""}`}
403368
>
404369
<svg
405370
xmlns="http://www.w3.org/2000/svg"
@@ -417,15 +382,15 @@ export default function Dashboard() {
417382
</svg>
418383

419384
<span
420-
className="invisible absolute start-full top-1/2 ms-4 -translate-y-1/2 rounded bg-gray-900 px-2 py-1.5 text-xs font-medium text-white group-hover:visible whitespace-nowrap"
385+
className="invisible absolute start-full top-1/2 ms-5 -translate-y-1/2 rounded bg-gray-900 px-2 py-1.5 text-xs font-medium text-white group-hover:visible whitespace-nowrap"
421386
>
422387
{circle.name}
423388
</span>
424389
</a>
425390
</button>
426391
</li>
427392
))}
428-
<li>
393+
{/* <li>
429394
<a
430395
className="group relative flex justify-center rounded px-2 py-1.5 text-gray-500 hover:bg-gray-50 hover:text-gray-700"
431396
>
@@ -450,69 +415,65 @@ export default function Dashboard() {
450415
Account
451416
</span>
452417
</a>
453-
</li>
454-
455-
456-
<li className="flex justify-center">
457-
<button
458-
className="group relative flex justify-center rounded px-2 py-1.5 text-gray-500 hover:bg-gray-50 hover:text-gray-700 w-full"
459-
onClick={createCircle}
460-
>
461-
<svg
462-
id="Layer_1"
463-
data-name="Layer 1"
464-
xmlns="http://www.w3.org/2000/svg"
465-
viewBox="0 0 24 24"
466-
strokeWidth="2"
467-
opacity={0.75}
468-
width="24"
469-
height="24"
470-
stroke="currentColor"
471-
className="size-5 opacity-75"
472-
>
473-
<defs>
474-
<style>
475-
{`.cls-637642e7c3a86d32eae6f177-1{fill:none;stroke:currentColor;stroke-miterlimit:10;}`}
476-
</style>
477-
</defs>
478-
<path
479-
className="cls-637642e7c3a86d32eae6f177-1"
480-
d="M18.68,8.16V15.8a2.86,2.86,0,0,1-2.86,2.86H13.91v2.86L8.18,18.66H4.36A2.86,2.86,0,0,1,1.5,15.8V8.16A2.86,2.86,0,0,1,4.36,5.3H15.82A2.86,2.86,0,0,1,18.68,8.16Z"
481-
></path>
482-
<path
483-
className="cls-637642e7c3a86d32eae6f177-1"
484-
d="M18.68,14.84h1A2.86,2.86,0,0,0,22.5,12V4.34a2.86,2.86,0,0,0-2.86-2.86H8.18A2.86,2.86,0,0,0,5.32,4.34v1"
485-
></path>
486-
<line
487-
className="cls-637642e7c3a86d32eae6f177-1"
488-
x1="6.27"
489-
y1="11.98"
490-
x2="13.91"
491-
y2="11.98"
492-
></line>
493-
<line
494-
className="cls-637642e7c3a86d32eae6f177-1"
495-
x1="10.09"
496-
y1="8.16"
497-
x2="10.09"
498-
y2="15.8"
499-
></line>
500-
</svg>
501-
<span
502-
className="invisible absolute start-full top-1/2 ms-4 -translate-y-1/2 rounded bg-gray-900 px-2 py-1.5 text-xs font-medium text-white group-hover:visible whitespace-nowrap"
503-
>
504-
Add Circle
505-
</span>
506-
</button>
507-
</li>
418+
</li> */}
508419
</ul>
509420
</div>
510421
</div>
511422
</div>
512423

513-
<div className="sticky inset-x-0 bottom-0 border-t bg-white p-2" style={{ borderColor: 'hsl(0, 0%, 87%)' }}>
424+
<div className="left-column sticky inset-x-0 bottom-0 border-t bg-white ml-2 mr-2 pt-3 pb-3" style={{ borderColor: 'hsl(0, 0%, 87%)' }}>
425+
<button
426+
className="button-size group"
427+
onClick={createCircle}
428+
>
429+
<svg
430+
id="Layer_1"
431+
data-name="Layer 1"
432+
xmlns="http://www.w3.org/2000/svg"
433+
viewBox="0 0 24 24"
434+
strokeWidth="2"
435+
opacity={0.75}
436+
width="24"
437+
height="24"
438+
stroke="currentColor"
439+
className="size-5 opacity-75"
440+
>
441+
<defs>
442+
<style>
443+
{`.cls-637642e7c3a86d32eae6f177-1{fill:none;stroke:currentColor;stroke-miterlimit:10;}`}
444+
</style>
445+
</defs>
446+
<path
447+
className="cls-637642e7c3a86d32eae6f177-1"
448+
d="M18.68,8.16V15.8a2.86,2.86,0,0,1-2.86,2.86H13.91v2.86L8.18,18.66H4.36A2.86,2.86,0,0,1,1.5,15.8V8.16A2.86,2.86,0,0,1,4.36,5.3H15.82A2.86,2.86,0,0,1,18.68,8.16Z"
449+
></path>
450+
<path
451+
className="cls-637642e7c3a86d32eae6f177-1"
452+
d="M18.68,14.84h1A2.86,2.86,0,0,0,22.5,12V4.34a2.86,2.86,0,0,0-2.86-2.86H8.18A2.86,2.86,0,0,0,5.32,4.34v1"
453+
></path>
454+
<line
455+
className="cls-637642e7c3a86d32eae6f177-1"
456+
x1="6.27"
457+
y1="11.98"
458+
x2="13.91"
459+
y2="11.98"
460+
></line>
461+
<line
462+
className="cls-637642e7c3a86d32eae6f177-1"
463+
x1="10.09"
464+
y1="8.16"
465+
x2="10.09"
466+
y2="15.8"
467+
></line>
468+
</svg>
469+
<span
470+
className="invisible absolute start-full top-1/2 ms-5 -translate-y-1/2 rounded bg-gray-900 px-1.5 py-1.5 text-xs font-medium text-white group-hover:visible whitespace-nowrap"
471+
>
472+
Add Circle
473+
</span>
474+
</button>
514475
<button
515-
className="group relative flex w-full justify-center rounded-lg px-2 py-1.5 text-sm text-gray-500 hover:bg-gray-50 hover:text-gray-700"
476+
className="button-size group"
516477
onClick={() => {
517478
window.location.href = "./login";
518479
}}
@@ -532,7 +493,7 @@ export default function Dashboard() {
532493
/>
533494
</svg>
534495
<span
535-
className="invisible absolute start-full top-1/2 ms-4 -translate-y-1/2 rounded bg-gray-900 px-2 py-1.5 text-xs font-medium text-white group-hover:visible"
496+
className="invisible absolute start-full top-1/2 ms-5 -translate-y-1/2 rounded bg-gray-900 px-1.5 py-1.5 text-xs font-medium text-white group-hover:visible"
536497
>
537498
Logout
538499
</span>
@@ -554,7 +515,7 @@ export default function Dashboard() {
554515
<h1>{circles.find((circle) => circle.id === selectedCircleID)?.name}&nbsp;</h1>
555516
<div className="chat-menu">
556517
<button
557-
className="group relative rounded px-2 py-1.5 text-gray-500 hover:bg-gray-50 hover:text-gray-700 h-full disabled:opacity-50 disabled:cursor-not-allowed"
518+
className="button-size group disabled:opacity-50 disabled:cursor-not-allowed"
558519
onClick={selectedCircleID !== "" ? handleOpenInviteModal : undefined}
559520
disabled={selectedCircleID === ""}
560521
>
@@ -574,13 +535,13 @@ export default function Dashboard() {
574535
</g>
575536
</svg>
576537
<span
577-
className="invisible absolute start-1/2 top-full mt-4 -translate-x-1/2 rounded bg-gray-900 px-2 py-1.5 text-xs font-medium text-white group-hover:visible"
538+
className="invisible absolute start-1/2 top-full mt-5 -translate-x-1/2 rounded bg-gray-900 px-2 py-1.5 text-xs font-medium text-white group-hover:visible"
578539
>
579540
Invite Users
580541
</span>
581542
</button>
582543
<button
583-
className="group relative rounded px-2 py-1.5 text-gray-500 hover:bg-gray-50 hover:text-gray-700 h-full disabled:opacity-50 disabled:cursor-not-allowed"
544+
className="button-size group disabled:opacity-50 disabled:cursor-not-allowed"
584545
onClick={selectedCircleID !== "" ? handleDelete : undefined}
585546
disabled={selectedCircleID === ""}
586547
>
@@ -596,7 +557,7 @@ export default function Dashboard() {
596557
<path d="M 10 2 L 9 3 L 4 3 L 4 5 L 5 5 L 5 20 C 5 20.522222 5.1913289 21.05461 5.5683594 21.431641 C 5.9453899 21.808671 6.4777778 22 7 22 L 17 22 C 17.522222 22 18.05461 21.808671 18.431641 21.431641 C 18.808671 21.05461 19 20.522222 19 20 L 19 5 L 20 5 L 20 3 L 15 3 L 14 2 L 10 2 z M 7 5 L 17 5 L 17 20 L 7 20 L 7 5 z M 9 7 L 9 18 L 11 18 L 11 7 L 9 7 z M 13 7 L 13 18 L 15 18 L 15 7 L 13 7 z"></path>
597558
</svg>
598559
<span
599-
className="invisible absolute start-1/2 top-full mt-4 -translate-x-1/2 rounded bg-gray-900 px-2 py-1.5 text-xs font-medium text-white group-hover:visible"
560+
className="invisible absolute start-1/2 top-full mt-5 -translate-x-1/2 rounded bg-gray-900 px-1.5 py-1.5 text-xs font-medium text-white group-hover:visible"
600561
>
601562
Delete Circle
602563
</span>

‎frontend/app/components/InviteModal.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,4 +36,4 @@
3636
--tw-shadow: 0 1px 2px 0 rgb(59, 130, 246);
3737
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
3838
box-shadow: var(--tw-ring-offset-shadow, 0 0 rgb(59, 130, 246)), var(--tw-ring-shadow, 0 0 rgb(59, 130, 246)), var(--tw-shadow);
39-
}
39+
}

0 commit comments

Comments
 (0)