Skip to content

Commit ecb1663

Browse files
Kabeer2004Kabeer2004
committed
fix (ui/ux): fixes to sidebar and settings pages
1 parent 7f83b62 commit ecb1663

2 files changed

Lines changed: 138 additions & 148 deletions

File tree

‎src/client/app/settings/page.js‎

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -25,18 +25,6 @@ import InteractiveNetworkBackground from "@components/ui/InteractiveNetworkBackg
2525
import CollapsibleSection from "@components/tasks/CollapsibleSection"
2626
import { sendNotificationToCurrentUser } from "@app/actions"
2727

28-
const HelpTooltip = ({ content }) => (
29-
<div className="fixed bottom-6 left-6 z-40">
30-
<button
31-
data-tooltip-id="page-help-tooltip"
32-
data-tooltip-content={content}
33-
className="p-1.5 rounded-full text-neutral-500 hover:text-white hover:bg-neutral-800/50 pulse-glow-animation"
34-
>
35-
<IconHelpCircle size={22} />
36-
</button>
37-
</div>
38-
)
39-
4028
const handleTestPush = async () => {
4129
const toastId = toast.loading("Sending test push notification...")
4230
try {
@@ -1107,7 +1095,7 @@ export default function SettingsPage() {
11071095
</header>
11081096

11091097
<main className="flex-1 overflow-y-auto px-4 sm:px-6 md:px-10 pb-4 sm:pb-6 md:pb-10 custom-scrollbar">
1110-
<HelpTooltip content="Customize your experience here." />
1098+
<tip content="Customize your experience here." />
11111099
<div className="w-full max-w-4xl mx-auto space-y-12 pt-8">
11121100
<ProfileSettings
11131101
initialData={profileData?.onboardingAnswers}

‎src/client/components/Sidebar.js‎

Lines changed: 137 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -608,7 +608,7 @@ const SidebarContent = ({
608608
</button>
609609
)}
610610

611-
<nav className="flex flex-col gap-1 flex-grow overflow-hidden">
611+
<nav className="flex flex-col gap-1 flex-grow overflow-y-auto min-h-[200px] custom-scrollbar">
612612
{navLinks.map((link) => {
613613
const isActive = pathname.startsWith(link.href)
614614
return (
@@ -635,162 +635,164 @@ const SidebarContent = ({
635635
})}
636636
<hr className="border-neutral-800 my-2" />
637637
</nav>
638-
<button
639-
onClick={onNotificationsOpen}
640-
className={cn(
641-
"flex items-center gap-3 rounded-md p-2 transition-colors duration-200 text-sm relative",
642-
"text-neutral-400 hover:text-white hover:bg-neutral-800/50",
643-
isCollapsed && "justify-center"
644-
)}
645-
>
646-
<IconBell size={20} />
647-
{!isCollapsed && (
648-
<span className="font-medium">Notifications</span>
649-
)}
650-
{unreadCount > 0 && (
651-
<div className="absolute top-1.5 right-1.5 h-2 w-2 bg-red-500 rounded-full" />
652-
)}
653-
</button>
638+
<div className="flex-shrink-0 space-y-2 max-h-[calc(100vh-300px)] overflow-y-auto custom-scrollbar">
639+
<button
640+
onClick={onNotificationsOpen}
641+
className={cn(
642+
"flex items-center gap-3 rounded-md p-2 transition-colors duration-200 text-sm relative",
643+
"text-neutral-400 hover:text-white hover:bg-neutral-800/50",
644+
isCollapsed && "justify-center"
645+
)}
646+
>
647+
<IconBell size={20} />
648+
{!isCollapsed && (
649+
<span className="font-medium">Notifications</span>
650+
)}
651+
{unreadCount > 0 && (
652+
<div className="absolute top-1.5 right-1.5 h-2 w-2 bg-red-500 rounded-full" />
653+
)}
654+
</button>
654655

655-
<div className="flex flex-col gap-2">
656-
{installPrompt && (
656+
<div className="flex flex-col gap-2 mt-2">
657+
{installPrompt && (
658+
<button
659+
onClick={handleInstallClick}
660+
className={cn(
661+
"w-full flex items-center gap-3 bg-green-600/20 border border-green-500/50 text-green-300 rounded-lg p-2 text-left text-sm hover:bg-green-600/40 transition-colors",
662+
isCollapsed && "justify-center"
663+
)}
664+
>
665+
<IconDownload size={20} className="flex-shrink-0" />
666+
{!isCollapsed && (
667+
<span className="font-medium whitespace-nowrap">
668+
Install App
669+
</span>
670+
)}
671+
</button>
672+
)}
673+
674+
{isMobile ? (
675+
<button
676+
onClick={onMobileClose}
677+
className="flex items-center gap-3 rounded-md p-2 transition-colors duration-200 text-sm text-neutral-400 hover:text-white hover:bg-neutral-800/50"
678+
>
679+
<IconLayoutSidebarLeftCollapse size={20} />
680+
<span className="font-medium whitespace-nowrap">
681+
Collapse
682+
</span>
683+
</button>
684+
) : (
685+
<button
686+
onClick={onToggle}
687+
className={cn(
688+
"flex items-center gap-3 rounded-md p-2 transition-colors duration-200 text-sm",
689+
"text-neutral-400 hover:text-white hover:bg-neutral-800/50",
690+
isCollapsed && "justify-center"
691+
)}
692+
>
693+
{isCollapsed ? (
694+
<IconLayoutSidebarLeftExpand size={20} />
695+
) : (
696+
<IconLayoutSidebarLeftCollapse size={20} />
697+
)}
698+
{!isCollapsed && (
699+
<span className="font-medium whitespace-nowrap">
700+
Collapse
701+
</span>
702+
)}
703+
</button>
704+
)}
657705
<button
658-
onClick={handleInstallClick}
706+
onClick={() => setComingSoonModalOpen(true)}
659707
className={cn(
660-
"w-full flex items-center gap-3 bg-green-600/20 border border-green-500/50 text-green-300 rounded-lg p-2 text-left text-sm hover:bg-green-600/40 transition-colors",
708+
"w-full flex items-center gap-3 bg-neutral-800/40 border border-neutral-700/80 rounded-lg p-2 text-left text-sm hover:bg-neutral-800/80 transition-colors",
661709
isCollapsed && "justify-center"
662710
)}
663711
>
664-
<IconDownload size={20} className="flex-shrink-0" />
712+
<IconCode
713+
size={20}
714+
className="text-neutral-400 flex-shrink-0"
715+
/>
665716
{!isCollapsed && (
666-
<span className="font-medium whitespace-nowrap">
667-
Install App
717+
<span className="font-medium text-neutral-300 whitespace-nowrap">
718+
Coming Soon
668719
</span>
669720
)}
670721
</button>
671-
)}
672-
673-
{isMobile ? (
674722
<button
675-
onClick={onMobileClose}
676-
className="flex items-center gap-3 rounded-md p-2 transition-colors duration-200 text-sm text-neutral-400 hover:text-white hover:bg-neutral-800/50"
723+
onClick={() => setHelpMenuOpen(true)}
724+
className={cn(
725+
"w-full flex items-center gap-3 bg-neutral-800/40 border border-neutral-700/80 rounded-lg p-2 text-left text-sm hover:bg-neutral-800/80 transition-colors",
726+
isCollapsed && "justify-center"
727+
)}
677728
>
678-
<IconLayoutSidebarLeftCollapse size={20} />
679-
<span className="font-medium whitespace-nowrap">
680-
Collapse
681-
</span>
729+
<IconHeadphones
730+
size={20}
731+
className="text-neutral-400 flex-shrink-0"
732+
/>
733+
{!isCollapsed && (
734+
<span className="font-medium text-neutral-300 whitespace-nowrap">
735+
Need help?
736+
</span>
737+
)}
682738
</button>
683-
) : (
684-
<button
685-
onClick={onToggle}
739+
<a
740+
href="https://forms.gle/7F4H3Pvy7fSdeeYm7"
741+
target="_blank"
742+
rel="noopener noreferrer"
686743
className={cn(
687-
"flex items-center gap-3 rounded-md p-2 transition-colors duration-200 text-sm",
688-
"text-neutral-400 hover:text-white hover:bg-neutral-800/50",
744+
"w-full flex items-center gap-3 bg-neutral-800/40 border border-neutral-700/80 rounded-lg p-2 text-left text-sm hover:bg-neutral-800/80 transition-colors",
689745
isCollapsed && "justify-center"
690746
)}
691747
>
692-
{isCollapsed ? (
693-
<IconLayoutSidebarLeftExpand size={20} />
694-
) : (
695-
<IconLayoutSidebarLeftCollapse size={20} />
748+
<IconBug
749+
size={20}
750+
className="text-neutral-400 flex-shrink-0"
751+
/>
752+
{!isCollapsed && (
753+
<span className="font-medium text-neutral-300 whitespace-nowrap">
754+
Report a Bug
755+
</span>
696756
)}
757+
</a>
758+
<a
759+
href="https://discord.gg/YwXdEvjKGe"
760+
target="_blank"
761+
rel="noopener noreferrer"
762+
className={cn(
763+
"w-full flex items-center gap-3 bg-indigo-600/20 border border-indigo-500/50 text-indigo-300 rounded-lg p-2 text-left text-sm hover:bg-indigo-600/40 transition-colors",
764+
isCollapsed && "justify-center"
765+
)}
766+
>
767+
<IconBrandDiscord size={20} className="flex-shrink-0" />
697768
{!isCollapsed && (
698769
<span className="font-medium whitespace-nowrap">
699-
Collapse
770+
Join Community
700771
</span>
701772
)}
702-
</button>
703-
)}
704-
<button
705-
onClick={() => setComingSoonModalOpen(true)}
706-
className={cn(
707-
"w-full flex items-center gap-3 bg-neutral-800/40 border border-neutral-700/80 rounded-lg p-2 text-left text-sm hover:bg-neutral-800/80 transition-colors",
708-
isCollapsed && "justify-center"
709-
)}
710-
>
711-
<IconCode
712-
size={20}
713-
className="text-neutral-400 flex-shrink-0"
714-
/>
715-
{!isCollapsed && (
716-
<span className="font-medium text-neutral-300 whitespace-nowrap">
717-
Coming Soon
718-
</span>
719-
)}
720-
</button>
721-
<button
722-
onClick={() => setHelpMenuOpen(true)}
723-
className={cn(
724-
"w-full flex items-center gap-3 bg-neutral-800/40 border border-neutral-700/80 rounded-lg p-2 text-left text-sm hover:bg-neutral-800/80 transition-colors",
725-
isCollapsed && "justify-center"
726-
)}
727-
>
728-
<IconHeadphones
729-
size={20}
730-
className="text-neutral-400 flex-shrink-0"
731-
/>
732-
{!isCollapsed && (
733-
<span className="font-medium text-neutral-300 whitespace-nowrap">
734-
Need help?
735-
</span>
736-
)}
737-
</button>
738-
<a
739-
href="https://forms.gle/7F4H3Pvy7fSdeeYm7"
740-
target="_blank"
741-
rel="noopener noreferrer"
742-
className={cn(
743-
"w-full flex items-center gap-3 bg-neutral-800/40 border border-neutral-700/80 rounded-lg p-2 text-left text-sm hover:bg-neutral-800/80 transition-colors",
744-
isCollapsed && "justify-center"
745-
)}
746-
>
747-
<IconBug
748-
size={20}
749-
className="text-neutral-400 flex-shrink-0"
750-
/>
751-
{!isCollapsed && (
752-
<span className="font-medium text-neutral-300 whitespace-nowrap">
753-
Report a Bug
754-
</span>
755-
)}
756-
</a>
757-
<a
758-
href="https://discord.gg/YwXdEvjKGe"
759-
target="_blank"
760-
rel="noopener noreferrer"
761-
className={cn(
762-
"w-full flex items-center gap-3 bg-indigo-600/20 border border-indigo-500/50 text-indigo-300 rounded-lg p-2 text-left text-sm hover:bg-indigo-600/40 transition-colors",
763-
isCollapsed && "justify-center"
764-
)}
765-
>
766-
<IconBrandDiscord size={20} className="flex-shrink-0" />
767-
{!isCollapsed && (
768-
<span className="font-medium whitespace-nowrap">
769-
Join Community
770-
</span>
771-
)}
772-
</a>
773-
<AnimatePresence>
774-
{!isCollapsed && (
775-
<motion.div
776-
variants={fadeInUp}
777-
initial="hidden"
778-
animate="visible"
779-
exit={{ opacity: 0, y: 10 }}
780-
className="relative z-20 w-full"
781-
>
782-
<div className="group relative cursor-default rounded-full border border-brand-orange/50 bg-brand-gray/30 px-4 py-1 text-sm font-mono uppercase tracking-wider text-brand-white/80 transition-colors duration-300 hover:border-brand-orange text-center">
783-
<span className="transition-opacity duration-300 group-hover:opacity-0">
784-
We are in Public Beta
785-
</span>
786-
<span className="absolute inset-0 flex items-center justify-center text-center opacity-0 transition-opacity duration-300 group-hover:opacity-100 px-2">
787-
SORRY 4 BUGS
788-
</span>
789-
</div>
790-
</motion.div>
791-
)}
792-
</AnimatePresence>
793-
<UserProfileSection isCollapsed={isCollapsed} user={user} />
773+
</a>
774+
<AnimatePresence>
775+
{!isCollapsed && (
776+
<motion.div
777+
variants={fadeInUp}
778+
initial="hidden"
779+
animate="visible"
780+
exit={{ opacity: 0, y: 10 }}
781+
className="relative z-20 w-full"
782+
>
783+
<div className="group relative cursor-default rounded-full border border-brand-orange/50 bg-brand-gray/30 px-4 py-1 text-sm font-mono uppercase tracking-wider text-brand-white/80 transition-colors duration-300 hover:border-brand-orange text-center">
784+
<span className="transition-opacity duration-300 group-hover:opacity-0">
785+
We are in Public Beta
786+
</span>
787+
<span className="absolute inset-0 flex items-center justify-center text-center opacity-0 transition-opacity duration-300 group-hover:opacity-100 px-2">
788+
SORRY 4 BUGS
789+
</span>
790+
</div>
791+
</motion.div>
792+
)}
793+
</AnimatePresence>
794+
<UserProfileSection isCollapsed={isCollapsed} user={user} />
795+
</div>
794796
</div>
795797
</div>
796798
)

0 commit comments

Comments
 (0)