style: progress bar

NoorFatima01 · Jun 18, 2024 · 589e24a · 589e24a
1 parent 54bbf87
commit 589e24a
Show file tree

Hide file tree

Showing 10 changed files with 247 additions and 50 deletions.
diff --git a/src/app/(lobby)/inbox/layout.tsx b/src/app/(lobby)/inbox/layout.tsx
@@ -17,11 +17,17 @@ export default function InboxLayout({ children }: InboxLayoutProps) {
       />
 
       <div className='w-full h-full flex flex-col lg:flex-row space-y-2'>
-        <div className='p-4'>
+        <div className='p-4 w-40'>
           <InboxSideBar />
         </div>
-        <Separator orientation='vertical' className='hidden lg:block' />
-        <Separator orientation='horizontal' className='block lg:hidden' />
+        <Separator
+          orientation='vertical'
+          className='hidden lg:block w-1 bg-gray-100'
+        />
+        <Separator
+          orientation='horizontal'
+          className='block lg:hidden bg-gray-100'
+        />
         <div className='flex-1 lg:self-end p-4'>{children}</div>
       </div>
     </div>

diff --git a/src/app/(lobby)/layout.tsx b/src/app/(lobby)/layout.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { getUser } from '@/lib/server-user';
 
 import SiteHeader from '@/components/layout/site-header';
+import { ProgressBar } from '@/components/progress-bar';
 
 interface LobbyLayoutProps {
   children: React.ReactNode;
@@ -18,8 +19,10 @@ export default async function LobbyLayout({ children }: LobbyLayoutProps) {
   };
   return (
     <div>
-      <SiteHeader user={siteHeaderUser} />
-      <main>{children}</main>
+      <ProgressBar className='fixed top-0 h-3 bg-yellow-300 z-1000'>
+        <SiteHeader user={siteHeaderUser} />
+        <main>{children}</main>
+      </ProgressBar>
     </div>
   );
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -4,6 +4,7 @@ import '@/styles/globals.css';
 
 import { cn } from '@/lib/utils';
 
+import { ProgressBar } from '@/components/progress-bar';
 import ReactQueryProviders from '@/components/react-query-provider';
 import { TailwindIndicator } from '@/components/tailwind-indicator';
 import { ThemeProvider } from '@/components/theme-provider';
@@ -21,15 +22,21 @@ export default function RootLayout({
         <title>TeamManager</title>
       </head>
       <body className={cn('min-h-screen bg-background font-sans antialiased')}>
-        <ReactQueryProviders>
-          <TooltipProvider>
-            <ThemeProvider attribute='class' defaultTheme='system' enableSystem>
-              {children}
-              <Toaster />
-              <TailwindIndicator />
-            </ThemeProvider>
-          </TooltipProvider>
-        </ReactQueryProviders>
+        <ProgressBar className='fixed top-4 h-3 bg-yellow-300 z-1000'>
+          <ReactQueryProviders>
+            <TooltipProvider>
+              <ThemeProvider
+                attribute='class'
+                defaultTheme='system'
+                enableSystem
+              >
+                {children}
+                <Toaster />
+                <TailwindIndicator />
+              </ThemeProvider>
+            </TooltipProvider>
+          </ReactQueryProviders>
+        </ProgressBar>
       </body>
     </html>
   );

diff --git a/src/components/forms/create-project-form.tsx b/src/components/forms/create-project-form.tsx
@@ -208,9 +208,7 @@ export default function CreateProjectForm() {
                             mode='single'
                             selected={field.value}
                             onSelect={field.onChange}
-                            disabled={(date) =>
-                              date > new Date() || date < new Date('1900-01-01')
-                            }
+                            disabled={(date) => date < new Date('1900-01-01')}
                             initialFocus
                           />
                         </PopoverContent>
@@ -246,9 +244,7 @@ export default function CreateProjectForm() {
                             mode='single'
                             selected={field.value}
                             onSelect={field.onChange}
-                            disabled={(date) =>
-                              date > new Date() || date < new Date('1900-01-01')
-                            }
+                            disabled={(date) => date < new Date('1900-01-01')}
                             initialFocus
                           />
                         </PopoverContent>

diff --git a/src/components/layout/account-nav.tsx b/src/components/layout/account-nav.tsx
@@ -30,7 +30,7 @@ const accountNavRoutes = [
   // },
   {
     shouldRender: true,
-    title: 'Create a New Team',
+    title: 'New Team',
     href: '/create-team',
     icon: <Icons.add className='size-4' />,
   },
@@ -63,7 +63,7 @@ const AccountNav = ({ user, children }: AccountNavProps) => {
             />
             <h1 className='text-2xl font-bold'>{user?.name}</h1>
           </Box>
-          <Separator />
+          <Separator className='bg-gray-100' />
           <Box className='h-full flex flex-col items-center gap-y-4 px-5 py-4 mt-2'>
             <nav className='flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1'>
               {accountNavRoutes.map((route, index) => {
@@ -88,8 +88,14 @@ const AccountNav = ({ user, children }: AccountNavProps) => {
             </nav>
           </Box>
         </div>
-        <Separator orientation='vertical' className='hidden lg:block' />
-        <Separator orientation='horizontal' className='block lg:hidden' />
+        <Separator
+          orientation='vertical'
+          className='hidden lg:block bg-gray-100'
+        />
+        <Separator
+          orientation='horizontal'
+          className='block lg:hidden bg-gray-100'
+        />
 
         {/*div for the main elements of the page*/}
         <main className='h-full flex-1 overflow-y-auto p-2 rounded-lg ml-4'>

diff --git a/src/components/layout/inbox-sidebar.tsx b/src/components/layout/inbox-sidebar.tsx
@@ -40,7 +40,7 @@ export default function InboxSideBar() {
               pathname === `/inbox/${team.name}`
                 ? 'bg-muted hover:bg-muted'
                 : 'hover:bg-transparent hover:underline',
-              'justify-start'
+              'text-center'
             )}
           >
             {team.name}

diff --git a/src/components/layout/main-nav.tsx b/src/components/layout/main-nav.tsx
@@ -6,6 +6,7 @@ import Link from 'next/link';
 import { cn } from '@/lib/utils';
 
 import { Icons } from '@/components/icons';
+import { ProgressBar, ProgressBarLink } from '@/components/progress-bar';
 import { Button } from '@/components/ui/button';
 import {
   DropdownMenuContent,
@@ -39,24 +40,26 @@ export default function MainNav({ items, username }: MainNavProps) {
         </span>
       </Link>
       {items?.length ? (
-        <nav className='hidden lg:flex gap-6'>
-          {items?.map((item, index) => (
-            <Link
-              href={item.href}
-              key={index}
-              className={cn(
-                'flex items-center text-lg font-semibold text-muted-foreground hover:text-foreground/80 sm:text-sm',
-                item.disabled && 'cursor-not-allowed opacity-80',
-                (item.title === 'Dashboard' || item.title === 'Inbox') &&
-                  !username &&
-                  'hidden'
-              )}
-            >
-              {item.icon ? <item.icon className='size-6' /> : null}
-              <span>{item.title}</span>
-            </Link>
-          ))}
-        </nav>
+        <ProgressBar className='fixed top-0 left-0 h-1 bg-primary'>
+          <nav className='hidden lg:flex gap-6'>
+            {items?.map((item, index) => (
+              <ProgressBarLink
+                href={item.href}
+                key={index}
+                className={cn(
+                  'flex items-center text-lg font-semibold text-muted-foreground hover:text-foreground/80 sm:text-sm',
+                  item.disabled && 'cursor-not-allowed opacity-80',
+                  (item.title === 'Dashboard' || item.title === 'Inbox') &&
+                    !username &&
+                    'hidden'
+                )}
+              >
+                {item.icon ? <item.icon className='size-6' /> : null}
+                <span>{item.title}</span>
+              </ProgressBarLink>
+            ))}
+          </nav>
+        </ProgressBar>
       ) : null}
       <DropdownMenu>
         <DropdownMenuTrigger asChild>

diff --git a/src/components/login-buttons/login-dialog.tsx b/src/components/login-buttons/login-dialog.tsx
@@ -45,9 +45,9 @@ const LoginDialog = () => {
     router.refresh();
   }
 
-  // function createAccountButtonClick() {
-  //   router.push('/create-account');
-  // }
+  function createAccountButtonClick() {
+    router.push('/create-account');
+  }
 
   return (
     <Dialog>
@@ -107,8 +107,7 @@ const LoginDialog = () => {
             <Button
               variant='link'
               className='inline-flex text-white text-md focus-visible:ring-primary-500 focus:outline-none focus-visible:rounded focus-visible:ring focus-visible:ring-offset-2 hover:underline'
-              // href='/create-account'
-              // onClick={() => createAccountButtonClick()}
+              onClick={() => createAccountButtonClick()}
             >
               Create account
             </Button>