From ba665edb1e1fdef776a853f144420263e13e002f Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Thu, 19 Oct 2023 15:30:36 +0530
Subject: [PATCH] fix: UI fixes and improvements (#559)

* chore: add cursor pointer

* fix: tooltip color

* chore: add tooltip

* fix: admin pages in mobile
---
 .../src/app/(marketing)/open/bar-metrics.tsx  |  3 ++
 .../src/app/(marketing)/open/cap-table.tsx    |  2 +-
 .../app/(marketing)/open/funding-raised.tsx   |  3 ++
 .../admin/documents/data-table.tsx            | 37 ++++++++++++++-----
 apps/web/src/app/(dashboard)/admin/layout.tsx |  2 +-
 apps/web/src/app/(dashboard)/admin/nav.tsx    |  8 +++-
 .../src/app/(dashboard)/admin/stats/page.tsx  |  4 +-
 .../(dashboard)/metric-card/metric-card.tsx   | 18 ++++++---
 packages/ui/primitives/dropdown-menu.tsx      |  2 +-
 9 files changed, 58 insertions(+), 21 deletions(-)

diff --git a/apps/marketing/src/app/(marketing)/open/bar-metrics.tsx b/apps/marketing/src/app/(marketing)/open/bar-metrics.tsx
index 42295c0bf..aa3929833 100644
--- a/apps/marketing/src/app/(marketing)/open/bar-metrics.tsx
+++ b/apps/marketing/src/app/(marketing)/open/bar-metrics.tsx
@@ -46,6 +46,9 @@ export const BarMetric = <T extends Record<string, Record<keyof T[string], unkno
             <XAxis dataKey="month" />
             <YAxis />
             <Tooltip
+              labelStyle={{
+                color: 'hsl(var(--primary-foreground))',
+              }}
               itemStyle={{
                 color: 'hsl(var(--primary-foreground))',
               }}
diff --git a/apps/marketing/src/app/(marketing)/open/cap-table.tsx b/apps/marketing/src/app/(marketing)/open/cap-table.tsx
index d5194e5f5..ca63bd7bf 100644
--- a/apps/marketing/src/app/(marketing)/open/cap-table.tsx
+++ b/apps/marketing/src/app/(marketing)/open/cap-table.tsx
@@ -71,7 +71,7 @@ export const CapTable = ({ className, ...props }: CapTableProps) => {
             </Pie>
             <Legend
               formatter={(value) => {
-                return <span className="text-sm text-black">{value}</span>;
+                return <span className="text-foreground text-sm">{value}</span>;
               }}
             />
             <Tooltip
diff --git a/apps/marketing/src/app/(marketing)/open/funding-raised.tsx b/apps/marketing/src/app/(marketing)/open/funding-raised.tsx
index 51857bb06..92ba9e097 100644
--- a/apps/marketing/src/app/(marketing)/open/funding-raised.tsx
+++ b/apps/marketing/src/app/(marketing)/open/funding-raised.tsx
@@ -35,6 +35,9 @@ export const FundingRaised = ({ className, data, ...props }: FundingRaisedProps)
               }
             />
             <Tooltip
+              labelStyle={{
+                color: 'hsl(var(--primary-foreground))',
+              }}
               itemStyle={{
                 color: 'hsl(var(--primary-foreground))',
               }}
diff --git a/apps/web/src/app/(dashboard)/admin/documents/data-table.tsx b/apps/web/src/app/(dashboard)/admin/documents/data-table.tsx
index da2fbb77f..83ad81ca1 100644
--- a/apps/web/src/app/(dashboard)/admin/documents/data-table.tsx
+++ b/apps/web/src/app/(dashboard)/admin/documents/data-table.tsx
@@ -13,6 +13,7 @@ import { Document, User } from '@documenso/prisma/client';
 import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
 import { DataTable } from '@documenso/ui/primitives/data-table';
 import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 
 import { DocumentStatus } from '~/components/formatter/document-status';
 import { LocaleDate } from '~/components/formatter/locale-date';
@@ -63,16 +64,34 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
             header: 'Owner',
             accessorKey: 'owner',
             cell: ({ row }) => {
+              const avatarFallbackText = row.original.User.name
+                ? recipientInitials(row.original.User.name)
+                : row.original.User.email.slice(0, 1).toUpperCase();
+
               return (
-                <Link href={`/admin/users/${row.original.User.id}`}>
-                  <Avatar className="dark:border-border h-12 w-12 border-2 border-solid border-white">
-                    <AvatarFallback className="text-gray-400">
-                      <span className="text-sm">
-                        {recipientInitials(row.original.User.name ?? '')}
-                      </span>
-                    </AvatarFallback>
-                  </Avatar>
-                </Link>
+                <Tooltip delayDuration={200}>
+                  <TooltipTrigger>
+                    <Link href={`/admin/users/${row.original.User.id}`}>
+                      <Avatar className="dark:border-border h-12 w-12 border-2 border-solid border-white">
+                        <AvatarFallback className="text-xs text-gray-400">
+                          {avatarFallbackText}
+                        </AvatarFallback>
+                      </Avatar>
+                    </Link>
+                  </TooltipTrigger>
+                  <TooltipContent className="flex max-w-xs items-center gap-2">
+                    <Avatar className="dark:border-border h-12 w-12 border-2 border-solid border-white">
+                      <AvatarFallback className="text-xs text-gray-400">
+                        {avatarFallbackText}
+                      </AvatarFallback>
+                    </Avatar>
+
+                    <div className="text-muted-foreground flex flex-col text-sm">
+                      <span>{row.original.User.name}</span>
+                      <span>{row.original.User.email}</span>
+                    </div>
+                  </TooltipContent>
+                </Tooltip>
               );
             },
           },
