[Dashboard] Feature: Overview Page Empty State

apps/dashboard/src/@/components/blocks/app-footer.tsx

@@ -19,7 +19,7 @@ export function AppFooter(props: AppFooterProps) {
   return (
     <footer
       className={cn(
-        "w-full border-border border-t bg-muted/50 py-6 md:py-8",
+        "w-full border-border border-t bg-white py-6 md:py-8 dark:bg-muted/50",
         props.className,
       )}
     >

apps/dashboard/src/@/components/ui/DatePickerWithRange.tsx

@@ -50,7 +50,7 @@ export function DatePickerWithRange(props: {
           id="date"
           variant="outline"
           className={cn(
-            "justify-start gap-2 text-left font-normal",
+            "justify-start gap-2 bg-card text-left font-normal",
             props.className,
           )}
         >

apps/dashboard/src/@/styles/globals.css

@@ -6,7 +6,7 @@
   :root,
   [data-theme="light"] {
     /* bg - neutral  */
-    --background: 0 0% 100%;
+    --background: 0 0% 98%;
     --popover: 0 0% 100%;
     --card: 0 0% 100%;
     --secondary: 0 0% 92%;
@@ -46,7 +46,7 @@
   [data-theme="dark"] {
     /* bg - neutral  */
     --background: 0 0% 0%;
-    --card: 0 0% 0%;
+    --card: 0 0% 5%;
     --popover: 0 0% 0%;
     --secondary: 0 0% 10%;
     --muted: 0 0% 9%;

apps/dashboard/src/app/components/Header/SecondaryNav/account-button.client.tsx

@@ -26,11 +26,18 @@ export function AccountButton(props: {
       <DropdownMenuTrigger asChild>
         <Button
           size="icon"
-          className="!p-0 !h-auto size-10 rounded-full hover:ring-2 hover:ring-offset-2"
+          asChild
+          className="size-10 rounded-full hover:ring-2 hover:ring-offset-2"
           variant="ghost"
         >
-          {/* TODO - set account image */}
-          <GradientAvatar id={props.account?.id} src={""} className="size-9" />
+          <button type="button">
+            {/* TODO - set account image */}
+            <GradientAvatar
+              id={props.account?.id}
+              src={""}
+              className="size-9"
+            />
+          </button>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-[300px] rounded-lg p-0" align="end">

apps/dashboard/src/app/team/[team_slug]/(team)/TeamOverviewPage.tsx

@@ -127,7 +127,7 @@ function ProjectCard(props: {
         <Link
           className="group static before:absolute before:top-0 before:right-0 before:bottom-0 before:left-0 before:z-0"
           // remove /connect when we have overview page
-          href={`/team/${team_slug}/${project.slug}/connect/analytics`}
+          href={`/team/${team_slug}/${project.slug}`}
         >
           <h2 className="font-medium text-base">{project.name}</h2>
         </Link>

apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/EmptyState.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { BadgeContainer, mobileViewport } from "stories/utils";
+import { EmptyState } from "./EmptyState";
+
+const meta = {
+  title: "project/Overview/EmptyState",
+  component: Component,
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof Component>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+};
+
+export const Mobile: Story = {
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
+function Component() {
+  return (
+    <div className="container max-w-[1150px] py-8">
+      <BadgeContainer label="Base">
+        <EmptyState />
+      </BadgeContainer>
+    </div>
+  );
+}