Add success Dialog and UI improvment #465
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -11,6 +11,13 @@ import { | |||||
| import { MenuIcon } from "lucide-react" | ||||||
| import { useState } from "react" | ||||||
| import Link from "next/link" | ||||||
| import { useTheme } from 'next-themes'; | ||||||
| import {User,LogOut} from 'lucide-react'; | ||||||
| import { useRouter } from "next/navigation"; | ||||||
| import Cookies from 'js-cookie'; | ||||||
| import useProjectStore from "@/state/projectStore"; | ||||||
| import { useQueryClient } from '@tanstack/react-query'; | ||||||
| import useProfileStore from "@/state/profileStore"; | ||||||
|
|
||||||
|
|
||||||
| export function SmallNav({ | ||||||
|
|
@@ -19,7 +26,12 @@ export function SmallNav({ | |||||
| onLinkClick: (name: string) => void | ||||||
| }) { | ||||||
| const [selectedItem, setSelectedItem] = useState<string>("dashboard"); | ||||||
| const router = useRouter(); | ||||||
| const { profile, setProfile } = useProfileStore(); | ||||||
| const { setIdProject } = useProjectStore(); | ||||||
| const queryClient = useQueryClient(); | ||||||
| const [open, setOpen] = useState(false); | ||||||
| const { theme } = useTheme() | ||||||
| const navItemClassName = (itemName: string) => | ||||||
| `text-sm border-b font-medium w-full text-left mx-0 py-2 dark:hover:bg-zinc-900 hover:bg-zinc-200 cursor-pointer ${ | ||||||
| selectedItem === itemName ? "dark:bg-zinc-800 bg-zinc-200" : "text-muted-foreground" | ||||||
|
|
@@ -30,6 +42,15 @@ export function SmallNav({ | |||||
| onLinkClick(name); | ||||||
| setOpen(false); | ||||||
| } | ||||||
|
|
||||||
| const onLogout = () => { | ||||||
| router.push('/b2c/login') | ||||||
| Cookies.remove("access_token") | ||||||
| setProfile(null) | ||||||
| setIdProject("") | ||||||
| queryClient.clear() | ||||||
| } | ||||||
|
|
||||||
| return ( | ||||||
| <div className="flex flex-row mx-0 px-0"> | ||||||
| <Sheet key={"left"} open={open} onOpenChange={setOpen}> | ||||||
|
|
@@ -39,26 +60,15 @@ export function SmallNav({ | |||||
| <SheetContent side={"left"} className="p-0 w-[200px]"> | ||||||
| <SheetHeader className="flex items-center"> | ||||||
| <SheetTitle className="mx-4 my-4"> | ||||||
| <Link href="/" className="flex flex-row" onClick={() => setOpen(false)}> | ||||||
| {theme == "light" ? <img src="/logo-panora-black.png" className='w-12' /> : <img src="/logo-panora-white-hq.png" className='w-12' />} | ||||||
|
There was a problem hiding this comment. Provide alt text for images and use strict equality. - {theme == "light" ? <img src="/logo-panora-black.png" className='w-12' /> : <img src="/logo-panora-white-hq.png" className='w-12' />}
+ {theme === "light" ? <img src="/logo-panora-black.png" alt="Panora Logo Black" className='w-12' /> : <img src="/logo-panora-white-hq.png" alt="Panora Logo White" className='w-12' />}Committable suggestion
Suggested change
|
||||||
|
|
||||||
| </Link> | ||||||
| </SheetTitle> | ||||||
| </SheetHeader> | ||||||
| <nav | ||||||
| className={`flex flex-col items-start mt-6`} | ||||||
|
There was a problem hiding this comment. Use button elements instead of anchor tags for actions that don't navigate to a URL. - <a onClick={...}>
+ <button onClick={...}>Also applies to: 74-74, 80-80, 87-87, 93-93, 104-104, 108-108, 115-115
|
||||||
| > | ||||||
| <a | ||||||
| className={navItemClassName('connections')} | ||||||
| onClick={() => click('connections')} | ||||||
|
|
@@ -93,6 +103,20 @@ export function SmallNav({ | |||||
| <p className="mx-4">Docs</p> | ||||||
| <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 2C2.44772 2 2 2.44772 2 3V12C2 12.5523 2.44772 13 3 13H12C12.5523 13 13 12.5523 13 12V8.5C13 8.22386 12.7761 8 12.5 8C12.2239 8 12 8.22386 12 8.5V12H3V3L6.5 3C6.77614 3 7 2.77614 7 2.5C7 2.22386 6.77614 2 6.5 2H3ZM12.8536 2.14645C12.9015 2.19439 12.9377 2.24964 12.9621 2.30861C12.9861 2.36669 12.9996 2.4303 13 2.497L13 2.5V2.50049V5.5C13 5.77614 12.7761 6 12.5 6C12.2239 6 12 5.77614 12 5.5V3.70711L6.85355 8.85355C6.65829 9.04882 6.34171 9.04882 6.14645 8.85355C5.95118 8.65829 5.95118 8.34171 6.14645 8.14645L11.2929 3H9.5C9.22386 3 9 2.77614 9 2.5C9 2.22386 9.22386 2 9.5 2H12.4999H12.5C12.5678 2 12.6324 2.01349 12.6914 2.03794C12.7504 2.06234 12.8056 2.09851 12.8536 2.14645Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg> | ||||||
| </a> | ||||||
| <a | ||||||
| className={`${navItemClassName('b2c/profile')} flex gap-2 px-4`} | ||||||
| onClick={() => click('b2c/profile')} | ||||||
| > | ||||||
| <User className="h-4 w-4" /> | ||||||
| <p className="">Profile</p> | ||||||
| </a> | ||||||
| <a | ||||||
| className={`${navItemClassName('log-out')} px-4 flex gap-2`} | ||||||
| onClick={() => onLogout()} | ||||||
| > | ||||||
| <LogOut className="h-4 w-4" /> | ||||||
| <p className="">Log Out</p> | ||||||
| </a> | ||||||
| </nav> | ||||||
| </SheetContent> | ||||||
| </Sheet> | ||||||
|
|
||||||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -19,7 +19,7 @@ export function MainNav({ | |
| }, [pathname]) | ||
|
|
||
| const navItemClassName = (itemName: string) => | ||
| `group flex items-center rounded-md px-2 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground cursor-pointer ${ | ||
| selectedItem === itemName ? 'bg-accent' : 'transparent' | ||
| } transition-colors`; | ||
|
|
||
|
|
@@ -63,7 +63,7 @@ export function MainNav({ | |
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| <p className="pr-2">Docs</p> | ||
| <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 2C2.44772 2 2 2.44772 2 3V12C2 12.5523 2.44772 13 3 13H12C12.5523 13 13 12.5523 13 12V8.5C13 8.22386 12.7761 8 12.5 8C12.2239 8 12 8.22386 12 8.5V12H3V3L6.5 3C6.77614 3 7 2.77614 7 2.5C7 2.22386 6.77614 2 6.5 2H3ZM12.8536 2.14645C12.9015 2.19439 12.9377 2.24964 12.9621 2.30861C12.9861 2.36669 12.9996 2.4303 13 2.497L13 2.5V2.50049V5.5C13 5.77614 12.7761 6 12.5 6C12.2239 6 12 5.77614 12 5.5V3.70711L6.85355 8.85355C6.65829 9.04882 6.34171 9.04882 6.14645 8.85355C5.95118 8.65829 5.95118 8.34171 6.14645 8.14645L11.2929 3H9.5C9.22386 3 9 2.77614 9 2.5C9 2.22386 9.22386 2 9.5 2H12.4999H12.5C12.5678 2 12.6324 2.01349 12.6914 2.03794C12.7504 2.06234 12.8056 2.09851 12.8536 2.14645Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg> | ||
| </a> | ||
| </nav> | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -6,25 +6,36 @@ import { | |
| import { Button } from "@/components/ui/button" | ||
| import { | ||
| DropdownMenu, | ||
| DropdownMenuCheckboxItem, | ||
| DropdownMenuContent, | ||
| DropdownMenuGroup, | ||
| DropdownMenuItem, | ||
| DropdownMenuLabel, | ||
| DropdownMenuPortal, | ||
| DropdownMenuSeparator, | ||
| DropdownMenuSub, | ||
| DropdownMenuSubContent, | ||
| DropdownMenuSubTrigger, | ||
| DropdownMenuTrigger, | ||
| } from "@/components/ui/dropdown-menu" | ||
| import useProfileStore from "@/state/profileStore"; | ||
| import { useRouter } from "next/navigation"; | ||
| import Link from "next/link"; | ||
| import Cookies from 'js-cookie'; | ||
| import useProjectStore from "@/state/projectStore"; | ||
| import { useQueryClient } from '@tanstack/react-query'; | ||
| import {User,LogOut,SunMoon,Sun,Moon,Monitor} from 'lucide-react'; | ||
| import {DotsHorizontalIcon} from '@radix-ui/react-icons'; | ||
| import { useTheme } from "next-themes"; | ||
|
|
||
|
|
||
| export function UserNav() { | ||
| const router = useRouter(); | ||
| const { profile, setProfile } = useProfileStore(); | ||
| const { setIdProject } = useProjectStore(); | ||
| const queryClient = useQueryClient(); | ||
| const { setTheme,theme } = useTheme(); | ||
| // const [currentTheme,SetCurrentTheme] = useState(theme) | ||
|
|
||
| const onLogout = () => { | ||
| router.push('/b2c/login') | ||
|
|
@@ -36,37 +47,79 @@ export function UserNav() { | |
| return ( | ||
| <DropdownMenu> | ||
| <DropdownMenuTrigger asChild> | ||
| {/* <Button variant="ghost" className="relative h-8 w-8 rounded-full"> */} | ||
| <div className="flex p-3 hover:bg-accent items-center gap-4"> | ||
| <Avatar className="h-8 w-8 rounded-full"> | ||
| <AvatarImage src="/avatars/01.png" alt="@shadcn" /> | ||
| <AvatarFallback>SC</AvatarFallback> | ||
| </Avatar> | ||
| <p className="text-sm"> | ||
| {profile ? `${profile.first_name} ${profile.last_name}` : ""} | ||
| </p> | ||
| <DotsHorizontalIcon className="ml-auto mr-2"/> | ||
|
|
||
| </div> | ||
| {/* </Button> */} | ||
| </DropdownMenuTrigger> | ||
| <DropdownMenuContent className="w-56" align="center" forceMount> | ||
| {/* <DropdownMenuLabel className="font-normal"> | ||
| <div className="flex flex-col space-y-1"> | ||
| <p className="text-xs leading-none text-muted-foreground"> | ||
| {profile ? profile.email || profile.first_name : "No profile found"} | ||
| </p> | ||
| </div> | ||
| </DropdownMenuLabel> */} | ||
| {/* <DropdownMenuGroup> */} | ||
| <Link href={"/b2c/profile"}> | ||
| <DropdownMenuItem> | ||
| <User className="mr-2 h-4 w-4" /> | ||
| <span>Profile</span> | ||
| </DropdownMenuItem> | ||
| </Link> | ||
|
|
||
| <DropdownMenuSub> | ||
| <DropdownMenuSubTrigger> | ||
| <SunMoon className="mr-2 h-4 w-4" /> | ||
| <span>Theme</span> | ||
| </DropdownMenuSubTrigger> | ||
| <DropdownMenuPortal> | ||
| <DropdownMenuSubContent> | ||
| <DropdownMenuCheckboxItem | ||
| checked={theme==="light"} | ||
| onCheckedChange={() => setTheme("light")} | ||
| > | ||
| <Sun className="mr-2 h-4 w-4" /> | ||
| <span>Light</span> | ||
| </DropdownMenuCheckboxItem> | ||
| <DropdownMenuCheckboxItem | ||
| checked={theme==="dark"} | ||
| onCheckedChange={() => setTheme("dark")} | ||
| > | ||
| <Moon className="mr-2 h-4 w-4" /> | ||
| <span>Dark</span> | ||
| </DropdownMenuCheckboxItem> | ||
| <DropdownMenuCheckboxItem | ||
| checked={theme==="system"} | ||
| onCheckedChange={() => setTheme("system")} | ||
| > | ||
| <Monitor className="mr-2 h-4 w-4" /> | ||
| <span>System</span> | ||
| </DropdownMenuCheckboxItem> | ||
| </DropdownMenuSubContent> | ||
| </DropdownMenuPortal> | ||
| </DropdownMenuSub> | ||
|
|
||
| {/*<DropdownMenuItem> | ||
| Billing | ||
| </DropdownMenuItem> | ||
| <DropdownMenuItem> | ||
| Settings | ||
| </DropdownMenuItem>*/} | ||
| {/* </DropdownMenuGroup> */} | ||
| <DropdownMenuSeparator /> | ||
| <DropdownMenuItem onClick={() => onLogout()} > | ||
| <LogOut className="mr-2 h-4 w-4" /> | ||
| <span>Log Out</span> | ||
| </DropdownMenuItem> | ||
| </DropdownMenuContent> | ||
| </DropdownMenu> | ||
|
|
||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Add alt text to the logo image for accessibility.
Committable suggestion