diff --git a/apps/web/src/app/(dashboard)/admin/layout.tsx b/apps/web/src/app/(dashboard)/admin/layout.tsx
index a3076a74c..60066fc10 100644
--- a/apps/web/src/app/(dashboard)/admin/layout.tsx
+++ b/apps/web/src/app/(dashboard)/admin/layout.tsx
@@ -20,7 +20,7 @@ export default async function AdminSectionLayout({ children }: AdminSectionLayou
 
   return (
     <div className="mx-auto mt-16 w-full max-w-screen-xl px-4 md:px-8">
-      <div className="grid grid-cols-12 gap-x-8 md:mt-8">
+      <div className="grid grid-cols-12 md:mt-8 md:gap-8">
         <AdminNav className="col-span-12 md:col-span-3 md:flex" />
 
         <div className="col-span-12 mt-12 md:col-span-9 md:mt-0">{children}</div>
diff --git a/apps/web/src/app/(dashboard)/admin/nav.tsx b/apps/web/src/app/(dashboard)/admin/nav.tsx
index 8050f867a..089861069 100644
--- a/apps/web/src/app/(dashboard)/admin/nav.tsx
+++ b/apps/web/src/app/(dashboard)/admin/nav.tsx
@@ -16,7 +16,13 @@ export const AdminNav = ({ className, ...props }: AdminNavProps) => {
   const pathname = usePathname();
 
   return (
-    <div className={cn('flex gap-x-2.5 gap-y-2 md:flex-col', className)} {...props}>
+    <div
+      className={cn(
+        'flex gap-x-2.5 gap-y-2 overflow-hidden overflow-x-auto md:flex-col',
+        className,
+      )}
+      {...props}
+    >
       <Button
         variant="ghost"
         className={cn(
diff --git a/apps/web/src/app/(dashboard)/admin/stats/page.tsx b/apps/web/src/app/(dashboard)/admin/stats/page.tsx
index b93af5a03..43fe4be01 100644
--- a/apps/web/src/app/(dashboard)/admin/stats/page.tsx
+++ b/apps/web/src/app/(dashboard)/admin/stats/page.tsx
@@ -32,7 +32,7 @@ export default async function AdminStatsPage() {
     <div>
       <h2 className="text-4xl font-semibold">Instance Stats</h2>
 
-      <div className="mt-8 grid flex-1 grid-cols-1 gap-4 md:grid-cols-4">
+      <div className="mt-8 grid flex-1 grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
         <CardMetric icon={UserIcon} title="Total Users" value={usersCount} />
         <CardMetric icon={File} title="Total Documents" value={docStats.ALL} />
         <CardMetric
@@ -43,7 +43,7 @@ export default async function AdminStatsPage() {
         <CardMetric icon={UserPlus2} title="App Version" value={`v${process.env.APP_VERSION}`} />
       </div>
 
-      <div className="mt-16 grid grid-cols-1 gap-8 md:grid-cols-2">
+      <div className="mt-16 grid grid-cols-1 gap-8 md:grid-cols-1 lg:grid-cols-2">
         <div>
           <h3 className="text-3xl font-semibold">Document metrics</h3>
 
diff --git a/apps/web/src/components/(dashboard)/metric-card/metric-card.tsx b/apps/web/src/components/(dashboard)/metric-card/metric-card.tsx
index a2248ccdc..bcfa45eaa 100644
--- a/apps/web/src/components/(dashboard)/metric-card/metric-card.tsx
+++ b/apps/web/src/components/(dashboard)/metric-card/metric-card.tsx
@@ -13,18 +13,24 @@ export const CardMetric = ({ icon: Icon, title, value, className }: CardMetricPr
   return (
     <div
       className={cn(
-        'border-border bg-background hover:shadow-border/80 overflow-hidden rounded-lg border shadow shadow-transparent duration-200',
+        'border-border bg-background hover:shadow-border/80 h-32 max-h-32 max-w-full overflow-hidden rounded-lg border shadow shadow-transparent duration-200',
         className,
       )}
     >
-      <div className="px-4 pb-6 pt-4 sm:px-4 sm:pb-8 sm:pt-4">
-        <div className="flex items-center">
-          {Icon && <Icon className="text-muted-foreground mr-2 h-4 w-4" />}
+      <div className="flex h-full max-h-full flex-col px-4 pb-6 pt-4 sm:px-4 sm:pb-8 sm:pt-4">
+        <div className="flex items-start">
+          {Icon && (
+            <div className="mr-2 h-4 w-4">
+              <Icon className="text-muted-foreground h-4 w-4" />
+            </div>
+          )}
 
-          <h3 className="text-primary-forground flex items-end text-sm font-medium">{title}</h3>
+          <h3 className="text-primary-forground flex items-end text-sm font-medium leading-tight">
+            {title}
+          </h3>
         </div>
 
-        <p className="text-foreground mt-6 text-4xl font-semibold leading-8 md:mt-8">
+        <p className="text-foreground mt-auto text-4xl font-semibold leading-8">
           {typeof value === 'number' ? value.toLocaleString('en-US') : value}
         </p>
       </div>
diff --git a/packages/ui/primitives/dropdown-menu.tsx b/packages/ui/primitives/dropdown-menu.tsx
index 7d230087c..8756613a9 100644
--- a/packages/ui/primitives/dropdown-menu.tsx
+++ b/packages/ui/primitives/dropdown-menu.tsx
@@ -85,7 +85,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       inset && 'pl-8',
       className,
     )}