change styling of dropdowns

apps/studio/components/interfaces/sidebar-open-top-banner.tsx

@@ -13,9 +13,29 @@ import { IS_PLATFORM } from 'lib/constants'
 import { CornerLeftUp } from 'lucide-react'
 import { useRouter } from 'next/router'
 import { useAppStateSnapshot } from 'state/app-state'
-import { useSidebar } from 'ui'
+import { cn, useSidebar } from 'ui'
 import Connect from './Connect/Connect'
 import BranchDropdown from 'components/layouts/AppLayout/BranchDropdown'
+import Image from 'next/image'
+import Link from 'next/link'
+
+const LayoutHeaderDivider = () => (
+  <span className="text-border-stronger mr-1">
+    <svg
+      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      stroke="currentColor"
+      strokeWidth="1"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      fill="none"
+      shapeRendering="geometricPrecision"
+    >
+      <path d="M16 3.549L7.12 20.600" />
+    </svg>
+  </span>
+)
 
 export function SidebarOpenTopBanner() {
   const connectDialogUpdate = useFlag('connectDialogUpdate')
@@ -49,10 +69,34 @@ export function SidebarOpenTopBanner() {
         //   paddingLeft: open ? '16px' : '8px',
         //   paddingRight: open ? '16px' : '8px',
         // }}
-        className="relative items-center flex w-full gap-5 pt-[6px] pb-[1px] px-2"
+        className="relative items-center flex w-full gap-4 pt-[6px] pb-[1px] px-4"
       >
+        <Link
+          href={IS_PLATFORM ? `/org/${org?.slug}` : `/project/${project?.ref}`}
+          className="flex items-center justify-center flex-shrink-0"
+        >
+          <Image
+            alt="Supabase"
+            src={`${router.basePath}/img/supabase-logo.svg`}
+            width={18}
+            height={18}
+            className="w-[18px] h-[18px]"
+          />
+          <AnimatePresence>
+            {open && (
+              <motion.span
+                initial={{ opacity: 0, x: -20, width: 0 }}
+                animate={{ opacity: 1, x: 0, width: '160px' }}
+                exit={{ opacity: 0, x: -20, width: 0 }}
+                className="pl-2 w-[160px] text-foreground font-medium"
+              >
+                supabase
+              </motion.span>
+            )}
+          </AnimatePresence>
+        </Link>
         {/* <SidebarOpenButton /> */}
-        <AnimatePresence>
+        {/* <AnimatePresence>
           {project && (
             <motion.button
               onClick={() => router.push(`/org/${org?.slug}`)}
@@ -70,13 +114,13 @@ export function SidebarOpenTopBanner() {
               Organization
             </motion.button>
           )}
-        </AnimatePresence>
-        <div className="flex items-center -space-x-px">
+        </AnimatePresence> */}
+        <div className={cn('flex items-center transition-all duration-100')}>
           <OrganizationDropdown />
           <AnimatePresence>
             {project && (
               <motion.div
-                className="flex items-center gap-x-3"
+                className="flex items-center gap-x-0"
                 initial={{ opacity: 0, x: -20, width: 0 }}
                 animate={{ opacity: 1, x: 0, width: 'auto' }}
                 exit={{ opacity: 0, x: -20, width: 0 }}
@@ -85,6 +129,7 @@ export function SidebarOpenTopBanner() {
                   ease: 'easeOut',
                 }}
               >
+                <LayoutHeaderDivider />
                 <ProjectDropdown />
                 {isBranchingEnabled && (
                   <motion.div
@@ -96,11 +141,14 @@ export function SidebarOpenTopBanner() {
                       ease: 'easeOut',
                     }}
                   >
+                    <LayoutHeaderDivider />
                     <BranchDropdown />
                   </motion.div>
                 )}
-                {connectDialogUpdate && <Connect />}
-                {!isBranchingEnabled && <EnableBranchingButton />}
+                <div className="ml-3 flex items-center gap-x-2">
+                  {connectDialogUpdate && <Connect />}
+                  {!isBranchingEnabled && <EnableBranchingButton />}
+                </div>
               </motion.div>
             )}
           </AnimatePresence>

