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 |
|---|---|---|
|
|
@@ -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> | ||
|
|
||
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 | ||||
|---|---|---|---|---|---|---|
|
|
@@ -13,10 +13,15 @@ import { ThemeToggle } from '@/components/Nav/theme-toggle'; | |||||
| import useProjects from '@/hooks/get/useProjects'; | ||||||
| import useRefreshAccessTokenMutation from '@/hooks/create/useRefreshAccessToken'; | ||||||
| import { useTheme } from 'next-themes'; | ||||||
| import { useState } from "react"; | ||||||
| import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; | ||||||
| import { Button } from "@/components/ui/button"; | ||||||
| import { toast } from "sonner"; | ||||||
|
|
||||||
| export const RootLayout = ({children}:{children:React.ReactNode}) => { | ||||||
| const router = useRouter() | ||||||
| const base = process.env.NEXT_PUBLIC_WEBAPP_DOMAIN; | ||||||
| const [copiesProjectID, SetCopiesProjectID] = useState<boolean>(false); | ||||||
| const {data : projectsData} = useProjects(); | ||||||
| const { idProject, setIdProject } = useProjectStore(); | ||||||
| const {mutate : refreshAccessToken} = useRefreshAccessTokenMutation() | ||||||
|
|
@@ -42,9 +47,23 @@ export const RootLayout = ({children}:{children:React.ReactNode}) => { | |||||
| } | ||||||
| }; | ||||||
|
|
||||||
| const handleCopyRight = () => { | ||||||
| navigator.clipboard.writeText(idProject); | ||||||
| toast.success("Project ID copied!", { | ||||||
| action: { | ||||||
| label: "Close", | ||||||
| onClick: () => console.log("Close"), | ||||||
| }, | ||||||
| }) | ||||||
| SetCopiesProjectID(true); | ||||||
| setTimeout(() => { | ||||||
| SetCopiesProjectID(false); | ||||||
| }, 2000); | ||||||
| }; | ||||||
|
|
||||||
| return ( | ||||||
| <> | ||||||
| {/* <div className="fixed top-0 left-0 right-0 supports-backdrop-blur:bg-background/60 border-b bg-background/95 backdrop-blur z-20"> | ||||||
| <nav className="h-14 flex items-center justify-between px-4"> | ||||||
| <div className="hidden lg:block"> | ||||||
| <Link href='/'> | ||||||
|
|
@@ -60,21 +79,68 @@ export const RootLayout = ({children}:{children:React.ReactNode}) => { | |||||
| <ThemeToggle /> | ||||||
| </div> | ||||||
| </nav> | ||||||
| </div> */} | ||||||
| <div className="flex h-screen overflow-hidden"> | ||||||
|
|
||||||
| <nav | ||||||
| className={cn(`relative hidden h-screen border-r lg:block w-72`)} | ||||||
| > | ||||||
| <div className='flex items-center justify-center min-w-full'> | ||||||
| <div className="hidden lg:block pt-5"> | ||||||
| <Link href='/'> | ||||||
| {theme == "light" ? <img src="/logo-panora-black.png" className='w-14' /> : <img src="/logo-panora-white-hq.png" className='w-14' />} | ||||||
|
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-14' /> : <img src="/logo-panora-white-hq.png" className='w-14' />}
+ {theme === "light" ? <img src="/logo-panora-black.png" alt="Panora Logo Black" className='w-14' /> : <img src="/logo-panora-white-hq.png" alt="Panora Logo White" className='w-14' />}Committable suggestion
Suggested change
|
||||||
| </Link> | ||||||
| </div> | ||||||
|
|
||||||
| </div> | ||||||
|
|
||||||
| <div className="space-y-4 py-4 pt-10"> | ||||||
| <div className="px-3 py-2"> | ||||||
| <div className="space-y-3"> | ||||||
| <p className='text-xs dark:text-gray-400 cursor-default text-gray-950 font-semibold'>Project</p> | ||||||
| <div className='flex gap-2 items-center'> | ||||||
| <TeamSwitcher className='w-40 ml-3' projects={projectsData? projectsData : []}/> | ||||||
| <div | ||||||
| className="cursor-pointer" | ||||||
| onClick={handleCopyRight} | ||||||
| > | ||||||
| <TooltipProvider delayDuration={0}> | ||||||
| <Tooltip> | ||||||
| <TooltipTrigger asChild> | ||||||
| <Button size="sm" variant="outline">{copiesProjectID ? ( | ||||||
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="15" height="15" fill="#ffffff"> | ||||||
| <path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/> | ||||||
| </svg> | ||||||
| ) : ( | ||||||
| <> | ||||||
| <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||||||
| <path d="M5 2V1H10V2H5ZM4.75 0C4.33579 0 4 0.335786 4 0.75V1H3.5C2.67157 1 2 1.67157 2 2.5V12.5C2 13.3284 2.67157 14 3.5 14H11.5C12.3284 14 13 13.3284 13 12.5V2.5C13 1.67157 12.3284 1 11.5 1H11V0.75C11 0.335786 10.6642 0 10.25 0H4.75ZM11 2V2.25C11 2.66421 10.6642 3 10.25 3H4.75C4.33579 3 4 2.66421 4 2.25V2H3.5C3.22386 2 3 2.22386 3 2.5V12.5C3 12.7761 3.22386 13 3.5 13H11.5C11.7761 13 12 12.7761 12 12.5V2.5C12 2.22386 11.7761 2 11.5 2H11Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path> | ||||||
| </svg> | ||||||
| </> | ||||||
| )} | ||||||
| </Button> | ||||||
| </TooltipTrigger> | ||||||
| <TooltipContent> | ||||||
| <p className="text-sm">Copy Project ID</p> | ||||||
| </TooltipContent> | ||||||
| </Tooltip> | ||||||
| </TooltipProvider> | ||||||
| </div> | ||||||
| </div> | ||||||
| <p className='text-xs cursor-default dark:text-gray-400 text-gray-950 font-semibold pt-5'>General</p> | ||||||
| <MainNav onLinkClick={handlePageChange} className=''/> | ||||||
| </div> | ||||||
| </div> | ||||||
| </div> | ||||||
|
|
||||||
| <div className='absolute bottom-0 left-0 w-full cursor-pointer'> | ||||||
| <UserNav/> | ||||||
| </div> | ||||||
| </nav> | ||||||
| <div className={cn("block lg:!hidden")}> | ||||||
| <SmallNav onLinkClick={handlePageChange} /> | ||||||
| </div> | ||||||
| <main className="w-full overflow-y-scroll">{children}</main> | ||||||
|
|
||||||
| </div> | ||||||
| </> | ||||||
|
|
||||||
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 |
|---|---|---|
|
|
@@ -170,7 +170,7 @@ export default function TeamSwitcher({ className ,projects}: TeamSwitcherProps) | |
| <CaretSortIcon className="ml-auto h-4 w-4 shrink-0 opacity-50" /> | ||
| </Button> | ||
| </PopoverTrigger> | ||
| <PopoverContent className="w-[200px] p-0 ml-4"> | ||
| <Command> | ||
| <CommandList> | ||
| <CommandInput placeholder="Search..." /> | ||
|
|
||
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 |
|---|---|---|
|
|
@@ -22,6 +22,7 @@ | |
| }, | ||
| "dependencies": { | ||
| "@panora/shared": "workspace:^", | ||
| "lucide-react": "^0.344.0", | ||
| "@radix-ui/react-icons": "^1.3.0", | ||
| "@radix-ui/react-slot": "^1.0.2", | ||
| "@tanstack/react-query": "^5.12.2", | ||
|
|
||
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