style: responsiveness

NoorFatima01 · Jun 25, 2024 · e7e6176 · e7e6176
1 parent 8ab8a21
commit e7e6176
Show file tree

Hide file tree

Showing 9 changed files with 63 additions and 54 deletions.
diff --git a/src/components/layout/footer.tsx b/src/components/layout/footer.tsx
@@ -6,18 +6,20 @@ import { Icons } from '@/components/icons';
 export default function Footer() {
   return (
     <footer className='border py-4 '>
-      <div className='container flex justify-between'>
-        <div className='flex justify-between gap-2'>
+      <div className='container flex flex-col lg:flex-row justify-between items-center gap-2'>
+        <div className='flex justify-between items-center gap-2 flex-col lg:flex-row'>
           <p>&copy; {new Date().getFullYear()} All rights reserved.</p>
-          <Icons.gitHub className='size-6' />
-          <Link
-            href='https://github.com/NoorFatima01/team-management'
-            target='_blank'
-          >
-            <p className='text-md text-blue-600 hover:underline'>
-              Visit the Github repo
-            </p>
-          </Link>
+          <div className='flex gap-3'>
+            <Icons.gitHub className='size-6' />
+            <Link
+              href='https://github.com/NoorFatima01/team-management'
+              target='_blank'
+            >
+              <p className='text-md text-blue-600 hover:underline'>
+                Visit the Github repo
+              </p>
+            </Link>
+          </div>
         </div>
         <div className='mb-2 flex gap-2'>
           <span>Made by</span>

diff --git a/src/components/layout/inbox-sidebar.tsx b/src/components/layout/inbox-sidebar.tsx
@@ -36,9 +36,9 @@ export default function InboxSideBar() {
   if (!userId) return null;
   if (isLoading) {
     return (
-      <div className='flex justify-center items-center mt-32'>
+      <div className='flex justify-center items-center lg:mt-32'>
         <Icons.spinner
-          className='size-20 animate-spin text-primary-foreground rounded-md p-1'
+          className='lg:size-20 size-8 animate-spin text-primary-foreground rounded-md p-1'
           aria-hidden='true'
         />
       </div>

diff --git a/src/components/layout/main-nav.tsx b/src/components/layout/main-nav.tsx
@@ -1,6 +1,7 @@
 'use client';
 import { DropdownMenu } from '@radix-ui/react-dropdown-menu';
 import { LucideIcon } from 'lucide-react';
+import Link from 'next/link';
 
 import { cn } from '@/lib/utils';
 
@@ -91,14 +92,17 @@ export default function MainNav({ items, username }: MainNavProps) {
                   asChild
                   className='flex items-center gap-2.5'
                 >
-                  <ProgressBar className='fixed top-0 left-0 h-1 bg-primary'>
-                    <ProgressBarLink href={item.href}>
-                      {item.icon && (
-                        <item.icon className='size-4' aria-hidden />
-                      )}
-                      <span className='line-clamp-1'>{item.title}</span>
-                    </ProgressBarLink>
-                  </ProgressBar>
+                  <Link
+                    href={item.href}
+                    className={cn(
+                      (item.title === 'Dashboard' || item.title === 'Inbox') &&
+                        !username &&
+                        'hidden'
+                    )}
+                  >
+                    {item.icon && <item.icon className='size-4' aria-hidden />}
+                    <span className='line-clamp-1'>{item.title}</span>
+                  </Link>
                 </DropdownMenuItem>
               ))
             : null}

diff --git a/src/components/layout/site-header.tsx b/src/components/layout/site-header.tsx
@@ -17,7 +17,7 @@ import React from 'react';
 export default function SiteHeader({ user }: SiteHeaderProps) {
   return (
     <header className='sticky top-0 z-40 w-full border-b bg-background'>
-      <div className='container flex h-16 items-center space-x-4 sm:justify-between sm:space-x-0'>
+      <div className='container flex h-16 items-center space-x-4 justify-between sm:space-x-0'>
         <MainNav items={siteConfig.MainNav} username={user.name} />
         <div>
           <nav className='flex flex-1 items-center space-x-1'>

diff --git a/src/components/paginated-projects.tsx b/src/components/paginated-projects.tsx
@@ -57,11 +57,9 @@ const PaginatedProjects = () => {
 
   if (isFetching || isLoading) {
     return (
-      <div className='container grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-3 my-4'>
+      <div className='container flex flex-col items-center justify-center lg:grid lg:grid-cols-3 gap-2 my-4'>
         {divs.map((div) => (
-          <div key={div}>
-            <Skeleton className=' h-64 w-[420px]  rounded-lg' />
-          </div>
+          <Skeleton className='h-64 w-[420px] rounded-lg' key={div} />
         ))}
       </div>
     );

diff --git a/src/components/paginated-teams.tsx b/src/components/paginated-teams.tsx
@@ -79,6 +79,16 @@ export default function PaginatedTeams({ role }: PaginatedTeamsProps) {
     refetchInterval: 1000,
   });
 
+  if (isTeamDataFetching || isTeamDataLoading) {
+    return (
+      <div className='container flex flex-col items-center justify-center lg:grid lg:grid-cols-3 gap-2 my-4'>
+        {divs.map((div) => (
+          <Skeleton className='h-64 w-[420px] rounded-lg' key={div} />
+        ))}
+      </div>
+    );
+  }
+
   if (
     !teamsData ||
     (teamsData.teams.length === 0 && !isTeamDataLoading && !isTeamDataFetching)
@@ -93,17 +103,7 @@ export default function PaginatedTeams({ role }: PaginatedTeamsProps) {
   const teams = teamsData?.teams as Team[];
   const totalPages = teamsData?.totalPages as number;
   const currentPage = teamsData?.currentPage as number;
-  if (isTeamDataFetching || isTeamDataLoading) {
-    return (
-      <div className='container grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-3 my-4'>
-        {divs.map((div) => (
-          <div key={div}>
-            <Skeleton className=' h-64 w-[420px] rounded-lg' />
-          </div>
-        ))}
-      </div>
-    );
-  }
+
   return (
     <section className='mx-auto my-8'>
       <div className='container grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 my-4'>

diff --git a/src/components/recent-activity.tsx b/src/components/recent-activity.tsx
@@ -96,7 +96,7 @@ export default function RecentActivity({
   return (
     <div className={cn('flex flex-col gap-4', className)}>
       <div className='flex justify-between'>
-        <h3 className='text-xl font-extrabold'>Recent Activity</h3>
+        <h3 className='md:text-xl text-lg font-extrabold'>Recent Activity</h3>
         {selectedFiles.size > 0 && (
           <Button
             size='sm'

diff --git a/src/components/tasks.tsx b/src/components/tasks.tsx
@@ -235,7 +235,7 @@ export default function Tasks({ projectName, tasks }: TasksProps) {
       >
         <ResizablePanel defaultSize={20}>
           <ScrollArea className='p-6'>
-            <h2 className='text-2xl font-extrabold tracking-tighter mb-4'>
+            <h2 className='md:text-2xl text-lg font-extrabold tracking-tighter mb-4'>
               {projectName}
             </h2>
 
@@ -275,10 +275,12 @@ export default function Tasks({ projectName, tasks }: TasksProps) {
                 {taskSelected ? (
                   <div className='flex justify-between'>
                     <div className='flex flex-col gap-3'>
-                      <span className='font-extrabold text-xl'>
+                      <span className='font-extrabold md:text-xl text-md'>
                         {taskSelected.title}
                       </span>
-                      <span className='text-lg'>{taskSelected.details}</span>
+                      <span className='md:text-lg text-base'>
+                        {taskSelected.details}
+                      </span>
                     </div>
                     <div className='flex gap-3'>
                       <Tooltip>
@@ -300,7 +302,7 @@ export default function Tasks({ projectName, tasks }: TasksProps) {
                     </div>
                   </div>
                 ) : (
-                  <div className='self-center  mt-6 rounded-md border border-muted-foreground p-2'>
+                  <div className='self-center mt-6 rounded-md border border-muted-foreground p-2'>
                     <p className='text-muted-foreground text-sm'>
                       Add a task to get started
                     </p>

diff --git a/src/components/teams-tabs.tsx b/src/components/teams-tabs.tsx
@@ -162,7 +162,7 @@ export default function TeamsTabs({
                       )}
                       <MembersTable members={tableMembers} />
                       <div className='self-end flex gap-2'>
-                        {isHead(teamToShow) && (
+                        {isHead(teamToShow) ? (
                           <Button
                             size='sm'
                             variant='destructive'
@@ -176,18 +176,21 @@ export default function TeamsTabs({
                             )}
                             Delete
                           </Button>
+                        ) : (
+                          <Button
+                            size='sm'
+                            variant='ghost'
+                            disabled={leaveMutate.isPending}
+                            onClick={() =>
+                              leaveMutate.mutate(teamToShow.team_id)
+                            }
+                          >
+                            {leaveMutate.isPending && (
+                              <Icons.spinner className='size-4 animate-spin mr-2' />
+                            )}
+                            Leave
+                          </Button>
                         )}
-                        <Button
-                          size='sm'
-                          variant='ghost'
-                          disabled={leaveMutate.isPending}
-                          onClick={() => leaveMutate.mutate(teamToShow.team_id)}
-                        >
-                          {leaveMutate.isPending && (
-                            <Icons.spinner className='size-4 animate-spin mr-2' />
-                          )}
-                          Leave
-                        </Button>
                       </div>
                     </div>
                   </TeamDetails>