Merge pull request #825 from Mail-0/staging

apps/mail/components/connection/add.tsx

@@ -39,7 +39,10 @@ export const AddConnectionDialog = ({
           </Button>
         )}
       </DialogTrigger>
-      <DialogContent className="sm:max-w-2xl p-6 rounded-xl border bg-white dark:bg-[#1A1A1A]" showOverlay={true}>
+      <DialogContent
+        className="w-full max-w-sm rounded-xl border bg-white p-6 sm:max-w-md dark:bg-[#1A1A1A]"
+        showOverlay={true}
+      >
         <DialogHeader>
           <DialogTitle>{t('pages.settings.connections.connectEmail')}</DialogTitle>
           <DialogDescription>
@@ -86,7 +89,7 @@ export const AddConnectionDialog = ({
           >
             <Button
               variant="outline"
-              className="h-24 flex-col items-center justify-center gap-2 border-dashed"
+              className="h-24 w-full flex-col items-center justify-center gap-2 border-dashed"
             >
               <Plus className="h-12 w-12" />
               <span className="text-xs">{t('pages.settings.connections.moreComingSoon')}</span>

apps/mail/components/golden.tsx

@@ -97,76 +97,74 @@ export const GoldenTicketModal = () => {
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
-        <SidebarMenuButton tooltip={'Invite a friend'} className="flex items-center">
+        <SidebarMenuButton tooltip={'Invite a friend'}>
           <Ticket className="relative mr-2.5 h-3 w-3.5" />
           <p className="mt-0.5 truncate text-[13px]">Invite a friend</p>
         </SidebarMenuButton>
       </DialogTrigger>
-      <div className="container mx-auto max-w-[750px]">
-        <DialogContent
-          showOverlay={true}
-          className="bg-panelLight dark:bg-panelDark w-full max-w-[500px] rounded-xl p-5"
+      <DialogContent
+        showOverlay={true}
+        className="bg-panelLight dark:bg-panelDark w-full max-w-[500px] rounded-xl p-5"
+      >
+        <DialogHeader>
+          <DialogTitle className="flex flex-col gap-4">
+            <Image
+              src="/white-icon.svg"
+              alt="Zero"
+              width={32}
+              height={32}
+              className="hidden dark:block"
+            />
+            <Image
+              src="/black-icon.svg"
+              alt="Zero"
+              width={32}
+              height={32}
+              className="block dark:hidden"
+            />
+            <span>Welcome to Zero! 🎉 ✨</span>
+          </DialogTitle>
+          <DialogDescription className="flex flex-col gap-3 py-3">
+            <span>
+              Zero is still in early beta 🚀 and will continue to grow and improve from this point
+              on. If you know a friend who wants to test and try out Zero, send them an invite! 💌
+            </span>
+          </DialogDescription>
+        </DialogHeader>
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="space-y-2"
+          onKeyDown={handleKeyDown}
         >
-          <DialogHeader>
-            <DialogTitle className="flex flex-col gap-4">
-              <Image
-                src="/white-icon.svg"
-                alt="Zero"
-                width={32}
-                height={32}
-                className="hidden dark:block"
-              />
-              <Image
-                src="/black-icon.svg"
-                alt="Zero"
-                width={32}
-                height={32}
-                className="block dark:hidden"
-              />
-              <span>Welcome to Zero! 🎉 ✨</span>
-            </DialogTitle>
-            <DialogDescription className="flex flex-col gap-3 py-3">
-              <span>
-                Zero is still in early beta 🚀 and will continue to grow and improve from this point
-                on. If you know a friend who wants to test and try out Zero, send them an invite! 💌
-              </span>
-            </DialogDescription>
-          </DialogHeader>
-          <form
-            onSubmit={form.handleSubmit(onSubmit)}
-            className="space-y-2"
-            onKeyDown={handleKeyDown}
-          >
-            <Form {...form}>
-              <FormField
-                control={form.control}
-                name="email"
-                render={({ field }) => (
-                  <FormItem>
-                    <Input
-                      placeholder="nizzy@gmail.com"
-                      {...field}
-                      className="h-8 placeholder:opacity-20"
-                    />
-                  </FormItem>
-                )}
-              />
-              <div className="flex justify-end gap-2 pt-1">
-                <Button onClick={handleMaybeLater} type="button" variant="outline" className="h-7">
-                  Maybe Later
-                </Button>
-                <Button disabled={!email} type="submit" className="h-7">
-                  <span className="mr-">Send invite</span>
-                  <div className="flex h-5 items-center justify-center gap-1 rounded-sm bg-white/10 px-1 dark:bg-black/10">
-                    <Command className="h-2 w-2 text-black dark:text-[#929292]" />
-                    <CurvedArrow className="mt-1.5 h-3 w-3 fill-black dark:fill-[#929292]" />
-                  </div>
-                </Button>
-              </div>
-            </Form>
-          </form>
-        </DialogContent>
-      </div>
+          <Form {...form}>
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <Input
+                    placeholder="nizzy@gmail.com"
+                    {...field}
+                    className="h-8 placeholder:opacity-20"
+                  />
+                </FormItem>
+              )}
+            />
+            <div className="flex justify-end gap-2 pt-1">
+              <Button onClick={handleMaybeLater} type="button" variant="outline" className="h-7">
+                Maybe Later
+              </Button>
+              <Button disabled={!email} type="submit" className="h-7">
+                <span className="mr-">Send invite</span>
+                <div className="flex h-5 items-center justify-center gap-1 rounded-sm bg-white/10 px-1 dark:bg-black/10">
+                  <Command className="h-2 w-2 text-black dark:text-[#929292]" />
+                  <CurvedArrow className="mt-1.5 h-3 w-3 fill-black dark:fill-[#929292]" />
+                </div>
+              </Button>
+            </div>
+          </Form>
+        </form>
+      </DialogContent>
     </Dialog>
   );
 };

