From 4831926a099c91f55109a0657bd17c9063b91467 Mon Sep 17 00:00:00 2001
From: jakubkrehel <kubotcg@gmail.com>
Date: Wed, 11 Dec 2024 19:17:22 +0000
Subject: [PATCH] fix: project card design and nebula text (#5686)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes: DASH-580

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on improving the UI layout and styling of the `nebula-waitlist-page-ui.client.tsx` and `TeamProjectsPage.tsx` components within the dashboard application. It enhances spacing and text presentation for a better user experience.

### Detailed summary
- Increased gap in `nebula-waitlist-page-ui.client.tsx` from `gap-3` to `gap-6`.
- Adjusted paragraph width in `nebula-waitlist-page-ui.client.tsx` for better text alignment.
- Reduced height of a div from `h-10` to `h-6` in `nebula-waitlist-page-ui.client.tsx`.
- Increased padding in project card from `p-4` to `p-5` in `TeamProjectsPage.tsx`.
- Changed the class of `CopyButton` from `hover:bg-background` to `hover:bg-secondary` in `TeamProjectsPage.tsx`.
- Adjusted text presentation and layout for project details in `TeamProjectsPage.tsx`.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
---
 .../(team)/~/projects/TeamProjectsPage.tsx    | 31 +++++++++----------
 .../nebula-waitlist-page-ui.client.tsx        |  6 ++--
 2 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/projects/TeamProjectsPage.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/projects/TeamProjectsPage.tsx
index c5423ccd137..79a538cd8d1 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/projects/TeamProjectsPage.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/projects/TeamProjectsPage.tsx
@@ -19,7 +19,6 @@ import {
 } from "@/components/ui/select";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { LazyCreateAPIKeyDialog } from "components/settings/ApiKeys/Create/LazyCreateAPIKeyDialog";
-import { format } from "date-fns";
 import { ChevronDownIcon, SearchIcon } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
@@ -120,31 +119,29 @@ function ProjectCard(props: {
   return (
     <div
       key={project.id}
-      className="relative flex items-center gap-4 rounded-lg border border-border bg-muted/50 p-4 transition-colors hover:bg-muted/70"
+      className="relative flex items-center gap-4 rounded-lg border border-border bg-muted/50 p-5 transition-colors hover:bg-muted/70"
     >
       {/* TODO - set image */}
       <ProjectAvatar className="size-10 rounded-full" src="" />
 
-      <div>
-        <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}`}
-        >
-          <h2 className="font-medium text-base">{project.name}</h2>
-        </Link>
-
-        <p className="mb-1 flex items-center gap-0.5 text-muted-foreground text-xs">
-          {truncate(project.publishableKey, 32)}
+      <div className="flex-grow flex-col gap-1">
+        <div className="flex items-center justify-between gap-2">
+          <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}`}
+          >
+            <h2 className="font-medium text-base">{project.name}</h2>
+          </Link>
           <CopyButton
             text={project.publishableKey}
             iconClassName="z-10 size-3"
-            className="!h-auto !w-auto -translate-x-1 p-2 hover:bg-background"
+            className="!h-auto !w-auto -translate-x-1 p-2 hover:bg-secondary"
           />
-        </p>
+        </div>
 
-        <p className="my-1 text-muted-foreground/70 text-xs">
-          Created on {format(new Date(project.createdAt), "MMM dd, yyyy")}
+        <p className="flex items-center text-muted-foreground text-sm">
+          {truncate(project.publishableKey, 32)}
         </p>
       </div>
     </div>
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/nebula-waitlist-page-ui.client.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/nebula-waitlist-page-ui.client.tsx
index f84dc36f382..44e62513b69 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/nebula-waitlist-page-ui.client.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/nebula-waitlist-page-ui.client.tsx
@@ -30,9 +30,9 @@ export function NebulaWaitListPageUI(props: {
           title="You're on the waitlist"
           description="You should receive access to Nebula soon!"
           footer={
-            <div className="flex flex-col items-center gap-3">
+            <div className="flex flex-col items-center gap-6">
               <ShareButton teamId={props.teamId} />
-              <p className="text-balance text-center text-muted-foreground">
+              <p className="w-full max-w-[340px] text-center text-muted-foreground text-sm">
                 Share this invite link and get moved up the list when your
                 friends sign up!
               </p>
@@ -97,7 +97,7 @@ function CenteredCard(props: {
               {props.description}
             </p>
 
-            <div className="h-10" />
+            <div className="h-6" />
 
             {props.footer}
           </div>