apps/studio/components/layouts/AppLayout/OrganizationDropdown.tsx

@@ -46,81 +46,72 @@ const OrganizationDropdown = () => {
   }
 
   return (
-    <Popover_Shadcn_ open={open} onOpenChange={setOpen} modal={false}>
-      <PopoverTrigger_Shadcn_ asChild>
-        <Button
-          type="default"
-          className={cn('pr-2 pl-2', project && 'rounded-r-none')}
-          iconRight={<ChevronsUpDown />}
-          icon={<Boxes />}
-        >
-          {orgName}
-          {/* <div className="flex items-center space-x-2"> */}
-          {/* <p className={''}>{orgName}</p> */}
-          {/* {isSuccess && (
-                <Badge variant="default" size={'small'}>
-                  {subscription?.plan.name}
-                </Badge>
-              )} */}
-          {/* </div> */}
-        </Button>
-      </PopoverTrigger_Shadcn_>
-      <PopoverContent_Shadcn_ className="p-0" side="bottom" align="start">
-        <Command_Shadcn_>
-          <CommandInput_Shadcn_ placeholder="Find organization..." />
-          <CommandList_Shadcn_>
-            <CommandEmpty_Shadcn_>No organizations found</CommandEmpty_Shadcn_>
-            <CommandGroup_Shadcn_>
-              <ScrollArea className={(organizations || []).length > 7 ? 'h-[210px]' : ''}>
-                {organizations?.map((org) => {
-                  const href = `/org/${org.slug}`
-                  return (
+    <>
+      <Link href={`/org/${slug}`} className="flex items-center gap-2 flex-shrink-0 text-sm">
+        <Boxes size={14} strokeWidth={1.5} className="text-foreground-lighter" />
+        <span className="text-foreground">{orgName}</span>
+      </Link>
+      <Popover_Shadcn_ open={open} onOpenChange={setOpen} modal={false}>
+        <PopoverTrigger_Shadcn_ asChild>
+          <Button type="text" className={cn('pr-1 pl-1')} iconRight={<ChevronsUpDown />}></Button>
+        </PopoverTrigger_Shadcn_>
+        <PopoverContent_Shadcn_ className="p-0" side="bottom" align="start">
+          <Command_Shadcn_>
+            <CommandInput_Shadcn_ placeholder="Find organization..." />
+            <CommandList_Shadcn_>
+              <CommandEmpty_Shadcn_>No organizations found</CommandEmpty_Shadcn_>
+              <CommandGroup_Shadcn_>
+                <ScrollArea className={(organizations || []).length > 7 ? 'h-[210px]' : ''}>
+                  {organizations?.map((org) => {
+                    const href = `/org/${org.slug}`
+                    return (
+                      <CommandItem_Shadcn_
+                        key={org.slug}
+                        value={`${org.name.replaceAll('"', '')} - ${org.slug}`}
+                        className="cursor-pointer w-full"
+                        onSelect={() => {
+                          setOpen(false)
+                          router.push(href)
+                        }}
+                        onClick={() => setOpen(false)}
+                      >
+                        <Link href={href} className="w-full flex items-center justify-between">
+                          <div className="flex items-center gap-2">
+                            <span>{org.name}</span>
+                            <PartnerIcon organization={org} />
+                          </div>
+                          {org.slug === slug && <Check size={16} />}
+                        </Link>
+                      </CommandItem_Shadcn_>
+                    )
+                  })}
+                </ScrollArea>
+              </CommandGroup_Shadcn_>
+              {organizationCreationEnabled && (
+                <>
+                  <CommandSeparator_Shadcn_ />
+                  <CommandGroup_Shadcn_>
                     <CommandItem_Shadcn_
-                      key={org.slug}
-                      value={`${org.name.replaceAll('"', '')} - ${org.slug}`}
                       className="cursor-pointer w-full"
-                      onSelect={() => {
+                      onSelect={(e) => {
                         setOpen(false)
-                        router.push(href)
+                        router.push(`/new`)
                       }}
                       onClick={() => setOpen(false)}
                     >
-                      <Link href={href} className="w-full flex items-center justify-between">
-                        <div className="flex items-center gap-2">
-                          <span>{org.name}</span>
-                          <PartnerIcon organization={org} />
-                        </div>
-                        {org.slug === slug && <Check size={16} />}
+                      <Link href="/new" className="flex items-center gap-2 w-full">
+                        <Plus size={14} strokeWidth={1.5} />
+                        <p>New organization</p>
                       </Link>
                     </CommandItem_Shadcn_>
-                  )
-                })}
-              </ScrollArea>
-            </CommandGroup_Shadcn_>
-            {organizationCreationEnabled && (
-              <>
-                <CommandSeparator_Shadcn_ />
-                <CommandGroup_Shadcn_>
-                  <CommandItem_Shadcn_
-                    className="cursor-pointer w-full"
-                    onSelect={(e) => {
-                      setOpen(false)
-                      router.push(`/new`)
-                    }}
-                    onClick={() => setOpen(false)}
-                  >
-                    <Link href="/new" className="flex items-center gap-2 w-full">
-                      <Plus size={14} strokeWidth={1.5} />
-                      <p>New organization</p>
-                    </Link>
-                  </CommandItem_Shadcn_>
-                </CommandGroup_Shadcn_>
-              </>
-            )}
-          </CommandList_Shadcn_>
-        </Command_Shadcn_>
-      </PopoverContent_Shadcn_>
-    </Popover_Shadcn_>
+                  </CommandGroup_Shadcn_>
+                </>
+              )}
+            </CommandList_Shadcn_>
+          </Command_Shadcn_>
+        </PopoverContent_Shadcn_>
+      </Popover_Shadcn_>
+    </>
   )
 }
 

apps/studio/components/layouts/AppLayout/ProjectDropdown.tsx

@@ -119,65 +119,66 @@ const ProjectDropdown = ({ isNewNav = false }: ProjectDropdownProps) => {
   }
 
   return IS_PLATFORM ? (
-    <Popover_Shadcn_ open={open} onOpenChange={setOpen} modal={false}>
-      <PopoverTrigger_Shadcn_ asChild>
-        <Button
-          type="default"
-          size="tiny"
-          className={cn(
-            'pr-2 justify-start [&_span]:w-full [&_span]:text-left',
-            // handle rounded-l-none for project dropdown
-            project && 'rounded-l-none'
-          )}
-          iconRight={<ChevronsUpDown />}
-          block
-          icon={<Box />}
-        >
-          {selectedProject?.name}
-        </Button>
-      </PopoverTrigger_Shadcn_>
-      <PopoverContent_Shadcn_ className="p-0" side="bottom" align="start">
-        <Command_Shadcn_>
-          <CommandInput_Shadcn_ placeholder="Find project..." />
-          <CommandList_Shadcn_>
-            <CommandEmpty_Shadcn_>No projects found</CommandEmpty_Shadcn_>
-            <CommandGroup_Shadcn_>
-              <ScrollArea className={(projects || []).length > 7 ? 'h-[210px]' : ''}>
-                {projects?.map((project) => (
-                  <ProjectLink key={project.ref} project={project} setOpen={setOpen} />
-                ))}
-              </ScrollArea>
-            </CommandGroup_Shadcn_>
-            {projectCreationEnabled && (
-              <>
-                <CommandSeparator_Shadcn_ />
-                <CommandGroup_Shadcn_>
-                  <CommandItem_Shadcn_
-                    className="cursor-pointer w-full"
-                    onSelect={() => {
-                      setOpen(false)
-                      router.push(`/new/${selectedOrganization?.slug}`)
-                    }}
-                    onClick={() => setOpen(false)}
-                  >
-                    <Link
-                      href={`/new/${selectedOrganization?.slug}`}
-                      onClick={() => {
+    <>
+      <Link
+        href={`/project/${project?.ref}`}
+        className="flex items-center gap-2 flex-shrink-0 text-sm"
+      >
+        <Box size={14} strokeWidth={1.5} className="text-foreground-lighter" />
+        <span className="text-foreground">{project?.name}</span>
+      </Link>
+      <Popover_Shadcn_ open={open} onOpenChange={setOpen} modal={false}>
+        <PopoverTrigger_Shadcn_ asChild>
+          <Button
+            type="text"
+            size="tiny"
+            className={cn('pr-1 pl-1 ')}
+            iconRight={<ChevronsUpDown />}
+          ></Button>
+        </PopoverTrigger_Shadcn_>
+        <PopoverContent_Shadcn_ className="p-0" side="bottom" align="start">
+          <Command_Shadcn_>
+            <CommandInput_Shadcn_ placeholder="Find project..." />
+            <CommandList_Shadcn_>
+              <CommandEmpty_Shadcn_>No projects found</CommandEmpty_Shadcn_>
+              <CommandGroup_Shadcn_>
+                <ScrollArea className={(projects || []).length > 7 ? 'h-[210px]' : ''}>
+                  {projects?.map((project) => (
+                    <ProjectLink key={project.ref} project={project} setOpen={setOpen} />
+                  ))}
+                </ScrollArea>
+              </CommandGroup_Shadcn_>
+              {projectCreationEnabled && (
+                <>
+                  <CommandSeparator_Shadcn_ />
+                  <CommandGroup_Shadcn_>
+                    <CommandItem_Shadcn_
+                      className="cursor-pointer w-full"
+                      onSelect={() => {
                         setOpen(false)
+                        router.push(`/new/${selectedOrganization?.slug}`)
                       }}
-                      className="w-full flex items-center gap-2"
+                      onClick={() => setOpen(false)}
                     >
-                      <Plus size={14} strokeWidth={1.5} />
-                      <p>New project</p>
-                    </Link>
-                  </CommandItem_Shadcn_>
-                </CommandGroup_Shadcn_>
-              </>
-            )}
-          </CommandList_Shadcn_>
-        </Command_Shadcn_>
-      </PopoverContent_Shadcn_>
-    </Popover_Shadcn_>
+                      <Link
+                        href={`/new/${selectedOrganization?.slug}`}
+                        onClick={() => {
+                          setOpen(false)
+                        }}
+                        className="w-full flex items-center gap-2"
+                      >
+                        <Plus size={14} strokeWidth={1.5} />
+                        <p>New project</p>
+                      </Link>
+                    </CommandItem_Shadcn_>
+                  </CommandGroup_Shadcn_>
+                </>
+              )}
+            </CommandList_Shadcn_>
+          </Command_Shadcn_>
+        </PopoverContent_Shadcn_>
+      </Popover_Shadcn_>
+    </>
   ) : (
     <Button type="text">
       <span className={isNewNav ? 'text-sm' : 'text-xs'}>{selectedProject?.name}</span>

apps/studio/components/layouts/ProjectLayout/ProjectLayout.tsx

@@ -178,7 +178,7 @@ const ProjectLayout = forwardRef<HTMLDivElement, PropsWithChildren<ProjectLayout
           {/* {!hideIconBar && <NavigationBar />} */}
           <div
             className={cn(
-              'border-l w-full rounded-tl-[7px] rounded-bl-[7px] border-t border-b flex-row my-1.5'
+              'border-l w-full overflow-hidden rounded-tl-[7px] rounded-bl-[7px] border-t border-b flex-row my-1.5'
             )}
           >
             <ResizablePanelGroup className="" direction="horizontal" autoSaveId="project-layout">

packages/ui/src/components/shadcn/ui/sidebar.tsx

@@ -224,9 +224,9 @@ const Sidebar = React.forwardRef<
         />
         <div
           className={cn(
-            'absolute', // removed fixed, and h-svh
-            'top-0',
-            'h-full',
+            'absolute', // make sure to remove 'fixed', and 'h-svh'
+            'top-0', // add this
+            'h-full', // add this
             'duration-200 inset-y-0 z-10 hidden w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',
             side === 'left'
               ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'