apps/mail/components/ui/app-sidebar.tsx

@@ -9,8 +9,14 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@/components/ui/dialog';
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarHeader,
+  SidebarMenu,
+} from '@/components/ui/sidebar';
 import { SquarePenIcon, type SquarePenIconHandle } from '../icons/animated/square-pen';
-import { Sidebar, SidebarContent, SidebarHeader } from '@/components/ui/sidebar';
 import { navigationConfig, bottomNavItems } from '@/config/navigation';
 import { motion, AnimatePresence } from 'motion/react';
 import { useSidebar } from '@/components/ui/sidebar';
@@ -74,12 +80,12 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
       <Sidebar
         collapsible="icon"
         {...props}
-        className={`flex select-none flex-col items-center h-screen top-2.5 ${state === 'collapsed' ? '' : ''}`}
+        className={`top-2.5 flex h-screen select-none flex-col items-center ${state === 'collapsed' ? '' : ''} pb-2`}
       >
         <div
-          className={`relative z-20 flex  w-full flex-col ${state === 'collapsed' ? 'px-0' : 'md:px-2 '}`}
+          className={`relative z-20 flex w-full flex-col ${state === 'collapsed' ? 'px-0' : 'md:px-2'}`}
         >
-          <SidebarHeader className=" flex flex-col gap-2">
+          <SidebarHeader className="flex flex-col gap-2">
             <NavUser />
             <AnimatePresence mode="wait">
               {showComposeButton && (
@@ -111,10 +117,13 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
         </div>
 
         <div className={`mt-auto flex w-full flex-col ${state !== 'collapsed' ? 'px-2' : ''}`}>
-          <div className="mx-2 relative top-2.5">
-          <GoldenTicketModal />
-          </div>
           <SidebarContent className="py-0 pt-0">
+            <SidebarGroup className="mb-0 pb-0">
+              <SidebarMenu>
+                <GoldenTicketModal />
+              </SidebarMenu>
+            </SidebarGroup>
+
             <NavMain items={bottomNavItems} />
           </SidebarContent>
         </div>

apps/mail/components/ui/nav-main.tsx

@@ -278,14 +278,14 @@ export function NavMain({ items }: NavMainProps) {
         {!pathname.includes('/settings') && !isBottomNav && state !== 'collapsed' && (
           <Collapsible defaultOpen={true} className="group/collapsible">
             <SidebarMenuItem className="mb-4" style={{ height: 'auto' }}>
-              <div className="mx-2 mb-4 flex w-full items-center justify-between">
+              <div className="mx-2 mb-4 flex items-center justify-between">
                 <span className="text-[13px] text-[#6D6D6D] dark:text-[#898989]">Labels</span>
                 <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
                   <DialogTrigger asChild>
                     <Button
                       variant="ghost"
                       size="icon"
-                      className="mr-2 h-4 w-4 p-0 hover:bg-transparent"
+                      className="mr-1 h-4 w-4 p-0 hover:bg-transparent"
                     >
                       <Plus className="h-3 w-3 text-[#6D6D6D] dark:text-[#898989]" />
                     </Button>
@@ -421,7 +421,7 @@ export function NavMain({ items }: NavMainProps) {
               <div className="mr-0 pr-0">
                 <div
                   className={cn(
-                    'hide-scrollbar mx-2 flex h-full max-h-[15vh] flex-row flex-wrap gap-2 overflow-scroll',
+                    'hide-scrollbar flex h-full flex-grow flex-row flex-wrap gap-2 overflow-scroll',
                   )}
                 >
                   {labels.map((label) => (

apps/mail/components/ui/sidebar.tsx

@@ -58,7 +58,7 @@ const Sidebar = React.forwardRef<
           <SheetContent
             data-sidebar="sidebar"
             data-mobile="true"
-            className="text-sidebar-foreground bg-lightBackground dark:bg-darkBackground w-[--sidebar-width] [&>button]:hidden"
+            className="text-sidebar-foreground bg-lightBackground dark:bg-darkBackground w-[--sidebar-width] p-4 [&>button]:hidden"
             style={
               {
                 '--sidebar-width': SIDEBAR_WIDTH_MOBILE,